link，hover，active三种按键状态，存放三张图片

缺点：

资源只有在被使用时，才会被加载。

页面第一次加载时，会出现短暂的延迟闪烁，造成一次不佳的用户体验。

图片整合技术 CSS-Sprite 雪碧图：

将三张图片整合为一张图片，在不同的伪类中通过设置 background-position 来切换图片。

一次请求一次加载，一次加载一张图片，相当于多张图片。

优势：

  • 减小资源的大小，省了颜色表
  • 提高了访问效率

实例效果：

html代码：

<!doctype html>

<html>

    <head>

        <meta charset="utf-8" />

        <title>湖南城市学院</title>

        <link rel="stylesheet" type="text/css" href="css/hncu.css" />

    </head>

    <body>

        <div id="hncu_header">

            <div id="hncu_search">

                <a href="#" id="search_btn"></a>

            </div>

        </div>

        <ul id="hncu_nav">

            <li>

                <a href="#">首页</a>

            </li>

            <li>

                <a href="#">新闻</a>

            </li>

            <li>

                <a href="#">联系</a>

            </li>

            <li>

                <a href="#">关于</a>

            </li>

        </ul>

        <div id="hncu_content">

            <div id="hncu_left"></div>

            <div id="hncu_center"></div>

            <div id="hncu_right"></div>

        </div>

        <div id="hncu_footer">

        </div>

    </body>

</html>

css源代码：

@charset "utf-8";

*{

    margin: 0px;

    padding: 0px;

}

body{

    background-color: #bfc;

}

#hncu_header{

    width: 1000px;

    height: 200px;

    background-color: skyblue;

    margin: 10px auto 10px;

}

#hncu_search{

    width: 360px;

    height: 180px;

    background-color: skyblue;

    overflow:hidden;

    zoom:;

    margin: 10px auto 10px;

    float: right;

}

#search_btn {

    display: block;

    width: 93px;

    height: 29px;

    background-color: skyblue;

    background-repeat: no-repeat;

    position: relative;

    left: 260px;

    top: 144px;

}

#search_btn:link {

    background-image: url(../img/btn.png);

}

#search_btn:hover {

    background-position: -93px 0px;

}

#search_btn:active {

    background-position: -186px 0px;

}

#hncu_nav{

    width: 1000px;

    height: 70px;

    background-color: blue;

    list-style:none;

    margin:0px auto 10px;

    overflow:hidden;

    zoom:;

}

#hncu_nav li{

    width: 25%;

    height: 70px;

    float: left;

}

#hncu_nav a{

    width: 100%;

    height: 70px;

    color: white;

    line-height: 70px;

    text-align: center;

    text-decoration: none;

    float: left;

}

#hncu_nav a:link{

    background-color: blue;

}

#hncu_nav a:visited{

    background-color: blue;

}

#hncu_nav a:hover{

    background-color: red;

}

#hncu_nav a:active{

    color: blue;

}

#hncu_content{

    width: 1000px;

    height: 600px;

    background-color: yellow;

    margin:0px auto 10px;

}

#hncu_left{

    width: 200px;

    height: 500px;

    background-color: green;

    margin-top:50px;

    float:left;

}

#hncu_center{

    width: 580px;

    height: 500px;

    background-color: #bfc;

    margin-top:50px;

    margin-right: 10px;

    margin-left: 10px;

    float:left;

}

#hncu_right{

    width: 200px;

    height: 500px;

    background-color: pink;

    margin-top:50px;

    float:left;

}

#hncu_footer{

    width:1000px;

    height:200px;

    background-color:skyblue;

    margin:0px auto 10px;

}

