怎么用 div + css 写出这样的表格
怎么用div+css写出这样的表格请给详细代码，万分感谢！要是建议从基础学div那就免了，初学者，一步一步来。栏目标题后面的背景颜色怎么写，请连CSS代码一起发上来，万分...
怎么用 div + css 写出这样的表格
请给详细代码，万分感谢！
要是建议从基础学div 那就免了，初学者，一步一步来。
栏目标题后面的背景颜色怎么写，请连CSS代码一起发上来，万分感谢 展开
请给详细代码，万分感谢！
要是建议从基础学div 那就免了，初学者，一步一步来。
栏目标题后面的背景颜色怎么写，请连CSS代码一起发上来，万分感谢 展开
5个回答
展开全部
<div class="tab">
<ul>
<li>内容1</li>
<li>内容2</li>
<li>内容3</li>
<li>内容4</li>
</ul>
</div>
下面样式：
<style>
<!--
.tab{width:200px;height:auto;}
.tab ul li{ list-style-type:none; line-height:25px; height:25px; border-bottom:#999999 1px dashed}
-->
</style>
还可以用下面的布局效果都一样
<dl>
<dt>标题</dt>
<dd>内容<dd>
<dd>内容<dd>
<dd>内容<dd>
</dl>
纯手打出来的，郁闷好几个单词都忘记了，还好查了一下没有错！希望对你有帮助！
<ul>
<li>内容1</li>
<li>内容2</li>
<li>内容3</li>
<li>内容4</li>
</ul>
</div>
下面样式：
<style>
<!--
.tab{width:200px;height:auto;}
.tab ul li{ list-style-type:none; line-height:25px; height:25px; border-bottom:#999999 1px dashed}
-->
</style>
还可以用下面的布局效果都一样
<dl>
<dt>标题</dt>
<dd>内容<dd>
<dd>内容<dd>
<dd>内容<dd>
</dl>
纯手打出来的，郁闷好几个单词都忘记了，还好查了一下没有错！希望对你有帮助！
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
整体可以用一个div来做，上面标题部分可以用<h5></h5>来控制，下面内容部分直接用ul、li来就可以了
<div class="pcontent">
<h5>推荐内容</h5>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
你表格里面的虚线可以在li里面设置下边框border-bottom：1px dashed #ccc； 其中“dashed”表示虚线，#ccc代表虚线的颜色。字段前面的小标志可以在li样式里添加这样的小图标。
<div class="pcontent">
<h5>推荐内容</h5>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
你表格里面的虚线可以在li里面设置下边框border-bottom：1px dashed #ccc； 其中“dashed”表示虚线，#ccc代表虚线的颜色。字段前面的小标志可以在li样式里添加这样的小图标。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<html>
<head>
<style type="text/css">
body {font-size:12px;font-family:"宋体"}
.box
{
border:1px solid #ddd;
width:200px;
height:auto;
}
.title
{
border-bottom:1px solid #ddd;
height:30px;
overflow:hidden;
background:#eee;
line-height:30px;
font-weight:bold;
padding-left:5px
}
.list {list-style:none;margin:10px 5px;padding:0;}
.list li {line-height:25px;background:url(每一行的背景小图标路径) left 2px no-repeat;padding-left:12px;border-bottom:1px dashed #ddd}
.list li a {color:#666;text-decoration:none;}
.list li a:hover {color:#000}
</style>
</head>
<body>
<div class="box">
<div class="title">title</div>
<ul class="list">
<li><a href="">天润发展设备之</a></li>
<li><a href="">天润发展设备之</a></li>
<li><a href="">天润发展设备之</a></li>
<li><a href="">天润发展设备之</a></li>
<li><a href="">天润发展设备之</a></li>
</ul>
</div>
</body>
</html>
<head>
<style type="text/css">
body {font-size:12px;font-family:"宋体"}
.box
{
border:1px solid #ddd;
width:200px;
height:auto;
}
.title
{
border-bottom:1px solid #ddd;
height:30px;
overflow:hidden;
background:#eee;
line-height:30px;
font-weight:bold;
padding-left:5px
}
.list {list-style:none;margin:10px 5px;padding:0;}
.list li {line-height:25px;background:url(每一行的背景小图标路径) left 2px no-repeat;padding-left:12px;border-bottom:1px dashed #ddd}
.list li a {color:#666;text-decoration:none;}
.list li a:hover {color:#000}
</style>
</head>
<body>
<div class="box">
<div class="title">title</div>
<ul class="list">
<li><a href="">天润发展设备之</a></li>
<li><a href="">天润发展设备之</a></li>
<li><a href="">天润发展设备之</a></li>
<li><a href="">天润发展设备之</a></li>
<li><a href="">天润发展设备之</a></li>
</ul>
</div>
</body>
</html>
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<style>
li{line-style:none;border-bottom:dashend 1px #000;background:url(前面那个三角的图片地址) no-repeat 0px}
</sytle>
<ul>
<li style="font-weight:bolid;font-size:14px;">推荐内容
</li>
<li>天润
</li>
<li>
</li>
<li>
</li>
</ul>
或者
<dl>
<dt>推荐内容</dt>
<dd>
<a href="#">文章标题</a>
<a href="#">文章标题</a>
<a href="#">文章标题</a>
......
</dd>
</dl>
一般都是用<dl>
li{line-style:none;border-bottom:dashend 1px #000;background:url(前面那个三角的图片地址) no-repeat 0px}
</sytle>
<ul>
<li style="font-weight:bolid;font-size:14px;">推荐内容
</li>
<li>天润
</li>
<li>
</li>
<li>
</li>
</ul>
或者
<dl>
<dt>推荐内容</dt>
<dd>
<a href="#">文章标题</a>
<a href="#">文章标题</a>
<a href="#">文章标题</a>
......
</dd>
</dl>
一般都是用<dl>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
这个是很基础的布局，建议用 dl dt dd 标签，如下：
<dl>
<dt>推荐内容</dt>
<dd>
<a href="#">文章标题</a>
<a href="#">文章标题</a>
<a href="#">文章标题</a>
......
</dd>
</dl>
css 略
<dl>
<dt>推荐内容</dt>
<dd>
<a href="#">文章标题</a>
<a href="#">文章标题</a>
<a href="#">文章标题</a>
......
</dd>
</dl>
css 略
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（3）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
