前端圖片優(yōu)化

言

圖片是大部分網頁的重要組成部分，一般情況下，我們不會太關注這方面的問題，需要顯示圖片直接一個 img 標簽搞定。但實際上，無論是對于提高加載速度，還是對于優(yōu)化用戶體驗，優(yōu)化圖片都是一個重要的手段。

圖片優(yōu)化分成兩個方面：

第一，圖片壓縮。在保證視覺效果的情況下，減少圖片的體積。這個很有效，1M 和 100K 的圖片，肉眼看起來幾乎差不多，但卻省了 90% 的流量，大大提高了加載速度。

第二，響應式圖片。根據客戶端的情況，選擇最合適的圖片返回給用戶。用戶是一個 500px 的設備，那么返回 1000px 的圖給他就是浪費（假設物理像素和 CSS 像素是一比一）。

我們先來看圖片壓縮。

圖片壓縮

壓縮的第一步是篩選出需要壓縮的圖片。如果圖片本身就已經足夠小了，那么再壓縮的意義就不大。

我一般使用如下的腳本篩選項目中需要壓縮的圖片。腳本會列出所有的圖片并根據尺寸降序排列。

篩選出需要壓縮的圖片以后，接下來就是壓縮、比對、調整參數(shù)。圖片壓縮的工具實在是太多了，Google image compression tool 選擇會多得你眼花繚亂。

這里順口提一下 Google 出品的 squoosh 在線圖片壓縮服務，看起來不錯，雖然我沒怎么用過。

這里我選擇使用 imagemin，相比于一些在線工具或者 App，自己寫腳本更靈活一些。

程序很簡單，分別針對 JPG、PNG、SVG 加載相應的插件就好。

注意，quality 參數(shù)需要自己測試去確定，怎樣在質量和尺寸中權衡，每個團隊有自己的標準。

Progressive JPEG VS Baseline JPEG

JPEG 根據顯示方式的不同，分為兩種。Progressive JPEG 會先加載模糊的整張圖片，然后變的越來越清晰。

Progressive JPEG

而 Baseline JPEG 會先清晰地加載圖片的一部分，然后慢慢顯示剩余的部分。

Baseline JPEG

從視覺效果來說，Progressive JPEG 自然更好一些。但它也有一些缺點，比如它的解碼速度比 Baseline JPEG 要慢，占用的 CPU 時間更多。

如果是桌面瀏覽器，這點性能問題自然無所謂，但是如果是移動端，就不得不考慮。工程本來就是權衡的藝術。

默認情況下，MozJPEG 生成的是 Progressive JPEG，可以通過選項調整。

WebP

WebP 是谷歌新提出的一個圖片格式，擁有質量好尺寸小的特點。在客戶端支持的情況下，我們應該盡可能地使用 WebP 格式。

有很多工具可以將 JPG/PNG 轉換成 WebP，這里還是使用 imagemin 為例。

oimg

oimg 是我在 imagemin 的基礎上封裝的一個命令行小工具，畢竟壓縮圖片是經常要做的事情，不能每次都等到需要的時候再去寫腳本。

oimg 使的流程是這樣的：

首先，我們找到尺寸比較大的需要壓縮的圖片
然后，使用 oimg 壓縮
最后，肉眼對比一下原圖片和壓縮圖片，如果沒有問題，替換就好
如果效果不滿意，調整參數(shù)，再壓縮

這個過程沒法完全自動化，因為壓縮過后的圖片究竟在視覺上能不能替換原圖，這個過程需要人來判別，全部交給機器是不太放心的。畢竟只有在保證質量的情況下減小體積才有意義。

oimg 的輸出如下，可以很方便地看出壓縮的效果如何。

oimg

響應式圖片

圖片壓縮的問題解決完了，現(xiàn)在我們來看看響應式圖片。

所謂響應式圖片，關鍵就一點：根據客戶端的情況返回最適合客戶端的圖片。

那么，可能會存在哪些情況？在準備部署響應式圖片的時候，我們可以問自己如下四個問題。

是否希望根據客戶端情況返回不同的圖片內容?
是否希望根據客戶端情況返回不同的圖片格式？
是否希望根據客戶端情況返回不同的圖片尺寸？
是否希望優(yōu)化高 分辨率 設備的體驗？

在 picture 標簽出來之前，這些只能通過 JS 來實現(xiàn)，不僅代碼而且丑陋能力也不全。但是現(xiàn)在，針對這些問題，我們有了一個完整的優(yōu)雅的解決方案。

