网页效果图:
完整代码如下:
头部导航条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
<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);
}
至此,今天的学习就到这里了。
更多推荐
html+css网页开发实战——2、头部logo,搜索框和导航条的制作
发布评论