第七章 为网页创建图像
12bet,记得压缩图像和使用gzip。不要使用gzip压缩图像，仅使用其压缩文本相关内容。压缩图像使用图像本身的压缩方案，否则图像不一定会减小，反而会增大
12bet,剩下全是Illustrator和Photoshop的教程，囧
第八章 透明度和阴影
- gif中的透明度只有两种，一种完全透明，一种完全不透明
- PNG-8中的透明度和gif一样。而PNG-24则拥有254种透明值可以设置。但它显然要比PNG-8大得多
- CSS3中可以设置圆角，
border-radius - CSS3中还可以设置蒙版，使用
-webkit-mask-box-image引入蒙版图片即可 - 12bet,使用opacity设置元素透明度。通过opacity设置为透明或者隐藏起来的子元素或后代元素的透明度要弱于父元素的透明度
- 12bet,颜色可以通过RGBa设置透明度
- 文本阴影用
text-shadow，可以通过叠加来实现3D阴影样式 - 12博体育,老版本IE透明度使用
filter: alpha(opacity=50)这样的方式 - 盒阴影用
box-shadow
第九章 收藏夹图标和移动书签
- 12博体育,除了IE以外，所有的浏览器都支持使用GIF、JPEG和PNG文件作为网页图标。除了IE、FF、Safari之外的浏览器还支持SVG。所以为了照顾IE，推荐使用ICO
- 通过link引入收藏夹图标：
<link rel="shortcut icon" href="https://www.example.com/myicon.ico" /> - 一般书签会定义16×16、24×24、32×32、48×48、64×64等多个版本，选择Logo相对清晰的最小尺寸使用
- 移动书签图标尺寸：
- iPhone 57×57
- iPhone Retina 114×114
- iPad 72×72
- iPad Retina 144×144
- 移动书签和收藏夹图标不易昂，使用PNG而不要使用ICO
- 收藏夹图标命名规则一般为：
sitename-favicon-16×16.ico，移动书签一般命名为apple-touch-icon-72×72.png - 通过meta插入移动书签：
<meta name="apple-mobile-title.png" content="这里放标题"/>，确保标题不要超过12个英文字母（6个汉字）
第十章 列表和图标字体
列表
- 无序列表用
<ul>，有序用<ol>，定义用<dl> - 无序列表
- 默认符号是disc，也就是小圆点，可以修改为圆圈（circle）或正方形（square）
- 也可以使用自定义图片：
list-style-image: url(https://www.liuwanlin.info/files/read_subdomain/designing-web-and-mobile-graphics/your-icon.gif)
- 定义列表：
- dt表示要定义的短语
- dd表示定义描述
- dd和dt都被包裹在dl元素中。一个dl可以包含多组dt和dd
- 有序列表：
- 默认是连续的数字，从1开始
- 可以在ol上设定start属性，设定开始的数字
- 设定CSS的
counter-increment属性，可以手动指定计数器。通过counter-reset可以重置计数器。把它们用在伪元素::before中 - 另外可以设定一些其他的计数规则，比如罗马字母、大写字母等等，修改
list-style-type即可
图标字体
- 字体文件体积很大
- 图标字体是矢量图形，因此在一般的屏幕和Retina中表现一样好
第十一章 图像映射
- 可以通过map为图像做映射，让浏览器知道图像的哪一部分可以点击。图像的usemap属性值需要和map的ID严格对应
<map id="some_map" name="treasure_map">
<area shape="rect" coords="12,34,56,78" href="https://somelink"/>
</map>
<img usemap="https://www.liuwanlin.info/superlin%e7%9a%84%e8%af%bb%e4%b9%a6%e7%ac%94%e8%ae%b0-52/some_map" src="some.png" alt="Treasure Map"/>
- 每一个area表示一个可点击的映射，可以设定其shape表示形状，coords表示坐标，不同的shape对应不同的coords规则
- rect为矩形，coords对应左上和右下点的坐标
- circle为原型，coords对应圆心坐标和半径
- poly为多边形，coords为多边形每个点的坐标
- area尽量添加alt和title，来增加提示和替代
- 如果在响应式中使用，记得调节坐标的值
第十二章 页面布局
- 浮动能够创建流式布局，float属性时元素脱离常规流，从而允许别的聂荣流动或者包裹在它的附近
- 设定了float的元素，它会脱离文档常规流，在当前行尽可能的向左或向右移动
- 设定了float的元素，默认情况下，浏览器会将其当做块级元素进行渲染
- 使用clear清除浮动，设定了clear的元素保证其左边或右边没有浮动元素
- header、footer、nav、aside这些元素进行区块划分
- 浮动元素按照一定顺序放置在div中，如果希望将某个div放置在页面的左栏，那么它必须先标记，这违反了内容和表现分离的原则
- 响应式布局分为流式布局、媒体查询和响应式图片。通过流式布局，将元素设置成比例的宽度，就可以根据渲染时视口的宽度进行浮动了
- 自适应和响应式不同的，自适应倾向于针对不同的断点产生特定的、定制的设计。这些视图常常是适应像桌面、平板电脑和移动设备这样大的物体。响应式设计类似，但它通过流式布局来适应浏览器大小的变化（个人理解不同，自适应只是让网页机械的去能在不同大小的页面上进行显示。而响应式则是根据不同大小的页面实现不同的布局方式）
- 一般情况下，每行66个字符是比较值得参考的
第十三章 响应Web设计中的图像
- 通过img引入的图像，无法根据浏览器视口大小选择图像文件。大屏幕上刚好的图片，在小屏幕上将会很浪费流量
- 不要使用光栅图像，尝试使用其他格式，比如SVG和图标字体，他们都是矢量的，缩放就不影响了。但老版本IE不支持SVG，需要转成光栅图像
- 尽量降低图像大小，不同的图像压缩效果不同，尽量让图像的色调、亮度保持整体一致，这样压缩效果会更好
- 可以通过picture元素加入响应式图像，但目前浏览器基本还不支持
- 通过给img设定srcset，这一属性可以根据浏览器的宽度和屏幕密度来采用自适应图像，但支持依旧不好
- 上面两种方式可以使用polyfill（picturefill）的形式来添加支持，不过这样就依赖JS了
第十四章 对齐图像
- 可以使用
vertical-align来对齐图像和文字，事实上有三条线：基准线（baseline）、下缘线（text-bottom）、上缘线（text-top）。文本坐落于基准线上，设定括号内的值，可以让图像与对应的线对齐 - top和bottom则是顶部和底部对齐。和行盒有关
- middle则是对齐文本的中心点。
- 居中图像有很多种方案
background-size:cover 将背景图像等比缩放到完全覆盖容器，背景图像有可能超出容器，而设置为contain则将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内