掌握Web设计：HTML与CSS的常用布局技巧

发表时间: 2024-04-20 10:19

三栏双飞翼布局

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><title>三栏双飞翼布局</title><style type="text/css">*{    margin: 0;    padding: 0;}body{    overflow: hidden;/*隐藏页面的滚动条*/}.content{    width: 100%;    min-width: 1120px;/*设置一个最小宽度 免得页面布局太丑(文字会掉下来)*/    height: 200px;    background-color: red;    position: relative;}.left{    width: 200px;    height: 200px;    background-color: green;    position: absolute;    left: 0;    top: 0;}.right{    width: 300px;    height: 200px;    background-color: blue;    position: absolute;    right: 0;    top: 0;}.center{    /* 宽度不给默认父元素宽度 */    /* 有一个padding值 */    padding: 0 300px 0 200px;}</style></head><body><!-- 三栏布局：左右固定中间自适应 --><!-- 双飞翼 --><div class="content"><div class="left">200*200</div><div class="center">我是自适应网页......</div><div class="right">300*200</div></div></body></html>

三栏圣杯布局

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><title>三栏圣杯布局</title><style type="text/css">*{    margin: 0;    padding: 0;}.content{    width: 100%;    min-width: 670px;    height: 200px;    background-color: red;}.left{    width: 200px;    height: 200px;    background-color: orange;    float: left;}.center{    /* width: 100%; */    height: 200px;    background-color: green;    padding-left: 200px;    padding-right: 200px;}.right{    width: 200px;    height: 200px;    background-color: blue;    float: right;}</style></head><body><div class="content"><div class="left">200*200</div><div class="right">200*200</div><div class="center">我是自适应网页......</div></div></body></html>

掌握Web设计：HTML与CSS的常用布局技巧

热门阅读

推荐阅读