老师帮忙看下有没什么需要改进的地方
来源：3-4 编程练习
攻下这座城
2018-07-24 15:15:14
<!DOCTYPE html>
<html>
<head>
<!-- 此处编写样式 -->
<style>
.container{
width:1200px;
border:1px lightblue solid;
}
.herder{
width:999px;
overflow: hidden;
zoom:1;
}
.footer{
width: 999px;
overflow: hidden;
zoom:1;
}
.header .left{
width:333px;
float: left;
}
.header .center{
width:333px;
float: left;
}
.header .right:{
width:333px;
float: left;
}
.footer .left{
width:333px;
float: left;
}
.footer .center{
width:333px;
float: left;
}
.footer .right{
width:333px;
float: right;
}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="container">
<div class="header">
<div class="left">
<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg">
<p>欢迎来到慕课网学习新知识</p>
</div>
<div class="center">
<img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg">
<p>欢迎来到慕课网学习新知识</p>
</div>
<div class="right">
<img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg">
<p>欢迎来到慕课网学习新知识</p>
</div>
</div>
<div class="footer">
<div class="left">
<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg">
<p>欢迎来到慕课网学习新知识</p>
</div>
<div class="center">
<img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg">
<p>欢迎来到慕课网学习新知识</p>
</div>
<div class="right">
<img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg">
<p>欢迎来到慕课网学习新知识</p>
</div>
</div>
</div>
</body>
1回答
-
1、当代码比较重复时，可以提取到一个公共的里边，比如：
.footer .left， .footer .center 几个里边的代码一样，你可以把它提到
.footer div中。
例如：
注释掉：
.footer .left{ width:333px; float: left; } .footer .center{ width:333px; float: left; } .footer .right{ width:333px; float: right; }改为：
.footer div{ width:333px; float: left; }header同理。
2、建议把.container 也设置为999px；
3、建议给图片设置一个左外边距，使其不再紧紧贴着边，而是有个间距，同理，底下的字也可以设置一下：
img{
margin-left:41.5px;
}
如果我的回答解决了你的疑惑，请采纳！祝学习愉快！
1
相似问题