Html5入门-hover选择器（一）
来源：互联网 发布：ui界面设计用什么软件 编辑：程序博客网 时间：2024/06/13 09:43
先上源码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk2312" />
<title>无标题文档</title>
<style type="text/css">
ul li{float:left;list-style-type:none;width:60px;height:40px;border-bottom:solid 2px #aa0000;text-align:center;}
ul li a{display:block;color:#000;font-size:20px;width:60px;height:20px;margin-top:20px;margin-bottom:0px;line-height:20px;text-decoration:none;}
ul li a:hover{font-size:26px;height:30px;pxcolor:#aa0000;background:#aaaaaa;padding-bottom:10px;margin-top:0px;background:aa0000;line-height:30px}
</style>
</head>
<body>
<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>
<li><a href="#">乐</a></li>
<li><a href="#">乎</a></li>
</ul>
</body>
</html>
效果图：
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
我们开始一步步的编辑这个小页面
先在body里写个无序列表,再加入几条<li>
<ul>
<li></li>
<li></li>
.....
<li></li>
</ul>
在<li>标签中加入a标签，像酱婶儿的：
<li><a href="#">学</a></li>
<li><a href="#">而</a></li>
这样 html就写好了，效果是这样的：
然后我们开始写css：
首先设置<li>标签：
排成一列，去掉列表项的小圆点符号，设置宽高，设置个底边线，内部水平居中
ul li{float:left;list-style-type:none;width:60px;height:40px;border-bottom:solid 2px #aa0000;text-align:center;}
然后设置 <li>标签里的<a>标签：
/*display:block 非常重要，意思是让对象成为“块级元素”*/
设置为块级元素，设置字体颜色，宽高，距离顶端位置，距离底端位置，行高（为了让字体居中）还有最后一个标签 取消下划线
ul li a{display:block;color:#000;font-size:20px;width:60px;height:20px;margin-top:20px;margin-bottom:0px;line-height:20px;text-decoration:none;}
现在的效果是这样的：
然后 设置hover时候的样式：
ul li a:hover{font-size:26px;height:30px;color:#aa0000;background:#aaaaaa;padding-bottom:10px;margin-top:0px;background:aa0000;line-height:30px}
意思是，当鼠标停留在对应的<a>标签位置的时候，重新设置字体大小，a的高度等
然后就是开篇的效果了。
总结一下，hover的效果设置 通俗的来说，就是当你鼠标停留在<a>标签上面时，a标签的样式在原理样式的基础上，根据hover{}做出对应改变，如颜色改变，margin改变等，hover{}中没有重设的地方依然采取默认的样式。
- Html5入门-hover选择器（一）
- html5入门（一）
- :hover 选择器
- hover 选择器
- HTML5- Canvas入门（一）
- CSS :hover 选择器
- :hover选择器知识点
- html5学习 一 html5选择器与json新方法html5拖拽
- Cocos2d-html5入门笔记（一）
- (HTML5)phonegap的基础入门（一）
- 10分钟HTML5入门基础知识（一）
- HTML5&CSS入门基础内容（一）
- HTML5基础（一）零基础入门
- HTML5入门学习一
- jQuery快速入门基础教程之选择器（一）
- 伪类选择器hover应用
- Html5中的选择器（Selector）
- HTML5选择器
- 机器学习中的数学(1)-回归(regression)、梯度下降(gradient descent)
- D3 js学习资料
- OC语言 URL 编码 Data 以及 String 之间转换
- 用Swift做个游戏Lecture07 —— 老板，来块记分牌！
- Android：嵌入式关系型SQLite数据库、SQLiteOpenHelper、SQLiteDatabase、事务
- Html5入门-hover选择器（一）
- 用Swift做个游戏Lecture08 —— Show Me 得分面板！
- Android 4.4 实现透明状态栏Translucent system bar(Status bar)
- Java并发和多线程2：3种方式实现数组求和
- 用Swift做个游戏Lecture09 —— 服务员，说好的菜单呢？
- CSS 引入的4种方式
- 纯CSS3多列的瀑布流布局演示
- 用Swift做个游戏Lecture10 —— 优化游戏(终结篇)
- maven提示jdk版本或项目版本问题
