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一列固定宽度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>一列固定宽度</title>
    <style type="text/css">
        #Layer{
            background-color: #ffcc33;
            border: 3px solid #ff3399;
            width: 500px;
            height: 350px;
        }
    </style>
</head>
<body>
    <div id="Layer">一列固定宽度</div>
</body>
</html>
一列固定宽度

13.2.2一列自适应

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>一列自适应</title>
    <style type="text/css">
        #Layer{
            background-color: #ffcc33;
            border: 3px solid #ff3399;
            width: 80%;
            height: 80%;
            position: fixed;
        }
    </style>
</head>
<body>
    <div id="Layer">一列自适应</div>
</body>
</html>
一列自适应

13.2.3两列固定宽度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>两列固定宽度</title>
    <style type="text/css">
        #left{
            background-color: #ffcc33;
            border: 1px solid #ff3399;
            width: 250px;
            height: 250px;
            float: left;
        }
        #right {
            background-color: #ffcc33;
            border: 1px solid #ff3399;
            width: 250px;
            height: 250px;
            float: left;
        }
    </style>
</head>
<body>
    <div id="left">左列</div>
    <div id="right">右列</div>
</body>
</html>
两列固定宽度

13.2.4两列宽度自适应

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>两列宽度自适应</title>
    <style type="text/css">
        #left{
            background-color: #ffcc33;
            border: 1px solid #ff3399;
            width: 65%;
            height: 250px;
            float: left;
        }
        #right {
            background-color: #ffcc33;
            border: 1px solid #ff3399;
            width: 25%;
            height: 250px;
            float: left;
        }
    </style>
</head>
<body>
    <div id="left">左列</div>
    <div id="right">右列</div>
</body>
</html>
两列宽度自适应

13.2.5两列右列宽度自适应

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>两列右列宽度自适应</title>
    <style type="text/css">
    #left{
            background-color: #ffcc33;
            border: 1px solid #ff3399;
            width: 200px;
            height: 250px;
            float: left;
        }
        #right {
            background-color: #ffcc33;
            border: 1px solid #ff3399; 
            height: 250px;
        }
    </style>
</head>
<body>
    <div id="left">左列</div>
    <div id="right">右列</div>
</body>
</html>
两列右列宽度自适应

13.3使用CSS设计网站导航栏

13.3.1实现背景变换的导航栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>实现背景变换的导航栏</title>
    <style type="text/css">
        #button{
            width: 150px;
            border-left: 1px solid #000;
            border-right: 1px solid #000;
            padding: 0  0   1em 0;
            font-family: "宋体"
            font-size:13px;
            background-color: #ff9933;
        }
        #button ul{
            list-style: none;
            margin: 0;
            padding: 0;
            border:none;
        }
        #button li{
            margin: 0;
            border-bottom-width: 1px;
            border-bottom-style: solid;
            border-bottom-color: #ffff00;
        }
        #button li a{
            display: block;
            padding: 5px 5px 5px 0.5em;
            text-decoration: none;
            color: #fff;
            border-left-width: 10px;
            border-left-style: solid;
            border-left-color: #ffcc00;
            border-right-width: 10px;
            border-right-style: solid;
            border-right-color: #ffcc00;
        }
        #button li a:hover{
            background-color: #ffcc00;
            color: #000;
            border-left-width: 10px;
            border-left-style: solid;
            border-left-color: #ff00ff;
            border-right-width: 10px;
            border-right-style: solid;
            border-right-color: #ff00ff;
        }
    </style>
</head>
<body>
    <div id="button">
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">公司频道</a></li>
            <li><a href="#">最新动态</a></li>
            <li><a href="#">客房介绍</a></li>
            <li><a href="#">酒店服务</a></li>
            <li><a href="#">休闲娱乐</a></li>
            <li><a href="#">旅行社</a></li>
        </ul>
    </div>
</body>
</html>

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

点击前
点击后

13.3.2利用CSS制作横向导航栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>利用CSS制作横向导航</title>
    <style type="text/css">
        #n li{
            float: left;
        }
        #n ul{
            list-style: none;
        }
        #n li a{
            display: block;
            color: #000;
            text-decoration: none;
            text-align: center;
            background-color: #6600cc;
            margin-left: 2px;
            padding-top: 4px;
            width: 65px;
            height: 20px;
        }
        #n li a:hover{
            background-color: #9999ff;
            color: #fff;
        }
    </style>
</head>
<body>
    <div id="n">
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">公司频道</a></li>
            <li><a href="#">最新动态</a></li>
            <li><a href="#">客房介绍</a></li>
            <li><a href="#">酒店服务</a></li>
            <li><a href="#">休闲娱乐</a></li>
            <li><a href="#">旅行社</a></li>
        </ul>
    </div>  
</body>
</html>
  • 首先定义了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改变按钮的背景颜色和文字颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>改变按钮的背景颜色和文字颜色</title>
    <style type="text/css">
        input.ann{
            border:1 solid #99cc00;
            color: #6600ff;
            font-size: 20pt;
            font-style: normal;
            font-variant: normal;
            font-weight: normal;
            line-height: normal;
            background-color: #999999;
        }
    </style>
</head>
<body>
    <input type="submit" name="Submit" value="登录" class="ann" />
    <input type="reset" name="Close" value="取消" class="ann" />
</body>
</html>

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

按钮的设置结果

13.4.2设计文本框的样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本框的样式</title>
</head>
<body>
    <input type="password" size="10" name="pwd" style="border:2px solid red;background:yellow;" />
</body>
</html>
文本框的样式

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本框中的文字样式</title>
</head>
<body>
    <input type="password" name="pwd" style="font-family: 宋体;font-size:12px" />
</body>
</html>
文本框中文字颜色

13.5文字及段落样式设计

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字体大小和行距</title>
    <style type="text/css">
        .dx{
            font-family: "宋体";
            font-size: 20px;
            color: #ff0000;
            line-height: 20px;
        }
    </style>
</head>
<body>
    <span class="dx">欢迎来到这里</span>
</body>
</html>
字体大小和行距

13.5.2制作光晕文字效果

filter的glow失效

13.6使用CSS设计图片样式

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片渐变</title>
    <style type="text/css">
        .highlightit img{
            -webkit-filter: opacity(90%);
        }
        .highlightit:hover img{
            -webkit-filter: opacity(10%);
        }
    </style>
</head>
<body>
    <a href="#" class="highlightit"><img src="img/2.jpg" width="800" height="400"></a>
</body>
</html>
鼠标移动到图片上之前
鼠标移动到图片上

13.6.2设计不重复出现的背景

background-repeat:no-repeat

13.7使用CSS控制链接样式

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

<style type="text/css">
        .shb{
            cursor: e-resize;
        }
    </style>

参考之前的光标属性cursor

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

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

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

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

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

示例
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

  • h5常见的面试题
    第一部分 HTML&CSS整理答案 1. 什么是HTML5？ 答：HTML5是最新的HTML标准。 注意：讲述HT...
    kismetajun阅读 29,133评论 1赞 45
  • HTML+CSS(47-72)
    问答题47 /72 常见浏览器兼容性问题与解决方案？ 参考答案 (1)浏览器兼容问题一：不同浏览器的标签默认的外补...
    _Yfling阅读 14,325评论 1赞 92
  • Html&CSS（二）
    本文主要是起笔记的作用，内容来自慕课网. 认识CSS样式 CSS全称为“层叠样式表 (Cascading Styl...
    0o冻僵的企鹅o0阅读 2,763评论 0赞 30
  • 网络技术与应用
    HTML 5 HTML5概述 因特网上的信息是以网页的形式展示给用户的，因此网页是网络信息传递的载体。网页文件是用...
    阿啊阿吖丁阅读 5,125评论 0赞 0
  • 面试题
    •前端面试题汇总 一、HTML和CSS 21 你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么? ...
    Simon_s阅读 2,444评论 0赞 8

友情链接更多精彩内容