前端图片优化

言

图片是大部分网页的重要组成部分，一般情况下，我们不会太关注这方面的问题，需要显示图片直接一个 img 标签搞定。但实际上，无论是对于提高加载速度，还是对于优化用户体验，优化图片都是一个重要的手段。

图片优化分成两个方面：

第一，图片压缩。在保证视觉效果的情况下，减少图片的体积。这个很有效，1M 和 100K 的图片，肉眼看起来几乎差不多，但却省了 90% 的流量，大大提高了加载速度。

第二，响应式图片。根据客户端的情况，选择最合适的图片返回给用户。用户是一个 500px 的设备，那么返回 1000px 的图给他就是浪费（假设物理像素和 CSS 像素是一比一）。

我们先来看图片压缩。

图片压缩

压缩的第一步是筛选出需要压缩的图片。如果图片本身就已经足够小了，那么再压缩的意义就不大。

我一般使用如下的脚本筛选项目中需要压缩的图片。脚本会列出所有的图片并根据尺寸降序排列。

筛选出需要压缩的图片以后，接下来就是压缩、比对、调整参数。图片压缩的工具实在是太多了，Google image compression tool 选择会多得你眼花缭乱。

这里顺口提一下 Google 出品的 squoosh 在线图片压缩服务，看起来不错，虽然我没怎么用过。

这里我选择使用 imagemin，相比于一些在线工具或者 App，自己写脚本更灵活一些。

程序很简单，分别针对 JPG、PNG、SVG 加载相应的插件就好。

注意，quality 参数需要自己测试去确定，怎样在质量和尺寸中权衡，每个团队有自己的标准。

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 压缩
最后，肉眼对比一下原图片和压缩图片，如果没有问题，替换就好
如果效果不满意，调整参数，再压缩

这个过程没法完全自动化，因为压缩过后的图片究竟在视觉上能不能替换原图，这个过程需要人来判别，全部交给机器是不太放心的。毕竟只有在保证质量的情况下减小体积才有意义。

oimg 的输出如下，可以很方便地看出压缩的效果如何。

oimg

响应式图片

图片压缩的问题解决完了，现在我们来看看响应式图片。

所谓响应式图片，关键就一点：根据客户端的情况返回最适合客户端的图片。

那么，可能会存在哪些情况？在准备部署响应式图片的时候，我们可以问自己如下四个问题。

是否希望根据客户端情况返回不同的图片内容?
是否希望根据客户端情况返回不同的图片格式？
是否希望根据客户端情况返回不同的图片尺寸？
是否希望优化高 分辨率 设备的体验？

在 picture 标签出来之前，这些只能通过 JS 来实现，不仅代码而且丑陋能力也不全。但是现在，针对这些问题，我们有了一个完整的优雅的解决方案。

picture 标签

picture 是 HTML5 新引入的标签，基本用法如下。

我们可以这样理解，picture 标签会从 source 中选择最合适的一个，然后将它的 URL 赋值给 img。对于不认识 picture 的旧浏览器，他们会忽略 picture，只渲染 img，一切都不会有问题。

注意：picture 标签最后一定要包含一个 img 标签，否则，什么都不会显示。

现在我们逐一来看 picture 怎样解决上面的四个问题。

动态内容

根据客户端的情况，我们来返回完全不同的两张图。这个很简单，使用 source 标签的 media 属性即可。

如下代码会在小于 1024px 的时候显示 img-center.jpg，而在大于等于 1024px 的时候显示 img-full.jpg。

动态格式

这个问题也很简单，使用 source 标签的 type 属性即可。

如下代码会在支持 WebP 的浏览器上使用 img.webp，在不支持 WebP 的浏览器上使用 img.jpg。

动态尺寸

如果希望浏览器能根据情况去请求不同尺寸的图片，我们需要提供两个信息：

有哪些尺寸的图片
图片显示的时候是什么尺寸

下面的代码中，我们首先使用 srcset 属性指定有哪些图片，分别是图片名和图片的尺寸，这里注意单位不用 px 而是 w，用于表示图片的固有宽度。

