Web标准与CSS网页布局实例

第12章

Web标准与CSS网页布局实例第11章使用CSS样式表重点难点：CSS的字体属性设置颜色和背景属性设置文本属性设置段落属性设置边框属性设置边距与填充属性设置定位属性设置列表属性设置光标属性设置理解掌握：CSS的使用方式各标记的CSS样式可设置的属性值了解：什么是CSS为什么用CSSDreamweaver下设置CSSVersion2.1.5知识目标：WEB标准DIV+CSS布局网页基础CSS的字体属性使用CSS设计网站导航栏使用CSS设计表单样式字体及段落样式设计使用CSS设计图片样式使用CSS控制链接样式能力目标：能用DIV+CSS布局结构单的网页技能目标：DIV+CSS布局网页元素的技巧Version2.1.5第12章Web标准与CSS网页布局实例12.1WEB标准与CSS布局12.1.1什么是WEB标准12.1.2CSS布局的优势12.2DIV+CSS布局网页基础12.2.1认识DIV12.2.2一列固定宽度12.2.3一列自适应12.2.4两列固定宽度12.2.5两列宽度自适应12.2.6两列右列宽度自适应12.3使用CSS设计网站导航栏

12.3.1实现背景变换的导航菜单12.3.2利用CSS制作横向导航Version2.1.5第12章Web标准与CSS网页布局实例12.4使用CSS设计表单样式

12.4.1改变按钮的背景颜色和文字颜色12.4.2设计文本框样式12.4.3设计文本框中的文字样式12.5字体及段落样式设计12.5.1利用CSS控制字体大小和行距12.5.2制作光晕文字效果12.6使用CSS设计图片样式12.6.1鼠标指针移上时图片渐变的效果12.6.2设计不重复出现的背景12.7使用CSS控制链接样式12.7.1使用CSS实现鼠标指针形状改变12.7.2鼠标指针移到链接文字上时改变文字大小或颜色Version2.1.512.1Web标准与CSS布局 Web标准是网站开发中一系列标准的集合，包括XHTML、XML、CSS、DOM和ECMAScript等。制定这些标准是为了便于维护、代码更简洁，降低带宽的运行成本，更容易被搜索引擎搜索到，改版方便，不需要变动页面内容，提高网站易用性等。Version2.1.512.1Web标准与CSS布局12.1.1什么是WEB标准

12.1.2CSS布局的优势Version2.1.512.1.1什么是WEB标准 Web标准是由W3C和其他标准化组织制定的一套规范集合，Web标准的目的在于创建一个统一的用于Web表现层的技术标准，以便通过不同的浏览器或终端设备向最终用户展示信息内容。

Web标准由一系列规范组成，目前的Web标准主要由三大部分组成：结构(Structure)、表现(Presentation)、行为(Behavior)。真正符合Web标注的网页设计是指能够灵活使用Web标准对Web内容进行结构、表现与行为方的分离。Version2.1.512.1.1什么是WEB标准

结构用于对网页中用到的信息进行分类与整理。在结构中用到的技术主要包括HTML、XML和XHTML。 表现用于对信息进行版式、颜色、大小等形式的控制。在表现中用到的技术主要是CSS层叠样式表。 行为是指文档内部的模型定义及交互行为的编写，用于编写交互式的文档。在行为中用到的技术主要包括DOM和ECMAScript。Version2.1.512.1.2CSS布局的优势

掌握基于CSS的网页布局方式，是实现Web标准的基础。在制作主页时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其他效果实现更加精确地控制。只要对对应的代码做一些简单的修改，就可以改变网页的外观和格式。采用CSS布局有以下优点：

大大缩减页面代码，提高页面浏览速度，缩减带宽成本 结构清晰，容易被搜索引擎搜索到 缩短改版时间 表现和内容分离，将设计部分分离出来放在一个独立的样式文件中

