CSS 08-01 爱宠知识 案例思路笔记

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;
        }