html+css网页开发实战——1、头部背景和文字的制作

最新推荐文章于 2024-03-23 20:03:07 发布

realize1020

最新推荐文章于 2024-03-23 20:03:07 发布

阅读量4.6k

点赞数 7

分类专栏：前端文章标签： hml css

本文链接：https://blog.csdn.net/qq_38268534/article/details/86650893

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

网页成品图：
在这里插入图片描述
一. 自己动手实践：
首先，把网页分为三大部分，定义了三个div，class分别为header，center，footer。然后在定义它们里面的div。代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>麦子学院实战</title>
		<link rel="stylesheet" href="css/style2.css" />
	</head>
	<body>
		<div class="header">
			<div class="title">
				<span class="left z">
					<span class="shouye"><a href="">设为首页</a></span>
					<span class="shouchang"><a href="">收藏本站</a></span>
				</span>
				<span class="right y">
					<span class="riqi"><a href="">2015年5月1日</a></span>
					<span class="tianqi"><a href="">多云16度/30度</a></span>
				</span>
			</div>
			<div class="center"></div>
			<div class="nav"></div>
		</div>
		<div class="center">
			<div class="jianjie"></div>
			<div class="xingwen"></div>
			<div class="chanpintuijian"></div>
		</div>
		<div class="footer">
		</div>
	</body>
</html>

首先，写上面的头部背景和文字制作
1、首先把通用属性在style2.css里面定义好，比如padding，margin等。然后提前把左浮动，有浮动，位置居中，消除浮动等样式定义好，代码和截图如下：

*{margin:0;padding:0}
body{
	font:14/28px "微软雅黑";
}
.z{float:left;}/*左对齐*/
.y{float:right;}/*右对齐*/
.wp{width:960px,margin:auto 0;}/*居中显示*/
.cl{clear:both;}/*清除浮动*/
/*header*/
/*title*/
.title{
	background:#303030;
	width:100%;
	height:28px;
	line-height:28px;/*height和line-height一致就可以使div或者span里的字体居中*/
}
.title span.left{
	height: 100%;
	width:300px;
	margin-left:100px;
}
.title span.right{
	height: 100%;
	width:300px;
	margin-right:100px;
}
.title span.shouye{
	width:150px;
	height:100%;
	margin-left:40px;
}
.title span.shouchang{
	width:150px;
	height:100%;
	margin-left:40px;
}
.title span.tianqi{
	width:150px;
	height:100%;
	margin-right:40px;
}
.title span.riqi{
	width:150px;
	height:100%;
	margin-right:40px;
}
.title span a{
	text-decoration: none;
	color:#D8D8D8;
}

css头部代码
难点在于以下几点：

文字在div或者span的中间。
解决办法：定义了高度height之后，同样要定义line-height。它们两个的值要一致。
几个文字的布局问题。
解决方法：首先定义两个大的span，使他们分别左浮动和右浮动，并给它们之间margin-left的值调到合适。

html代码：

<div class="title">
				<span class="left z">
					<span class="shouye"><a href="">设为首页</a></span>
					<span class="shouchang"><a href="">收藏本站</a></span>
				</span>
				<span class="right y">
					<span class="riqi"><a href="">2015年5月1日</a></span>
					<span class="tianqi"><a href="">多云16度/30度</a></span>
				</span>
</div>

css代码：

.title span.left{
	height: 100%;
	width:300px;
	margin-left:100px;
}
.title span.right{
	height: 100%;
	width:300px;
	margin-right:100px;
}

然后里面小的span，同样添加上不同的类名，在css里面定义宽度，并且设置了margin-left。代码如下：

.title span.shouye{
	width:150px;
	height:100%;
	margin-left:40px;
}
.title span.shouchang{
	width:150px;
	height:100%;
	margin-left:40px;
}
.title span.tianqi{
	width:150px;
	height:100%;
	margin-right:40px;
}
.title span.riqi{
	width:150px;
	height:100%;
	margin-right:40px;
}

最后，在去掉a标签的默认样式即可，代码如下：

title span a{
	text-decoration: none;
	color:#D8D8D8;
}

成品图如下所示：

二.老师使用的方法，代码如下：

htm代码

<div class="header">
			<div class="top">
				<div class="wp">
					<div class="z">
						<span>
							<a href="">设为首页</a>
						</span>
						<span>
							<a href="">收藏本站</a>
						</span>
					</div>
					<div class="y">
						<span>
							<a href="">2015年5月1日</a>
						</span>
						<span class="mr_0">
							<a href="">多云16度/30度</a>
						</span>
					</div>
				</div>
			</div>

css代码

.top{
	width:100%;
	height:24px;
	line-height:24px;
	background:#303030;
	color:##D8D8D8;
}
.top span{
	margin-right:15px;
}
.top span.mr_0{
	margin:0px;
}
.top a{
	color:#D8D8D8;
	text-decoration: none;
}
.top a:hover{
	color:#F60;
}

我们之间的区别总结：

它命名为top，我命名为title。
它使用了两个大的div作为父容器，我使用了两个大的span。
比较：我觉得它做得好，div作为容器的话，因为它是行间元素，所以不用指定它的大小，一行里有多大它填多大。
它在每一个span里使用的是margin-right，我使用的时margin-left.
比较：我觉得它的更方便
它在最右边有关天气的span里加了一个类mr_0。去除了最右边的边距。

class=“mr_0”:

.top span.mr_0{
	margin:0px;
}

总结：老师写的布局更加简洁，作为一个新手要多学习老师的这种写法

realize1020

关注

7
点赞
踩
46

收藏

觉得还不错? 一键收藏
0
评论
html+css网页开发实战——1、头部背景和文字的制作

网页成品图：一. 自己动手实践：首先，把网页分为三大部分，定义了三个div，class分别为header，center，footer。然后在定义它们里面的div。代码如下：&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;麦子学院实战&lt;/titl..
复制链接

扫一扫