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制作横向导航栏

    
    
    
        
        利用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定义活动链接样式

    示例

    你可能感兴趣的:(13.Web标准与CSS网页布局实例)