HTML导航栏制作
⽬录
⾸先建⼀个⼤盒⼦，名为 nav ⽤于装导航栏⾥⾯的部分。代码如下：
<div class="nav"></div>
.nav{
width: 100%;
height: 50px;
background-color:#f7f7b6;
}
logo (即图中的汤姆！)
<div class="logo">
<img src="./logo.jpg" width="80" height="50">
</div>
<!--这⾥可以直接弄图⽚，也可以在css中将背景设置为图⽚-->
.logo{
margin-left: 100px;  /*可以根据实际情况⾃⼰来设置*/
float: left;
}
Li⽂字
<div class="document">
<ul>
<li><a href="#" target="_blank">⾸页</a></li>
<li><a href="#" target="_blank">班级简介</a></li>
<li><a href="#" target="_blank">班级成员</a></li>
<li><a href="#" target="_blank">活动开展</a></li>
<li><a href="#" target="_blank">风采展⽰</a></li>
</ul>
</div>
注释：加上 target="_blank" 的话，点击有链接的⽂字，就会新打开⼀个标签页，若不加，则在本页⾯上直接打开链接⽹页。
a{
text-decoration: none;
}
.nav ul li{
margin-left: 15px;
height: 50px;
list-style: none;
line-height:50px;
font-size: 20px;
float: left;
}
.nav ul li a{
display: block;
padding:0 30px;
color: black;
}
.nav ul li a:hover{        /*⿏标滑过特效*/
border-bottom: 2px solid seagreen;
color: seagreen;
}
注释: text-decoration : none ⽤于清除 a 标签的下划线；
list-style : none ⽤于清除 li 前⾯的⼩圆点；
padding ：0 30px 因为导航栏⾥的⽂字并不是字数相等，所以为了美观，我们不去直接设置          盒⼦的宽度，⽽是⽤⼀个内边距给它撑开；
float ：left  ⼀浮都浮，使得所有盒⼦在⼀⾏显⽰；
.nav ul li a: hover  ⽤来设置⿏标滑过的效果。
搜索栏
<div class="search">
<form action="" class="parent">
<input type="text" class="search" placeholder="搜⼀搜"></input><!--⾏内块元素-->
<button><img src="./search.png" width="40px" height="34px"></button>
</form>
</div>
该部分由左边 搜索框 和右边的 button 组成。该功能⽤ 表单 来完成。
.search{
margin-left: 10px;
width: 340px;/*宽度要⼤于两个⼦盒⼦的宽度和，因为，⾏内块元素⾃⼰中间就有边距*/    height: 50px;
float: left;
}
.search input{
width: 255px;
height: 30px;
html导航源码border: 2px solid seagreen;
border-right: 0;
margin-top: 8px;
padding-left: 15px;
color: gray;
font-size: 13px;
}
.search input:focus{
outline: medium;  /*去掉 input 的点击边框*/
}
.search button{
width: 40px;
height: 34px;
border: 0;  /*按钮button⾃⼰就带有边框，需要⼿动清除*/
margin-top: 8px;
float:left;
}
注释：.search input : focus  ⽤于去除点击⽂本框时出现的⿊⾊边框。
log
<div class="log">
<a href="#">注册/登录</a>
</div>
.log{
width:100px;
height: 50px;
float: left;
text-align: center;
line-height: 50px;
margin-left: 50px;
}
.log a{
text-decoration: none;
font-size: 20px;
color: black;
}
若还有什么疑问，可以私信或者留⾔，祝学业顺利！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。