真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯(lián)網(wǎng)站制作重慶分公司

CSS怎么實(shí)現(xiàn)響應(yīng)式布局

小編給大家分享一下CSS怎么實(shí)現(xiàn)響應(yīng)式布局，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

創(chuàng)新互聯(lián)公司是一家專業(yè)提供上虞企業(yè)網(wǎng)站建設(shè),專注與成都網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)、成都h5網(wǎng)站建設(shè)、小程序制作等業(yè)務(wù)。10年已為上虞眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站建設(shè)公司優(yōu)惠進(jìn)行中。

用CSS實(shí)現(xiàn)響應(yīng)式布局

響應(yīng)式布局感覺很高大上，很難，但實(shí)際上只用CSS也能實(shí)現(xiàn)響應(yīng)式布局

要用的就是CSS中的沒接查詢，下面就介紹一下怎么運(yùn)用：

使用@media 的三種方法

1.直接在CSS文件中使用：

@media 類型 and (條件1) and (條件二){
    css樣式
}
@media screen and (max-width:1024px) {
    body{
        background-color: red;
    }
}

2.使用@import導(dǎo)入

@import url("css/moxie.css") all and (max-width:980px);

3.也是最常用的方法--直接使用link連接，media屬性用于設(shè)置查詢方法

下面是一個(gè)簡(jiǎn)單的響應(yīng)式的布局HTMl代碼：




    
    響應(yīng)式
    

    


    頭部
             左邊
        中間
        右邊          底部

下面是CSS樣式：

*{
    margin:0;
    padding:0;
    text-align:center;
    color:yellow; 
}

.header{
    width:100%;
    height:100px;
    background:#ccc;
    line-height:100px;
}
.main{
    background:green;
    width:100%;
}
.clearfix:after{
    display:block;
    height:0;
    content:"";
    visibility:hidden;
    clear:both;
}
.left,.center,.right{
    float:left;
}
.left{
    width:20%;
    background:#112993;
    height:300px;
    font-size:50px;
    line-height:300px;
}
.center{
    width:60%;
    background:#ff0;
    height:400px;
    color:#fff;
    font-size:50px;
    line-height:400px;
}
.right{
    width:20%;
    background:#f0f;
    height:300px;
    font-size:50px;
    line-height:300px;
}
.footer{
    width:100%;
    height:50px;
    background:#000;
    line-height:50px;
}

樣式代碼

.right{
    float:none;
    width:100%;
    background:#f0f;
    clear:both;
}
.left{
    width:30%;
}
.center{
    width:70%;
}
.main{
    height:800px;
}

樣式代碼

.left,.center,.right{
    float:none;
    width:100%;
}

當(dāng)窗口大于1024px 時(shí)，指揮被壓縮，并不會(huì)發(fā)生其他變化：

CSS怎么實(shí)現(xiàn)響應(yīng)式布局

當(dāng)窗口小于1024px，大于720px的時(shí)候，右側(cè)欄取消浮動(dòng)，在下邊顯示：

CSS怎么實(shí)現(xiàn)響應(yīng)式布局

當(dāng)窗口小于720px的時(shí)候，左中右三欄，全都取消浮動(dòng)，寬度100%：

CSS怎么實(shí)現(xiàn)響應(yīng)式布局

看完了這篇文章，相信你對(duì)“CSS怎么實(shí)現(xiàn)響應(yīng)式布局”有了一定的了解，如果想了解更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！


本文名稱：CSS怎么實(shí)現(xiàn)響應(yīng)式布局
文章位置：http://weahome.cn/article/gipohh.html

在線咨詢

微信咨詢

電話咨詢

028-86922220（工作日）

18980820575（7×24）

提交需求

返回頂部