picture 標簽

picture 是 HTML5 新引入的標簽，基本用法如下。

我們可以這樣理解，picture 標簽會從 source 中選擇最合適的一個，然后將它的 URL 賦值給 img。對于不認識 picture 的舊瀏覽器，他們會忽略 picture，只渲染 img，一切都不會有問題。

注意：picture 標簽最后一定要包含一個 img 標簽，否則，什么都不會顯示。

現(xiàn)在我們逐一來看 picture 怎樣解決上面的四個問題。

動態(tài)內容

根據客戶端的情況，我們來返回完全不同的兩張圖。這個很簡單，使用 source 標簽的 media 屬性即可。

如下代碼會在小于 1024px 的時候顯示 img-center.jpg，而在大于等于 1024px 的時候顯示 img-full.jpg。

動態(tài)格式

這個問題也很簡單，使用 source 標簽的 type 屬性即可。

如下代碼會在支持 WebP 的瀏覽器上使用 img.webp，在不支持 WebP 的瀏覽器上使用 img.jpg。

動態(tài)尺寸

如果希望瀏覽器能根據情況去請求不同尺寸的圖片，我們需要提供兩個信息：

有哪些尺寸的圖片
圖片顯示的時候是什么尺寸

下面的代碼中，我們首先使用 srcset 屬性指定有哪些圖片，分別是圖片名和圖片的尺寸，這里注意單位不用 px 而是 w，用于表示圖片的固有寬度。

sizes 屬性告訴瀏覽器，這個圖片在不同的條件下會是什么樣的寬度。這個屬性用于給到瀏覽器提示，并不會真正的指定 img 的寬度，我們還是需要另外使用 CSS 來指定。

這樣，給定一個視口寬度，瀏覽器可以得知圖片需要的寬度，然后根據 DPI 情況，在所有可選圖片中選擇最合適的一個。

動態(tài)分辨率

動態(tài)分辨率其實是動態(tài)尺寸的一種簡化情況。

根據顯示器的 DPI 返回同一張圖片的不同分辨率版本可以直接利用 img 標簽的 srcset 屬性。

使用了如下的代碼，瀏覽器會自動根據顯示器的 DPI 來決定下載圖片的哪個版本。

在低 DPI 設備上，例如桌面顯示器，瀏覽器會使用 img-200.jpg，而在高 DPI 設備上，例如手機，瀏覽器會使用 img-400.jpg。

當然，我們也可以組合這幾個選項。

如下的代碼會

視口 >= 1280px 時
根據視口的具體寬度，返回不同尺寸的 img-full 圖片
如果客戶端支持 WebP，返回 WebP 格式
視口 < 1280px 時
根據視口的具體寬度，返回不同尺寸的 img 圖片
如果客戶端支持 WebP，返回 WebP 格式

這里強烈建議自己動手，結合 placeholder.com 網站，生成一些圖片來測試，畢竟，紙上得來終覺淺。

最后

文章很棒,點個贊吧!

應式網頁設計，通俗的說，就是適配電腦，平板，手機等不同設備的屏幕，對布局和外觀進行合適的調整，以達到同一網頁在不同設備，也有更好的用戶體驗。

為了達到這一體驗，聯(lián)想到的技術便是媒體查詢。但響應式設計，并不是單獨的媒體查詢技術，而是一種Web設計方式，是由一系列技術組成的最佳實踐。

下面會從兩個方面和大家分享響應式設計。

1 原始的布局方式

2 響應式設計的定義

3 響應式設計實踐

原始的布局方式

在響應式設計前，早期網站有兩種選擇。

一是創(chuàng)建“液態(tài)”網頁，以百分比拉伸，充滿瀏覽器屏幕。但這種方式在小屏幕上，因為小屏寬度小，百分比計算后每一列都很小，會擠成一團。

二是“固定寬度”網頁，以像素計的固定尺寸。在小屏幕上，也會由于固定寬度超過屏幕寬度而出現(xiàn)橫向滾動條。

后來還有第三種選擇，即通過JavaScript檢測屏幕分辨率，加載恰當?shù)腃SS樣式文件。

第三種選擇對用戶體驗更加友好，但是需要開發(fā)和維護不同的多份樣式文件。

響應式設計的定義

技術的發(fā)展，總是為了解決痛點問題或提升效率。為了解決網頁在不同設備布局難題，響應式設計應運而生。

