如何合理布局浏览器网页！

下面介绍关于如何合理布局浏览器网页

第一： 我们应该明白在给HTML添加完标签后，如何才能把你写的标签完美的布局出来；这时，我们就需要借助css的相关知识来给浏览器上面的内容布局；添加我们想要的样式；给用户较好的视觉体验！
第二： 现在我们了解一下相关css的知识；

1. 我们应该了解css的相关语法：css是cascading style sheets的首字母的缩写；汉语意思是层叠样式表；目前推荐遵循的是W3C发布的CSS3.0；
2. 在给标签添加样式的时候，我们可以通过三种方法来调用样式；
3. 首选，我们经常用到的是外部样式表；通过link标签；<link rel=“sheetstyle” type=“text/css” href=“路径”/ >;
4. 内部样式表：<style type="text/css">样式</ style>;
5. 内联样式表：<标签 style=“属性:属性值; 属性:属性值;”></标签>例如： <div style=“width:100px; height:100px; border:1px solid #eee; background:#fff;"></div>在这里div是双标记；（补充一下：标签也称为元素和标记；）
6. 在样式表中编辑相关属性和属性值；来实现页面的布局；
   div+css布局的优点：
   第一：缩减页面代码，提高访问速度；（代码减少，页面文件就会减少，占用网络带宽就少，客户端打开 速度就快，用户体验就更好；）
   第二：结构清晰；有利于seo;
   (–有利于搜索引擎优化；
   –缩短改版时间
   –对网站的重构有很好的支持；
   –弥补HTML的不足；)
   CSS语法：选择符{属性：属性值；属性：属性值；}
   例如：h1{width:200px;height:200px;font-size:12px;line-height:200px;text-align:center;margin:0 auto;}
   如果给HTML的标签中添加 class=“名字1”； 那么在调用这个标签的样式时可以这样书写；
   . 名字1{加上需要加的样式；}
   或者添加ID=“名字1”：
   可以这样书写：#名字1{样式}；
   或者我们可以使用
   属性选择器：
   1：标签[att=“value”] 匹配属性等于某特定值的元素:
   2：标签[att^=“value”] 匹配属性包含以特定的值开头的元素
   3：标签[att$=“value”] 匹配属性包含以特定的值结尾的元素
   4：标签[att*=“value”] 匹配属性包含含有特定的值的元素
   浏览器支持:
   只有IE6不支持CSS的属性选择器。IE7和IE8、Opera、Webkit核心和Gecko核心的浏览器都支持。所以在你样式中使用属性选择器是比较安全的。
   结构性伪类选择器
   E:first-child 选择第一个子元素E
   E:last-child 选择最后一个子元素E
   E:nth-child(n) 选择一个或多个特定的子元素 （第一个编号为1）（父元素的下一级的元素种类都一样；）
   E:nth-of-type(n) 选择指定的元素，仅匹配使用同种标签的元素 （父元素的下一级的元素种类不同；）
   nth-of-type(odd)奇数 nth-of-type(even)偶数

层级选择器

子元素选择器

E > F E元素内的第一级子元素F；

兄弟选择器

E + F(相邻兄弟) E元素后面的第一个兄弟元素F

E ~ F（通用兄弟） 所有在E元素之后的兄弟元素F
以上是经常用到的选择器；还有动态伪类选择器；否定伪类选择器；语言伪类选择器；UI元素状态伪类选择器；目标伪类选择器；伪元素选择器；具体用到的时候可以再细查；
下面举一个简单的例子：
a:link
a:hover;
a:visit;
a:active;
提示：在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
提示：在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。
未完待续！