DIV+CSS如何實(shí)現(xiàn)混合布局

這篇文章將為大家詳細(xì)講解有關(guān)DIV+CSS如何實(shí)現(xiàn)混合布局，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

專(zhuān)業(yè)領(lǐng)域包括網(wǎng)站建設(shè)、網(wǎng)站制作、商城網(wǎng)站制作、微信營(yíng)銷(xiāo)、系統(tǒng)平臺(tái)開(kāi)發(fā)，與其他網(wǎng)站設(shè)計(jì)及系統(tǒng)開(kāi)發(fā)公司不同，創(chuàng)新互聯(lián)建站的整合解決方案結(jié)合了幫做網(wǎng)絡(luò)品牌建設(shè)經(jīng)驗(yàn)和互聯(lián)網(wǎng)整合營(yíng)銷(xiāo)的理念，并將策略和執(zhí)行緊密結(jié)合，為客戶(hù)提供全網(wǎng)互聯(lián)網(wǎng)整合方案。

1、混合布局

在了解了一列、兩列和三列布局之后，混合布局也就不難理解了，混合布局也可以叫綜合型布局，那么混合布局就可以在一列布局的基礎(chǔ)之上，分為兩列布局，三列布局，網(wǎng)頁(yè)布局的結(jié)構(gòu)普遍都是三列布局，但是在三列布局的基礎(chǔ)上，可以根據(jù)實(shí)際需求，對(duì)網(wǎng)頁(yè)再進(jìn)行劃分。

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="UTF-8">  
    <title>混合布局</title>  
<style>  
*{margin:0;padding:0;}   
#header{   
    height:50px;   
    background:blue;   
}   
#main{   
    width:100%;   
    overflow:hidden;   
}   
#main .main-left{   
    width:20%;   
    height:800px;   
    background:lightgreen;   
    float:left;   
}   
#main .main-right{   
    width:80%;   
    height:800px;   
    float:right;   
}   
#main .main-right .right-l{   
    width:80%;   
    height:800px;   
    background:yellow;   
    float:left;   
}   
#main .main-right .right-r{   
    width:20%;   
    height:800px;   
    background:pink;   
    float:right;   
}   
#footer{   
    height:50px;   
    background:gray;   
}   
</style>  
</head>  
<body>  
<div id="header">頭部</div>  
<div id="main">  
    <div class="main-left">左邊</div>  
    <div class="main-right">  
        <div class="right-l">右-左</div>  
        <div class="right-r">右-右</div>  
    </div>  
</div>  
<div id="footer">頁(yè)腳</div>  
</body>  
</html>

2、固定寬度混合布局

固定寬度的混合布局結(jié)構(gòu)，同固定寬度的三列布局模式相同。

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="UTF-8">  
    <title>固定寬度混合布局</title>  
<style>  
*{margin:0;padding:0;}   
#header{   
    height:50px;   
    background:blue;   
}   
#main{   
    width:960px;   
    margin:0 auto;   
    overflow:hidden;   
}   
#main .main-left{   
    width:200px;   
    height:800px;   
    background:lightgreen;   
    float:left;   
}   
#main .main-right{   
    width:760px;   
    height:800px;   
    float:right;   
}   
#main .main-right .right-l{   
    width:560px;   
    height:800px;   
    background:yellow;   
    float:left;   
}   
#main .main-right .right-r{   
    width:200px;   
    height:800px;   
    background:pink;   
    float:right;   
}   
#footer{   
    width:960px;   
    height:50px;   
    background:gray;   
    margin:0 auto;   
}   
</style>  
</head>  
<body>  
<div id="header">頭部</div>  
<div id="main">  
    <div class="main-left">左邊</div>  
    <div class="main-right">  
        <div class="right-l">右-左</div>  
        <div class="right-r">右-右</div>  
    </div>  
</div>  
<div id="footer">頁(yè)腳</div>  
</body>  
</html>

3、自適應(yīng)混合布局

自適應(yīng)混合布局是對(duì)三列自適應(yīng)布局的改進(jìn)。

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="UTF-8">  
    <title>自適應(yīng)混合布局</title>  
<style>  
*{margin:0;padding:0;}   
#header{   
    height:50px;   
    background:blue;   
}   
#main{   
    width:100%;   
    position:relative;   
}   
#main .main-left{   
    width:20%;   
    height:800px;   
    background:red;   
    position:absolute;   
    left:0;   
    top:0;   
}   
#main .main-center{   
    height:800px;   
    background:lightgreen;   
    margin:0 20%;   
}   
#main .main-right{   
    width:20%;   
    height:800px;   
    background:pink;   
    position:absolute;   
    right:0;   
    top:0;   
}   
#footer{   
    height:50px;   
    background:gray;   
}   
</style>  
</head>  
<body>  
<div id="header">頭部</div>  
<div id="main">  
    <div class="main-center">設(shè)計(jì)網(wǎng)頁(yè)的第一步就是設(shè)計(jì)版面布局，搭建網(wǎng)站結(jié)構(gòu)，網(wǎng)頁(yè)排版的合理性，在一定程度上也影響著網(wǎng)站整體的布局以及后期的優(yōu)化。一個(gè)好的網(wǎng)站形象能更容易地吸引用戶(hù)、留住用戶(hù)。因此，網(wǎng)站首頁(yè)第一屏的排版非常重要，很多時(shí)候能決定用戶(hù)的去與留。</div>  
    <div class="main-right">右列</div>  
    <div class="main-left">左列</div>  