那么，響應式設計的定義是什么，下面取自MDN官網解釋。

響應式 Web 設計不是單獨的技術，它是描述 Web 設計的一種方式、或者是一組最佳實踐的一個詞，它是用來建立可以響應查看內容的設備的樣式的一個詞。

響應式設計實踐

理解了響應式設計的定義，下面和你分享相關實踐技術。

3.1 媒體查詢

響應式設計正是因為媒體查詢才新興起來。媒體查詢在2009年開始被瀏覽器支持，允許我們測試屏幕大于某個寬度或分辨率，并將CSS根據前面屏幕達成的條件，再運用到網頁上。

使用媒體查詢的一種通用方式是，為窄屏設備(如手機)創(chuàng)建一個簡單的單欄布局，然后檢查是否是大于某個尺寸的屏幕，使用多欄布局，這被稱為移動優(yōu)先設計。

舉例如下：

html
<div class="col1">abc</div>
<div class="col2">123</div>

css
// 默認移動設備樣式，此時col1和col2都是div元素，單獨一行，整體為單欄布局。
.col1,
.col2 {
color: #ccc;
}
// 在屏幕寬度大于600px時，col1和col2變?yōu)楦硬季郑覍挾戎蜕儆?00%，為一行兩列布局，即多欄布局。
@media screen and (min-width: 600px) {
.col1 {
width: 30%;
display: float;
}
.col2 {
width: 60%;
display: float;
}
}

3.2 現(xiàn)代布局技術

現(xiàn)代布局方式，多欄布局，F(xiàn)lex彈性布局，Grid網格布局，默認都是響應式的。

多欄布局

多欄布局是現(xiàn)代布局技術里面最古老的，因為flex和grid布局的出現(xiàn)，已經使用的比較少了。

多欄布局有兩個關鍵屬性，一是column-count直接指定分割為多少列，二是column-width定義每列的寬度，由瀏覽器計算能分割多少列。

舉例如下：

.container {
column-count: 3; // 將container里面的空間分為三列
}

Flex彈性布局

隨著IE瀏覽器的下線，flex在主流瀏覽器都得到支持，可以放心使用了。彈性布局的關鍵在于彈性二字，空間多了可以伸長填充，空間少了可以縮小滿足。

使用起來也很簡單，在父元素使用display: flex; 子元素使用flex: 1，1可以根據你希望分配的占比調整為2或3等其他數(shù)值。

結合上方媒體查詢的例子，優(yōu)化float浮動布局為flex布局，舉例如下：

html
<div class="container">
<div class="col1">abc</div>
<div class="col2">123</div>
</div>

css
// 默認移動設備樣式，此時col1和col2都是div元素，單獨一行，整體為單欄布局。
.col1,
.col2 {
color: #ccc;
}
// 在屏幕寬度大于600px時，col1和col2的父元素變?yōu)镕lex布局，col1占1/3，col2占2/3，即多欄布局。
@media screen and (min-width: 600px) {
.container {
display: flex;
}
.col1 {
flex: 1;
}
.col2 {
flex: 2;
}
}

Grid網格布局

網格布局正如名字所說，允許你按網格的方式排列元素，規(guī)劃好網格的行和列，然后將元素放置到對應格子中。簡單用法是定義父元素display: grid;聲明為網格布局，然后還是在父元素定義列grid-template-columns: 1fr 2fr;則表明有兩列，第一列占用1份可用空間，第二列占用兩份可用空間。

結合上方flex布局的例子，使用grid網格布局進一步精簡優(yōu)化，舉例如下：

html部分不變，css部分優(yōu)化媒體查詢里面的css樣式，只需要定義父元素的樣式，子元素col的樣式可以移除

@media screen and (min-width: 600px) {
.container {
display: grid;
grid-template-columns: 1fr 2fr;
}
}

3.3 響應式圖像

對圖片的響應式設計，可能你會想到在媒體查詢中，根據media條件動態(tài)替換class樣式圖片的背景圖地址，這是一種思路?，F(xiàn)在我們有更多的選擇，可以直接對圖片進行響應式聲明，使用<picture>和<img>元素的srcset和size屬性就可以實現(xiàn)。

<img
srcset="elva-fairy-480w.jpg 480w, elva-fairy-800w.jpg 800w"
sizes="(max-width: 600px) 480px, 800px"
src="elva-fairy-800w.jpg"/>

srcset定義了不同分辨率的圖片，sizes定義了不同媒體條件下適配的分辨率，從而使用最近分辨率的圖片進行展示。

