成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

css 響應(yīng)式（媒介查詢）

OBKoro1 / 1379人閱讀

摘要：來實(shí)現(xiàn)響應(yīng)式實(shí)現(xiàn)響應(yīng)式網(wǎng)站的布局要用到的就是中的媒體查詢接下來來簡單介紹一下類型條件條件二樣式我們只需用到衍生出的這個屬性，定義輸出設(shè)備中的頁面可見區(qū)域?qū)挾葋砜刂圃摳淖兊臉邮郊纯伞?/p>

1.CSS 來實(shí)現(xiàn)響應(yīng)式

CSS實(shí)現(xiàn)響應(yīng)式網(wǎng)站的布局要用到的就是CSS中的媒體查詢接下來來簡單介紹一下：

@media 類型 and (條件1) and (條件二){css樣式}

我們只需用到width衍生出的max-width這個屬性，定義輸出設(shè)備中的頁面可見區(qū)域?qū)挾葋砜刂圃摳淖兊臉邮郊纯伞?br>html代碼如下：




    
    響應(yīng)式

    
    
    


    

        頭部
    

    

        
左部

        
中部

        
右部

demo01.css樣式如下：

body{
    margin:0;
    text-align:center;
}

.header{
    height:100px;
    background-color:red;
}
.container{
    height:400px;
    background-color:pink;
}
.clearfix:after{
    display:block;
    content:"";
    visibility:hidden;
    height:0;
    clear:both;
}
.footer{
    height:100px;
    background-color:blue;
}
.left{
    width:20%;
    background-color:orange;
    float:left;
    height:300px;
}
.center{
    width:55%;
    background-color:gray;
    float:left;
    height:300px;
    margin:0 2.5%;
}
.right{
    width:20%;
    background-color:yellow;
    float:left;
    height:300px;
}

demo02的樣式如下：

body{
    margin:0;
    text-align:center;
}

.header{
    height:100px;
    background-color:red;
}
.container{
    height:400px;
    background-color:pink;
}
.clearfix:after{
    display:block;
    content:"";
    visibility:hidden;
    height:0;
    clear:both;
}
.footer{
    height:100px;
    background-color:blue;
}
.left{
    width:30%;
    background-color:orange;
    float:left;
    height:300px;
}
.center{
    width:70%;
    background-color:gray;
    float:left;
    height:300px;
}
.right{
    width:100%;
    background-color:yellow;
    height:300px;
}

demo03的樣式：

body{
    margin:0;
    text-align:center;
}

.header{
    height:100px;
    background-color:red;
}
.container{
    background-color:pink;
}
.clearfix:after{
    display:block;
    content:"";
    visibility:hidden;
    height:0;
    clear:both;
}
.footer{
    height:100px;
    background-color:blue;
}
.left{
    width:100%;
    background-color:orange;
    height:300px;
}
.center{
    width:100%;
    background-color:gray;
    height:300px;
}
.right{
    width:100%;
    background-color:yellow;
    height:300px;
}

效果圖：

窗口大于1024px時顯示的樣子

當(dāng)大于640小于980時，右側(cè)欄在底部

當(dāng)小于480時，導(dǎo)航欄折疊，body三部分豎直排列顯示，若窗口持續(xù)縮小，不在發(fā)生變化，區(qū)域被壓縮

效果總圖：

持續(xù)更新，歡迎大家！

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/52698.html

相關(guān)文章

  • css 響應(yīng)式（媒介查詢）

    摘要：來實(shí)現(xiàn)響應(yīng)式實(shí)現(xiàn)響應(yīng)式網(wǎng)站的布局要用到的就是中的媒體查詢接下來來簡單介紹一下類型條件條件二樣式我們只需用到衍生出的這個屬性，定義輸出設(shè)備中的頁面可見區(qū)域?qū)挾葋砜刂圃摳淖兊臉邮郊纯伞? 1.CSS 來實(shí)現(xiàn)響應(yīng)式 CSS實(shí)現(xiàn)響應(yīng)式網(wǎng)站的布局要用到的就是CSS中的媒體查詢接下來來簡單介紹一下： @media 類型 and (條件1) and (條件二){css樣式} 我們只需用到widt...

    ningwang 評論0 收藏0

  • Web移動端頁面 --響應(yīng)式和動態(tài)REM

    摘要：當(dāng)媒介最大寬度為且是橫屏?xí)r里面的樣式生效目前前端開發(fā)項(xiàng)目類型可以分為兩種方式，和。這樣我們的響應(yīng)式網(wǎng)頁才完全生效了。移動端特點(diǎn)移動端特點(diǎn)沒有有沒有滾動條沒有沒有因?yàn)橐苿佣耸菦]有事件的所以當(dāng)我們在需要兼容移動端的頁面中應(yīng)該盡量少用事件。鄙人最近才剛剛開始學(xué)習(xí)一些關(guān)于移動端的知識，還只是個小白，文中可能有許多理解錯誤，望指出，請多多見諒。 響應(yīng)式 什么是響應(yīng)式頁面呢？ 顧名思義響應(yīng)式頁面就是能做...

    BLUE 評論0 收藏0

  • 面試前端時遇到的CSS題目

    摘要：昨天面試了本地的一家公司，面試的前端。行內(nèi)元素，不可設(shè)置寬高其實(shí)正確答案應(yīng)該是設(shè)置無效，單行顯示直到一行排列不下，才會換新一行。頭部有固定的高度像素，內(nèi)容容器是像素而側(cè)邊欄是像素。它根據(jù)條件告訴瀏覽器如何為指定視圖寬度渲染頁面。 昨天面試了本地的一家公司，面試的Web 前端。題目共有CSS和JS兩部分，因?yàn)槲覍τ贑SS不是很熟悉，所以這里就只列出CSS相關(guān)的筆試題，僅供學(xué)習(xí)。 盒模型的...

    kycool 評論0 收藏0

  • css相關(guān) - 收藏集 - 掘金

    摘要：在正式前端一些小細(xì)節(jié)前端掘金英文原文，翻譯未來的太讓人興奮了一方面，是全新的頁面布局方式另一方面，是酷炫的濾鏡顏色等視覺效果。老司機(jī)教你更好的進(jìn)行編程個技巧前端掘金并不總是容易處理。 CSS3 實(shí)現(xiàn)文字流光漸變動畫 - 前端 - 掘金來自百度前端技術(shù)學(xué)院的實(shí)踐任務(wù)：有趣的鼠標(biāo)懸浮模糊效果，參考：http://ife.baidu.com/course/d...，用CSS3實(shí)現(xiàn)了一下，順便...

    molyzzx 評論0 收藏0

  • 響應(yīng)式布局設(shè)計(jì)

    摘要：詳細(xì)講解響應(yīng)式布局響應(yīng)式設(shè)計(jì)網(wǎng)格系統(tǒng)響應(yīng)式實(shí)用工具響應(yīng)式設(shè)計(jì)的步驟設(shè)置標(biāo)簽通過媒介查詢來設(shè)置樣式設(shè)置多種試圖寬度設(shè)置標(biāo)簽大多數(shù)移動瀏覽器將頁面放大為寬的視圖以符合屏幕分辨率。 詳細(xì)講解響應(yīng)式布局Bootstrap 響應(yīng)式設(shè)計(jì)Bootstrap 網(wǎng)格系統(tǒng)Bootstrap 響應(yīng)式實(shí)用工具 響應(yīng)式設(shè)計(jì)的步驟 設(shè)置 Meta 標(biāo)簽 通過媒介查詢來設(shè)置樣式 Media Queries 設(shè)置多...

    Drinkey 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<