声明下，本人小白，望大神看了勿喷，多多指点，下面咱们进入正题。
为了界面好看点，先在WPS编写了一遍，弄了几个框架图片，会添加一些色彩，更容易让大家看明白，过一段时间就会发Java的，大概也就是一周一篇，，或者是一周两篇博客，因为现在正在学，只能一边学，然后在星期的时候把学到的总结一下，发出来学到的东西，给大家分享，希望大家喜欢。。。
1.HTML的基础
HTML是用来制作网页的标记语言
HTML是Hypertext Markup Language的英文缩写,即超文本标记语言
HTML语言是一种标记语言,不需要编译,直接由浏览器执行
HTML文件是一个文本文件,包含了一些HTML元素,标签等.HTML文件必须使用html或htm为文件名后缀
HTML是大小写不敏感的,HTML与html是一样的
HTML是由W3C的维护的
文件类型:文本文件,二进制文件,可执行文件(我们的程序)
下面是一个HTML简单示例，用的是黑色字体，白色文字，代码后面跟着注释。
2. HTML标签
标签是HTML中最基本单位,也是最重要组成部分。
通常要用两个角括号括起来:“<”和“>”。
标签都是闭合的（两种形式：成对与不成对）
如：
标签是大小写无关的,<body>跟<BODY>表示意思是一样的，标准推荐使用小写，这样符合XHTML标准。
HTML语法跟Java不同，HTML不区分大小写，但是建议大家都用小写，如：<body>和<BODY>，意思是一样的，但是咱们建议用前者
HTML标签属性
HTML属性一般都出现在HTML标签中, 是HTML标签的一部分。
标签可以有属性,它包含了额外的信息.属性的值一定要在双引号中。
标签可以拥有多个属性。
属性由属性名和值成对出现。
语法：
如：
HTML颜色设值得设置
大多数的浏览器都支持颜色名集合，颜色值是一个关键字或一个RGB格式的数字，在网页中用得很多。
主要有以下两种：
使用英文单词作为颜色值：如：red、green、blue、black、maroon、white、yellow ......
可以使六位十六进制的颜色值：
如：#000000 --- #ffffff(red,green,blue)
其中前两位表示红色，中间两位表示绿色，最后两位表示蓝色。
HTML注释
TML注释,我们经常要在一些代码旁做一些HTML注释,这样做的好处很多,比如:方便查找,方便比对,方便项目组里的其它程序员了解你的代码,而且可以方便以后你对自己代码的理解与修改等等.
HTML代码的格式
任何回车或空格在源代码中都是不起作用，所以在编写HTML代码时，都可以使用回车或者空格进行代码排版，这样可以使代码清晰，也便于团队合作。必须保持严格的缩进规则，以“Tab”键为准。
！！！！把代码写得漂亮,比把代码写得正确更重要！！！！
HTML字符实体
特殊字符（实体）：用数值码和引用实体两种方式表示
例如：
© ©
在什么情况下需要用&qout表示？
表示某一个在Html中可以直接输出的符号
& lt ;
3 HTML文档的主体结构
文档结构中的标签：
<html> </html> <body> </body> <title> </title> <head> </head>
4. HTML文档头部元素<head>
head标签代表HTML文档的头信息，以<head>开始,</head>结束。
头(head)包含了当前文档的一些信息,例如标题信息,meta信息等,正常情况下头信息是不会显示在HTML文档中的.
head元素包含的常用标签: 
5. HTML文档主体标记
body标签的常用属性(注意默认值)
6.1 格式标签
<html>
<head><title>格式标记测试网页</title></head><!-- 设置网页头标题-->
<body> <!-- 主体标记的开始-->
<p>一段文本</p> <!-- 使用段落标记输出一个文本-->
<center>这行文本在网页中居中显示</center> <!--居中设置一段文本-->
<pre> <!-- 预定义标记保留源代码格式输出 -->
上边 <!-- 保留这此文字在源代码中的格式 -->
左边 右边 <!-- 保留这此文字在源代码中的格式 -->
下边 <!-- 保留这此文字在源代码中的格式 -->
</pre> <!-- 保留这此文字在源代码中的格式 -->
<hr> <!-- 在段落与段段落之间输出的分隔 -->
无顺序列表： <!-- 在页面中输出一个文本 -->
<ul> <!-- 无顺序列表的开始标记 -->
<li>第一项</li> <!-- 无顺列表中第一个列表项目 -->
<li>第二项</li> <!-- 无顺列表中第二个列表项目 -->
<li>第三项</li> <!-- 无顺列表中第三个列表项目 -->
</ul> <!-- 无顺序列表的结束标记 -->
<hr> <!-- 在段落与段段落之间输出的分隔 -->
有顺序列表： <!-- 有顺序列表的开始标记 -->
<ol> <!-- 有顺序列表的开始标记 -->
<li>第一项</li> <!-- 有顺列表中第一个列表项目 -->
<li>第二项</li> <!-- 有顺列表中第二个列表项目 -->
<li>第三项</li> <!-- 有顺列表中第三个列表项目 -->
</ol> <!-- 有顺序列表的结束标记 -->
</body> <!-- 主体标记的结束标记 -->
</html> <!-- HTML文件结束 -->
这是一个示例，结果为这样
文本标签
7.1 插入图片
img标签 -- 代表HTML图像
img标签是单独出现的：<img />， img是image(图像)的缩写
常用属性:
alt -- 代表图像的替代文字
src -- 代表一个图像源(就是图像的位置)(href)
border – 代表图片边框的宽度
height -- 代表一个图像的高度
width -- 代表一个图像的宽度
设计网页时经常使用的图片有三种格式：
GIF -- 最多支持256色,支持透明,支持多帧动画显示效果.
JPEG -- 支持多种颜色,可以有很高的压缩比,使用了有损压缩,不支持透明,不支持动画效果.
PNG -- 是一种新的图片技术,可以表现品质比较高的图片,使用了无损压缩,支持透明,不支持动画.
7.2 建立锚点和超链接
a标签 -- 代表HTML链接
a,是anchor(锚)的第一个字母，a标签是成对出现的,即<a>…</a>。
常用属性：
href -- 代表一个url链接源(就是链接到什么地方去)
url除了是网页外,还可以是其它的文件(如文本文件,pdf文件等)。
url还可以是指向HTML文件中的一个位置。
url还可以是Email地址。
target -- 用来指出哪个窗口或框架应该被此链接打开
target=_blank： 将链接内容在新的浏览窗口中打开。
target=_parent：将链接的内容，当成文件的上一个画面。
target=_self： 将链接的内容，显示在目前的窗口中。
target=_top：这个参数可以解决新内容被旧框窗包围的困扰，使用这参数，会将整个画面重新显示成链接的画面内容。
title -- 代表链接的附加提示信息
链接语法：
定位网页内部的链接（锚点链接）：
用<a name=“”>定义，例如：<a name=“here1”>第一部分</a>，使用<a href=“#here1”>跳转到第一部分</a>超链接就可以定位到网页中的“第一部分”这个位置。
注意：<a href=“#”>…</a>与<a href=“”>…</a>的区别
URL(Uniform Resource Locator)的基本组成：
协议名://主机名:端口号/资源名。
例如： http://www.javauser.com:8080/index.html
为URL指定参数
例如：http://www.jaovo.com/register.html?name=zhangsan&password=123
带有定位标记的URL
例如：http://www.javauser.com/index.html#section2
URI-----是指这个数据的物理空间地址
URL-----是指找到这个数据的地图
超链接范例:
网站链接：<a href=“http://www.javauser.net”>Java专家</a>
电子邮件链接：<a href="mailto:java@126.com">写信给我</a>
ftp链接： <a href="ftp://ftp.javauser.com">下载档案</a>
有三种类型的链接路径：
绝对路径 （例如 http://www.sohu.com/index.html）
文档相对路径 （例如 adver/contents.html）
站点根目录相对路径 （例如 /support/app/customer.html，其中“/”表示根目录）
以上是文字啦什么的，现在是表格的常用标签
1.1 表格中常用标签
表格标签的常见属性
table标签属性:
width -- 代表表格的宽度
height -- 代表表格的高度
border -- 代表表格边框(此属性应该使用CSS实现)
cellspacing -- 代表表格边框与表格内容填充的距离,也是内容填充之间的距离(此属性应该使用CSS实现)
cellpadding -- 代表内容填充的宽度(此属性应该使用CSS实现)
th、td标签属性：
width与height – 代表宽度与高度
colspan -- 一行跨越多列
rowspan -- 一列跨越多行
align -- 代表水平对齐方式(left(左对齐) | center(居中对齐) | right(右对齐) | justify)(此属性应该使用CSS实现)
valign -- 代表垂直对齐方式(top(顶部对齐) | middle(中部对齐) | bottom(下部对齐) | baseline(基线对齐))(此属性应该使用CSS实现)
tr标签属性：
align与valign具体解释详见上面。
2.1 HTML框架简述
HTML框架简述
一个浏览器窗体可以通过几个页面的组合来显示。我们可以使用框架来完成(frames)这项工作。(框架可以把HTML文档分为多个页面)。也就是将一个浏览器文档窗口分隔成多个窗口，每个窗口都可以显示一个独立的网页文件。
框架页使用了表格的方式组合，可以分为数行与数列。
框架的优点
重载页面时不需要重载整个页面，只需要重载页面中的一个框架页(减少了数据的传输，增加了网页下载速度)。
方便制作导航栏。
框架的缺点
会产生很多页面，不容易管理。
不容易打印。
浏览器的后退按钮无效。
代码复杂,无法被一些搜索引擎索引到。
多数小型的移动设备（PDA 手机）无法完全显示框架。
多框架的页面会增加服务器的http请求。
由于上面诸多缺点，因此不符合标准网页设计的理念.已被标准网页设计抛弃
2.2 HTML框架标签
<frameset>标签 -- 代替body标签定义了框架页,并且定义了框架将分为多少行与多少列。常用属性如下:
cols -- 定义了框架含有多少列与列的大小(每个值使用逗号分隔),取值为象素px或者百分比%
rows -- 定义了框架含有多少行与行的大小(每个值使用逗号分隔),取值为象素px或者百分比%
border -- 定义frame定义的框架页的边框(单位像素),使用css实现
frameborder -- 定义框架页是否边框(此属性应写在frame标签内部,不应在此出现)
framespacing -- 定义框架页之间间隔的距离,使用css实现
<noframes>标签
可为那些不支持框架的浏览器显示文本，和<body>组合使用
<iframe>标签
创建一个包含另外一个文档的内联框架，iframe标签内的内容可以做为浏览器不支持iframe标签时显示 。
frame标签 -- 定义frameset标签中每个框架页的内容
frame标签是单独出现的，<frame />
常用属性:
frameborder -- 定义了内容页的边框,取值为(1|0),缺省值为1
1 -- 在每个页面之间都显示边框
0 -- 不显示边框
name -- 在一个框架页链接到另一框架页时使用(另一个框架页可以使用target定义链接页)
noresize -- 定义了浏览者是否可以通过拖拽改变框架页尺寸,取值为(noresize)
scrolling -- 定义是否有滚动条,取值为(yes|no|auto),缺省值为auto
yes -- 显示滚动条
no -- 不显示滚动条
auto -- 当需要时再显示滚动条
src -- 定义了内容页URL
border – 设置边框粗细
2.3 HTML框架示例
3.1 HTML的form标签
问：网站怎样与用户进行交互? 答案:使用HTML表单(form).
表单是可以把浏览者输入的数据传送到服务器端的程序(比如ASP,PHP,JSP)的HTML元素,服务器端程序可以处理表单传过来的数据,从而进行一些动作.比如,bbs,blog的登陆系统,购物车系统等.
form 标签 -- 代表HTML表单
form标签是成对出现的,以<form>开始,以</form>结束
常用属性.
action -- 浏览者输入的数据被传送到的地方,如一个jsp页面(dofm.jsp)
method -- 数据传送的方法
get -- 此方式传递数据量少,但是传递的信息显示在网址上。
post --此方式传送信息多,而且不会把传递信息显示在网址上 (https://..)
enctype -- 表示将数据发送到服务器时浏览器使用的编码类型
application/x-www-form-urlencoded -- 窗体数据被编码为名称/值对.这是标准的编码格式.默认的。
multipart/form-data -- 窗体数据被编码为一条消息,页上的每个控件对应消息中的一个部分.
text/plain -- 以纯文本形式进行编码,其中不含任何控件或格式字符
input 标签 -- 代表HTML表单的单行输入域
input标签是单独出现的,<input />
属性.
type -- 代表一个输入域的显示方式(分为输入型,选择型,点击型)
name – 此表单项名称
value -- 输入域的值
size -- 输入域的长度
maxlength -- 输入域最多可以输入文字的长度 (个数)
checked -- 如果是选择型的输入域,代表已经被选择，值为checked
readonly -- 输入域可以选择,但是无法修改 ，值为readonly
disabled -- 输入域无法获得焦点,无法选择,以灰色显示,在表单中不起任何作用。如：disabled="disabled"
accesskey -- 表单的快捷键访问方式，如值为h即按Alt+h快捷键。
tabindex -- 输入域的"tab"键遍历顺序
src -- 当使用图片来表示按钮时,代表图片的位置(URI)
alt -- 用来替换提交按钮的图片(当在input的src属性定义的图片无法显示时)提示信息。
type属性 -- 代表HTML表单,单行输入域(框)的表现方式
type属性取值:
text -- 文字输入域(输入型)
password -- 也是文字输入域,但是输入的文字以密码符号'*'显示(输入型)
file -- 可以输入一个文件路径(输入型)
checkbox -- 复选框.可以选择零个或多个(选择型)
radio -- 单选框.只可以选择一个而且必须选择一个(选择型)
hidden -- 代表隐藏域,可以传送一些隐藏的信息到服务器
button -- 按钮(点击型)
image -- 使用图片来显示按钮,使用src属性指定图像的位置(就像img标签的src属性)(点击型)
submit -- 提交按钮,表单填写完毕可以提交,把信息传送到服务器.可以使用value属性来显示按钮上的文字(点击型)
reset -- 重置按钮,可以把表单中的信息清空(点击型)
HTML的textarea标签
textarea 标签 -- 代表HTML表单多行输入域
此标签是成对出现的,即以<textarea>开始,以</textarea>结束
属性：
cols -- 多行输入域的列数
rows -- 多行输入域的行数
name – 此表单项名称
accesskey -- 表单的快捷键访问方式
disabled 无法获得焦点,无法选择,
灰色显示,表单中无效
readonly 输入域可以选择,但是无法修改
tabindex 输入域,使用"tab"键的遍历顺序
HTML的select标签
select 标签 -- 选择列表标签
select标签是成对出现的,以<select>开始,以</select>结束
此标签中的每对option标签代表一个选择项
属性:
name – 表单项名称
size -- 选择域的高度
multiple -- 可以有多个选择
disabled -- 以灰色显示,在表单中不起任何作用
tabindex -- 使用"tab"键的遍历顺序
option 标签 -- 代表选择列表的一个选择项
option标签是成对出现的,以<option>开始,以</option>结束
属性:
label -- 说明选择项
value -- 说明选择项的值
selected -- 此选择项a已经被选择
disabled -- 输入框无法获得焦点,以灰色显示,在表单中表示禁用
tabindex -- 使用"tab"键的遍历顺序
DTD文档类型
DTD：（Document Type Definition, DTD）
<!DOCTYPE HTML PUBLIC "version name" "url">
HTML指定文档类型的名称，为了说明这个页面使用了何种HTML规则，或者结构 。
PUBLIC表明所依据的ＤＴＤ文件可对任何人公开访问，而不是某个公司内部的规范文件。
version name指定该HTML版本的标识名称。例如，HTML4.0的标识名称为”-//w3c//DTD HTML 4.01 Transitional//EN”.对于ISO标准的DTD以”ISO”三个字母开头；被改进的非ISO标准的DTD以加号“＋”开头；没被改进的非ISO标准的DTD以“－”开头。
url指定该HTML语言的定义规范文件在internet上的位置，例如，http://www.w3.org/TR/html4/loose.dtd.
规范文件：loose.dtd、strict.dtd、frameset.dtd等文件名的区别。
现在咱们来说说css
CSS是用于布局(layout)与美化网页的. (颜色,字体)
CSS是Cascading Style Sheets的英文缩写,即层叠样式表
CSS语言是一种标记语言,因此不需要编译,可以直接由浏览器执行(属于浏览器解释型语言).
CSS文件是一个文本文件,它包含了一些CSS标记,CSS文件必须使用.css为文件名后缀.
CSS是大小写不敏感的,CSS与css是一样的.
CSS是由W3C的CSS工作组产生和维护的.
CSS语法
基本语法：
CSS定义分别由：选择符、属性、属性取值组成 格式：selector{property:value}
选择符可以是HTML中的标记名称，具体下节讲到。
属性和值之间用冒分开，多个属性之间加分号
CSS是大小写不敏感的,在CSS语法中推荐使用小写
如：body{color:red}设置了页面为红色的文字
例：p{text-align:center;color:red;font-family:宋体}
css注释：用/* 这里面写注释*/
css长度单位
在css样式表中可以使用如下长度单位：
相对长度单位：
px 像素（Pixel）。 div{font-size:12px;}
em 相对于当前对象内文本的字体尺寸。
div{font-size:1.2em;}
% 百分比 div{font-size:80%;}
绝对长度单位：
pt 点（Point）。
cm 厘米（Centimeter）。
mm 毫米（Millimeter）。
换算比例：1in = 2.54cm = 25.4 mm = 72pt = 6pc
3. 在HTML文档中放置CSS的几种方式
内联样式表
内嵌样式表
外部链接样式表，这三种
4.CSS选择符
HTML<标签>选择符
类选择符
ID选择符
关联选择符
组合选择符
伪元素选择符，这六种，也算是css的重点
CSS常见属性设置
CSS中的样式属性比较多，经常使用的属性可以分为这么几类:字体、文本、背景、位置、边框、列表，以及其他一些样式属性。每个类中的属性都可以单独使用，如果同一类中多个属性在一起使用，还可将它们合为一行解决。
如：font:[<字体风格>||<字体变形>||<字体粗细>]?<字体大小>[/<行高>]?<字体族科>
例：p{font:italic bold 12pt/14pt Times,serif}
说明：p标签中的字体为斜体加粗，字体大小为12点行高为14点字体为Times，无效时用serif。
字体颜色设置，css中修饰字体的属性
文本属性
背景属性
边框属性
列表属性
1. DIV+CSS对页面布局的优势
采用DIV+CSS模式的网站具有以下优势：
表现和内容相分离
代码简洁，提高页面浏览速度
易于维护和改版
提高搜索引擎对网页的索引效率
2.“无意义”的HTML元素div和span
HTML只是赋予内容的手段，大部分HTML标签都有其意义/功能（例如，标签p创建段落，h1标签创建标题等等）的，然而div和span标签似乎没有任何内容上的意义，听起来就像一个泡沫做成的锤子一样无用。但实际上，与CSS结合起来后，它们被用得十分广泛。你所需要记住的是span和div是“无意义”的标签。它们的存在纯粹是应用样式，所以当样式表失效时它就没有任何的作用
它们被用来组合成一大块的HTML代码并赋予一定的信息，大部分用类属性class和标识属性id与元素联系起来。span和div的不同之处在于span是内联的，用在一小块的内联HTML中。而div（division）元素是块级的（简单地说，它等同于其前后有断行），用于组合一大块的代码，为HTML 文档内大块的内容提供结构和背景的元素，可以包含段落、标题、表格甚至其他部分，这使div便于建立不同集成的类。
div的起始标签和结束标签之间的所有内容都是用来构成这个块的，其中所包含元素的特性由div标签的属性来控制，或者是通过使用样式表格式化这个块来进行控制。
3. W3C盒子模型
4. 和页面布局(layout)有关的CSS属性
#box { /* 声明ID选择器，名称为box */
position:absolute; /* 设置层的定位为绝对定位 */
top:30px; /* 层距离顶点纵向坐标的距离为30个像素 */
left:100px; /* 层距离左点横向坐标的距离为100个像素 */
width:300px; /* 设置层的宽度为300个像素 */
height:150px; /* 设置层的高度为150个像素 */
overflow:auto; /* 当内容超出层的范围时显示滚动条 */
z-index:1; /* 设置层的先后顺序为覆盖关系 */
visibility:visible; /* 无论父层是否可见，子层都可见 */
}
5. 盒子区块框的定位
相对定位和绝对定位
相对定位就是：如
a:hover { /* 定义a元素的伪选择器，当鼠标移动到链接上时改变样式 */
position:relative; /* 设置元素使用相对定位 */
top:1px; /* 鼠标进入时a元素将出现在原位置顶部下面1px的地方 */
left:1px; /* 鼠标进入时a元素将出现在原位置右边1px的地方 */
}
绝对定位如：
<style>
#demo { /* 定义一个ID选择器 */
position:absolute; /* 使用绝对位置进行定位 */
width:300px; /* 定义盒子宽度为300px */
height:300px; /* 定义盒子高度为300px */
top:100px; /* 定义盒子距离网页顶部100px */
left:200px; /* 定义盒子距离网页左边200px */
background:#BABABA; /* 定义盒子的背景颜色为灰色 */
z-index:1; /* 定义盒子位于上一层中 */
}
</style>
<div id="demo">我是一个盒子区块，我现在在网页中的哪个位置呢？</div>
6、使用盒子模型的浮动布局
虽然使用绝对定位可以实现页面布局，但由于调整某个区块框时其它区块的位置并不会跟随着改变，所以并不是布局的首选方式。而使用浮动的区块框可以向左或向右移动，直到它的外边缘碰到包含它区块的边框或另一个浮动框的边框为止。并且由于浮动框不在文档的普通流(原始文档流)中，所以文档的普通流中的区块框表现得就像浮动框不存在一样。
7、使用盒子模型设计页面布局
区块居中设计
<html><head>
<title>居中设计</title>
<style>
body { /* 为网页主体内容区域设置样式 */
margin:0; /* 设定网页外部边距值为0，消除body默认值 */
padding:0; /* 设定网页内部边距值为0，消除body默认值 */
text-align:center; /* 为了在IE中设置主体容器盒子居中 */
}
#container { /* 为布局的最外层容器使用ID选择器设置样式 */
width:966px; /* 设置最外层容器宽度为966px */
margin:0 auto; /* 设置外边距上下为0，左右自动，则在FF中居中 */
text-align:left; /* 再将主容器中的文本内容调回为居左显示 */
background:#888; /* 临时设置一下背景颜色显示主容器布局效果 */
height:800px; /* 也是临时设置一下高度显示主容器的布局效果 */
}
</style>
</head>
<body> <!-- 使用CSS消除主体标记默认的边距，设置文本居中 -->
<div id="container"> <!-- 定义网页最外层的容器使用CSS设置居中显示 -->
最外层的容器div在屏幕上水平居中
</div>
</body></html>
设置两列浮动的布局
<html><head>
<title>设置两列浮动</title>
<style>
body{ margin:0; padding:0; text-align:center; }
#container { width:966px; margin:0 auto; text-align:left; }
#left_main { /* 设置左部导航区块的CSS布局样式 */
float:left; /* 设置该区块框向左浮动，脱离文档流 */
width:256px; /* 设定该区块框的宽度为256px */
height:400px; /* 设定该区块框的高度为400px,临时设置 */
border:1px solid; } /* 设定该区块框的边框为1px的直线边框 */
#right_content {
float:right; /* 设置该区块框向右浮动，脱离文档流 */
width:700px; /* 设定该区块框的宽度700px */
height:400px; /* 设定该区块框的高度400px,临时设置 */
border:1px solid; } /* 设定该区块框的边框为1px的直线边框 */
</style>
</head>
<body> <!-- 使用CSS清除主体标记默认的边距，设置文本居中 -->
<div id=“container”> <!-- 定义网页最外层的容器使用CSS设置居中显示 -->
<div id=“left_main”>主导航区块</div> <!-- 设置左部主导航的区块框 -->
<div id="right_content">内容区块</div> <!-- 设置右部内容的区块框 -->
</div> <!-- 外层容器结束标记 -->
</body> </html>
设置三列浮动的布局
<title>设置三列浮动</title>
<style>
body{ margin:0; padding:0; text-align:center; }
#container { width:966px; margin:0 auto; text-align:left; }
#left_main { float:left; width:256px; height:400px;border:1px solid; }
#right_content { float:right; width:700px;}
#left_box { /* 设置左部主要内容区块的CSS布局样式 */
float:left; /* 设置该区块框向左浮动，脱离文档流 */
width:400px; /* 设定该区块框的宽度为400个像素 */
height:400px; /* 设定该区块框的高度为400个像素，临时设置*/
border:1px solid;/* 设定该区块框的边框为1px的直线边框 */
}
#right_box { /* 设置右部次要内容区块的CSS布局样式 */
float:right; /* 设置该区块框向右浮动，脱离文档流 */
width:290px; /* 设定该区块框的宽度为290个像素 */
height:400px; /* 设定该区块框的高度为400个像素，临时设置 */
border:1px solid; /* 设定该区块框的边框为1px的直线边框 */
}
</style>
设置多列浮动的布局
body{ margin: 0; padding: 0; text-align: center; }
#menu { /* 声明ID选择器，用于设置菜单的样式 */
width:800px; /* 菜单区块的宽度设置为800px */
margin:0 auto; /* 菜单区块设置为水平居中 */
text-align:left; /* 将文本设置回原来的居左 */
background:#ccc;/* 为菜单条设置一个灰色背景 */
}
#menu ul { /* 为了兼容性将列表中原有样式全部清除*/
float:left; /* 设置向左浮动，目的是脱离文档流 */
margin:0px; /* 设置列表外边距为0 */
padding:0px; /* 设置列表内边距为0 */
list-style:none; /* 消除列表原有类型 */
}
#menu ul li { /* 设置每个菜单项列表的样式 */
float:left; /* 设置都向左浮动 */
width:99px; /* 每个菜单项宽度为99px */
display:block; /* 改变为块标记的区块 */
line-height:30px; /* 设置行高为30px,目的是垂直居中 */
text-align:center; /* 设置文本水平居中 */
}
#menu .menudiv { /* 设置菜单项之间的分隔条隔离带 */
float:left; /* 也是向左浮动和菜单项在一个文档流 */
width:1px; /* 只要一个像素的宽度 */
height:20px; /* 高度为20个像素 */
background:#888; /* 设置这个分隔条为深灰色 */
margin-top:5px; /* 设置上边距为5个像素，目的是垂直居中*/
}
恩 差不多就这些了，如果有漏掉的地方或者是不对的地方或者说的不清楚的地方，请指点。
- 绅士ゝ图图。
