网页前端设计

http://www.86y.org
feedskyQQ邮箱

搜索文章

css各种通用布局的解决方案

关注我吧
 2013/6/17 15:22:44 阅读次数:4830

本文介绍 css各种通用的布局的解决方案,一般布局有 两列右侧自适应布局、两列左侧自适应布、两列定宽布局等。为前端开发人员提供高效率高质量的前端页面开发解决方案,提高多人协作效率,也为非专业人员提供快速制作网页的解决方案! 下面就一一介绍。

两列右侧自适应布局
两列右侧自适应布局
两列左侧自适应布局
两列左侧自适应布局
两列定宽布局
两列定宽布局
三列中间自适应布局
三列中间自适应布局
三列左侧自适应布局
三列左侧自适应布局
三列右侧自适应布局
三列右侧自适应布局

两列右侧自适应布局

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>两列右侧自适应布局</title>
<style type="text/css">html{_overflow-y:scroll;}/* 两列右侧自适应布局 */
.g-bd1{margin:0 0 10px;}
.g-sd1{position:relative;float:left;width:190px;margin-right:-190px;}
.g-mn1{float:right;width:100%;}
.g-mn1c{margin-left:200px;}
p {background:#FF0097;color:#fff;height:100px;padding:10px;}
.g-sd1 p {background:#4EB3B9;}
</style>

</head>
<body>
<div class="g-bd1 f-cb">
    <div class="g-sd1">
        <p>左侧定宽</p>
    </div>
    <div class="g-mn1">
        <div class="g-mn1c">
            <p>右侧自适应</p>
        </div>
    </div>
</div>
</body>
</html>

两列左侧自适应布局

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>两列左侧自适应布局</title>
<style type="text/css">
/* 两列右侧自适应布局 */
.g-bd2{margin:0 0 10px;}
.g-sd2{position:relative;float:right;width:230px;margin-left:-230px}
.g-mn2{float:left;width:100%;;}
.g-mn2c{margin-right:240px;}
p {background:#FF0097;color:#fff;height:100px;padding:10px;}
.g-sd2 p {background:#4EB3B9;}
</style>

</head>
<body>
<div class="g-bd2 f-cb">
    <div class="g-mn2">
        <div class="g-mn2c">
            <p>左侧自适应</p>
        </div>
    </div>
    <div class="g-sd2">
        <p>右侧定宽</p>
    </div>
</div>
</body>
</html>

两列定宽布局

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>两列定宽布局</title>
<style type="text/css">

/* 两列定宽布局 */
.g-bd{width:950px;margin:0 auto;}
.g-sd{float:right;width:230px;}
.g-mn{float:left;width:710px;}
p {background:#FF0097;color:#fff;height:100px;padding:10px;}
.g-sd p {background:#4EB3B9;}
</style>

</head>
<body>
<div class="g-bd f-cb">
    <div class="g-mn">
        <p>左侧定宽</p>
    </div>
    <div class="g-sd">
        <p>右侧定宽</p>
    </div>
</div>
</body>
</html>

三列中间自适应布局

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>三列中间自适应布局</title>
<style type="text/css">
/* 三列中间自适应布局 */
.g-bd5{margin:0 0 10px;}
.g-sd51,.g-sd52{position:relative;float:left;width:230px;margin:0 -230px 0 0;}
.g-sd52{float:right;width:190px;margin:0 0 0 -190px;}
.g-mn5{float:left;width:100%;}
.g-mn5c{margin:0 200px 0 240px;}
p {background:#FF0097;color:#fff;height:100px;padding:10px;}
.g-sd51 p{background:#E51400;}
.g-mn5c p {background:#4EB3B9;}
</style>

</head>
<body>
<div class="g-bd5 f-cb">
    <div class="g-sd51">
        <p>左侧定宽</p>
    </div>
    <div class="g-mn5">
        <div class="g-mn5c">
            <p>中间自适应</p>
        </div>
    </div>
    <div class="g-sd52">
        <p>右侧定宽</p>
    </div>
</div>
</body>
</html>

三列左侧自适应布局

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>三列左侧自适应布局</title>
<style type="text/css">
/* 三列左侧自适应布局 */
.g-bd4{margin:0 0 10px;}
.g-sd41,.g-sd42{position:relative;float:right;width:190px;}
.g-sd41{width:230px;margin-left:10px;}
.g-mn4{float:left;width:100%;margin-right:-430px;}
.g-mn4c{margin-right:440px;}
p {background:#FF0097;color:#fff;height:100px;padding:10px;}
.g-sd41 p{background:#E51400;}
.g-mn4c p {background:#4EB3B9;}
</style>

</head>
<body>
<div class="g-bd4 f-cb">
    <div class="g-mn4">
        <div class="g-mn4c">
            <p>左侧自适应</p>
        </div>
    </div>
    <div class="g-sd41">
        <p>右侧定宽</p>
    </div>
    <div class="g-sd42">
        <p>右侧定宽</p>
    </div>
</div>
</body>
</html>

三列右侧自适应布局

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>三列右侧自适应布局</title>
<style type="text/css">
/* 三列右侧自适应布局 */
.g-bd3{margin:0 0 10px;}
.g-sd31,.g-sd32{position:relative;float:left;width:230px;}
.g-sd31{width:190px;margin-right:10px;}
.g-mn3{float:right;width:100%;margin-left:-430px;}
.g-mn3c{margin-left:440px;}
p {background:#FF0097;color:#fff;height:100px;padding:10px;}
.g-sd31 p{background:#E51400;}
.g-mn3c p {background:#4EB3B9;}
</style>

</head>
<body>
<div class="g-bd3 f-cb">
    <div class="g-sd31">
        <p>左侧定宽</p>
    </div>
    <div class="g-sd32">
        <p>左侧定宽</p>
    </div>
    <div class="g-mn3">
        <div class="g-mn3c">
            <p>右侧自适应</p>
        </div>
    </div>
</div>
</body>
</html>

好了,以上几种CSS 布局而已希望对大家有帮助!


大家有什么问题或技术上的想法可以在此与大家分享,也可以加入前端爱好者QQ群(141999928)一起学习进步:【幸凡前端技术交流群】

如果您觉得本文的内容对您的学习有所帮助,捐赠与共勉,支付宝(左)或微信(右)

0
无觅相关文章插件,快速提升流量
阅读全文内容关闭