结果是出现了 总感觉哪里怪怪的 请指导
<style>
html,body{
margin:0;
}
header{
background-color: lightblue;
height:600px;
box-sizing:border-box;
}
footer{
background-color: lightcoral;
height:200px;
box-sizing:border-box;
}
.big{
width:50%;
height:600px;
float:left;
box-sizing:border-box;
}
.big2 {
width: 50%;
height: 600px;
float: right;
text-align: center;
box-sizing:border-box;
}
.small1{
width:33%;
height:200px;
float:left;
text-align: center;
box-sizing:border-box;
}
.small2{
width:34%;
height:200px;
float:left;
text-align: center;
box-sizing:border-box;
}
.small3{
width:33%;
height:200px;
float:right;
text-align: center;
box-sizing:border-box;
}
</style>
<body>
<header>
<nav class="big"><img src="http://img1.sycdn.imooc.com/climg//58c0f808000129a303600215.jpg" style="display: block;vertical-align: middle;margin:150px auto;"></nav>
<article class="big2"><img src="http://img1.sycdn.imooc.com/climg//58c0f819000198a703600214.jpg" style="display: block;vertical-align: middle;margin:150px auto;"></article>
</header>
<footer>
<nav class="small1"><img src="http://img1.sycdn.imooc.com/climg//58c0f81d0001fe4402000060.jpg"style="display: block;vertical-align: middle;margin:70px auto;"></nav>
<article class="small2"><img src="http://img1.sycdn.imooc.com/climg//58c0f8220001dfce02000060.jpg"style="display: block;vertical-align: middle;margin:70px auto;"></article>
<aside class="small3"><img src="http://img1.sycdn.imooc.com/climg//58c0f8780001c74602000060.jpg"style="display: block;vertical-align: middle;margin:70px auto;"></aside>
</footer>
</body>
正在回答
您好,放入到CSS中是可以的哦~放入到CSS中的时候要注意是img标签的样式。
缩放到一定程度的时候是会产生页面错乱问题,同学可以设置一下页面的最小缩放。
祝学习愉快!
- 参与学习 人
- 提交作业 626 份
- 解答问题 4928 个
想要学好Web后端开发的中流砥柱语言,本阶段为你轻松铺就扎实的基础,从前端网页布局的搭建到后台PHP开发,助你从零基础到掌握主流开发语言。
了解课程
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星