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

 

 

 

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 打赏
    打赏
  • 扫一扫,分享海报

参与评论 您还未登录,请先 登录 后发表或查看评论
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页

打赏作者

啊喂啊阿薇

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值