《无懈可击的Web设计》读书笔记
第一次看完后忘记的差不多，印象比较深的是第4章中的布局案例，以及可扩展的圆角组件。
再次翻看后对书的内容有了清晰的了解，正如封面所说的那样—利用HTML和CSS提高网站的灵活性和适应性。
架构
由页面重要组成部分文字开始，从一个个组件展开，最后构成一个整体。
可以说前几章的学习为最后一章做铺垫，如果前面的章节都愉快的读了，最后一张相当于复习，这也是自己看的最快的一章。
中心思想
视觉效果的灵活性和不同环境的完整性
灵活性：组件能适应任何大小与数量的内容
适应性：确保页面在不同状况下的完整性
架构可以通过看大纲看前言了解到，中心思想则必须了解整书的内容之后结论出来，或者作者早已抛出来，等你一个个案例写完后，达成的共识。
《无》的核心起先我是没有猜透的，以前像大纲那样，主讲实战，但当看完整本书，有了自己的思考后，再回头翻书和看笔记，懂得了书的灵魂，至少了解它了。
阅读建议
前言、目录；
按序看每章的小结；
最后一章节；
细看每个章节的内容；
每章都有一个例子，看完后进行练习。
每章的重点和精华会在小结当中简短复述，最后一章是所有章节的一个大总结（BIG BOSS，韩国欧巴宋仲基！乱入了！只发一张照片不够不够的）
为什么要无懈可击
避免：
堆积如山的代码；
不方便使用（屏幕阅读软件）；
可伸缩性的问题；
缺乏灵活性；
非必要的图片；
固定的行高；
臃肿的代码；
而表格布局最主要的问题：
同样大量的代码和噩梦般的维护工作；
并非最佳的内容排序。
以前相应业务场景解决方案
滑动人造栏 ：平铺1像素的背景图片实现
阴影：增加一个空DIV设置位置偏移
自适应盒子的gutter：用百分比给内部的对象设置留白；要做的更精确需要增加额外的DIV
实用小知识
没有图片的情况下可读：为设计中的每个背景图片设置相同或相近的背景色，禁用图和连接速度慢也能够浏览页面
表格应用场景：财政金融、统计、信息对比等需要程序数据时
布局设置min-width和max-width，防止布局尺寸过大或过小
贴出练习
可伸缩的导航：图中导航是访作者使用1像素的背景平铺做的效果；最后一个案例主要是运用em设置padding实现；选项卡非书中案例，主要通过box-sizing:border-box实现。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>demo</title> 6 <style type="text/css"> 7 *{ 8 padding:0; 9 margin:0; 10 } 11 h2{ 12 padding: 20px; 13 } 14 li{ 15 list-style: none; 16 } 17 .clearfix:after{ 18 content: '.'; 19 clear: both; 20 display: block; 21 height: 0; 22 visibility:hidden; 23 } 24 .nav{ 25 padding: 10px 0 0 46px; 26 background:#ce9336 url(images/line.png) repeat-x bottom left; 27 } 28 .nav li{ 29 float: left; 30 margin: 0 1px 0 0; 31 padding: 0; 32 font-size: 80%; 33 } 34 .nav a{ 35 display: block; 36 padding: 4px 8px; 37 color: #333; 38 text-decoration: none; 39 border: 1px solid #666; 40 border-bottom: 1px solid black; 41 background: #dbbb8f; 42 } 43 .nav a:hover,.t-intro a{ 44 color: #333; 45 padding-bottom: 5px; 46 border-color:#666; 47 background: white; 48 border:1px solid #333; 49 border-bottom: 0; 50 } 51 .tab { 52 background: #ce9336; 53 color: #81530b; 54 border-left: 1px solid #dda650; 55 } 56 .tab li{ 57 width: 25%; 58 height: 24px; 59 line-height: 24px; 60 border:1px solid #dda650; 61 border-left: 0; 62 background: #f3d8ad; 63 text-align: center; 64 float: left; 65 -moz-box-sizing:border-box; 66 box-sizing:border-box; 67 } 68 .tab li:hover,li.active{ 69 background: white; 70 border-top:1px solid #ce9336; 71 border-bottom: 1px solid white; 72 } 73 .tab-auto { 74 background: #666; 75 color: #666; 76 border-left: 1px solid #999; 77 } 78 .tab-auto li{ 79 padding: 0.5em 1em; 80 font-size: 1.5em; 81 border:1px solid #999; 82 border-left: 0; 83 background: #ccc; 84 text-align: center; 85 float: left; 86 -moz-box-sizing:border-box; 87 box-sizing:border-box; 88 } 89 .tab-auto li:hover,li.active{ 90 background: white; 91 border-top:1px solid #999; 92 border-bottom: 1px solid white; 93 } 94 </style> 95 </head> 96 <body> 97 <h2>导航</h2> 98 <div class="nav clearfix"> 99 <ul> 100 <li class="t-intro"><a href="/">Introduction</a></li> 101 <li><a href="about.html">About Lance</a></li> 102 <li><a href="news.html">News & Events</a></li> 103 <li><a href="sponsors.html">Sponsors</a></li> 104 </ul> 105 </div> 106 <h2>tab选项卡</h2> 107 <div class="tab clearfix"> 108 <ul> 109 <li>1</li> 110 <li class="active">2</li> 111 <li>3</li> 112 <li>4</li> 113 </ul> 114 </div> 115 <h2>根据字体大小字适应</h2> 116 <div class="tab-auto clearfix"> 117 <ul> 118 <li>1</li> 119 <li class="active">2</li> 120 <li>3</li> 121 <li>4</li> 122 </ul> 123 </div> 124 </body> 125 </html>
可扩展的行：写这个效果主要原因是想试试以前用图片做圆角的方法以及配色好看哈哈（我看的是第二版电子版，彩印，实体书第三版无彩印）
定义列表的实用场景：内容换成我的徒步生动了很多~
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>我的徒步</title> 6 <style type="text/css"> 7 body{ 8 color: white; 9 background: url(http://qzonestyle.gtimg.cn/qzone/qzactStatics/imgs/20160523151334_5ad09c.jpg) no-repeat; 10 line-height: 24px; 11 } 12 img{ 13 display: block; 14 } 15 dl{ 16 width: 500px; 17 padding:10px; 18 } 19 dd{ 20 margin: 0 0 0 110px; 21 } 22 dt{ 23 float: right; 24 font-size: 1.6rem; 25 width:390px; 26 padding: 0 0 10px 0; 27 } 28 .img{ 29 float: left; 30 padding: 2px; 31 margin: 0; 32 border: 1px solid #ccc; 33 } 34 .clearfix:after{ 35 content:','; 36 display: block; 37 clear:both; 38 visibility:hidden; 39 height: 0; 40 } 41 .alt .img{ 42 float: right; 43 margin: 0; /*因为对DD设置了margin*/ 44 } 45 .alt dt{ 46 float: left; 47 } 48 .alt dd{ 49 margin: 0 110px 0 0; 50 } 51 dl.alt{ 52 background: rgba(225,225,225,0.3); 53 } 54 </style> 55 </head> 56 <body> 57 <div class="beijing"> 58 <dl class="clearfix"> 59 <dt>露营</dt> 60 <dd class="img"><img src="http://b343.photo.store.qq.com/psb?/V136qJ2q1HJ65e/HLVrvpdvnstQGnKeks*KzeYT0sA7YRad8QZNljvgESE!/b/dFcBAAAAAAAA&bo=AAXAAwAAAAAFB.I!&rf=viewer_4" width="90" /></dd> 61 <dd> 62 结满冰的溪上扎营，下了一夜的雪，夜很静，听到簌簌的下雪声。早晨，账内-13度，账外-19度，当第一缕阳光照在身上的时候，驱赶了雪夜的寒冷驱赶了疲惫 63 64 </dd> 65 </dl> 66 <dl class="clearfix alt"> 67 <dt>冬夏</dt> 68 <dd class="img"><img src="http://qzonestyle.gtimg.cn/qzone/qzactStatics/imgs/20160523151334_5ad09c.jpg" width="90" /></dd> 69 <dd> 70 万物萧条，一片沉寂的冬天 绿树浓荫，生机勃勃的夏天 无间冬夏·青山恒至每一次远行 71 </dd> 72 </dl> 73 <dl class="clearfix"> 74 <dt>啤酒溪-海坨</dt> 75 <dd class="img"><img src="http://b344.photo.store.qq.com/psb?/V136qJ2q1HJ65e/E0AkiIf5O7FrLxDprQGk30neW81MvSTtygiLnsGVeO0!/b/dFgBAAAAAAAA&bo=wAMABQAAAAAFB.I!&rf=viewer_4" width="90" /></dd> 76 <dd> 77 冬季的海坨，雪中徒步，日落日出间，狂风呼啸，从未停歇，白桦树挺立高山，静静的仰望着它，敬佩之心油然而生，顽强的生命。量力而行，量力而为…… 78 </dd> 79 </dl> 80 </div> 81 </body> 82 </html>
第三版新增CSS3内容
rem单位，没有嵌套层级对值的影响，只需根据根元素指定大小。
background:linear-gradient(top,rgba(0,0,0,1) 0%,rgba(230,1,2,1) 100%); 线性渐变
border-radius 圆角
box-shadow:1px 1px 1px rgba(0,0,0,.12) 阴影
:nth-child 实现交替行背景色
box-sizing:border-box; 可精确设置固定的gutter
column-count:2; 多栏布局
@media screen and (max-width:320px){} 媒体查询
无懈可击的工具
火狐插件 Web Developer Extension
HTML代码验证器 https://validator.w3.org/
CSS 代码验证器 http://jigsaw.w3.org/css-validator/
显示环境之那些特殊设备有兴趣的请跳转
最近工作、学习和技术分享交流中，让我学会了思考，不仅仅是知道答案，还要清楚答案背后的原因，知其然知其所以然。
带着这种思考，也让我与看《CSS网站布局实录》有个明显的区别，会问自己为什么？然后再从书中一一找答案。
如：
为什么作者会把文字的无懈可击放在第一章
作者当时的无懈可击方案，如果是我我会怎么做（当然这点绝对不是本书重点讨论的话题，此书12年出的第三版，现16年，技术更新很快，解决方法也更多。个人认为读此书的最好的收获就是，思考如何让我们的页面更有灵活性和适应性，做更好的保护）
