html+css⽹页开发实战——2、头部logo，搜索框和导航条的制作⽹页效果图：
完整代码如下：
头部导航条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>
directory monitor<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>
html5局部刷新<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{易错点
html个人网页完整代码div+cssbackground: url(../img/nav_hover.jpg);
}
*/
.nav-list ul{
height:39px;
}
c openprocess.nav-list li{
line-height:39px;
list-style-type: none;
float:left;
width:120px;
}
.nav-list li a{
font-size:18px;
text-decoration: none;windows97
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。
1. 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>
2. 搜索框的代码：定义搜索框的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>
3. 为搜索框部分写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;
}
4. 客服热线：使⽤⼀个span标签就可以了，代码如下。
客服热线html：
<div class="kefu z">
<span>
客服热线:400-000-000
</span>
</div>
然后设置它的css样式，设置宽度，⾼度和另外两部分差不多，设置⾏⾼和⾼度⼀致，然后再浏览器窗⼝调试它的margin-left和margin-top，使它看起来和左边的div保持⾼度⼀致。接着调试设置⾥⾯的字体⼤⼩和颜⾊。代码如下。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论