Web前端三大核心技术-CSS
文章目录
CSS概述
CSS （Cascading Style Sheets）是层叠样式表用来定义网页的显示效果。可以解决html代码对样式定义的重复，提高了后期样式代码的可维护性，并增强了网页的显示效果功能。简单一句话：CSS将网页内容和显示样式进行分离，提高了显示功能。
单纯使用html的属性来控制页面样式不方便
CSS引入
传统方式：
在html标签中使用style属性：
属性值是键值对形式的集合，每一个键值对之间的用:连接，多个属性值之间用;隔开
<p style="color: #00ff33;text-align: center;">www.baidu.com</p>
<p style="color: #00ff33;text-align: center;">百度</p>
<p style="color: #00ff33;text-align: center;">大家好，我们开始学习css</p>
在html的头信息定义CSS：
<style type="text/css">
p {
color:#00ff33;
text-align:center;
}
</style>
在html中引入css文件：
html代码：
<p >www.baidu.com</p>
<p >百度</p>
<p >大家好，我们开始学习css</p>
CSS引入代码：
扫描二维码关注公众号，回复：
8900625 查看本文章
<link href="1.css" type="text/css" rel="stylesheet">
或者
<style type="text/css">
@IMPORT url("1.css");
</style>
css文件代码：
p {
color: #00ff22;
text-align: center;
}
注：可以通过多个link标签链接进来多个CSS文件。重复样式以最后链接进来的CSS样式为准
样式优先级：
由上到下，由外到内。优先级由低到高
CSS选择器
基本选择器
-
html选择器（元素类型选择器）:就是把html本身作为选择器。
-
class选择器：就是把html标签的class属性值作为选择器。为了和HTML进行区分，加.作为前缀
-
id选择器，就是把html标签的id属性值作为选择器。为了和HTML进行区分，加#作为前缀
html代码：
<p >www.baidu.com</p>
<p >百度</p>
<p id="p3" class="p_class">大家好，我们现在开始学习CSS</p>
css代码：
<style type="text/css">
p {
color: #00ff22;
text-align: center;
}
.p_class{
color: #00aa22;
text-align: left;
}
#p3{
color: #00aabb;
text-align: right;
}
</style>
基本选择器的优先级：元素类型选择器< 类选择器< ID选择器
关联选择器
写一个段话,我爱学习,把学习用粗体表示，针对一段话中的粗体部分添加样式：红色,30px
p b：元素中间的空格代表p元素内部的b元素
<p >我们开始学习<b>css</b></p>
<style type="text/css">
p b{
font-size:50px;
color: red;
}
</style>
组合选择器
我要把所有的p标签和b标签的内容都添加样式：蓝色,130px
html代码：
<p >大家好</p>
<p >老师好</p>
<b>css真简单</b>
CSS代码：
<style type="text/css">
b,p{
font-size: 100px;
color: blue;
}
</style>
b,p：逗号代表两侧的元素使用当前同一个样式
伪元素选择器
伪元素选择器：其实就在html中预先定义好的一些选择器。称为伪元素。是因为CSS的术语。
格式：标签名：伪元素{样式设置}
- a:link 超链接未点击状态。
- a:visited 被访问后的状态。
- a:hover 光标移到超链接上的状态（未点击）。
- a:active 点击超链接时的状态。
html代码：
<a href="http://www.rlteach.com">任亮</a>
<a href="http://www.sina.com">新浪</a>
<a href="http://www.baidu.com">百度</a>
CSS代码：
<style type="text/css">
a {
text-decoration: none;
}
</style>
Div与Span
div和span是html中块级元素，是层叠样式表中的定位技术
Div示例
<html>
<head>
<meta charset="UTF-8">
<title>div 标记范例</title>
<style type="text/css">
<!--
div{
font-size:18px; /* 字号大小 */
font-weight:bold; /* 字体粗细 */
font-family:Arial; /* 字体 */
color:#FF0000; /* 颜色 */
background-color:#FFFF00; /* 背景颜色 */
text-align:center; /* 对齐方式 */
width:300px; /* 块宽度 */
height:100px; /* 块高度 */
}
-->
</style>
</head>
<body>
<div>
这是一个div标记
</div>
</body>
</html>
Div与Span区别
<html>
<head>
<title>div与span的区别</title>
<meta charset="UTF-8">
</head>
<body>
<p>div标记不同行：</p>
<div><img src="building.jpg" border="0"></div>
<div><img src="building.jpg" border="0"></div>
<div><img src="building.jpg" border="0"></div>
<p>span标记同一行：</p>
<span><img src="building.jpg" border="0"></span>
<span><img src="building.jpg" border="0"></span>
<span><img src="building.jpg" border="0"></span>
</body>
</html>
Div的边框样式
示例代码：
<html>
<head>
<title>border-style</title>
<style type="text/css">
<!--
div{
border-width:6px;
border-color:#000000;
margin:20px; padding:5px;
background-color:#FFFFCC;
}
-->
</style>
</head>
<body>
<div style="border-style:dashed">The border-style of dashed.</div>
<div style="border-style:dotted">The border-style of dotted.</div>
<div style="border-style:double">The border-style of double.</div>
<div style="border-style:solid">The border-style of solid.</div>
效果：
Div内边框（padding）
所有html在布局上都遵守盒子模型
示例代码：
<html>
<head>
<title>padding</title>
<style type="text/css">
<!--
.outside{
padding:10px 30px 50px 100px; /* 同时设置，顺时针 */
border:1px solid #000000; /* 外边框 */
background-color:#fffcd3; /* 外背景 */
}
.inside{
background-color:#66b2ff; /* 内背景 */
border:1px solid #005dbc; /* 内边框 */
width:100%; line-height:40px;
text-align:center;
font-family:Arial;
}
-->
</style>
</head>
<body>
<div class="outside">
<div class="inside">padding</div>
</div>
</body>
</html>
效果：
Div外边框（margin）
两个行内元素的margin：
示例代码：
<html>
<head>
<meta charset="UTF-8">
<title>两个行内元素的margin</title>
<style type="text/css">
<!--
span{
background-color:#a2d2ff;
text-align:center;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
padding:10px;
}
span.left{
margin-right:30px;
background-color:#a9d6ff;
}
span.right{
margin-left:40px;
background-color:#eeb0b0;
}
-->
</style>
</head>
<body>
<span class="left">行内元素1</span><span class="right">行内元素2</span>
</body>
</html>
效果
父子块的margin
示例代码
<html>
<head>
<meta charset="UTF-8">
<title>父子块的margin</title>
<style type="text/css">
<!--
div.father{ /* 父div */
background-color:#fffebb;
text-align:center;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
padding:10px;
border:1px solid #000000;
}
div.son{ /* 子div */
background-color:#a2d2ff;
margin-top:30px;
margin-bottom:0px;
padding:15px;
border:1px dashed #004993;
}
-->
</style>
</head>
<body>
<div class="father">
<div class="son">子div</div>
</div>
</body>
</html>
效果
Div浮动
HTML页面的标准文档流(默认布局)是：从上到下，从左到右，遇块(块级元素)换行。
浮动层：给元素的float属性赋值后，就是脱离文档流，进行左右浮动，紧贴着父元素(默认为body文本区域)的左右边框。而此浮动元素在文档流空出的位置，由后续的(非浮动)元素填充上去：块级元素直接填充上去，若跟浮动元素的范围发生重叠，浮动元素覆盖块级元素
Float有4个值：
left ：元素向左浮动。
right ：元素向右浮动。
none ：默认值。
inherit ：从父元素继承float属性。
浮动后的div宽度会变成0，但是其内边框可能撑起它的宽和高。
<html>
<head>
<meta charset="UTF-8">
<title>float属性</title>
<style type="text/css">
<!--
body{
margin:15px;
font-family:Arial;
font-size:12px;
}
.father{
background-color:#fffea6;
border:1px solid #111111;
padding:25px; /* 父块的padding */
}
.son1{
padding:10px; /* 子块son1的padding */
margin:5px; /* 子块son1的margin */
background-color:#70baff;
border:1px dashed #111111;
float:left; /* 块son1左浮动 */
}
.son2{
padding:5px;
margin:0px;
background-color:#ffd270;
border:1px dashed #111111;
}
-->
</style>
</head>
<body>
<div class="father">
<div class="son1">float1</div>
<div class="son2">float2</div>
</div>
</body>
</html>
效果：
如果浮动的div前面有同级别html元素，该浮动的div会排在html元素后面浮动，不会覆盖html元素
总结：div的浮动对前面的html元素没影响，对后面的html元素有影响。
多个同级块元素同时在一个方向浮动，则从该方向上水平依次排列：
<html>
<head>
<meta charset="UTF-8">
<title>float属性</title>
<style type="text/css">
<!--
body{
margin:15px;
font-family:Arial;
font-size:12px;
}
.father{
background-color:#fffea6;
border:1px solid #111111;
padding:25px; /* 父块的padding */
}
.son1{
padding:5px;
margin-right:3px; /* 子块son1的右margin */
background-color:#70baff;
border:1px dashed #111111;
float:left; /* 子块son1向左浮动 */
}
.son2{
padding:5px;
background-color:#ffd270;
border:1px dashed #111111;
float:left; /* 子块son2也向左浮动 */
width:60%;
}
-->
</style>
</head>
<body>
<div class="father">
<div class="son1">float1</div>
<div class="son2">CSS（Cascading Style Sheet），中文译为层叠样式表，是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。</div>
</div>
</body>
</html>
前面div的浮动会影响后面的div的布局，如果想消除该影响可以使用clear:left|right|both
<html>
<head>
<meta charset="UTF-8">
<title>float属性 clear</title>
<style type="text/css">
<!--
body{
margin:5px;
font-family:Arial;
font-size:13px;
}
.block1{
padding-left:10px;
margin-right:10px;
float:left; /* 块1向左浮动 */
}
h3{
background-color:#a5d1ff; /* 标题的背景色 */
border:1px dotted #222222; /* 标题边框 */
clear:left; /* 清除float对左侧的影响 */
}
-->
</style>
</head>
<body>
<div class="block1"><img src="building2.jpg" border="0"></div>
<div>对于一个网页设计者来说，HTML语言一定不会感到陌生，因为它是所有网页制作的基础。但是如果希望网页能够美观、大方，并且升级方便，维护轻松，那么仅仅HTML是不够的，CSS在这中间扮演着重要的角色。本章从CSS的基本概念出发，介绍CSS语言的特点，以及如何在网页中引入CSS，并对CSS进行初步的体验。</div>
<h3>CSS的概念</h3>
<div>CSS（Cascading Style Sheet），中文译为层叠样式表，是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。</div>
</body>
</html>
CSS定位
绝对定位
设置绝对定位的元素从文档流中完全删除，以浏览器的左上角为相对位置，设置水平位置和垂直的位置
<html>
<head>
<meta charset="UTF-8">
<title>position属性</title>
<style type="text/css">
<!--
body{
margin:10px;
font-family:Arial;
font-size:13px;
}
#father{
background-color:#a0c8ff;
border:1px dashed #000000;
width:100%;
height:100%;
}
#block{
background-color:#fff0ac;
border:1px dashed #000000;
padding:10px;
position:absolute; /* absolute绝对定位 */
left:20px; /* 块的左边框离页面左边界20px */
top:40px; /* 块的上边框离页面上边界40px */
}
-->
</style>
</head>
<body>
<div id="father">
<div id="block">absolute</div>
</div>
</body>
</html>
效果：
相对定位
相对定位是一个非常容易理解的概念，如果对一个元素先定位，可以设置其水平位置和垂直位置，这个元素相对于元素的起点开始移动。
注意：在使用相对定位的时候无论是否进行移动，元素仍然会占据原有的空间，因此移动元素可能覆盖其他元素。
<html>
<head>
<meta charset="UTF-8">
<title>position属性</title>
<style type="text/css">
<!--
body{
margin:10px;
font-family:Arial;
font-size:13px;
}
#father{
background-color:#a0c8ff;
border:1px dashed #000000;
width:100%; height:100%;
padding:5px;
}
#block1{
background-color:#fff0ac;
border:1px dashed #000000;
padding:10px;
position:relative; /* relative相对定位 */
left:15px; /* 子块的左边框距离它原来的位置15px */
top:10%;
}
-->
</style>
</head>
<body>
<div id="father">
<div id="block1">relative</div>
</div>
</body>
</html>
效果：
CSS文字处理
文字样式
-font-family
<html>
<head>
<meta charset="UTF-8">
<title>文字字体</title>
<style>
<!--
h2{
font-family:黑体, 幼圆;
}
p{
font-family:Arial, Helvetica, sans-serif;
}
p.kaiti{
font-family:楷体_GB2312, "Times New Roman";
}
-->
</style>
</head>
<body>
<h2>立 春</h2>
<p>自秦代以来，我国就一直以立春作为春季的开始。立春是从天文上来划分的，而在自然界、在人们的心目中，春是温暖，鸟语花香；春是生长，耕耘播种。在气候学中，春季是指候（5天为一候）平均气温10℃至22℃的时段。</p>
<p class="kaiti">作者: isaac</p>
</body>
</html>
效果：
文字大小
大小单位
px
相对长度单位。像素（Pixel）。
像素是相对于显示器屏幕分辨率而言的。譬如，WONDOWS的用户所使用的分辨率一般是96像素/英寸。而MAC的用户所使用的分辨率一般是72像素/英寸。
em
相对长度单位。相对于当前对象内文本的字体尺寸。
如当前行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
ex
相对长度单位。相对于字符“x”的高度。此高度通常为字体尺寸的一半。
如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
pt
绝对长度单位。点（Point）。
1in = 2.54cm = 25.4 mm = 72pt = 6pc
pc
绝对长度单位。派卡（Pica）。相当于我国新四号铅字的尺寸。
1in = 2.54cm = 25.4 mm = 72pt = 6pc
in
绝对长度单位。英寸（Inch）。
1in = 2.54cm = 25.4 mm = 72pt = 6pc
mm
绝对长度单位。毫米（Millimeter）。
1in = 2.54cm = 25.4 mm = 72pt = 6pc
cm
绝对长度单位。厘米（Centimeter）。
1in = 2.54cm = 25.4 mm = 72pt = 6pc
<html>
<head>
<meta charset="UTF-8">
<title>文字大小</title>
<style>
<!--
p.inch{ font-size: 0.5in; }
p.cm{ font-size: 0.5cm; }
p.mm{ font-size: 4mm; }
p.pt{ font-size: 12pt; }
p.pc{ font-size: 2pc; }
-->
</style>
</head>
<body>
<p class="inch">文字大小，0.5in</p>
<p class="cm">文字大小，0.5cm</p>
<p class="mm">文字大小，4mm</p>
<p class="pt">文字大小，12pt</p>
<p class="pc">文字大小，2pc</p>
</body>
</html>
效果：
文字粗细
<html>
<head>
<meta charset="UTF-8">
<title>文字粗体</title>
<style>
<!--
h1 span{ font-weight:lighter;}
span.ten{ font-weight:bold; }
span.eleven{ font-weight:normal; }
-->
</style>
</head>
<body>
<h1>文字<span>粗</span>体</h1>
<span class="ten">文字粗细: lighter </span>
<span class="ten">文字粗细:bold</span>
<span class="eleven">文字粗细:normal</span>
</body>
</html>
效果：
文字斜体
<html>
<head>
<meta charset="UTF-8">
<title>文字斜体</title>
<style>
<!--
h1{ font-style:italic; } /* 设置斜体 */
h1 span{ font-style:normal; } /* 设置为标准风格 */
p{ font-size:18px; }
p.one{ font-style:italic; }
p.two{ font-style:oblique; }
-->
</style>
</head>
<body>
<h1>文字<span>斜</span>体</h1>
<p class="one">文字斜体</p>
<p class="two">文字斜体</p>
</body>
</html>
效果：
文字下划线、顶划线、删除线
<html>
<head>
<meta charset="UTF-8">
<title>文字下划线、顶划线、删除线</title>
<style>
<!--
p.one{ text-decoration:underline; } /* 下划线 */
p.two{ text-decoration:overline; } /* 顶划线 */
p.three{ text-decoration:line-through; } /* 删除线 */
p.four{ text-decoration:blink; } /* 闪烁 */
-->
</style>
</head>
<body>
<p class="one">下划线文字，下划线文字</p>
<p class="two">顶划线文字，顶划线文字</p>
<p class="three">删除线文字，删除线文字</p>
<p class="four">文字闪烁</p>
<p>正常文字对比</p>
</body>
</html>
效果：
文字对齐
<html>
<head>
<meta charset="UTF-8">
<title>水平对齐</title>
<style>
<!--
p{ font-size:12px; }
p.left{ text-align:left; } /* 左对齐 */
p.right{ text-align:right; } /* 右对齐 */
p.center{ text-align:center; } /* 居中对齐 */
-->
</style>
</head>
<body>
<p class="left">
这个段落采用左对齐的方式，text-align:left，因此文字都采用左对齐。<br>
床前明月光，疑是地上霜。<br>举头望明月，低头思故乡。<br>李白
</p>
<p class="right">
这个段落采用右对齐的方式，text-align:right，因此文字都采用右对齐。<br>
床前明月光，疑是地上霜。<br>举头望明月，低头思故乡。<br>李白
</p>
<p class="center">
这个段落采用居中对齐的方式，text-align:center，因此文字都采用居中对齐。<br>
床前明月光，疑是地上霜。<br>举头望明月，低头思故乡。<br>李白
</p>
</body>
</html>
效果：
CSS背景处理
背景颜色
<html>
<head>
<meta charset="UTF-8">
<title>背景颜色</title>
<style>
<!--
body{
background-color:#5b8a00; /* 设置页面背景颜色 */
margin:0px;
padding:0px;
color:#c4f762; /* 设置页面文字颜色 */
}
p{
font-size:15px; /* 正文文字大小 */
padding-left:10px;
padding-top:8px;
line-height:120%;
}
span{ /* 首字放大 */
font-size:80px;
font-family:黑体;
float:left;
padding-right:5px;
padding-left:10px;
padding-top:8px;
}
-->
</style>
</head>
<body>
<img src="mainroad.jpg" style="float:right;">
<span>春</span>
<p>季，地球的北半球开始倾向太阳，受到越来越多的太阳光直射，因而气温开始升高。随着冰雪消融，河流水位上涨。春季植物开始发芽生长，许多鲜花开放。冬眠的动物苏醒，许多以卵过冬的动物孵化，鸟类开始迁徙，离开越冬地向繁殖地进发。许多动物在这段时间里发情，因此中国也将春季称为“万物复苏”的季节。春季气温和生物界的变化对人的心理和生理也有影响。</p>
<p>对农民来说，春季是播种许多农作物的季节。在春季，地球的北半球开始倾向太阳，受到越来越多的太阳光直射，因而气温开始升高。随着冰雪消融，河流水位上涨。春季植物开始发芽生长，许多鲜花开放。冬眠的动物苏醒，许多以卵过冬的动物孵化，鸟类开始迁徙，离开越冬地向繁殖地进发。许多动物在这段时间里发情，因此中国也将春季称为“万物复苏”的季节。</p>
</body>
</html>
效果：
背景图片
<html>
<head>
<meta charset="UTF-8">
<title>背景图片</title>
<style>
<!--
body{
background-image:url(Burner-4k.jpg); /* 页面背景图片 */
}
-->
</style>
</head>
<body>
</body>
</html>
效果：
背景平铺
<html>
<head>
<title>背景重复</title>
<style>
<!--
body{
padding:0px;
margin:0px;
background-image:url(Burner-4k.jpg); /* 背景图片 */
background-repeat:repeat-y; /* 垂直方向重复 */
background-color:#0066FF; /* 背景颜色 */
}
-->
</style>
</head>
<body>
</body>
</html>
CSS表格处理
<html>
<head>
<meta charset="UTF-8">
<title>年度收入</title>
<style>
<!--
.datalist{
border:1px solid #429fff; /* 表格边框 */
font-family:Arial;
border-collapse:collapse; /* 边框重叠 */
}
.datalist caption{
padding-top:3px;
padding-bottom:2px;
font:bold 1.1em;
background-color:#f0f7ff;
border:1px solid #429fff; /* 表格标题边框 */
}
.datalist th{
border:1px solid #429fff; /* 行、列名称边框 */
background-color:#d2e8ff;
font-weight:bold;
padding-top:4px; padding-bottom:4px;
padding-left:10px; padding-right:10px;
text-align:center;
}
.datalist td{
border:1px solid #429fff; /* 单元格边框 */
text-align:right;
padding:4px;
}
-->
</style>
</head>
<body>
<table class="datalist">
<caption>年度收入 2004 - 2007</caption>
<tr>
<th></th>
<th scope="col">2004</th>
<th scope="col">2005</th>
<th scope="col">2006</th>
<th scope="col">2007</th>
</tr>
<tr>
<th scope="row">拨款</th>
<td>11,980</td>
<td>12,650</td>
<td>9,700</td>
<td>10,600</td>
</tr>
<tr>
<th scope="row">捐款</th>
<td>4,780</td>
<td>4,989</td>
<td>6,700</td>
<td>6,590</td>
</tr>
<tr>
<th scope="row">投资</th>
<td>8,000</td>
<td>8,100</td>
<td>8,760</td>
<td>8,490</td>
</tr>
<tr>
<th scope="row">募捐</th>
<td>3,200</td>
<td>3,120</td>
<td>3,700</td>
<td>4,210</td>
</tr>
<tr>
<th scope="row">销售</th>
<td>28,400</td>
<td>27,100</td>
<td>27,950</td>
<td>29,050</td>
</tr>
<tr>
<th scope="row">杂费</th>
<td>2,100</td>
<td>1,900</td>
<td>1,300</td>
<td>1,760</td>
</tr>
<tr>
<th scope="row">总计</th>
<td>58,460</td>
<td>57,859</td>
<td>58,110</td>
<td>60,700</td>
</tr>
</table>
</body>
</html>
效果：
CSS列表处理
图片符号
<html>
<head>
<meta charset="UTF-8">
<title>图片符号</title>
<style>
<!--
body{
background-color:#c1daff;
}
ul{
font-family:Arial;
font-size:13px;
color:#00458c;
list-style-type:none; /* 不显示项目符号 */
}
li{
background:url(Burner-4k.jpg) no-repeat; /* 添加为背景图片 */
padding-left:25px; /* 设置图标与文字的间隔 */
}
-->
</style>
</head>
<body>
<p>自行车</p>
<ul>
<li>Road cycling 公路自行车赛</li>
<li>Track cycling 场地自行车赛</li>
<li>sprint 追逐赛</li>
<li>time trial 计时赛</li>
<li>points race 计分赛</li>
<li>pursuit 争先赛</li>
<li>Mountain bike 山地自行车赛</li>
</ul>
</body>
</html>
效果：
无需表格的菜单
<html>
<head>
<meta charset="UTF-8">
<title>无需表格的菜单</title>
<style>
<!--
body{
background-color:#ffdee0;
}
#navigation {
width:200px;
font-family:Arial;
}
#navigation ul {
list-style-type:none; /* 不显示项目符号 */
margin:0px;
padding:0px;
}
#navigation li {
border-bottom:1px solid #ED9F9F; /* 添加下划线 */
}
#navigation li a{
display:block; /* 区块显示 */
padding:5px 5px 5px 0.5em;
text-decoration:none;
border-left:12px solid #711515; /* 左边的粗红边 */
border-right:1px solid #711515; /* 右侧阴影 */
}
#navigation li a:link, #navigation li a:visited{
background-color:#c11136;
color:#FFFFFF;
}
#navigation li a:hover{ /* 鼠标经过时 */
background-color:#990020; /* 改变背景色 */
color:#ffff00; /* 改变文字颜色 */
}
-->
</style>
</head>
<body>
<div id="navigation">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">My Blog</a></li>
<li><a href="#">Friends</a></li>
<li><a href="#">Next Station</a></li>
<li><a href="#">Contact Me</a></li>
</ul>
</div>
</body>
</html>
效果：
水平菜单
<html>
<head>
<meta charset="UTF-8">
<title>菜单的横竖转换</title>
<style>
<!--
body{
background-color:#ffdee0;
}
#navigation {
font-family:Arial;
}
#navigation ul {
list-style-type:none; /* 不显示项目符号 */
margin:0px;
padding:0px;
}
#navigation li {
float:left; /* 水平显示各个项目 */
}
#navigation li a{
display:block; /* 区块显示 */
padding:3px 6px 3px 6px;
text-decoration:none;
border:1px solid #711515;
margin:2px;
}
#navigation li a:link, #navigation li a:visited{
background-color:#c11136;
color:#FFFFFF;
}
#navigation li a:hover{ /* 鼠标经过时 */
background-color:#990020; /* 改变背景色 */
color:#ffff00; /* 改变文字颜色 */
}
-->
</style>
</head>
<body>
<div id="navigation">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">My Blog</a></li>
<li><a href="#">Friends</a></li>
<li><a href="#">Next Station</a></li>
<li><a href="#">Contact Me</a></li>
</ul>
</div>
</body>
</html>
效果
