13.Web标准与CSS网页布局实例

13.1Web标准与CSS布局

Web标准是网站开发中一系列标准的集合，包括XHTML，XML，CSS，DOM和ECMAScript等。制定标准是为了便于维护，代码更加简

13.1.1什么是Web标准

真正符合Web标准的网页设计是指能够灵活使用Web标准对Web内容进行结构，表现与行为的分离

1.结构(Structure)：
结构用于对网页中用到的信息进行分类和整理，主要技术有：HTML，XML，XHTML

2.表现(Presentation)：
表现用于对信息进行板式，颜色，大小等形式的控制，主要技术有：CSS层叠样式表

3.行为(Behavior)：
行为是指文档内部的模型定义及交互行为的编写，用于编写交互式的文档，主要技术有：DOM，ECMAScript

13.1.2CSS布局的优势

缩减页面代码
结构清晰
缩短改版事件
强大的字体控制和排版能力
易编写
提高易用性
表现和内容分离
方便搜索引擎搜索
比table布局的灵活性大
比table布局产生的垃圾代码少
几乎所有浏览器都可以使用
更快下载页面
页面字体漂亮，容易排版
可以轻松的控制页面的布局
可以同时更新许多网页的风格格式

13.2DIV+CSS布局网页基础

13.2.1一列固定宽度

    
    
    


    
一列固定宽度

一列固定宽度

13.2.2一列自适应

    
    
    


    
一列自适应

一列自适应

13.2.3两列固定宽度

    
    
    


    
左列
    
右列

两列固定宽度

13.2.4两列宽度自适应

    
    
    


    
左列
    
右列

两列宽度自适应

13.2.5两列右列宽度自适应

    
    
    


    
左列
    
右列

两列右列宽度自适应

13.3使用CSS设计网站导航栏

13.3.1实现背景变换的导航栏

    
    
    


    

        

            
首页
            
公司频道
            
最新动态
            
客房介绍
            
酒店服务
            
休闲娱乐
            
旅行社
        
    

在代码中首先为div定义了一个id为button，然后用ul创建列表数据。ul主要用来描述表型内容，每一个

中的内容为一个列表块，快中的每一条数据用

描述

点击前

点击后

13.3.2利用CSS制作横向导航栏

    
    
    


    

        

            
首页
            
公司频道
            
最新动态
            
客房介绍
            
酒店服务
            
休闲娱乐
            
旅行社
        
    
  

• 首先定义了ul的li对象，给#你 li指定了float: left属性，所有的li对象都向左浮动，从而形成横向的排列方式
• 导航的关键在于a链接对象的样式控制，在这里使用#n li a{}给li下的每一个a链接对象编写了样式
• display:block使得a链接对象的显示方式由一段文本变成一个块状对象，这就可以使用CSS的外边距，内边距，边框等属性给a链接加上一系列的样式
• 通过display:block的应用，对a标签元素设置宽度width:65px，高度height:20px，并在每一个a标签对象之间使用margin-left:2px形成左侧的外边距为2像素
• 利用#n li a:hover定义链接文字激活后的状态，利用background-color: #9999ff设置激活后的背景颜色，利用color: #fff设置文字的颜色

点击前

点击后

13.4使用CSS设计表单样式

13.4.1改变按钮的背景颜色和文字颜色

定义一个名为ann的按钮样式，设置边框为1 ，颜色#6600ff，字号，20pt，字体风格和加粗正常，行高正常，以及背景颜色

按钮的设置结果

13.4.2设计文本框的样式

文本框的样式

13.4.3设计文本框中的文字样式

文本框中文字颜色

13.5文字及段落样式设计

13.5.1利用CSS控制字体大小和行距

    
    
    


    欢迎来到这里

字体大小和行距

13.5.2制作光晕文字效果

filter的glow失效

13.6使用CSS设计图片样式

13.6.1鼠标指针移上时图片渐变的效果

鼠标移动到图片上之前

鼠标移动到图片上

13.6.2设计不重复出现的背景

background-repeat:no-repeat

13.7使用CSS控制链接样式

13.7.1使用CSS实现鼠标指针形状改变

参考之前的光标属性cursor

13.7.2鼠标指针移到链接文字上时改变文字大小或颜色

• 利用a:link定义链接文字样式

• 利用a:visited已访问链接样式

• 利用a:hover定义变化图像链接样式

• 利用a:link定义活动链接样式

示例