麻烦老师看看
来源：2-2 编程练习
qq_慕先生0342934
2020-04-19 19:59:01
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS布局</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
/*此处写代码*/
a{
text-decoration: none;
color: #000;
}
.header{
width: 1400px;
height: 100px;
overflow: hidden;
}
.logo{
float: left;
padding-left: 100px;
}
.logo img{
width: 200px;
height: 80px;
padding-top: 10px;
}
.nav{
float: right;
}
.nav ul{
padding-right: 100px;
list-style: none;
overflow: hidden;
}
.nav ul li{
float: left;
height: 100px;
line-height: 100px;
padding: 0 20px;
font-size: 16px;
font-family: "微软雅黑";
font-weight: bolder;
}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="header">
<div class="logo">
<img src="http://climg.mukewang.com/595dd5120001736902000080.png" alt="" />
</div>
<div class="nav">
<ul>
<li><a href="#">前端</a></li>
<li><a href="#">后端</a></li>
<li><a href="#">移动端</a></li>
<li><a href="#">数据库</a></li>
</ul>
</div>
</div>
</body>
</html>
1回答
-
同学你好，可做如下优化：
在较大分辨率下，导航项没有全屏显示，如下：
原因是在较大分辨率下，导航整体设置的宽度值小于页面的宽度；建议将导航宽度设置为100%，如下:
如果我的回答帮到了你，欢迎采纳，祝学习愉快！
0h020-04-20
相似问题