大家好，又见面了，我是你们的朋友全栈君。
目录
首先建一个大盒子，名为 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;
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;
}若还有什么疑问，可以私信或者留言，祝学业顺利！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/140296.html原文链接：https://javaforall.net