sizes 属性告诉浏览器，这个图片在不同的条件下会是什么样的宽度。这个属性用于给到浏览器提示，并不会真正的指定 img 的宽度，我们还是需要另外使用 CSS 来指定。

这样，给定一个视口宽度，浏览器可以得知图片需要的宽度，然后根据 DPI 情况，在所有可选图片中选择最合适的一个。

动态分辨率

动态分辨率其实是动态尺寸的一种简化情况。

根据显示器的 DPI 返回同一张图片的不同分辨率版本可以直接利用 img 标签的 srcset 属性。

使用了如下的代码，浏览器会自动根据显示器的 DPI 来决定下载图片的哪个版本。

在低 DPI 设备上，例如桌面显示器，浏览器会使用 img-200.jpg，而在高 DPI 设备上，例如手机，浏览器会使用 img-400.jpg。

当然，我们也可以组合这几个选项。

如下的代码会

视口 >= 1280px 时
根据视口的具体宽度，返回不同尺寸的 img-full 图片
如果客户端支持 WebP，返回 WebP 格式
视口 < 1280px 时
根据视口的具体宽度，返回不同尺寸的 img 图片
如果客户端支持 WebP，返回 WebP 格式

这里强烈建议自己动手，结合 placeholder.com 网站，生成一些图片来测试，毕竟，纸上得来终觉浅。

最后

文章很棒,点个赞吧!

应式网页设计，通俗的说，就是适配电脑，平板，手机等不同设备的屏幕，对布局和外观进行合适的调整，以达到同一网页在不同设备，也有更好的用户体验。

为了达到这一体验，联想到的技术便是媒体查询。但响应式设计，并不是单独的媒体查询技术，而是一种Web设计方式，是由一系列技术组成的最佳实践。

下面会从两个方面和大家分享响应式设计。

1 原始的布局方式

2 响应式设计的定义

3 响应式设计实践

原始的布局方式

在响应式设计前，早期网站有两种选择。

一是创建“液态”网页，以百分比拉伸，充满浏览器屏幕。但这种方式在小屏幕上，因为小屏宽度小，百分比计算后每一列都很小，会挤成一团。

二是“固定宽度”网页，以像素计的固定尺寸。在小屏幕上，也会由于固定宽度超过屏幕宽度而出现横向滚动条。

后来还有第三种选择，即通过JavaScript检测屏幕分辨率，加载恰当的CSS样式文件。

第三种选择对用户体验更加友好，但是需要开发和维护不同的多份样式文件。

响应式设计的定义

技术的发展，总是为了解决痛点问题或提升效率。为了解决网页在不同设备布局难题，响应式设计应运而生。

那么，响应式设计的定义是什么，下面取自MDN官网解释。

响应式 Web 设计不是单独的技术，它是描述 Web 设计的一种方式、或者是一组最佳实践的一个词，它是用来建立可以响应查看内容的设备的样式的一个词。

响应式设计实践

理解了响应式设计的定义，下面和你分享相关实践技术。

3.1 媒体查询

响应式设计正是因为媒体查询才新兴起来。媒体查询在2009年开始被浏览器支持，允许我们测试屏幕大于某个宽度或分辨率，并将CSS根据前面屏幕达成的条件，再运用到网页上。

使用媒体查询的一种通用方式是，为窄屏设备(如手机)创建一个简单的单栏布局，然后检查是否是大于某个尺寸的屏幕，使用多栏布局，这被称为移动优先设计。

举例如下：

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

css
// 默认移动设备样式，此时col1和col2都是div元素，单独一行，整体为单栏布局。
.col1,
.col2 {
color: #ccc;
}
// 在屏幕宽度大于600px时，col1和col2变为浮动布局，且宽度之和少于100%，为一行两列布局，即多栏布局。
@media screen and (min-width: 600px) {
.col1 {
width: 30%;
display: float;
}
.col2 {
width: 60%;
display: float;
}
}

3.2 现代布局技术

现代布局方式，多栏布局，Flex弹性布局，Grid网格布局，默认都是响应式的。

