html+css网页开发实战——2、头部logo,搜索框和导航条的制作

网页效果图：完整代码如下：头部导航条hml代码&lt;div class="nav"&gt;&lt;!--&lt;div class="nav-list wp"&gt;&lt;span z&gt;&l

文章共6,573字 · 阅读需要大约22分钟

一键AI生成摘要，助你高效阅读

问答

qq_38268534

19673人浏览 · 2019-01-27 02:28:10

qq_38268534 · 2019-01-27 02:28:10 发布

网页效果图：

完整代码如下：
头部导航条hml代码

<div class="nav">
				<!--<div class="nav-list wp">
					<span z><a href="">网页首页</a></span>
					<span z><a href="">公司简介</a></span>
					<span z><a href="">业务描述</a></span>
					<span z><a href="">服务范围</a></span>
					<span z><a href="">产品中心</a></span>
					<span z><a href="">人才管理</a></span>
					<span z><a href="">在线留言</a></span>
					<span z><a href="">联系我们</a></span>
				</div>
			</div>-->
			<div class="nav-list wp">
				<ul>
					<li><a href="">网页首页</a></li>
					<li><a href="">公司简介</a></li>
					<li><a href="">业务描述</a></li>
					<li><a href="">服务范围</a></li>
					<li><a href="">产品中心</a></li>
					<li><a href="">人才管理</a></li>
					<li><a href="">在线留言</a></li>
					<li><a href="">联系我们</a></li>
				</ul>
			</div>

导航条css代码

/*导航条*/
.nav{
	width:100%;
	height:39px;
	background:url(../img/nav_bg.jpg) repeat-x;
}
.nav-list{
	width:960px;
	height:39px;
}
/*.nav span{
	width:120px;
	height:39px;
	line-height:39px;
	margin-left:43px;浏览器窗口调试工具调试得出
}
.nav span a{
	font-size:18px;
	text-decoration: none;
	color:#fff;
}
.nav span:hover{易错点
	background: url(../img/nav_hover.jpg);
}
*/
.nav-list ul{
	height:39px;
}
.nav-list li{
	line-height:39px;
	list-style-type: none;
	float:left;
	width:120px;
}
.nav-list li a{
	font-size:18px;
	text-decoration: none;
	color:#fff;
	margin-left:24px;
}
.nav-list li:hover{
	background:url(../img/nav_hover.jpg);
}