詳細用法可以到MDN官網進行學習。

3.4 響應式排版

使用媒體查詢，根據不同條件，調整字體的大小。比如在移動設備字體為2rem，大屏幕下字體可以大些，為4rem。

h1 {
font-size: 2rem; // 移動優(yōu)先，默認2rem
}
@media (min-width: 1200px) {
h1 {
font-size: 4rem; // 大于1200px屏幕字體為4rem
}
}

還可以使用視口單位實現(xiàn)響應式排版，因為視口單位即為當前屏幕可視范圍的百分比單位，這是更有趣的排版方式。

3.5 視口元標簽

有時候移動設備加載網頁，默認寬度不一定是設備寬度，所以需要使用meta元標簽，在html頭部明確告知瀏覽器使用設備寬度

<meta
name="viewport" content="width=device-width,initial-scale=1">

以上就是和大家分享的響應式設計，希望對你設計網頁有所幫助。

互相學習，共同成長，喜歡的朋友可以點贊收藏加關注哦！

tml5中常用的結構標簽

article 文章

header 頭部

nav 導航

section 區(qū)域

aside 側邊欄

hgroup 區(qū)塊的相關信息

figure 定義一組內容及標題

figcaption 定義figure元素的標題

footer 底部

dialog 對話框

使用習慣：

header/section/footer > aside/article/figure/hgroup/nav > div

embed可插入flash文件，但flash已經逐漸被淘汰，不建議使用

meter狀態(tài)標簽，可以定義電壓

optimum是標準狀態(tài)

low與high之間呈現(xiàn)綠色，其余呈現(xiàn)黃色

<meter value=”220” min=”20” max=”380” low=”200” high=”240” optimum=”220”></meter>

自動計算百分比

<meter value="0.75">75%</meter>

有步長的進度條

<progress value="30" max="100"></progress>

不斷加載的進度條

<progress max="100"></progress>

datalist為input定義下拉列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
</head>
<body>
    <input placeholder="請選擇手機品牌" list="phoneList">
    <datalist id="phoneList">
        <option value="iphone">iphone</option>
        <option value="samsung">samsung</option>
        <option value="huawei">huawei</option>
        <option value="oppo">oppo</option>
        <option value="htc">htc</option>
    </datalist>
</body>
</html>

details定義元素的詳細內容，配合summary

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
</head>
<body>
    <details>
        <summary>HTML5</summary>
        <p>HTML5是構建Web內容的一種語言描述方式。HTML5是互聯(lián)網的下一代標準，是構建以及呈現(xiàn)互聯(lián)網內容的一種語言方式．被認為是互聯(lián)網的核心技術之一。HTML產生于1990年，1997年HTML4成為互聯(lián)網標準，并廣泛應用于互聯(lián)網應用的開發(fā)。
HTML5是Web中核心語言HTML的規(guī)范，用戶使用任何手段進行網頁瀏覽時看到的內容原本都是HTML格式的，在瀏覽器中通過一些技術處理將其轉換成為了可識別的信息。HTML5在從前HTML4.01的基礎上進行了一定的改進，雖然技術人員在開發(fā)過程中可能不會將這些新技術投入應用，但是對于該種技術的新特性，網站開發(fā)技術人員是必須要有所了解的。 [1-2] </p>
    </details>
</body>
</html>

ruby和rt進行拼音的注釋

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
</head>
<body>
    我們來<ruby>夼<rt>kuang</rt></ruby>一個話題
</body>
</html>

兼容瀏覽器的寫法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
</head>
<body>
    我們來<ruby>夼<rp>(</rp><rt>Kuang</rt><rp>)</rp></ruby>一個話題
</body>
</html>

mark黃色選中效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
</head>
<body>
    <p>媽媽叫我回家的時候順路買一盒<mark>牛奶</mark>，需要很新鮮的那種。</p>
</body>
</html>

output表單計算

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
</head>
<body>
    <form oninput="sum.value=parseInt(num1.value)*parseInt(num2.value)">
        <input type="number" id="num1">*
        <input type="number" id="num2">=
        <output name="sum" for="num1 num2"></output>
    </form>
</body>
</html>

date pickers在移動端效果比較好

week兼容性不好

datetime兼容性不好，推薦用datetime-local

time用來設置時間（小時和分鐘）；

month用來設置年和月；

date用來設置年月日；

