CSS魔法和布局示例-創(chuàng)新互聯(lián)

這篇文章主要介紹CSS魔法和布局示例，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

創(chuàng)新互聯(lián)建站主要為客戶提供服務(wù)項(xiàng)目涵蓋了網(wǎng)頁(yè)視覺(jué)設(shè)計(jì)、VI標(biāo)志設(shè)計(jì)、營(yíng)銷網(wǎng)站、網(wǎng)站程序開(kāi)發(fā)、HTML5響應(yīng)式網(wǎng)站建設(shè)公司、成都做手機(jī)網(wǎng)站、微商城、網(wǎng)站托管及成都網(wǎng)站維護(hù)公司、WEB系統(tǒng)開(kāi)發(fā)、域名注冊(cè)、國(guó)內(nèi)外服務(wù)器租用、視頻、平面設(shè)計(jì)、SEO優(yōu)化排名。設(shè)計(jì)、前端、后端三個(gè)建站步驟的完善服務(wù)體系。一人跟蹤測(cè)試的建站服務(wù)標(biāo)準(zhǔn)。已經(jīng)為成都三維植被網(wǎng)行業(yè)客戶提供了網(wǎng)站設(shè)計(jì)服務(wù)。

前言：布局和樣式，是每個(gè)前端的必修課。在日常的工作中，也會(huì)碰到一些特定場(chǎng)景的布局需求，配合上樣式，就能實(shí)現(xiàn)一些神奇的效果。我搜羅了一些日常開(kāi)發(fā)中遇到的布局，以及瀏覽各大網(wǎng)站時(shí)碰巧發(fā)現(xiàn)的神奇特效寫(xiě)法，在此做個(gè)分享。

由于篇幅原因，會(huì)分為 2 篇。今天，會(huì)先介紹一些有趣而又實(shí)用的布局的寫(xiě)法。之后的一篇，將展現(xiàn)樣式的神奇魔法。

懶加載占位圖自適應(yīng)

在商城中展示商品圖片時(shí)，如果圖片較多，一種比較好的體驗(yàn)是：會(huì)先有一個(gè)占位圖，目的是為了讓頁(yè)面無(wú)抖動(dòng)，也就是所謂的圖片懶加載效果。但是，當(dāng)遇到適配時(shí)就比較頭痛，特別是手機(jī)的橫豎屏切換。如果是通過(guò) JavaScript 計(jì)算的話，就可能會(huì)出現(xiàn)抖動(dòng)現(xiàn)象。

本著能用 CSS，就不用 JS 去實(shí)現(xiàn)的原則，就有了下面這種方案：

<div class="img-ratio">
    <img src="http://via.placeholder.com/640x384">
</div>

.img-ratio {
   width: 100%;
    position: relative;
    padding-top: 75%;
}

.img-ratio > img {
   width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

可以適配不同屏幕，只要 UI 提供一張 4:3 的占位圖即可。下圖展示了不同寬高，但比例相同的 2 張圖，都能完美地居中顯示。

CSS魔法和布局示例

它的原理是：

根據(jù)容器的寬度，按照寬高比例，自動(dòng)計(jì)算出容器的實(shí)際大小，并且讓容器內(nèi)的如 img 等子元素自適應(yīng)寬高。
圖片父容器寬度 100%，父容器的高度百分比為：100 * 3 / 4 = 75%。
圖片 absolute 并且完全鋪滿父容器。

移動(dòng)端的橫向滾動(dòng)條

移動(dòng)端的界面，寸土寸金。有時(shí)為了控制屏幕的滾動(dòng)長(zhǎng)度，會(huì)將一些模塊橫向排列。但是，橫向排列會(huì)產(chǎn)生一些布局問(wèn)題。

比如，移動(dòng)端的滾動(dòng)條樣式，依賴與手機(jī)瀏覽器，各不相同。一種解決方案是：把滾動(dòng)軸隱藏掉，但不能 overflow-x:hidden;，不然就滾不動(dòng)了。然后算好每一個(gè)橫向的塊的寬度，讓最右側(cè)的塊露出一部分，這樣用戶就知道右側(cè)的屏幕之外還有內(nèi)容，可以橫向滑動(dòng)。

又如果橫向滾動(dòng)的寬度是未知的，因?yàn)榭赡軙?huì)隨著業(yè)務(wù)的需要，改變橫向模塊的個(gè)數(shù)，那么橫向排布就沒(méi)法用 float 了。因?yàn)橛昧烁?dòng)，就得知道整個(gè)橫向滾動(dòng)的寬度，整個(gè)的寬度要比浮動(dòng)塊累加起來(lái)的寬度更寬，才能保證浮動(dòng)不換行。

