《无懈可击的web设计II》读书笔记

1、 使用absolute定位让块脱离标准文档流

脱离文档流以后可能会出现 块的重叠

一:这是个bug,用浮动代替absolute定位

二:可以利用者特性做覆盖层

例如浮动在图片下方的图片简介

使用z-index把原本因absolute之后在其他块上方的块变成背景,例子中的价格百分比的数据可视化(那样的设计还是很人性化滴)


2、 用border-radius做圆角

原始的方法:

固定宽度或者高度,用两个div嵌套完成

宽度高度都不固定,用四个div嵌套,四张角的图片完成


支持border-radius的浏览器中

-webkit-border-radius:

-moz-border-radius: 

-webkit-border-bottom-left-radius:

-moz-border-radius-bottomleft:


3、 使用rgba颜色

主要强调使用alpha值,使用透明度使得文字或者阴影更好的和背景融合,有时候可以减少例如hover要重新设定颜色的麻烦,直接设置hover透明度改变即有hover颜色变化的效果。box-shadow也可以使用rgba颜色,让阴影与北京融合效果更好。


4、 网站没必要在所有浏览器中看起来都一样

渐进式增强

在支持的浏览器里面看起来好看

在不支持的浏览器里面看起来不乱

再更低版本浏览器里面直接别给css,一个没有样式的页面好过一个样式混乱的页面

做一个高傲的web设计员,给那些墨守成规的,还在用ie5 ie6的用户一点提示,一点警告,别打dota了..赶快去换浏览器吧...


5、 浮动管理

master.css 

.group:after {

content:".";

display:block;

height:0;

clear:both:

visibility:hidden;

}

ie.css

/* IE6 */

* html .group{

height:1%;

}

/* IE7 */

*:first-child+html .group{

min-height:1px;

}



一个自己css框架的代码结构:

framework

css

ie.css //处理IEbug的代码分出来,面得代码里都见到感觉恶心

master.css //包含网站设计的所有样式

reset.css //重新设计浏览器为html元素默认设置的显示样式,例如list-style:none;

screen.css //按顺序@import reset.css master.css ie.css

img

img1.jpg

img2.jpg

index.html


6、 浮动的网格

使用em替代px(换算)

max-width的使用


7、 使用点jquery

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值