<!DOCTYPE html><html><head><meta charset="UTF-8"><title>css56行布局2练习</title><style type="text/css">*{padding: 0;margin: 0;}.header{width: 100%;height: 100px;background: #000000;margin: 0 auto;position:fixed;margin-top: -70px;}.logo{position: absolute;top: 50%left: 50%;cursor: pointer;}.menu li{cursor: pointer;position: relative;right: -65%;top: 35px;color: #ffffff;list-style-type: none;display: none;display: inline;font-size: 25px;font-family: "微软雅黑";margin: auto 20px;}.content img{display: none;display: block;width: 100%;height: auto;margin-top: 70px;}.one{margin-bottom: -70px;}.footer{width: 100%;height: 100px;background: #000000;color: #fff;position:fixed;bottom:0;line-height: 100px;}.list li{position: relative;right: -320px;cursor: pointer;list-style-type: none;display: none;display: inline;font-size: 20px;font-family: "微软雅黑";margin: 40px;}</style></head><body><div class="header"><div class="logo"><img src="http://climg.mukewang.com/58c0d2d900016ce303000100.png"></div><div><ul class="menu"><li>课程</li><li>职业路径</li><li>实战</li><li>猿问</li><li>手记</li></ul></div></div><div class="content"><div class="one"><img src="http://climg.mukewang.com/58c0eda50001e12416000480.jpg"></div><div class="one"><img src="http://climg.mukewang.com/58c0edb80001c9f216000480.jpg"></div><div class="one"><img src="http://climg.mukewang.com/58c0edc9000100d516000480.jpg"></div></div><div class="footer"><ul class="list"><li>网站首页</li><li>企业合作</li><li>人才招聘</li><li>联系我们</li><li>常见问题</li><li>友情链接</li></ul></div></body></html>帮我看一下，代码能不能简化一下，自己都看晕了，效果跟网页一样的还有一个问题，就是2个li里面的怎么可以横着，我现在用的是position定位的，看别人直接用flont做的，不知道怎么做出来的，希望大家指点一下，小弟我，谢谢大家了！
1 回答
- 1 回答
- 0 关注
- 964 浏览
相关问题推荐
添加回答
举报
0/150
提交
取消