多栏布局

多栏布局是现代布局技术里面最古老的，因为flex和grid布局的出现，已经使用的比较少了。

多栏布局有两个关键属性，一是column-count直接指定分割为多少列，二是column-width定义每列的宽度，由浏览器计算能分割多少列。

举例如下：

.container {
column-count: 3; // 将container里面的空间分为三列
}

Flex弹性布局

随着IE浏览器的下线，flex在主流浏览器都得到支持，可以放心使用了。弹性布局的关键在于弹性二字，空间多了可以伸长填充，空间少了可以缩小满足。

使用起来也很简单，在父元素使用display: flex; 子元素使用flex: 1，1可以根据你希望分配的占比调整为2或3等其他数值。

结合上方媒体查询的例子，优化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的父元素变为Flex布局，col1占1/3，col2占2/3，即多栏布局。
@media screen and (min-width: 600px) {
.container {
display: flex;
}
.col1 {
flex: 1;
}
.col2 {
flex: 2;
}
}

Grid网格布局

网格布局正如名字所说，允许你按网格的方式排列元素，规划好网格的行和列，然后将元素放置到对应格子中。简单用法是定义父元素display: grid;声明为网格布局，然后还是在父元素定义列grid-template-columns: 1fr 2fr;则表明有两列，第一列占用1份可用空间，第二列占用两份可用空间。

结合上方flex布局的例子，使用grid网格布局进一步精简优化，举例如下：

html部分不变，css部分优化媒体查询里面的css样式，只需要定义父元素的样式，子元素col的样式可以移除

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

3.3 响应式图像

对图片的响应式设计，可能你会想到在媒体查询中，根据media条件动态替换class样式图片的背景图地址，这是一种思路。现在我们有更多的选择，可以直接对图片进行响应式声明，使用<picture>和<img>元素的srcset和size属性就可以实现。

<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; // 移动优先，默认2rem
}
@media (min-width: 1200px) {
h1 {
font-size: 4rem; // 大于1200px屏幕字体为4rem
}
}

还可以使用视口单位实现响应式排版，因为视口单位即为当前屏幕可视范围的百分比单位，这是更有趣的排版方式。

3.5 视口元标签

有时候移动设备加载网页，默认宽度不一定是设备宽度，所以需要使用meta元标签，在html头部明确告知浏览器使用设备宽度

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

以上就是和大家分享的响应式设计，希望对你设计网页有所帮助。

互相学习，共同成长，喜欢的朋友可以点赞收藏加关注哦！

tml5中常用的结构标签

article 文章

header 头部

nav 导航

section 区域

aside 侧边栏

hgroup 区块的相关信息

figure 定义一组内容及标题

figcaption 定义figure元素的标题

footer 底部

dialog 对话框

使用习惯：

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

embed可插入flash文件，但flash已经逐渐被淘汰，不建议使用

meter状态标签，可以定义电压

optimum是标准状态

low与high之间呈现绿色，其余呈现黄色

<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是互联网的下一代标准，是构建以及呈现互联网内容的一种语言方式．被认为是互联网的核心技术之一。HTML产生于1990年，1997年HTML4成为互联网标准，并广泛应用于互联网应用的开发。
HTML5是Web中核心语言HTML的规范，用户使用任何手段进行网页浏览时看到的内容原本都是HTML格式的，在浏览器中通过一些技术处理将其转换成为了可识别的信息。HTML5在从前HTML4.01的基础上进行了一定的改进，虽然技术人员在开发过程中可能不会将这些新技术投入应用，但是对于该种技术的新特性，网站开发技术人员是必须要有所了解的。 [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属性规定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 页面已完成加载后再执行脚本

async 一旦脚本可用，则异步执行

<!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小时内与您取得联系。

整合营销服务商

前端图片优化

言

图片压缩

Progressive JPEG VS Baseline JPEG

WebP

oimg

响应式图片

picture 标签

动态内容

动态格式

动态尺寸

动态分辨率

最后

原始的布局方式

响应式设计的定义

响应式设计实践

您的项目需求