__x__(37)0909第五天__背景图按钮
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第五天__背景图按钮的更多相关文章
- __x__(36)0908第五天__背景 background
1. 背景 background: red url(img/cat.gif) repeat-x fixed; 2. 背景颜色 background-color: red; 3. 背景图片 backgr ...
- __x__(38)0909第五天__雪碧图的制作
1. 用ps打开目标图片若干. 2. 调整合适的画布大小. 3. 将图片拖曳到一张里. 4. 存储为Web所用格式,选择 png24 .
- __x__(39)0909第五天__ 表格 table
表格 表示一种格式化的数据,如课程表,银行对账单... ... 在网页中,使用 table 创建一个表格. html代码: <!doctype html> <html> < ...
- __x__(40)0909第五天__表格 table 的 css 样式 美化
如果就向下面的代码那样,不写 tbody , 则浏览器自添加 tbody , 并将所有的 tr 移入 tbody 意味着 tr 并非 table 的子元素,而是 tbody 的子元素. 所以 以后编写 ...
- __x__(41)0909第五天__长表格
长表格 银行流水,表格很长... 则需要将表格分为 表头 thead ,主体数据 tbody , 表格底部 tfoot 三个标签无顺序要求,易于维护:thead → tfoot → tbody 如果没 ...
- __x__(29)0908第五天__高度塌陷 问题
高度塌陷 在文档流中,父元素的高度默认是被子元素撑开的. 但是当为 子元素 设置 float 时,子元素会完全脱离文档流,无法再撑开父元素,导致父元素高度塌陷...以致于布局混乱 变成 BFC块级格式 ...
- __x__(30)0908第五天__导航条的练习 <div>版本
效果图: html源代码: <!doctype html> <html> <head> <meta charset="utf-8" /& ...
- __x__(31)0908第五天__导航条的练习 <ul> 版本
效果图: html代码: <!doctype html> <html> <head> <meta charset="utf-8" /&g ...
- __x__(34)0908第五天__ 定位 position
position 定位 指将原始摆放到页面的任意位置. 继承性:no 默认值:static 没有定位,原始出现在正常的文档流中 可选值: static : 默认值,元素没有开启定位 ...
随机推荐
- GDB disassemble
前面几篇谈GDB调试程序的帖子,都对反汇编语焉不详.这里详细讨论一下disassemble/disass命令 反汇编一个函数disass func_name 反汇编一段内存地址, 第1个参数是起始地址 ...
- Entity Framework入门教程（16)---Enum
EF DbFirst模式中的枚举类型使用 这一节介绍EF DbFirst模式中的Enum(枚举类型),CodeFirst模式中的Enum会在以后的EF CoreFirst系列中介绍.EF5中添加了对E ...
- mysql递归
sql Server可以用with as 语法,mysql没有这个功能,只能用别的方式了,目前的mysql版本中并不支持直接的递归查询,但是通过递归到迭代转化的思路,还是可以在一句SQL内实现树的递归 ...
- 第七节：语法总结(1)(自动属性、out参数、对象初始化器、var和dynamic等)
一. 语法糖简介 语法糖也译为糖衣语法,是由英国计算机科学家彼得·约翰·兰达(Peter J. Landin)发明的一个术语,指计算机语言中添加的某种语法,这种语法对语言的功能并没有影响,但是更方 ...
- oldboy s21day12.设计商城系统，主要提供两个功能：商品管理、会员管理。
#!/usr/bin/env python# -*- coding:utf-8 -*- # 1.写出三元运算的基本格式及作用?'''a if a>b else b''' # 2.什么是匿名函数? ...
- COM 类工厂中 CLSID 为 {000209FF-0000-0000-C000-000000000046} 的组件失败，原因是出现以下错误: 80070005 拒绝访问。最新解决方案
检索 COM 类工厂中 CLSID 为 {000209FF-0000-0000-C000-000000000046} 的组件失败,原因是出现以下错误: 80070005 拒绝访问. (异常来自 HRE ...
- 「NOI2017」泳池
DP式子比后面的东西难推多了 LOJ2304 Luogu P3824 UOJ #316 题意 给定一个长度为$ n$高为$ \infty$的矩形 每个点有$ 1-P$的概率不可被选择 求最大的和底边重 ...
- Linux的vim编辑器中的翻页命令
当我们进入Linux的vim编辑器查看脚本时,按上下键查看是不是非常慢?这个时候就要用到我们的翻页快捷键了,快捷键命令如: 整页翻页命令为:Ctrl + f 键 f 的英文全拼为:forward: ...
- Python爬虫基础之认识爬虫
一.前言 爬虫Spider什么的,老早就听别人说过,感觉挺高大上的东西,爬网页,爬链接~~~dos黑屏的数据刷刷刷不断地往上冒,看着就爽,漂亮的校花照片,音乐网站的歌曲,笑话.段子应有尽有,全部都过来 ...
- Python 爬虫 58同城
目标站点需求分析 获取各类产品的名字,地区,时间,价格 涉及的库 BeautifulSoup,requests,time,pymongo 获取各大类产品的链接 获取单页源码 解析单页源码 保存到文件中 ...