datetime用來設置年月日和時間；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
</head>
<body>
    email:<input type="email" name="email"><br>
    url:<input type="url" name="url"><br>
    tel:<input type="tel" name="tel"><br>
    number:<input type="number" name="number"><br>

    date:<input type="date" name="date"><br>
    month:<input type="month" name="month"><br>
    week:<input type="week" name="week"><br>
    time:<input type="time" name="time"><br>
    datetime:<input type="datetime" name="datetime"><br>
    datetime-local:<input type="datetime-local" name="datetime-local"><br>

    range:<input type="range" name="range" min="1" max="10"><br>
    search:<input type="search" name="search"><br>
    color:<input type="color" name="color"><br>

</body>
</html>

autocomplete屬性規(guī)定form或input域擁有自動完成功能，該屬性適用于<form>標簽和<input>標簽

autofocus自動獲取焦點

multiple多選，適用于email和file，email中不同郵箱用,隔開

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
</head>
<body>
    <form action="lesson2_1 autocomplete.html" autocomplete="on">
        <input type="text" name="text" autofocus="autofocus" placeholder="您好，請在這里輸入您的用戶名！"><br>
        <input type="email" name="email" autocomplete="off" multiple="multiple"><br>
        <input type="file" name="file" multiple="multiple"><br>
        <input type="submit">
    </form>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <link rel="icon" href="icon.gif" type="image/gif" sizes="16x16">
    <base href="http://localhost" target="_blank">
</head>
<body>
</body>
</html>

script:

defer 頁面已完成加載后再執(zhí)行腳本

async 一旦腳本可用，則異步執(zhí)行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <script async="async" type="text/javascript" src="async.js"></script>
    <script defer="defer" type="text/javascript" src="defer.js"></script>
</head>
<body>
</body>
</html>

ol有序列表倒序

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ol</title>
</head>
<body>
<ol start="2" reversed="reversed">
    <li>Html</li>
    <li>Html5</li>
    <li>Css</li>
    <li>Css3</li>
    <li>JavaScript</li>
</ol>
</body>
</html>

html頁面布局demo:

demo.html
----------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>html5</title>
<link rel="stylesheet" href="style.css">
</head>
<body>

    <header>
        <div class="container">
            <a href="index.html"><img src="images/logo.png"></a>
            <nav>
                <a class="active" href="index.html">Home</a>
                <a href="#">Course</a>
                <a href="#">Actual</a>
                <a href="#">Plan</a>
                <a href="#">FAQ</a>
                <a href="#">Notes</a>
            </nav>
        </div>
    </header>
    <section class="banner">
        <ul>
            <li class="active"><img src="images/banner/banner1.jpg"></li>
            <li class="left"><img src="images/banner/banner3.jpg"></li>
            <li class="right"><img src="images/banner/banner2.jpg"></li>
        </ul>
    </section>
    <section class="main">
        <aside>
            <h1>Recent <samp>Course</samp></h1>
            <dl>
                <dt>Hyper Text Markup Language</dt>
                <dd><img src="images/Course/05_05.png"></dd>
                <dd>HTML is the standard markup language used to create web pages and its elements form the building blocks of all websites.</dd>
            </dl>
            <dl>
                <dt>Cascading Style Sheets</dt>
                <dd><img src="images/Course/06_04.png"></dd>
                <dd>Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g., fonts, colors, spacing) to Web documents.</dd>
            </dl>
            <dl>
                <dt>JavaScript</dt>
                <dd><img src="images/Course/09_07.png"></dd>
                <dd>JavaScript is a high-level, dynamic, untyped, and interpreted programming language.</dd>
            </dl>
            <dl>
                <dt>AngularJS</dt>
                <dd><img src="images/Course/02_09.png"></dd>
                <dd>AngularJS is an open-source web application framework mainly maintained by Google and by a community of individuals and...</dd>
            </dl>
        </aside>
        <article>
            <h1>Welcome to <samp>Massive Open Online Course!</samp></h1>
            <p>We provide the latest knowledge to help you cope with the changing world!</p>
            <img src="images/article.jpg">
            <p>We hope that all the students who love the Internet can be more convenient access to learning resources, using the Internet thinking to change our learning.</p>
            <p>Focus on IT skills education MOOC, consistent with the development trend of the Internet down to earth's MOOC. We are free, we only teach useful, we concentrate on education.</p>
        </article>
    </section>
    <footer>
        <div class="container">
            <p>Copyright ? 2019 test.com All Rights Reserved.</p>
            <span>
                <img src="images/icon/weichat.png">
                <img src="images/icon/sina.png">
                <img src="images/icon/qq.png">
            </span>
        </div>
    </footer>