所以，就有了下面這樣的寫(xiě)法：

<div class="wrapper">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
</div>

.wrapper {
   width: 340px;
    height: 80px;
    overflow: hidden;
}

.wrapper ul {
    height: 96px;
   width: 100%;
   white-space: nowrap;
    overflow-x: scroll;
    padding: 0;
    margin: 0;
}

.wrapper li {
    display: inline-block;
   width: 80px;
    height: 80px;
    background-color: #ddd;
    line-height: 80px;
    text-align: center;
    font-size: 20px;
    margin-right: 10px;
}

它的思路是：ul 設(shè)置 white-space:nowrap;，li 設(shè)置 display:inline-block;。最外層的 p 利用高度差，把橫向滾動(dòng)條藏起來(lái)。

CSS魔法和布局示例

頂部導(dǎo)航不定寬的居中展示

一些官網(wǎng)，有頂部導(dǎo)航欄，導(dǎo)航欄的內(nèi)容區(qū)往往需要居中展示，兩旁則留白，導(dǎo)航欄的下方可能還有根線或者陰影，作為區(qū)分頂部與主體內(nèi)容。

.center-float {
    float: left;
    position: relative;
    left: 50%;
}

.center-float > ul {
    position: relative;
    left: -50%;
}

這是居中浮動(dòng)的一種做法，再配合相對(duì)定位。

footer 置底

當(dāng)頁(yè)面主內(nèi)容區(qū)高度不夠時(shí)，footer 依然顯示在最下面。這里當(dāng)然不是指 position: fixed，footer是緊跟在內(nèi)容區(qū)下方的。有 2 種方法。

html 結(jié)構(gòu)如下：

<html>
    <body>
        <div id="content">....</div>
        <div id="footer">....</div>
    </body>
</html>

1、margin & padding

html, body {
    height: 100%;
}
$footer-height: 30px;

#content {
    min-height: 100%;
    margin-bottom: -$footer-height;
    padding-bottom: $footer-height;
}

#footer {
    line-height: $footer-height;
    text-align: center;
}

2、flex 布局

$footer-height: 30px;

html {
    height: 100%;
}

body {
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

#content {
    flex: 1;
}

#footer {
    line-height: $footer-height;
    text-align: center;
}

超寬的背景圖片居中

一些傳統(tǒng)的門戶網(wǎng)站，它們的主內(nèi)容區(qū)寬度大致為 980px 或 1000px 這樣的經(jīng)典寬度。有時(shí)候，會(huì)把較寬的圖片作為整體背景圖，居中放置，并且不要橫向滾動(dòng)軸，可以這么做：

.wrapper {
    min-width: 1000px;
    height: 800px;
    background: url(test.jpg) no-repeat center top;
}

.mainContent {
    position: relative;
   width: 1000px;
    margin: 0 auto;
}

::after 實(shí)現(xiàn)水平垂直居中

偽元素也能用來(lái)實(shí)現(xiàn)居中么？當(dāng)時(shí)看到的一感覺(jué)就覺(jué)得挺神奇的，看下面這個(gè)例子：

<div class="wrapper">
    <img src="test.png">
</div>

.wrapper {
   width: 300px;
    height: 300px;
    border: 1px solid #ccc;

    text-align: center;
}

.wrapper::after {
    content: '';
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}

.wrapper > img {
    vertical-align: middle;
}

水平方向很好理解。垂直方向，可以理解為 ::after 把 img 往下拉到了中間。

以上是“CSS魔法和布局示例”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

當(dāng)前題目：CSS魔法和布局示例-創(chuàng)新互聯(lián)
本文路徑：http://www.chinadenli.net/article10/dgecdo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站營(yíng)銷、外貿(mào)網(wǎng)站建設(shè)、關(guān)鍵詞優(yōu)化、網(wǎng)站改版、網(wǎng)站設(shè)計(jì)、企業(yè)網(wǎng)站制作

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

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

欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区