老师，请检查我的双飞翼布局
来源：4-1 课程总结
慕村6371425
2020-06-29 22:01:14
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>双飞翼布局（改良版圣杯）</title>
<style>
* {margin:0; padding:0; font:bold 20px 'Microsoft YaHei'; color:#fff;}
.header,
.footer {
width:100%;
height:100px;
background:#000;
text-align:center;
line-height:100px;
float:left;
}
.left-wing,
.main,
.right-wing {
float:left;
min-height:500px;
}
.main {
width:100%;
}
.content {
margin-left:250px;
margin-right:300px;
background:#325131;
min-height:500px;
min-width:400px;
}
.left-wing {
width:250px;
background:#4E1D1D;
margin-left:-100%;
}
.right-wing {
width:300px;
background:#2B5960;
margin-left:-300px;
}
</style>
</head>
<body>
<!-- 去掉相对布局只需浮动和负边距-->
<div class="header">header</div>
<div class="main">
<div class="content">
<h2>这里是主要内容</h2>
<p>这里是主要内容这里是主要内容这里是主要内容<br>
这里是主要内容这里是主要内容这里是主要内容</p>
</div>
</div>
<div class="left-wing">
<h2>这里是左边内容</h2>
<p>这里是左边内容</p>
</div>
<div class="right-wing">
<h2>这里是右边内容</h2>
<p>这里是右边内容</p>
</div>
<div class="footer">footer</div>
</body>
</html>
1回答
-
好帮手慕星星
2020-06-30
同学你好，代码布局以及实现很棒。继续加油，祝学习愉快！
0
相似问题