老师好，请帮忙看下效果是否正确，代码哪里需要优化
来源：2-10 编程练习
慕仙3144158
2019-04-23 18:47:39
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*此处写代码*/
*{margin:0;padding:0;}
.header{background-color:black;width:100%;height:100px;position:fixed; z-index:9;top:0;overflow:hidden;}
.left1{position:absolute;left:0;line-height:100px;}
.right1{position:absolute;right:0;line-height:100px;margin-right:30px;}
.container{background-color:#87CEFA;height:500px;width:100%;margin:100px 0;overflow:hidden;}
.footer{background-color:black;width:100%;height:100px;position:fixed;bottom:0; line-height: 100px;text-align:center; z-index:9;overflow:hidden;}
.right1 a,.footer a{margin:0px 20px;}
.right1 a:link,.footer a:link{color:white;text-decoration:none;font:bold 20px "微软雅黑";}
.right1 a:visited,.footer a:visited{color:white;text-decoration:none;font:bold 20px "微软雅黑";}
img{display:block;}
.container2{width:70%;margin:100px auto;overflow:hidden;}
.left2{float:left;width:40%;margin:0 0 0 5%;line-height:35px;font-family:" 微软雅黑";}
.right2{float:right;width:40%;margin:0 5% 0 0;line-height:35px;font-family:" 微软雅黑";font-weight:bold;}
span{background-color: pink;}
h2{font-weight:bolder;}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="header">
<div class="left1"><a href="#"><img src="http://climg.mukewang.com/58c0d2d900016ce303000100.png"/></a></div>
<div class="right1"><a href="#">课程</a><a href="#">职业路径</a><a href="#">实践</a><a href="#">袁问</a><a href="#">手记</a></div>
</div>
<div class="container">
<div class="container2">
<div class="left2">
<h2>课程推荐</h2>
<p><span>职业路径</span> HTML5和CSS3实现动态网页</p>
<p><span>职业路径</span> 零基础入门Android语法与界面</p>
<p><span>职业路径</span> iOS基础语法与常用控件</p>
<p><span>职业路径</span> PHP入门开发</p>
<p><span>职业路径</span> JAVA入门开发</p>
</div>
<div class="right2">
<h2>相关课程</h2>
<p>HTML CSS JavaScript</p>
<p>HTML5 CSS3 Jquery</p>
<p>移动端基础 移动端APP开发</p>
</div>
</div>
</div>
<div class="footer">
<a href="#">网站首页</a><a href="#">企业合作</a><a href="#">人才招聘</a><a href="#">联系我们</a><a href="#">常见问题</a><a href="#">友情链接</a>
</div>
</body>
</html>
1回答
-
同学年后， 效果实现正确。代码中的设置left2和right2的相同样式可以写在一起。简化代码的书写。 另， right2可以不用设置font-weight：blod属性； 示例：
如果帮助到了你， 欢迎采纳
祝学习愉快~~~
0
相似问题