【读书笔记】—无懈可击的web设计

心血来潮，准备开始看web方面的各种书籍，首本看完的就是无懈可击了，可能因为他名字和我大爱的游戏符合吧！看的是电子版，需要的朋友可以点击这里下载：pdf书+源代码

文字大小（待考虑）
- 设置font-size：11px，则不能通过ie等浏览器的菜单栏中的文字大小来改变大小，百度可以，很多网站都忽略了这点
  - ie/win的用户不能改变以像素为单位设定的字体大小
- 无懈可击方法一：使用关键字设定
  - font-size：small/medium/large…
    - 他们是相对浏览器的默认字体大小而改变的
      - 由上可见，默认字体为medium大小，small和large都随他变化而变化
      - 缺陷：各浏览器字体默认值不同
- 无懈可击方法二：使用关键字+百分比设定
  - body{font-size:small} h1{font-size:150%}
    - 则h1的字体大小相较于body大了50%
    - 这样设定，只需改一处（body）的css，则整个页面的大小都会相对变大
- 无懈可击方法三：使用关键字+百分比嵌套设定
  - body{font-size:small} div.content{font-size:95%} h1{font-size:150%} <div id=content><h1>…</h1></div>
    - 此处h1的大小为small*95%*150%
    - 注意嵌套设定的计算，最好不要超过两层嵌套
Hack
- IE：*html 来提供专门用于IE的声明
- IE5：(BOX MODEL HACK 框模型hack) and（SBMH） f\ont_size：large—ie5会忽略\，这句不会执行，而其他浏览器仍执行

可变的导航

选用整张图片作为导航的背景虽然美观，但有缺陷
- 造成图片加载速度慢
- 不利于后期文字的变化，需要重新ps，且文字不能放大
无懈可击的方法一：图片使用平铺

无懈可击的方法二：导航栏样式设置

源代码

<div class="nav"><ul><li><a href="#">home</a></li><li><a href="#">content</a></li><li><a href="#">about</a></li><li><a href="#">contact</a></li></ul>
</div>

导航栏浮动

.nav > ul{float:left;  /*内部对象li现在浮动了，无法撑开外围的ul，因为ul无法确定浮动的li的高度，修正这个问题，只要将ul也设为浮动*/width:100%;list-style:none;background:#ffcb2d;margin:0px;padding:5px 0 0 46px;
}
.nav li{float:left;margin:0px;padding:0px;
}

如果设置了浮动（float等属性）需确保后面没有元素，否则需要清楚浮动，clear:left规则

选项卡定型+选项可背景颜色+添加底边：