一、自己最开始的思路:(代码注释部分）

一. logo、搜索框、电话：
我是想把这三个部分分成三个div来写，但是一开始logo的位置和高度就不太好定，后面另外两个div还容易和它不在一个水平线上，所以还是用一个大的div（class=“logos”）把这三部分包裹起来。截图，代码如下所示：
logos包裹这三个子div
logos包裹着三个子div

<div class="center">
				<div class="wp">
					<div class="logos">
						<div class="logo z">
							<a href="#"><img src="img/logo.jpg" alt="" /></a>
						</div>
						<div class="sousuo z">
							<form action="#" method="post">
								<table cellpadding="0" cellspacing="0" border="0">
									<tr>
										<td class="s_z z"></td>
										<td class="s_c z">
											<input type="text" name="input" id="input">
										</td>
										<td class="s_y z">
											<input type="button" name="button">
										</td>
									</tr>
								</table>
							</form>
						</div>
						<div class="kefu z">
							<span>
								客服热线:400-000-000
							</span>
						</div>
					</div>
				</div>
			</div>

首先，这一部分都要居中设置，所以用一个大div包裹起来，并且class=“wp”居中显示，wp之前定义过它的宽度为960px，得给logos这一大块div设置高度和宽度，高度为80px，宽度默认继承了上面wp部分，然后给它设置一个距离上面外边距为10px，让它和上面不要贴在一起。

其次，开始写三个子部分的div。

logo部分：使用一个div（class=“logo z"),并且位置左浮动显示，里面包好一个a标签，a标签里包含一个img标签就可以了。这部分不需要写css样式了。代码如下：

logo代码

<div class="logos">
	<div class="logo z">
		<a href="#"><img src="img/logo.jpg" alt="" /></a>
	</div>

搜索框的代码：定义搜索框的div（class=”sousuo z“）左浮动。因为是带有索搜按钮，所以需要一个form表单，又因为这次的搜索框使用的时背景图片制作的，所以需要一个table标签来约束它们，这个搜索框的背景图片分为三个部分，左，中，右。分别用三个td标签制作，左浮动。截图，代码如下所示：
左部分<td class=“s_z z”

中间部分<td class=“s_c z”

右部分<td class=“s_y z”

搜索框html代码：

<div class="sousuo y">
		<form action="index.html" method="post">
				<table cellpadding="0" cellspacing="0" border="0">
						<tr>
							<td class="s_z z"></td>
							<td class="s_c z">
								<input type="text" name="text" id="s_c_txt" />
							</td>
							<td class="s_y z">
								<button type="submit" name="submit"></button>
							</td>
						</tr>
				</table>
		</form>
</div>

为搜索框部分写css样式：首先是class="sousuo z"的部分，定义一个合适的宽度，然后查看背景图片的高度，定义和背景图片相同的高度。接着定义左边和上边的外边距，使搜索框的位置合适。代码如下：

.sousuo{
	width:330px;
	height:41px;
	margin-top:10px;
	margin-left:80px;
}

然后，定义一下form和td的高度，同样和背景图片高度一致。代码如下。

.sousuo form{
	height:41px;
}
.sousuo td{
	height:41px;
}

接着查看背景图片的宽度，左和右的分别为6px和78px，所以它们的css样式宽度也为这个，背景图片的排列方式为no-repeat.对于中间的背景图片，设置一个合适的宽度，背景图片的排列方式为x轴方向是重复：x-repeat 。代码如下。

.s_z{
	width:6px;
	background:url("../img/s_z.jpg") no-repeat;
}
.s_c{
	width:240px;
	background:url("../img/s_c.jpg") repeat-x;
}
.s_y{
	width:78px;
	background:url("../img/s_r.jpg") no-repeat;
}

继续设置搜索框中间的input的css样式，计算一下背景图片的高度是41px,然后设置input合适的宽度，高度设置为32px，行高line-height也为32px，然后上面的外边距设置为4px，使它看起来在背景图片的中间显示，边框设置为0。代码如下所示。

s_c input{
	height:32px;
	line-height: 32px;
	margin-top:4px;
	border:0px;
	width:200px;
}

然后设置butto按钮的css样式，宽度和高度定义为和背景图片一样的78px和41px，边框设置为0，cursor设置为pointer，背景background取消设置为none。代码如下。

s_y input{
	width:78px;
	height:41px;
	border:0px;
	cursor: pointer;
	background:none;
}

客服热线：使用一个span标签就可以了，代码如下。

客服热线html：

<div class="kefu z">
	<span>
		客服热线:400-000-000
	</span>
</div>

然后设置它的css样式，设置宽度，高度和另外两部分差不多，设置行高和高度一致，然后再浏览器窗口调试它的margin-left和margin-top，使它看起来和左边的div保持高度一致。接着调试设置里面的字体大小和颜色。代码如下。

.kefu{
	width:240px;/*宽度不用设置就可以，它会根据span里面字体的大小自动设置*/
	height:41px;
	line-height: 41px;
	margin-left:50px;
	margin-top:10px;/*与左面的div保持水平*/
}
.kefu span{
	font-size:23px;
	color: darkred;
}

至此，三个部分写完。

二、导航条的编写：
最初，导航条里面的每一个导航使用的是span标签来承载，但是在写鼠标放上面的交互时，发现背景范围改变的太小，所以后来使用了无序列表ul标签来承载它们。首先使用一个div包裹它们，使它们居中显示，代码如下。

<div class="nav">
				<!--<div class="nav-list wp">
					<span z><a href="">网页首页</a></span>
					<span z><a href="">公司简介</a></span>
					<span z><a href="">业务描述</a></span>
					<span z><a href="">服务范围</a></span>
					<span z><a href="">产品中心</a></span>
					<span z><a href="">人才管理</a></span>
					<span z><a href="">在线留言</a></span>
					<span z><a href="">联系我们</a></span>
				</div>
			</div>-->
			<div class="nav-list wp">
				<ul>
					<li><a href="">网页首页</a></li>
					<li><a href="">公司简介</a></li>
					<li><a href="">业务描述</a></li>
					<li><a href="">服务范围</a></li>
					<li><a href="">产品中心</a></li>
					<li><a href="">人才管理</a></li>
					<li><a href="">在线留言</a></li>
					<li><a href="">联系我们</a></li>
				</ul>
			</div>
		</div>

然后开始设计它们的css样式。

class=”nav“的css样式：宽度定义为百分之百，高度根据背景图片设置为39px,然后添加背景图片，x轴重复。代码如下。

/*导航条*/
.nav{
	width:100%;
	height:39px;
	background:url(../img/nav_bg.jpg) repeat-x;
}

2.居中的大div class=”nav-list“：宽度定义为960px，高度定义和nav相同为39px。代码如下。

.nav-list{
	width:960px;
	height:39px;
}

接下来我自己开始使用span写的div，设置它们的高度，行高，左边距，因为有8个导航，960除以8，每一个的宽度设置为120px，然后设置span里面a标签的字体样式，和hover属性，但是交互的效果不好。代码如下。

/*.nav span{
	width:120px;
	height:39px;
	line-height:39px;
	margin-left:43px;浏览器窗口调试工具调试得出
}
.nav span a{
	font-size:18px;
	text-decoration: none;
	color:#fff;
}
.nav span:hover{易错点
	background: url(../img/nav_hover.jpg);
}
*/

4.于是，改变策略，使用无序列表ul来承载它们。
5. 为ul设置css样式：定义它的高度为39px行高为39px.
6. 定义li的css样式：因为有8个，总的宽度为960px，所以每一个定义宽度为120px，定义它的样式，去掉前面的小点。定义它的位置左浮动。注意，这里不要设置它的外边距，这样会使每一个li的大小超过120px，导致容纳不下。
代码如下。

.nav-list ul{
	height:39px;
}
.nav-list li{
	line-height:39px;
	list-style-type: none;
	float:left;
	width:120px;
}

设置ul里面的a标签的css样式：首先每一个导航有4个字，一个li的大小宽度为120px，如果每个字给18px的话，4个字就是72px，然后还剩下48px，为了让a标签在span里居中，就
可以给左边距margin-left:24px.然后设置a标签的样式，和li的动态交互效果。代码如下所示。

.nav-list li a{
	font-size:18px;
	text-decoration: none;
	color:#fff;
	margin-left:24px;
}
.nav-list li:hover{
	background:url(../img/nav_hover.jpg);
}