css超链接样式+雪碧图实现导航
1.回顾上一节内容：
2.本节笔记
3.例子试题
3.1 中间链接的样式使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/*css设置超链接的样式（选择器）*/
#aa{
color: yellow;
}
/*未被访问的样式*/
#aa:link{
color: pink;
}
/*鼠标触碰*/
#aa:hover{
color: orange;
}
/*超链接被点击不放时所设置的样式*/
#aa:active{
color: green;
background-color: red;
}
#aa:visited{
background-color: black;
}
</style>
</head>
<body>
<a href="http://www.4399.com">百度一下</a>
<hr>
<a id="aa" href="http://www.4399.com">百度一下</a>
</body>
</html>
3.2css雪碧图的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
#container{
width: 960px;
height: 800px;
/* 显示边框*/
border: 1px solid red;
居中
margin: 0 auto;
}
#container>.top{
width: 960px;
height: 180px;
/*background-color: pink;*/
}
#container>.top>.nav{
width: 960px;
height: 30px;
/*border: 1px solid black;*/
/*text-align: right;*/
}
#container>.top>.search{
width: 960px;
height: 140px;
/*border: 1px solid orange;*/
line-height: 140px;
居中
text-align: center;
}
input{
width: 300px;
height: 35px;
}
button{
width: 80px;
height: 38px;
设置字体大小
font-size: 20px;
}
#container>.main{
width: 960px;
height: 550px;
background-color: #666;
}
#container>.foot{
width: 960px;
height: 70px;
/*background-color: pink;*/
}
#container>.top>.nav ul{
list-style: none;
}
.logo{
width: 40%;
height: 30px;
/*background-color: red;*/
浮左 浮动
float: left;
}
.mynav{
width: 60%;
height: 30px;
/*background-color: orange;*/
float: left;
text-align: right;
}
ul li{
float: left;
}
ul li a{
/*border: 1px solid red;*/
display: inline-block;
width: 70px;
height: 30px;
line-height: 30px;
text-align: center;
color: black;
text-decoration: none;
}
.zking{
width: 30px;
height: 30px;
/*border: 1px solid red;*/
background-image: url("icon.gif");
background-repeat: no-repeat;
}
.zking2{
background-position: -26px 1px;
}
.zking3{
background-position: -54px 3px;
}
.zking4{
background-position: -81px 3px;
}
.btn{
width: 45px;
height: 20px;
font-size: 12px;
设置按钮圆角
border-radius: 10px;
}
</style>
</head>
<body>
<!-- 雪碧图实现导航条 -->
<div id="container">
<div class="top">
<!-- 显示导航条 -->
<div class="nav">
<div class="logo"></div>
<div class="mynav">
<ul>
<li class="zking"></li>
<li><a href="">购物车</a></li>
<li class=" zking zking2"></li>
<li><a href="">帮助中心</a></li>
<li class="zking zking3"></li>
<li><a href="">加入收藏</a></li>
<li class="zking zking4"></li>
<li><a href="">设为首页</a></li>
<li><button class="btn">登录</button></li>
<li><button class="btn">注册</button></li>
</ul>
</div>
</div>
<!-- 显示搜索 -->
<div class="search">
<form action="">
<input type="text">
<button>搜索</button>
</form>
</div>
</div>
<div class="main"></div>
<div class="foot"></div>
</div>
</body>
</html>
效果图
css超链接样式+雪碧图实现导航相关推荐
- 【无标浮动特性应用实例】二、CSS 精灵（雪碧图、精灵图）三、滑动门 四CSS 定位{相对定位}
[无标浮动特性应用实例] 总结:浮动脱离文档流不脱离文本流 - 最初只用于在成块的文本内浮动图像为图片和文字之间的对齐方式是基线对齐 要想图文环绕 需要给图片设置浮动 应用实例-两列自适应 实现要点 ...
- 一篇文章教你学会如何使用CSS中的雪碧图（CSS Sprite）
一篇文章教你学会如何使用CSS中的雪碧图(CSS Sprite) 一.什么是雪碧图? 雪碧图(CSS Sprite)又叫CSS精灵图,是一种网页图片应用处理方式,他允许你将一个页面设计到 所有零星图片 ...
- HTML+CSS 背景之雪碧图+渐变
一:雪碧图 雪碧图是什么? 一个页面可能会用到多个图片或者图标,如果每个图片都是一个单独的文件,则需要浏览器进行多次加载,浪费性能和带宽. 而且在某也情况下图片会延迟加载,导致用户体验不好. 将多个图 ...
- CSS+HTML快速入门 链接样式雪碧图（案例）
目录 一.伪类的使用 1.html部分: 二.横向主菜单 1.images图片部分: 2.css部分: 3.html部分: 三.外部样式 1.css部分: 2.html部分: 四.制作顶部菜单(综合) ...
- 猿人学第四题-CSS加密【雪碧图、样式干扰】
练习链接:http://match.yuanrenxue.com/match/4 学习链接: https://bbs.tampermonkey.net.cn/thread-203-1-2.html h ...
- CSS 精灵（雪碧图、精灵图）、滑动门
概述 css精灵英文叫法 css sprites,通常被解释为"CSS 图像拼合"或"CSS 贴图定位":其实就 是把网页中一些背景图片整合到一张图片文件中,再 ...
- CSS 精灵（雪碧图、精灵图）
学习目标 能够说出什么是CSS精灵 掌握CSS精灵在实际示案例中的应用 概述 css精灵英文叫法 css sprites,通常被解释为"CSS 图像拼合"或"CSS 贴图 ...
- 二、CSS 精灵（雪碧图、精灵图）
- 能够说出什么是CSS精灵 - 掌握CSS精灵在实际示案例中的应用 ### 概述 css精灵英文叫法 css sprites,通常被解释为"CSS 图像拼合"或"CSS ...
- 前端开发工具介绍----合成雪碧图工具（css sprite）
合成雪碧图Sprite工具 1.国外的在线合成工具:http://csssprites.com/ 选择需要合并的文件----设置option选项(包括:元素的间距,排列方式,背景颜色,边框)----- ...
- css sprit雪碧图制作，使用教程
写在前面: 在网页制作中,雪碧图也是前端攻城狮必须掌握的一项小技能.百度词条对雪碧图的解释是:CSS雪碧 即CSS Sprite,也有人叫它CSS精灵,是一种CSS图像合并技术,该方法是将小图标和背景 ...
最新文章
- mysql查询分数前三个_Mysql 单表查询各班级总分前三名
- 从输入 URL 到页面加载完的过程中都发生了什么事情 —— 网络优化篇
- Ajax与WebGIS
- 中文分词_中文分词最佳纪录刷新，两大模型分别解决中文分词及词性标注问题...
- Flink从入门到精通100篇（二十一）-万字长文详解 Flink 中的 CopyOnWriteStateTable
- 成功解决TypeError: __init__() got an unexpected keyword argument 'n_iterations'
- if转java_java 使用if将String内字符转换 递归
- LUA面向对象编程技巧
- C语言递归实现二叉树（二叉链表）的三种遍历和销毁操作（实验）
- java 从已知日期计算干支纪日_两个日期计算
- 埃尔米特(Hermite)插值及其MATLAB程序
- matlab dmc控制代码,动态控制矩阵（DMC）算法的浅析
- 商业计划书（BP）应该包含哪些点？看 BP 的人最想从中得到什么？
- 数据评估：SD(标准差), 方差, 方差分析(ANOVA)
- 计算机30秒自动更换的桌面软件,无需任何软件即可在计算机上的多个桌面墙纸之间自动切换...
- （类比较器）java对比两个相同实体类中属性的值的差异
- 用iText把图片转成PDF
- 2021.3.8-第一次MD作业
- directive之require
- NX二次开发-UFUN输入对象获得对象所在的部件tag UF_OBJ_ask_owning_part