2-10 编程练习 麻烦老师给我检查一下，谢谢
来源：2-10 编程练习
milmilbaby
2020-09-17 14:07:48
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{margin:0;padding:0;}
.logo img{display:block;}
a{text-decoration:none;color:white;font-family:"微软雅黑";padding-right:25px;font-size:16px;}
li{list-style:none;padding:10px 100px;}
ul{padding:30px 100px;}
span{margin-right:20px;background:pink;}
.header{width:100%;height:100px;background:black;position:absolute;z-index:999;}
.title1{position:absolute;right:0;top:0;line-height:100px;}
.container{background:#87CEFA;width:100%;height:625px;position:absolute;z-index:777;margin-top:100px;}
.container a{color:black;}
.left{width:50%;height:100%;float:left;}
.right{width:50%;height:100%;float:right;}
.footer{position:fixed;bottom:0;width:100%;height:100px;background:black;line-height:100px;text-align:center;z-index:888;}
</style>
</head>
<body>
<div class="header">
<div class="logo"><a href="#"><img src="http://climg.mukewang.com/58c0d2d900016ce303000100.png"/></a></div>
<div class="title1">
<a href="#">课程</a>
<a href="#">职业路径</a>
<a href="#">实战</a>
<a href="#">猿问</a>
<a href="#">手记</a>
</div>
</div>
<div class="container">
<div class="left">
<h2><ul>课程推荐</ul></h2>
<li><a href="#"><span>职业路径</span>HTML5与CSS3实现动态网页</a></li>
<li><a href="#"><span>职业路径</span>零基础入门Android语法与界面</a></li>
<li><a href="#"><span>职业路径</span>ISO基础语法与常用控件</a></li>
<li><a href="#"><span>职业路径</span>PHP入门开发</a></li>
<li><a href="#"><span>职业路径</span>JAVA入门开发</a></li>
</div>
<div class="right">
<h2><ul>相关课程</ul></h2>
<li><a href="#">HTML CSS JavaScript</a></li>
<li><a href="#">HTML5 CSS3 Jquery</a></li>
<li><a href="#">移动端基础 移动端APP开发</a></li>
</div>
</div>
<div class="footer">
<div class=title2>
<a href="#">网站首页</a>
<a href="#">企业合作</a>
<a href="#">人才招聘</a>
<a href="#">联系我们</a>
<a href="#">常见问题</a>
<a href="#">友情链接</a>
</div>
</div>
</div>
</body>
</html>
1回答
-
同学你好，代码整体效果实现是可以的，有一个个细节可以注意修改下，页脚部分，统一给a标签设置右间距，导致整体内容居中存在是存在误差的，建议：调整为设置左右相等间距。
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
0
相似问题