CSS精确还原盒模型

最新推荐文章于 2022-09-15 23:15:48 发布

不再提示

最新推荐文章于 2022-09-15 23:15:48 发布

阅读量421

点赞数

文章标签： CSS 盒模型还原 Fireworks

本文链接：https://blog.csdn.net/qq_35555295/article/details/90381677

版权

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文件,效果如图：