Version2.1.512.2DIV＋CSS布局网页基础 DIV＋CSS是现在最流行的一种网页布局格式，以前常用表格来布局，而现在一些比较知名的网页设计全部采用DIV+CSS来排版布局。DIV＋CSS的优点在于可以使HTML代码更整齐，更容易使人理解，而且在浏览时的速度也比传统的布局方式快，最重要的是它的可控性要比表格强得多。Version2.1.512.2DIV＋CSS布局网页基础12.2.1认识DIV12.2.2一列固定宽度12.2.3一列自适应12.2.4两列固定宽度12.2.5两列宽度自适应12.2.6两列右列宽度自适应Version2.1.512.2.1认识DIV DIV是XHTML的一个标记，DIV在使用时以<div></div>的形式出现。DIV本身就是容器性质的，不但可以内嵌table还可以内嵌文本和其他的HTML代码。DIV用来为HTML文档内大块的内容提供结构和背景，DIV的起始标记和结束标记之间的所有内容都是用来构成这个块的。其中所包含元素的特征DIV标记的属性来控制，或是通过使用样式表格式化这个块来进行控制。

DIV是CSS布局方式的核心对象，做一个简单的布局只需要依赖DIV与CSS，因此也称CSS布局为DIV＋CSS布局。Version2.1.512.2.2一列固定宽度

一列式布局式所有布局的基础，也是最简单的布局形式。一列固定宽度中，宽度的属性值是固定的象素。#layer{ background-color:#FF0000; border:3pxsolid#ff3399; width:500px; height:300px;}<divid="layer">一列固定宽度</div>Version2.1.512.2.3一列自适应

自适应布局是网页设计中常见的一种布局形式，自适应布局能够根据浏览器窗口的大小，自动改变其宽度或高度值，是一种非常灵活的布局形式。#layer{ background-color:#FF0000; border:3pxsolid#ff3399; width:80％; height:80％;}<divid="layer">一列固定宽度</div>Version2.1.512.2.4两列固定宽度

两列固定宽度布局非常简单，两列的布局需要用到两个div，分别将两个div的id设置为left与right，表示两个div的名称。首先为它们设置宽度，然后让两个div在水平线中并排显示，从而形成两列式布局。#left{ background-color:#FF0000; border:3pxsolid#ff3399; width:250px; height:250px; float:left;}#right{ background-color:#FF0000; border:3pxsolid#ff3399; width:250px; height:250px; float:left;}Version2.1.512.2.4两列固定宽度<divid="left">左列</div><divid="right">右列</div>Float属性是CSS布局中非常重要的属性，用于控制对象的浮动布局方式，大部分DIV布局基本上都通过float的控制来实现。Version2.1.512.2.5两列宽度自适应

下面使用两列宽度自适应布局实现左右栏宽度能够做到自动适应,设置自适应主要通过宽度的百分比值控制.#left{ background-color:#FF0000; border:3pxsolid#ff3399; width:65%; height:250px;

float:left;}#right{ background-color:#FF0000; border:3pxsolid#ff3399; width:25%; height:250px;

float:left;}<divid="left">左列</div><divid="right">右列</div>Version2.1.512.2.6两列右列宽度自适应

在实际应用中，有时候需要左栏固定宽度，右栏更具浏览器窗口大小自动适应，在CSS中只须要设置左栏的宽度即可，右栏不设置任何宽度，并且右栏不浮动。#left{ background-color:#FF0000; border:3pxsolid#ff3399; width:200px; height:250px; float:left;}#right{ background-color:#FF0000; border:3pxsolid#ff3399; height:250px;}Version2.1.512.3使用CSS设计网站导航栏

网站导航是网站中最重要的元素，是网站提供给浏览者最直接、最方便的访问网站内容的工具。总的来说导航的核心目标是设计一个简单快捷的操作入口，帮助浏览者快速找到网站中的内容，设计时应当根据网站类型及内容的需求设计合理的导航形式。Version2.1.512.3使用CSS设计网站导航栏 12.3.1实现背景变换的导航菜单

12.3.2利用CSS制作横向导航Version2.1.512.3.1实现背景变换的导航菜单