.nav a{display:block;/*因为a是内联元素，无法设置长宽，他的高度只会与字体本身有关而无法适应block的高度*/color:#f00;text-decoration:none;padding:4px 6px;/*使整个选项卡都能被点击，而不只有a的文字才能被点击*/margin:0px 5px;background:#f9e9a9 url(off_bg.gif) repeat-x top left;border:1px #9b8748 solid;border-bottom:none;}
.nav > ul{    /*modify*/background:#ffcb2d url(nav_bg.gif) repeat-x bottom;  /*显示ffcb2d的背景色 然后是nav_bg的图片 最后是a中的off_bg图片，层层覆盖*/}

悬停变换

.nav a:hover{background:#fff url(on_bg.gif) repeat-x top left;  /*背景色设为白色，使tab栏的灰色融为一体，换个其他颜色就完全不好看了*/border-color:#727377;  /*变换边框的颜色*/padding-bottom:5px;    /*这个很强悍！！最底下后是nav_bg的横图片 往上是白色底色 往上再是半透明的灰色on_bg图片 向下padding5px，则文字距离底部有5px，这5px的空白被原来是什么填充了*/
}

可扩展的行

缺陷：
- 圆角图片的臃肿文件
- 圆角图片只能适应固定的行高，不能变换
- 字体如果放大，就会出现排版错误

无懈可击方法

html代码：需要两个容器，上下各一个

<div id="container"><ul id="register"><li id="reg">Not registered? <a href="#">Register</a> now!</li><li id="find"><a href="#">Find a store</a></li></ul><div id="message"><p><strong>Special this week:</strong> $2 shipping on all orders! <a href="#">LEARN MORE</a></p></div></div>

css基础定位：

*{margin:0px;padding:0px;}
#register{float:left;width:100%;background:#bddb62;list-style:none;}
#register li#reg{float:left;padding:8px 14px;}
#register li#find{float:right;padding:8px 14px;background:url(mag-glass.gif) no-repeat 0 50%;/*0表示水平方向靠左侧，垂直方向居中 相对定位的好处就是不管多高，都能保证垂直居中*/}
#message{clear:both;text-align:center;background:#92b91c;}
#message p{padding:8px 14px;}
#message a{margin:0 0 0 6px;padding:2px 15px;text-decoration:none;}

问题：发现第一行的颜色定义不见了
- 答案：因为li浮动了（上一节提到过），register容器无法撑开浮动的li，解决办法是容器也浮动
```
#register{  /*modify*/float:left;}
```
- 此时又发现问题
  - 答案：css2.0规范提出：一个被浮动的框式组件必须具有明确的宽度值，若没有定义，那宽度仅仅与内容宽度一致
```
#register{       /*modify*/width:100%;}     
```

- - 当浮动一个具有背景色对象内部的对象时，同样也浮动这个对象，即可恢复显示其背景
- 圆角边框：不介绍了，本书的此方法只适合固定宽度的，另寻新方法

巧妙的浮动：

使用定义列表：w3c规定一个定义列表<dt>(define list title)可以包含多个条目<dd>(define list define)

html代码

<div id="sweden"><dl><dt>Stockholm</dt><dd class="img"><img src="gamlastan.jpg" width="80" height="80" alt="Gamla Stan" /></dd><dd>This was taken in Gamla Stan (Old Town) in a large square of amazing buildings.</dd></dl><dl class="alt"><dt>Gamla Uppsala</dt><dd class="img"><img src="uppsala.jpg" width="80" height="80" alt="Gamla Uppsala" /></dd><dd>The first three Swedish kings are buried here, under ancient burial mounds.</dd></dl><dl><dt>Perpetual Sun</dt><dd class="img"><img src="watch.jpg" width="80" height="80" alt="Wristwatch" /></dd><dd>During the summer months, the sun takes forever to go down. This is a good thing.</dd></dl>
</div>

css样式：

*{ margin:0px; padding:0px;}
#sweden{width:300px;background: url(bg.gif) no-repeat top left;padding:10px 0;}
#sweden dl{ padding:0px; margin:10px 20px}
#sweden dt{ font-size: 130%;letter-spacing: 1px;color: #627081;}
#sweden dd{font-size: 85%;
line-height: 1.5em;
color: #666;}
#sweden dd.img{
margin: 0 8px 0 0;
padding: 4px;
border: 1px solid #D9E0E6; float:left;}

- 为了使图片dd与头部dt处于同一水平线，使用反向浮动，使他们位于同一行
  - #sweden dt{ float:right; /*modify*/
    
    /*title右浮动*/}
    
    #sweden dd.img{ float:left;
    
    /*图片左浮动*/}
- 又发现问题，此时<dd>文字跑到了<dt>和图片当中
  - 处理方法：为dt增加宽度，使下面的dd归于原位，此宽度计算：300（sweden）-20*2（padding）-80（img.width）-4*2（img.padding）-8 (img.margin) -1*2(img.border)=162
```
#sweden dt{ width:162px;}    /*modify*/
```
  - 为任意长度dd开路：若dd太长或太短都有问题（下个<dl>位于前个<dl>图片旁边）
    - 解决方法：清除浮动
      - 不要用clear属性，这在xhtml中不符合规范
      - 设置一个浮动属性来解决一个浮动问题，原理就是如果外框本身就浮动，他会适应内框的浮动宽度
        #sweden{ float:left;} /*modify*/ #sweden dl{ float:left;} /*modify*/
    - IE下双倍margin
      - 当为浮动对象设置margin时，会有双倍margin
      - 解决方法：display：inline
        #sweden dl{ display:inline} /*modify*/

制作牢不可破的圆角

准备两张图片，宽度和高度都要比设定的大
- （图一）（图二）

html中需要有四个设定，分别设定左右上下的圆角

<div class="container">   <!--右上角-->
<p class="desc">This box is:</p>     <!--左上角-->
<p class="asc"><em>Indestructible!</em></p>    <!--右下角--><!--左下角-->
</div>

css设置

<style type="text/css">
.container{float:left; /*不固定宽度，让容器浮动，使圆角图片总是紧挨着文字*/margin:0px; padding:0px; background:url(rounded-right.gif) no-repeat top right;}
.container p.desc{background:url(rounded-left.gif) no-repeat top left; margin:0px; padding:9px 9px 0px 9px;/*图片为9px宽，为了文字不覆盖于图片上，内容框需要有9px的padding*/}
.container p.asc{background:url(rounded-left.gif) no-repeat bottom left; margin:0px; padding:0px 0px 0px 9px;}
.container p em{display:block;/*em是个内联对象，不会自动扩展直至与父容器宽度相同，所以需要设置成块元素*/background:url(rounded-right.gif) no-repeat bottom right; margin:0px; padding:0px 9px 9px 0px;}
</style>

- 当屏蔽图片时也容易阅读
  - 在设置背景时，不仅设置图片背景的url，也同时设置如果不载入图片显示的#颜色

表格

要点：处理阴影，去空隙

html代码

