精确还原盒模型"/>
CSS精确还原盒模型
1.在Fireworks中打开待还原设计图。
2.分析待还原设计图的整体结构:大盒子只有一个border-top，“时评”部分是一个header，下面的四条新闻是一个无序列表，每个li里面分别包含一个超级链接。
相对应的代码body部分代码为：
<body><div class="news"><h3>时评</h3><ul><li><a href="#">新京报：钱理群卖房养老与你我有多大关系？</a></li><li><a href="#">新京报：“低收入男人共妻论”有多么荒谬</a></li><li><a href="#">京华时报：杂技演员当市委书记有何不可</a></li><li><a href="#">南都：谭嗣同真圣母，康有为圣母病？</a></li></ul></div>
</body>3.在Fireworks里的具体操作。
（1）用标尺和切片功能量取大盒子的宽度和上面边界的宽度（因为盒子可以被内容自动撑出高度，所以不用设置），测量得出大盒子的宽度为260px，上边界的宽度为1px。用滴管吸取边界的颜色，色号为#CCCCCC。
所以在CSS中对盒子样式的设置为：
.news{margin:100px;width:260px;border-top:1px solid #ccc;
}其中，margin的设置是为了在网页中使盒子处于合适位置，具体的设置可根据实际情况更改。
（2）对header进行设置。经过比对，”时评“的字号为16px，字体为”微软雅黑“。这里介绍一下“行高”的概念，并不是文字最上端到border的距离就等于margin，文本有行高，文字在行高中垂直居中。所以为了省去对header的margin设置，量取border到文字最上端的距离为17px，直接截一个17px+16px+17px=50px的切片，代表行高line-height为50px。"时"左边还有一个1px的padding。
相应的代码：
h3{color:red;font-size:16px;line-height:50px;padding-left:1px;
}(3)对无序列表和超级链接进行设置。经过比对，文本字体为“微软雅黑”，字号12px,行高24px。列表中文本最左端到盒子左边界的剧离为14px，也就是说li有个14px的padding-left。超级链接中的文本颜色为黑色，没有下划线。
此处有个问题要特别注意:header部分和ul部分还留有一个1px的间距，所以要给ul设置margin。要细心，1px都不能差。
相应的代码(此处还没有把圆点改为方框，因为还没有学）：
ul{margin-top:1px;
}
li{font-size:12px;line-height:24px;font-family:"微软雅黑";padding-left:14px;
}
a{color:black;text-decoration:none;
}综上，全部的代码为：
<!DOCTYPE html>
<html>
<head><title>精确还原盒子4</title><meta charset="utf-8"><style type="text/css">*{margin: 0;padding: 0;}body{font-family: "微软雅黑";}.news{margin: 100px;width: 260px;border-top: 1px solid grey;}h3{color:red;font-size: 16px;line-height: 50px;padding-left: 1px;}ul{list-style: none;padding-top:1px;}li{font-size: 12px;line-height: 24px;padding-left: 14px;}a{color:black;text-decoration: none;}</style>
</head>
<body><div class="news"><h3>时报</h3><ul><li><a href="">新京报：钱理群卖房养老与你我有多大关系？</a></li><li><a href="">新京报：“低收入男人共妻论”有多么荒谬</a></li><li><a href="">京华时报：杂技演员当市委书记有何不可</a></li><li><a href="">南都：谭嗣同真圣母，康有为圣母病？</a></li></ul></div>
</body>
</html>在浏览器中打开html文件,效果如图：
更多推荐
CSS精确还原盒模型
发布评论