__x__(37)0909第五天__背景图按钮的更多相关文章

  1. __x__(36)0908第五天__背景 background

    1. 背景 background: red url(img/cat.gif) repeat-x fixed; 2. 背景颜色 background-color: red; 3. 背景图片 backgr ...

  2. __x__(38)0909第五天__雪碧图的制作

    1. 用ps打开目标图片若干. 2. 调整合适的画布大小. 3. 将图片拖曳到一张里. 4. 存储为Web所用格式,选择 png24 .

  3. __x__(39)0909第五天__ 表格 table

    表格 表示一种格式化的数据,如课程表,银行对账单... ... 在网页中,使用 table 创建一个表格. html代码: <!doctype html> <html> < ...

  4. __x__(40)0909第五天__表格 table 的 css 样式 美化

    如果就向下面的代码那样,不写 tbody , 则浏览器自添加 tbody , 并将所有的 tr 移入 tbody 意味着 tr 并非 table 的子元素,而是 tbody 的子元素. 所以 以后编写 ...

  5. __x__(41)0909第五天__长表格

    长表格 银行流水,表格很长... 则需要将表格分为 表头 thead ,主体数据 tbody , 表格底部 tfoot 三个标签无顺序要求,易于维护:thead → tfoot → tbody 如果没 ...

  6. __x__(29)0908第五天__高度塌陷 问题

    高度塌陷 在文档流中,父元素的高度默认是被子元素撑开的. 但是当为 子元素 设置 float 时,子元素会完全脱离文档流,无法再撑开父元素,导致父元素高度塌陷...以致于布局混乱 变成 BFC块级格式 ...

  7. __x__(30)0908第五天__导航条的练习 <div>版本

    效果图:  html源代码: <!doctype html> <html> <head> <meta charset="utf-8" /& ...

  8. __x__(31)0908第五天__导航条的练习 <ul> 版本

    效果图:  html代码: <!doctype html> <html> <head> <meta charset="utf-8" /&g ...

  9. __x__(34)0908第五天__ 定位 position

    position 定位 指将原始摆放到页面的任意位置. 继承性:no 默认值:static        没有定位,原始出现在正常的文档流中 可选值: static :    默认值,元素没有开启定位 ...

随机推荐

  1. [物理学与PDEs]第1章第9节 Darwin 模型 9.2 Maxwell 方程组的一个定解问题

    设 $\Omega$ 为一有界区域, 外部为理想导体 $(\sigma=+\infty)$, 则 $\Omega$ 中电磁场满足 Maxwell 方程组 $$\beex \bea \ve\cfrac{ ...

  2. python中jsonpath模块的运用

    1. jsonpath介绍用来解析多层嵌套的json数据;JsonPath 是一种信息抽取类库,是从JSON文档中抽取指定信息的工具,提供多种语言实现版本,包括:Javascript, Python, ...

  3. wc 命令详解

    1.wc 命令作用 统计文件里面有多少单词,多少行,多少字符. 2.wc 语法 wc [-lwm] 选项与参数:-l :仅列出行:-w :仅列出多少字(英文单字):-m :多少字符: 3.例子 使用w ...

  4. C# - LINQ 语言集成查询

    LINQ(Language Integrated Query) LINQ语言集成查询是一组用于C#语言的扩展.它允许编写C#代码对数据集进行查询,比如查询内存中的对象或查询远程数据库的表.利用linq ...

  5. PLSQL安装、PLSQL汉化、激活

    前言 新版PLSQL连接Oracle时,不需要Oracle客户端为32位了,安装完Oracle后也不需要在单独安装客户端. 一.准备工作 1.点击下载PLSQL,本次安装的PLSQL版本为12.0.7 ...

  6. sql读取 所有表、结构 描述

    需要:读取库里面所有 表.以及表描述. 列.列描述 create PROCEDURE [dbo].[ProGetAllTableName] AS BEGIN --开启事物 BEGIN TRAN tra ...

  7. eclipse快捷键 （包括查找类、方法、变量）

    ♦[Ct rl+T] 搜索当前接口的实现类 1. [ALT +/] 智能提示     此快捷键为用户编辑的好帮手,能为用户提供内容的辅助,不要为记不全方法和属性名称犯愁,当记不全类.方法和属性的名字时 ...

  8. TCP-IP详解笔记3

    TCP-IP详解笔记3 地址解析协议 IP协议的设计目标是为跨越不同类型物理网络的分组交换提供互操作. 网络层软件使用的地址和底层网络硬件使用的地址之间进行转换. 对于TCP/IP网络,地址解析协议( ...

  9. Linux su切换用户后命令提示符变为bash-4.2$

    2018-9-30 19:31:41 星期日 今天遇到一个问题, 给gitlab配置webhook的时候, 一个目录总是不能正确执行git pull 命令, 无任何输出, 根据之前经验, 感觉是权限的 ...

  10. 【原创】Linux基础之挂载硬盘

    1 查看哪些硬盘没有挂载 # fdisk -l Disk /dev/vdb: 107.4 GB, 107374182400 bytes, 209715200 sectorsUnits = sector ...