</body>
</html>

style.css
------------------------------------------

/* All tag */
* { font-family: Arial; font-size: 14px; margin: 0; padding: 0; border: none; }
a { text-decoration: none; }
ul { list-style: none; }

/* header */
header { position: relative; height: 80px; background: #000; }
header:after { position: absolute; bottom: 0; left: 0; width: 100%; height: 7px; content: ''; background: #d6d6d6; }
header > .container { position: relative; z-index: 1; width: 1200px; margin: 0 auto; }
header > .container > a { display: block; float: left; margin: 5px 25px; }
header > .container > nav { float: right; }

/* nav */
nav > a { font-size: 24px; line-height: 73px; display: block; float: left; width: 110px; height: 73px; text-align: center; color: #fff; }
nav > a:nth-child(1) { background: #433b90; }
nav > a:nth-child(2) { background: #017fcb; }
nav > a:nth-child(3) { background: #78b917; }
nav > a:nth-child(4) { background: #feb800; }
nav > a:nth-child(5) { background: #f27c01; }
nav > a:nth-child(6) { background: #d40112; }
nav > a:hover,
nav > a.active { padding-bottom: 7px; }

/* banner */
.banner { position: relative; background: #eaeaea; }
.banner:after { position: absolute; bottom: 0; left: 0; width: 100%; height: 6px; content: ''; background: #d6d6d6; }
.banner > ul { position: relative; width: 1490px; height: 538px; margin: 0 auto; padding-top: 10px; }
.banner > ul > li { position: absolute; width: 610px; height: 300px; overflow: hidden; }
.banner > ul > li.active { z-index: 2; top: 37px; right: 0; left: 0; width: 960px; height: 460px; margin: auto; border: 1px solid #fff; box-shadow: 0 30px 140px 22px rgba(0, 0, 0, .35); }
.banner > ul > li.left { z-index: 1; top: 0; bottom: 0; left: 0; margin: auto; box-shadow: 0 3px 7px 0 rgba(0, 0, 0, .35); }
.banner > ul > li.right { z-index: 1; top: 0; right: 0; bottom: 0; margin: auto; box-shadow: 0 3px 7px 0 rgba(0, 0, 0, .35); }
.banner > ul > li > img { position: absolute; left: -30%; height: 100%; }

/* main */
.main { position: relative; width: 1200px; height: 473px; margin: 34px auto 0; }
.main h1 { font-size: 30px; font-weight: lighter; margin-bottom: 23px; }
.main h1 > samp { font-size: 30px; color: #7c7c7c; }
.main > aside { float: left; width: 450px; }
.main > aside > dl { position: relative; display: block; height: 74px; margin-bottom: 17px; }
.main > aside > dl > dt { position: absolute; top: -1px; left: 92px; font-size: 16px; font-weight: bold; line-height: 16px; text-decoration: underline; }
.main > aside > dl > dd:first-of-type { position: absolute; left: 0; }
.main > aside > dl > dd:last-of-type { position: absolute; top: 20px; left: 90px; }
.main > article { float: right; width: 720px; overflow: hidden; }
.main > article > p,
.main > article > img { margin-bottom: 20px; }

/* footer */
footer { position: relative; background: #000; }
footer:before { position: absolute; z-index: -1; top: -6px; left: 0; width: 100%; height: 6px; content: ''; background: #d6d6d6; }
footer > .container { width: 1200px; height: 64px; margin: 0 auto; }
footer > .container > p { line-height: 64px; float: left; color: #fff; }
footer > .container > span { float: right; margin: 14px 40px; }
footer > .container > span > img { margin-left: 4px; opacity: .7; }
footer > .container > span > img:hover { opacity: 1; cursor: pointer; }

html頁面布局demo2:

在線咨詢

上一篇：html5重力感應剖析附源碼
下一篇：JavaScript代碼怎樣引入到HTML中？

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯(lián)系。

整合營銷服務商

前端圖片優(yōu)化

言

圖片壓縮

Progressive JPEG VS Baseline JPEG

WebP

oimg

響應式圖片

picture 標簽

動態(tài)內容

動態(tài)格式

動態(tài)尺寸

動態(tài)分辨率

最后

原始的布局方式

響應式設計的定義

響應式設計實踐

您的項目需求