老师,麻烦看一下代码,请问还有哪些问题需要修改
来源:4-4 自由编程
Yuujio
2021-05-07 19:36:06
<!--header区域-->
<header>
<div class="header">
<!--logo-->
<div class="logo">
<img src="images/logo.png">
</div>
<!--导航条-->
<nav>
<ul>
<li><a href="#home">HOME</a></li>
<li><a href="#about">ABOUT</a></li>
<li><a href="#gallety">GALLETY</a></li>
<li><a href="#faculty">FACULTY</a></li>
<li><a href="#events">EVENTS</a></li>
<li><a href="#contact">CONTACT</a></li>
</ul>
</nav>
</div>
</header>
*{
margin: 0;
padding: 0;
}
ul li{
list-style: none;
}
a{
text-decoration: none;
}
header{
width: 100%;
height: 80px;
background-color: #07cbc9;
}
header .header{
width: 1200px;
height: 80px;
margin: 0 auto;
}
header .header .logo{
width: 600px;
height: 48px;
float: left;
margin: 16px 0;
}
header .header nav{
width: 600px;
height: 80px;
float: right;
}
header .header nav ul{
float: left;
}
header .header nav ul li{
width: 100px;
height: 80px;
float: left;
margin-right: 20px;
line-height: 80px;
}
header .header nav ul li a{
font-size: 16px;
color: rgba(255,255,255,0.9);
}
1回答
同学你好,代码实现效果是可以的。关于右侧导航的实现思路,建议同学可以优化一下:因为导航中的文字一般有多有少(比如:HOME要比GALLETY少几个字符),基于这种情况,一般不建议给盒子设置固定的宽度,而是通过左右padding的方式将盒子撑起来,参考代码如下:
祝学习愉快!
相似问题