</div>  
<div id="footer">頁(yè)腳</div>  
</body>  
</html>

4、混合布局的應(yīng)用

混合布局在網(wǎng)站中應(yīng)用比較廣泛，再?gòu)?fù)雜的布局結(jié)構(gòu)，他們的原理都是相通的，可以舉一反三。網(wǎng)頁(yè)布局就是依據(jù)內(nèi)容、功能的不同，使用 CSS 對(duì)元素進(jìn)行格式設(shè)置，根據(jù)版面的布局結(jié)構(gòu)進(jìn)行排列，那么布局也就是元素與元素之間的關(guān)系，或者向一邊看齊，或者精準(zhǔn)定位，或者有一定間距，或者嵌套，或者相互堆疊，使元素按照設(shè)計(jì)稿的樣式漂亮的呈現(xiàn)在網(wǎng)頁(yè)上。

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="UTF-8">  
    <title>混合布局</title>  
<style>  
*{margin:0;padding:0;}   
#header{   
    height:30px;   
    background:blue;   
    margin-bottom:10px;   
}   
#nav{   
    width:960px;   
    margin:0 auto;   
    margin-bottom:10px;   
}   
#main{   
    width:960px;   
    height:800px;   
    margin:0 auto;   
    overflow:hidden;   
}   
#main .left{   
    width:200px;   
    height:800px;   
    background:lightgreen;   
    float:left;   
}   
#main .right{   
    width:750px;   
    height:800px;   
    float:right;   
}   
#main .right .sup{   
    height:200px;   
    margin-bottom:10px;   
}   
#main .right .sup-left{   
    width:370px;   
    height:200px;   
    background:pink;   
    float:left;   
}   
#main .right .sup-right{   
    width:370px;   
    height:200px;   
    background:orange;   
    float:right;   
}   
#main .right .middle{   
    height:300px;   
    background:yellow;   
    margin-bottom:10px;   
}   
#main .right .sub{   
    height:280px;   
    background:purple;   
}   
#footer{   
    width:960px;   
    height:50px;   
    background:gray;   
    margin:0 auto;   
    margin-top:10px;   
}   
#nav ul{   
    list-style:none;   
    background:lightgray;   
    overflow:hidden;   
}   
#nav li{   
    float:left;   
}   
#nav li a{   
    display:block;   
    color:black;   
    width:104px;   
    height:30px;   
    line-height:30px;   
    text-decoration:none;   
    text-align:center;   
}   
#nav .home{   
    width:128px;   
}   
#nav li a:hover{   
    color:white;   
    background:green;   
}   
</style>  
</head>  
<body>  
<div id="header">頭部</div>  
<div id="nav">  
    <ul>  
        <li><a  class="home" href="#">首頁(yè)</a></li>  
        <li><a href="#">新聞</a></li>  
        <li><a href="#">熱點(diǎn)</a></li>  
        <li><a href="#">動(dòng)態(tài)</a></li>  
        <li><a href="#">直播</a></li>  
        <li><a href="#">地圖</a></li>  
        <li><a href="#">服務(wù)</a></li>  
        <li><a href="#">社區(qū)</a></li>  
        <li><a href="#">關(guān)于我們</a></li>  
    </ul>  
</div>  
<div id="main">  
    <div class="left">左邊</div>  
    <div class="right">  
        <div class="sup">  
            <div class="sup-left">右-左</div>  
            <div class="sup-right">右-右</div>  
        </div>  
        <div class="middle">右-中</div>  
        <div class="sub">右-下</div>  
    </div>  
</div>  
<div id="footer">頁(yè)腳</div>  
</body>  
</html>

關(guān)于“DIV+CSS如何實(shí)現(xiàn)混合布局”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。

網(wǎng)站題目：DIV+CSS如何實(shí)現(xiàn)混合布局
網(wǎng)頁(yè)地址：http://jinyejixie.com/article18/ggeedp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計(jì)、定制開(kāi)發(fā)、手機(jī)網(wǎng)站建設(shè)、網(wǎng)站維護(hù)、云服務(wù)器、用戶(hù)體驗(yàn)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

DIV+CSS如何實(shí)現(xiàn)混合布局