要求：将一张图转化为html和css元素。
效果图：
做法：结合fireworks来测量宽高的大小。争取完整还原。
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>垂直列表</title>
<style type="text/css">
.news{
/*先定义块的宽高*/
width:212px;
height:147px;
/*给总体加边框和给上边加黄色边框*/
border:1px solid #E3E8F3;
border-top:3px solid #FF7B00;
/*外边距,根据具体条件来使用*/
/*整体块在整个页面中的位置*/
margin:0 auto;
}
.news-title{
/*给块中块定高度*/
height:31px;
/*加下划线*/
border-bottom:1px solid #E3E8F3;
/*行业动态内边距缩进*/
padding-left:12px;
/*加行高,显得更自然,和高度一致*/
line-height:31px;
/*加粗*/
font-weight: bold;
}
ul,li{
/*将li列表的风格(点)去掉*/
list-style: none;
/*先清一下内外边距,否则不好布置,避免干扰*/
margin:0;
padding: 0;
}
ul{
/*将整个ul块当做一个块状内容*/
margin-top:12px;
}
li{
/*内容的内边距离*/
padding-left: 20px;
/*每个li块的高度，类似行高*/
height: 20px;
/*2个具体值的时候,一个代表水平方向,一个代表垂直方向*/
background:url("images/li_bg.jpg") no-repeat 8px 8px;
font-size:14px;
}
ul li a:link{
text-decoration: none;
color: #B4B4B4;
}
</style>
</head>
<body>
<div class="news">
<div class="news-title">行业动态</div>
<ul>
<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>
660
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
