新浪首页

blog

---

在此输入正文

1. 新浪的布局特点

目前找不出比新浪首页更长结构更为中规中矩，布局严谨的门户新闻类网站，他是原有门户类网站的代表之一。
他的结构长，但是很有特点，基本是以下的布局方式：总体是上中下结构，在这个结构之中，又是川字形三列布局或广告通栏两种形式，而在里边又是，以下的内容特点。

2. 内容细节的特点

主要有文字列表、图文混排＋文字列表、Tab选项卡＋文字列表、广告通栏。

3. 常见布局方法

默认布局，就是div全部居左的一种无css布局方式，
float布局，讲清float，得先了解什么是块元素，什么是内联元素。
因为页面上的东西是面性的，所谓面着是点构成线，线构成面，所以面里边的东西可以划分为小方块，这就是块元素最初的物理参考来源，由于小方块是一个完美的形态，为了我们布局的需求，也为了我们处理问题更方便，所以拆分为两种，块元素或内联元素。其实这跟编程语言的数据类型很像，数据类型出现的目的就是方便我们更好的抽象现实世界中的问题模型。
一种是具备物理世界小方块的所有特征，并让他有更强大的特性，他的宽度是可以无限延伸，在屏幕上来说，可以占据可视区域内的一整行。一般叫“块元素”。
而另外一种则是他的相反特征，不占据一行，且没有任何物理特性，就是没有宽高的属性，或者就算设置了宽高也是没有视觉特征的。一般叫“内联元素”。
那float出现的本质是：像内联元素一样使用块元素，对没错就是：display:inline-block;

Position布局:
position的inherit, static, relative, fixed, absolute, initial，sticky(firefox)
http://www.w3schools.com/cssref/pr_class_position.asp
http://www.qianduan.net/position-sticky-introduction.html
position:sticky介绍

4. 布局要点

面性思维
叠加实现

5. Debugger误区

结构不合理，让单一div承载更多的样式
浏览器本身的问题，遵循标准不一致
委员会制定标准很混乱
编码问题
编辑器问题

6.列表

Dl,dd,dt 自定义列表
Ul,li 无序列表
Ol,li 有序列表

7.字体颜色

Body{color:red;}
a,a:link,a:visited{color:blue}
.nav a,.nav a:link{color:red;}

8.CSS选择符

1.1 通配符选择符
1.2 类选择符
1.3 包含选择符
1.4 子选择符
1.5 相邻选择符
1.6 属性选择符
1.7 ID选择符
1.8 选择符的组合关系
1.9 伪类与伪对象

9.CSS图片

gif,png,jpg的区别
png-8,png-24的区别
css sprite的应用

10. CSS半透明

透明滤镜
filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#99000000',endColorstr='#99000000');background:rgba(0,0,0,.6);
单层透明
background:rgba(0,0,0,0.5);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#50000000',endColorstr='#50000000')\9;