1.首先确定结构
*清除内外边距
1.整个为一个大盒子,测量高宽.W H
2.然后测量边框,border:1px solid red;
3.然后给bgi
4.然后给一个margin:20px auto 0;
5.最后分析给一个padding:10px
这里有宽所以会撑大!要减去
.box {
width: 240px;
height: 307px;
margin: 20px auto 0;
border: solid 1px #a4cf61;
background-image: url(images/bg.gif);
padding: 10px;
}
2.header
1.一个h2标题
文字颜色color
字体大小
字体样式,黑体
然后左边的颜色竖线可以给左边框一个4px solid red;
最后这个左边框和文字应该有个padding-left值5px
这里没有宽度 ,所以不会撑大!
.news h2 {
border-left: 3px solid #c9e143;
padding-left: 5px;
color: white;
font-size: 20px;
font-weight: 600;
}
3.body
构建结构ul li a
ul
1.margin-top:5px;上面给一个5距离
2.左右给padding:0 5px;
3.测量h 279px
4.给个bgc
li
1.line-height:30px;垂直居中
2.给个border-bottom:1px dashe ccc;
3.插入小图标,背景照片 no-repeat left center
a
color
font-size
text-decoration
margin-left:16px 这里给a链接本身一个左外边距,让图片看得见
hover:
text-decoration:underline;
color:red
.news ul {
margin-top: 5px;
padding: 0 10px;
height: 279px;
background-color: #fff;
}
.news li {
list-style: none;
line-height: 30px;
border-bottom: 1px dashed #ccc;
background: url(images/tb.gif) no-repeat left center;
/* padding-left: 15px; */
}
.news li a {
color: #06c;
font-size: 12px;
text-decoration: none;
margin-left: 16px;
}
.news li a:hover {
text-decoration: underline;
color: red;
}