摘要：
一个完整的页面和其中的组件该如何具备灵活性。 怎么样利用CSS来实现无论屏幕、窗口以及字体的大小如何变化，都可以自由扩展和收缩的分栏式页面。 要决定使用流动布局、弹性布局还是固定宽度的布局，得由项目的特点和需求来决定。 流体布局 Header Goes Here ...content goes here... ...sidebar goes here... ...... 阅读全文
摘要：
1.页面需要用到table的时候，样式重置CSS要设置： table{ border-collapse: collapse; border-spacing: 0; } 2. HTML结构 标题 ... /*tfoot在tbody之前，这样浏览器就可以在收到所有数据前呈现页脚了*/ ... ... 阅读全文
摘要：
1. 在任何可能使用背景图片的地方应设置同样的颜色的背景色。 防止图片不能加载的情况下，页面内容同样保持较好可读性。 例如文字为白色，背景图为深色，如果不设置背景色，当背景图未成功加载， 而浏览器多数默认背景为白色，那么这是文字内容无法可读。 2.当禁用CSS样式后，web仍然能够呈现很好地内容页面。 需要能够较好的保证页面核心内容与样式很好的分离。做到清晰易读的结构代... 阅读全文
摘要：
这个web中常见的单元布局，最好的布局方式就是利用float布局。 其中有个很关键的问题是需要清浮动。子集浮动是无法撑开父级的高度。 目前较完善的清浮动解决方案：在浮动的父级上添加.clear，达到清楚浮动的效果。 .clear{ *zoom:1; /*利用CSS hack 触发IE6，7haslayout 解决bug */ } .clear:after{ conten:'... 阅读全文
摘要：
1. CSS3 border-radius 圆角矩形框 圆角矩形框组件是页面布局中常常用到的，利用CSS3的border-radius可非常方便的创建。 并且在横向纵向上面都有很好的扩展性和灵活性。 border-radius需要针对不用浏览器做兼容，-webkit-和-moz-部分语法还有些区别。 推荐http://border-radius.com/ 直接设置圆角，自动生成代码。 注意：IE... 阅读全文
摘要：
不要指定横向页面组件的高度，要让它们能够在纵向自由扩展。 常见的包含文章正文或大段文字的区域，应该适应任何篇幅和大小的文字。 但是例如文章标题、登陆信息栏等也要考虑文字内容数量及高度的变化。 例如：下图中标题文字数量过多时固定高度就会破坏样式 如何修改： 1.HTML结构为:利用H5的header标签 role属性，标题采用h1，对搜索引擎友好 Sample Blog 2.避免代... 阅读全文
摘要：
针对不同的浏览器写出的CSS code就称为CSS hack. 1.HTML头部针对不同浏览器不同引入或语句 lte：就是Less than or equal to的简写，也就是小于或等于的意思。 lt ：就是Less than的简写，也就是小于的意思。 gte：就是Greater than or equal to的简写，也就是大于或等于的意思。 gt ：就是Greater th... 阅读全文
摘要：
1. HTML5构建一个选项卡,需要标签包围一个无序列表,也可以添加role属性告诉辅助设备（如屏幕阅读器）这个元素所扮演的角色。 绝对不要基于图片的导航，对搜索引擎不友好，更新编辑也非常麻烦。 ... ... ... 2. 如果有渐变，直接采用CSS3设置渐变，对于IE9以下版本需要采用过滤器，最好设置一个中间色... 阅读全文
摘要：
最佳设计：可以让用户自由控制任何页面的文字大小。 浏览器中用户都是可以自定义默认的文字大小的，如果使用 px，用户自行在浏览器设置中改变了文字大小后，网页上是不会变化的。我们不能排除视障用户（如近视）、老年用户不会这么做. 利用CSS3的rem单位，避免了em相对父元素比例的嵌套问题，为了兼容IE低版本的需要添加px单位. html { font-size... 阅读全文
摘要：
核心思想：结构和样式分离 HTML与CSS 只有充分将页面核心内容和外观设计相分离而获得的灵活性，才能顺利构建出能够满足每个web用户需要的最佳设计方案。 核心要求：灵活性 适应不同的浏览器，适应各种各样的设备和软件。 结构和样式设计方案能够轻松地适应不同的文字大小和内容数量，能够随着这些变化自动扩展或缩小。 ... 阅读全文