请老师看看这样写规不规范O(∩_∩)O~~
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*此处写代码*/
*{margin:0;
padding:0;
}
.header{width:100%;
height:600px;
margin:0 auto;
background-color:#6495ed;
}
.foot{width:100%;
height:400px;
margin:0 auto;
background-color:#f08080;
}
.left{
width:35%;
height:500px;
background-image:url(http://img1.sycdn.imooc.com/climg//58c0f808000129a303600215.jpg);
background-size:cover;
float:left;
margin-top:50px;
margin-left:10%;
}
.right{width:35%;
height:500px;
background-image:url(http://img1.sycdn.imooc.com/climg//58c0f819000198a703600214.jpg);
background-size:cover;
float:left;
margin-top:50px;
margin-left:10%;
}
.one{ width:20%;
height:200px;
background-image:url(http://img1.sycdn.imooc.com/climg//58c0f81d0001fe4402000060.jpg);
background-size:cover;
float:left;
margin-top:100px;
margin-left:10%;
}
.two{ width:20%;
height:200px;
background-image:url(http://img1.sycdn.imooc.com/climg//58c0f8220001dfce02000060.jpg);
background-size:cover;
float:left;
margin-top:100px;
margin-left:10%;
}
.three{ width:20%;
height:200px;
background-image:url(http://img1.sycdn.imooc.com/climg//58c0f8780001c74602000060.jpg);
background-size:cover;
float:left;
margin-top:100px;
margin-left:10%;
}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="header">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="foot">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
</body>
</html>17
收起
正在回答
1回答
整体效果来看的话，实现的很好，但是有个问题，整个页面中所有的图片都是被你拉伸过了，已经不是它原来的样子了。这里不适合用背景图片引入图片，要用img标签引入图片。
自己在尝试修改一下。祝学习愉快！
相似问题
登录后可查看更多问答，登录/注册
前端小白入门系列课程
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36712 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星