效果展示:
制作头部:
html
<header>
<ul>
<li class="logo"><img src="images/logo.jpg"></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>
</header>
css
*{
margin: 0px;
padding: 0px;
}
header{
width: 980px;
height: 70px;
background-color: antiquewhite;
border-bottom: 3px solid pink;
margin: 0 auto;
}
header ul{
width: 980px;
margin: 0 auto;
list-style-type: none;/*去除无序列表的·*/
}
header li{
float: left;
}
header ul img{
width: 135px;
height: 100px;
margin-right: 40px;
margin-left: -10px;
border-radius: 50px;
}
header li a{
display: inline-block;
height: 70px;
text-decoration: none;/*去除下划线*/
line-height: 70px;
width: 120px;
text-align: center;
color: hotpink;
}
header li a:hover{
color: darkorange;
font-size: 20px;
}
随后是一张图片:
制作内容部分: