第十三章Web标准与CSS网页布局实例

1、Web标准与CSS布局

1.1什么是Web标准

1.2CSS布局的优势

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

1、Web标准与CSS布局

1.1什么是Web标准

1.2CSS布局的优势

2、Div+CSS布局网页基础

2.1认识Div

2.2一列固定宽度

一列式布局是所有布局的基础，也是最简单的布局形式。一列固定宽度中，宽度的属性值是固定的像素。

2.3一列自适应

2.4两列固定宽度

2.5两列宽度自适应

与一列自适应类似，通过宽度的百分比值控制。

2.6两列右列宽度自适应

3、使用CSS设计网站导航栏

3.1实现背景变换的导航菜单

导航也是一种列表，每个列表数据就是导航中的一个导航频道，使用ul元素以及li元素以及CSS样式可以实现背景变换的导航菜单。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #button {
            width: 150px;
            border-right: 1px solid #000;
            padding: 0 0 1em 0;
            margin-bottom: 1em;
            font-family: "宋体";
            font-size: 14px;
            background-color: #ff9933;
            color: #000000;
        }

        #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;
            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 #button li a {
            width: auto;
        }

        #button li a: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;
        }
    </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>

3.2利用CSS制作横向导航

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #n li {
            float: left;
            list-style: none;
        }

        #n li a {
            color: #ffffff;
            text-decoration: none;
            padding-top: 4px;
            display: block;
            width: 65px;
            height: 20px;
            text-align: center;
            background-color: #6600cc;
            margin-left: 2px;
        }

        #n li a:hover {
            background-color: #9999ff;
            color: #ffffff;
        }
    </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>

4、使用CSS设计表单样式

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        input.ann {
            border: 1 solid #99cc00;
            color: #6600ff;
            font-size: 9pt;
            font-style: normal;
            font-variant: normal;
            font-weight: normal;
            height: 18px;
            line-height: normal;
            background-color: #999999;
        }
    </style>
</head>

<body>
    <input type="submit" value="登录" name="Submit" class="ann">
    <input type="submit" value="取消" name="close" class="ann">
</body>

</html>

4.2设计文本框样式

<input type="password" size="10" name="pwd" style="border:2px solid red;background: yellow;">

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

5、字体及段落样式设计

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

CSS提供了包字体、字号、颜色等多种字体样式。可以利用font-size控制字体大小，利用line-height控制行距。

5.2制作光晕文字效果

利用Glow滤镜可以使目标对象产生边缘光晕的模糊效果。

6、使用CSS设计图片样式

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

利用alpha滤镜设置图像的透明度，来制作鼠标指针移上时图片渐变的效果。

6.2设计不重复出现的背景

利用background-repeat可以设置背景图像是否平铺，还可以设计不重复出现的背景。

7、使用CSS控制链接样式

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

使用cursor属性

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

    <style>
      a:link {
        font-size: 12px;
        text-decoration: none;
        color: #000000;
      }

      a:visited {
        font-size: 12px;
        text-decoration: none;
        color: #000000;
      }

      a:hover {
        font-size: 15px;
        text-decoration: none;
        color: #0000ff;
      }

      a:active {
        font-size: 19px;
        text-decoration: none;
        color: #cc99ff;
      }
    </style>

原文链接：https://blog.csdn.net/SUN19980421/article/details/104668241