2-6练习 请帮忙改进
来源：2-7 编程练习
qq_风尚涛_0
2017-10-31 19:54:36
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*此处写代码*/
*{margin:0;padding:0;}
.head{width:100%;height:100px;background:black;margin:0 auto;position:fixed;}
.logo{float:left;}
.head ul{float:right;color:#fff;list-style-type:none;text-align:center;line-height:100px;width:400px;}
.head li{float:left;width:80px;}
.content{padding-top:100px;padding-bottom:100px;}
.foot{width:100%;height:100px;background:black;margin:0 auto;position:fixed;bottom:0;}
.foot a{float:right;}
.foot ul{color:#fff;list-style-type:none;text-align:center;line-height:100px;width:600px;margin:0 auto;}
.foot li{float:left;width:120px;}
/*.content{width:100%;}*/
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="head">
<div class="logo"><a href="#"><img src="http://climg.mukewang.com/58c0d2d900016ce303000100.png"/></a></div>
<ul>
<li>课程</li>
<li>职业路径</li>
<li>实战</li>
<li>猿问</li>
<li>手记</li>
</ul>
</div>
<div class="content">
<img src="http://climg.mukewang.com/58c0eda50001e12416000480.jpg" width="100%"/>
<img src="http://climg.mukewang.com/58c0edb80001c9f216000480.jpg" width="100%"/>
<img src="http://climg.mukewang.com/58c0edc9000100d516000480.jpg" width="100%"/>
</div>
<div class="foot">
<a href="#"><img src="http://climg.mukewang.com/58c0d2d900016ce303000100.png"/></a>
<ul>
<li>网站首页</li>
<li>企业合作</li>
<li>人才招聘</li>
<li>联系我们</li>
<li>常见问题</li>
<li>友情链接</li>
</ul>
</div>
</body>
</html>
2回答
-
qq_风尚涛_0
提问者
2017-10-31
谢谢 ul 粗心了 没 注意是6个 不过后面练习 注意到了 使用% 分成6份了 logo 一直以为是页面内的 汗 宽度我会把它写在样式里img{width:100%;}
0 -
好帮手慕糖
2017-10-31
你好，整体的效果实现还是不错的，还有些建议：
1、中间部分的图片建的宽度100%属性，建议：可以不写在行内。
2、页脚部分为什么会有张logo图片呢，建议：认真检查下，这里应该注释掉哟（演示视频哪里的图片不是哟，那个是视频的窗口的标志，而不是页面中logo，这里注释就可以了哟）。
3、ul设置的总宽度为600，但是一个li的宽为120，一共有6个li，总宽（ul）不够哟，导致最后一项没有显示，这里要调整下宽度哟。
祝学习愉快~
0
相似问题