XHTML+CSS页面布局概括

XHTML+CSS的布局的由来

　　Table为了储存数据而Div是为了架构页面结构

　　W3C（World Wide Web Consortium：万维网联盟）W3C标准是一系列标准的集合：结构标准、表现标准、动作标准，与结构标准对应的代表语言是XHTML，与表现标准对应的语言是CSS，与动作标准对应的语言是JavaScript。

　　当我们将一个成品的网页制作成一个静态页面的时候，要符合前面两种标准：结构标准、表现标准，那么制作出来的界面就是标准界面，这种技术就被称之为“XHTML+CSS”

 

头部CSS样式的重置：

　　每个浏览器都有一个内置的CSS文件，当你没有对某个标签设置属性的时候，浏览器会应用内置的CSS文件。

　　*{

　　　　padding:0;

　　　　margin:0;

　　　}

　　不过这样定义很不好，一开始的时候要重置太多标签属性了，加大了服务器的负担，是不可取的 ，有经验的开发者只会重定义一些自己常用的标签

CSS选择器的命名

　　骆驼命名法：

　　　　　　第一个单词的第一个字母用小写，第二个单词的第一个字母用大写，第三个单词的第一个字母也用大写，第四个单词的第一个字母还是用大写，同样后面所有单词的首字母都要大写。

　　帕斯卡命名法（双驼峰）：

　　　　　　首字母大写，同骆驼命名法

　　匈牙利命名法

　　　　　　在名称前面加上一个或多个小写字母作为前缀，来让名称更加好认。

　　eg:

1. 1. .navMenuRedButton
   2. .NavMenuRedButton
   3. .red_navMenuButton

div清除浮动

　　在你想清除浮动的那个标签的后面和受你影响的那个标签的前面添加<div class="clear">设置其CSS样式为　　.clear{ 　　clear:both;　　}

 

设计整个页面

　　结构的好坏会直接影响到页面的加载速度，以及搜索引擎的抓取。

1:插入图片的常用方法

　　一：a标签嵌套img标签

　　二：直接设置CSS背景（background-img:url("图片位置")；）

2:功能模块列表

　　dl+dt+dd

dl ——define list——定义列表 
dt ——define list title——用于生成定义列表中各列表项的标题，重复使用可以定义多个列表项的标题。 
dd——define list define——用于生成定义列表各列表项的说明文字段，重复使用可以定义多个说明文字段。dd是对应dt的简短说明。

Position定位

　　用定位来布局界面，父级元素的position属性必须是relative，而定位于父级内部的某个元素的位置最好用absolute，其不受父级元素padding的属性影响，如果要用relative的话，计算的时候不要忘记padding的值。