老师帮忙看下2-3有没有问题或者代码能否更加优化?
来源:2-5 经典的行布局(2)
慕娘9805493
2018-01-17 21:59:40
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*此处写代码*/
*{margin:0px;padding:0px;}
.big{height:100px;
width:1100px;
background:black;
position:absolute;
top:50%;
left:50%;
margin-top:-50px;
margin-left:-550px;
}
.logo{float:left;}
.list ul li{list-style:none;
float:right;
line-height:100px;
margin:0 20px;
}
a{color:white;
text-decoration:none;
}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="big">
<div class="logo">
<a href="">
<img src="http://climg.mukewang.com/58c0d2d900016ce303000100.png"/>
</a>
</div>
<div class="list">
<ul>
<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>
</div>
</div>
</body>
</html>
1回答
bbbboom
2018-01-18
童鞋,我测试了你的代码,实现效果没有问题,可以优化的地方:
1、可以给右侧导航list设置固定宽度,浮动在右边
2、现在你的代码显示右侧导航list是没有高度的,是因为内容浮动的原因,可以给list设置高度,或者是添加overflow:hidden;就好啦
一起加油啊,(づ ̄3 ̄)づ╭❤~
相似问题
回答 5
回答 1