首页 > 代码库 > html两大布局
html两大布局
html布局之圣杯布局
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>圣杯布局</title> <link href="buju1.css" type="text/css" rel="stylesheet"/></head><body><<div class="container"> <div class="main"></div> <div class="sub"></div> <div class="extra"></div></div></body></html>
CSS
body { min-width: 600px; /* 2*sub + extra */}.container { padding-left: 210px; padding-right: 190px;}.main { float: left; width: 100%; height: 300px; background-color: rgba(255, 0, 0, .5);}.sub { position: relative; left: -210px; float: left; width: 200px; height: 300px; margin-left: -100%; background-color: rgba(0, 255, 0, .5);}.extra { position: relative; right: -190px; float: left; width: 180px; height: 300px; margin-left: -180px; background-color: rgba(0, 0, 255, .5);}
样式布局之双飞翼布局
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>双飞翼布局</title> <link href="buju.css" type="text/css" rel="stylesheet"/></head><body><div class="main-wrapper"> <div class="main"></div></div><div class="sub"></div><div class="extra"></div></body></html>
css
.main-wrapper { float: left; width: 100%;}.main { height: 300px; margin-left: 210px; margin-right: 190px; background-color: rgba(255, 0, 0, .5);}.sub { float: left; width: 200px; height: 300px; margin-left: -100%;//这个地方要注意了margin-left设置为负值得话，位置往左移动，当移出这一行时，就会跑到上一行去，然后继续往左移动，如果margin-left设置为正值的话，位置就会往右移动，并且会一直往右动，并不会跳到下一行去。 background-color: rgba(0, 255, 0, .5);}.extra { float: left; width: 180px; height: 300px; margin-left: -180px; background-color: rgba(0, 0, 255, .5);}
html两大布局
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。