<div class="forum">   <!--加表格阴影-->
<table cellspacing="0">  <!--去掉表格单元间的空格，可以不用写到css里，如果要写在css里，属性为border-collapse：collapese--><caption>The Films</caption><tr><th scope="col" class="name">Forum Name</th><th scope="col">Topics/Messages</th><th scope="col">Last Post</th></tr><tr class="alt"><td class="name"><a href="/forum/">Name of Forum</a> This is the description of the forum.  This is another line of descriptive text.</td><td>9313/163773</td><td>Feb 28, 2005 04:21 PM</td></tr><tr><td class="name"><a href="/forum/">Name of Forum</a> This is the description of the forum.  This is another line of descriptive text.</td><td>9313/163773</td><td>Feb 28, 2005 04:21 PM</td></tr><tr class="alt"><td class="name"><a href="/forum/">Name of Forum</a> This is the description of the forum.  This is another line of descriptive text.</td><td>9313/163773</td><td>Feb 28, 2005 04:21 PM</td></tr>
</table>
</div>

css代码

<style type="text/css">
div.forum{background:#919191;
}
table{position:relative;  /*使用相对定位，使表格相对原来所在的位置偏移，如果使用absolute，则要计算相对父元素的*/top:-4px; /*向上平移4px*//*使用负值是把表格推到容器以外的区域，若使用正值就是像容器里面推*/left:-4px;  /*向左平移4px*/width:100%;  /*尽可能充满外部容器*/border:solid 1px #000;background:#fff;
}table td, table th{margin:0px;padding:8px 20px;border-bottom:1px solid #b5b5b5;  <!--此时得到的是连续的直线，如果cellspacing！=0，那在每列中都会有断线-->}table caption{background:#fff;width:100%;  /*chrome下有1px的缩进*/border:1px solid #000;
}
</style>

- 流动的布局
  - 使用百分比定义宽度
  - max-width和min-width 设定流动布局是的最大/小长度，避免容器被无限拉长

【读书笔记】—无懈可击的web设计相关推荐

无懈可击 css html5,无懈可击的Web设计(第3版) 带目录书签完整pdf[80MB]
无懈可击的Web设计(第3版)将指导您采用标准设计策略来满足以各种方式浏览网页的各类用户的需要.每章首先列举一个沿用传统HTML技术的实例,然后指出该实例的局限性,并利用XHTML和CSS对其进行重构 ...
打造无懈可击的Web设计——流动布局和弹性布局
防弹衣并不能100%保证不受伤害,但穿了总是比不穿好.这样的规则同样适用于Web设计.通过增加网页的灵活性,以及采用必要的步骤来保证它在尽可能多的场景中都具备可读性,我们就给自己的作品赋予了一些与众不 ...
无懈可击的Web设计:使用HTML 5和CSS 3提高网站的灵活性与适应性(第3版)
<无懈可击的Web设计:使用HTML 5和CSS 3提高网站的灵活性与适应性(第3版)> 基本信息原书名:Bulletproof Web Design:Improving flexibi ...
2.Prometheus读书笔记：深入Prometheus设计
Prometheus读书笔记:深入Prometheus设计 Prometheus第二章读书笔记的思维导图 Prometheus • 2.深入Prometheus设计 o 2.1指标  Prometh ...
电磁兼容工程（Electromagnetic compatibility engineering Herry Ott ）读书笔记-- 章16 PCB设计和叠层结构
1, 继续对Henry W Ott 写的<电磁兼容工程>这本书进行读书笔记记录. 强烈推荐英文原版,原版可能更容易读懂. 2,本博客是这本书的读书笔记,它不是对书的直接翻译,主要记录阅读这 ...
大数据之路读书笔记-11事实表设计
大数据之路读书笔记-11事实表设计文章目录大数据之路读书笔记-11事实表设计 11.1 事实表基础 11.1.1 事实表特性 11.1.2 事实表设计原则 11.1.3 事实表设计方法 11.2 ...
读书笔记之《软件架构设计: 大型网站技术架构与业务架构融合之道》
大家好呀,我是小菜~ 帅哥美女,知道你们时间宝贵,那么就由小菜为你读好一本书,读一本好书,取其精华,与你共享~! 本文主要分享 <软件架构设计:大型网站技术架构与业务架构融合之道> 如有需 ...
《无懈可击的Web设计》_灵活的文字
常见的方法 body{font-size:12px; } 使用像素单位的优点: 不管使用哪种浏览器或者设备来查看,文字看起来都大小一致. 为什么这么做不是无懈可击的? 以像素为单位设定文字大小之后,W ...
无懈可击的web设计
在现实世界中,防弹衣并不能100%保证您不受伤害,但人们总是在不断地争取提升其防弹性能.毕竟,穿了防弹衣总是比不穿好. 这样的规则同样适用于Web设计.通过增加网页的灵活性,以及采用必要的步骤来保证它 ...

【读书笔记】—无懈可击的web设计

【读书笔记】—无懈可击的web设计相关推荐

最新文章

热门文章