导航也是一种列表，每个列表数据就是导航中的一个导航频道，使用ul元素以及li元素以及CSS样式可以实现背景交换的导航菜单。Version2.1.512.3.1实现背景变换的导航菜单#button{ width:150px; border-right:1pxsolid#000; padding:00lem0; margin-bottom:lem; font-family:"宋体"; font-size:13px; background-color:#ff9933; color:#000000;}#buttonul{ list-style:none; margin:0; padding:0; border:none;}#buttonli{ margin:0; border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:#ffff00;}Version2.1.512.3.1实现背景变换的导航菜单#buttonlia{ display:block; padding:5px5px5px0.5em; background-color:#ff9933; color:#fff; text-decoration:none; width:100%; border-right-width:10px; border-left-width:10px; border-right-style:solid; border-left-style:solid; border-right-color:#ffcc00; border-left-color:#ffcc00;}html>body#buttonlia{ width:auto;}#buttonlia:hover{ background-color:#ffcc00; color:#fff; border-right-width:10px; border-left-width:10px; border-right-style:solid; border-left-style:solid; border-right-color:#ff00ff; border-left-color:#ff00ff;}Version2.1.512.3.1实现背景变换的导航菜单<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>无标题文档</title><linkhref="style.css"rel="stylesheet"type="text/css"/></head><body><divid="button"> <ul> <li><ahref="#">首页</a></li><li><ahref="#">公司频道</a></li><li><ahref="#">最新动态</a></li><li><ahref="#">客房介绍</a></li><li><ahref="#">酒店服务</a></li></ul></div></body></html>Version2.1.512.3.2利用CSS制作横向导航#nli{ float:left;}#nlia{ color:#ffffff; text-decoration:none; padding-top:4px; display:block; width:65px; height:20px; text-align:center; background-color:#6600cc; margin-left:2px;}#nlia:hover{ background-color:#9999ff; color:#ffffff;}Version2.1.512.3.2利用CSS制作横向导航<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>无标题文档</title><linkhref="style.css"rel="stylesheet"type="text/css"/></head><body><divid="n"> <ul> <li><ahref="#">首页</a></li><li><ahref="#">公司频道</a></li><li><ahref="#">最新动态</a></li><li><ahref="#">客房介绍</a></li><li><ahref="#">酒店服务</a></li></ul></div></body></html>Version2.1.512.4使用CSS设计表单样式

默认的表单对象外观都是非常简单的，利用CSS样式可以美化表单对象。Version2.1.512.4.1改变按钮的背景颜色和文字颜色.ann{ border:1solid#99cc00; color:#6600ff; font-size:9pt; font-style:normal; font-variant:normal; font-weight:normal; height:18px; line-height:normal; background-color:#999999;}<inputtype="submit"value="登陆"name="submit"class="ann"/><inputtype="reset"value="取消"name="close"class="ann"/>Version2.1.512.4.2设计文本框的样式<inputtype="password"size="10"name="pwd" style="border:2pxsolidred;background:yellow;"/>Version2.1.512.4.3设计文本框中的文字样式<textareacols="20"rows="8" style="font-family:'方正舒体';font-size:24px;"></textarea>Version2.1.512.5字体及段落样式设计

文本是网页中最简单，也是最基本的部分，无论当前的网页多么绚丽多彩，其中占多数的还是文本。在网页中文字的设计要醒目、清晰，文字的排版与组合要便于阅读。Version2.1.512.5.1字体及段落样式设计利用CSS控制字体大小和行距.dx{ font-family:"方正舒体"; font-size:12px; line-height:20px;}Version2.1.512.5.2制作光晕文字效果

利用Glow滤镜可以使用目标对象边沿光晕的模糊效果,下面制作光晕文字效果..gy{ filter:Glow(Color=#87ca27,Strength=10);}Color设置边沿光晕的颜色.Strength设置边沿光晕的强度大小,范围从1到255,数值越大光晕强度越大.Version2.1.512.6.1鼠标指针移上时图片渐变的效果用Alpha滤镜设置图像的透明度,来制作鼠标指针移上时图片渐变的效果.<style>.highlightitimg{filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);-moz-opacity:0.5;}.highlightit:hoverimg{filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);-moz-opacity:1;}</style>Version2.1.512.6.2设计不重复出现的背景body{ margin-left:0px; margin-top:0px; margin-right:0px; margin-bottom:0px; background-image:url(); background-color:#FFFFFF; background-repeat:no-repeat; background-position:right;}Version2.1.512.7使用CSS控制链接样式 12.7.1使用