CSS最详细的基础教程
2016-08-30 20:54
134 查看
层叠样式表CSS 绝对原创
CSS简介：Cascading Style Sheets(层叠样式表)的缩写，它是一种用来表现HTML或XML等文件样式的计算机语言。CSS的作用：
是定义网页外观（例如，字体、背景、文本、位置、布局、边缘、列表及其他等),它也可以和JavaScript等浏览器端脚本语言合作做出许多动态效果。
所谓的样式表，是样式化HTML的一种方法，HTML是文档的内容，而样式表是文档的表现，或者说是外观。
所谓的层叠，就是将一组样式在一起层叠使用，控制某一个或多个HTML元素，按样式表中的属性一次显示。
一个样式表可以用于多个页面，甚至整个站点，因此CSS具有良好的易用性和扩展性。从总体来说，使用CSS不仅能够弥补HTML对网页格式化功能的不足，例如段落间距、行距、字体变化和大小等，还可以使用CSS动态更新页面格式，进行排版定位等。CSS特点如下。
（1）控制页面中的每个元素（精确定位）。
（2）对HTML语言处理样式的最好补充。
（3）把内容和格式相分离，减少工作量。
CSS的规则组成：
CSS和HTML一样都是由W3C制定的标准。
CSS书写格式和注释写法：
p{
font-size:30px;
/* color:yellow; */
border:1px solid blue;
}
注：p 是选择器 {}的包含的内容是声明 font-size: 30px; 属性：属性值；
属性和属性值之间用英文冒号，属性值结尾用英文分号。/* */ 为注释
靠近大括号的最后一个属性值，英文分号可以省略。
CSS长度单位：em (如：font-size:2em;)1em是默认浏览器文字大小 ，em的数值是默认文字大小倍数。
px (如：font-size:14px;) 是一个像素的单位
pt(如：font-size:12pt;) 是一个磅的单位
%（font-size:80%）是一个百分比。
注：pc(活字）cm(厘米) mm(毫米) in(英寸)。有的属性也可以使用一个百分比，可以由可选的正号或负号
、接着一个数字，在一个长度单位或者百分单位中没有空格，百分比是相对于其他的数值的，
颜色单位和URL值
颜色单位：1.使用英文单词：red yellow blue green lime navy white等16个。
2.RGB颜色：#rrggbb(如#ff00ff）。
rgb(x,x,x),x是0-255的整数（如rgb(255,255,0).
rgba(x,x,x,y)x是0-255的整数，y是0-1整数或小数，表示透明度。html 5新特性。
hsl(x,y,y) x是0-360的整数，y是0-100%。（如hsl(90,40%,48%) HSL(色相、饱和度、亮度）
hsla(x,y,y,z)x是0-360的整数，y是0-100%, z是0-1的整数和小数。(如：hsl（90,69%,78%,0.5)
兼容性：IE8及更早浏览器不支持color的RGBA, HSL, HSLA及transparent值。
URL值：URL的格式：url(addr),addr是一个url.url可以用单引号或者双引号，也可以不加引号，
并且，在url之前之后可以包含空格，在URL中的括号、逗号、空格、单
引号或双引号必须避开反斜杠。不完整的URL被理解为样式表的源代码，
而不是HTML源代码。
body{background:url(xsphp.jpg)} 不用引号
body{background:url(http://www.qq.com/xsphp.jpg)} 绝对url
body{background:url('xsphp.jpg')} 使用单引号
body{background:url("xsphp.jpg")} 使用双引号
HTML文档中放
置CSS的几种方式
内联样式表：<p style="color:red;font-family:serif">内联样式表修饰P标签</p>
注：使用style内联，放置在任意body元素（包括body本身）优先级最高。
嵌入一个样式表：<style type="text/css">
@import url("first.css"); 使用import 导入外部css文件
body{background:url(foo.gif); color:black}
p em{background:yellow; color:black}
.note{margin:6px;}
</style>
注：嵌入样式表只能放在<head></head>标签中，不同于<script></script>可以在放在<body></body>内。
连接到一个外部样式表： <link rel="stylesheet" type="text/css" href="style.css">
注：只能放在<head></head>标签内
优先级：内联高于其它三种，其
它三种按照出现的先后顺序来决定。
(内联样式表：<p style="color:red;font-family:serif">内联样式表修饰P标签</p>
注：使用style内联，放置在任意body元素（包括body本身）优先级最高。, 嵌入一个样式表：<style type="text/css">
@import url("first.css"); 使用import 导入外部css文件
body{background:url(foo.gif); color:black}
p em{background:yellow; color:black}
.note{margin:6px;}
</style>
注：嵌入样式表只能放在<head></head>标签中，不同于<script></script>可以在放在<body></body>内。, 连接到一个外部样式表： <link rel="stylesheet" type="text/css" href="style.css">
注：只能放在<head></head>标签内)
CSS选择器
基本选择器
html选择器(标签选择器)： p{text-indent: 3em} h1{ color:red }
注：用来改变一个指定标签的样式，任何HTML元素都可以是一个CSS选择器，
用于找到和选择器同名的HTML元素。
类选择器：p.dark {background:#ff00ff} .lig { background:#f8f8f8;
<p class="dark lig">类选择器</p> <p class="dark">一个段落</p>
注：类名是自定义的，一个HTML元素可以同时使用多个类选择器，使用class属性指定多个
类名，类型中间用空格分开。如<p class="one two three"> 第一段</p>
还可以对某个html标签定义一个类 如 p.dark {background:red;}
ID选择器： #main {text-indent:3em; 调用此ID类选择器： <p id="main">文本缩进</p>
注：与class类似，不同之处在于，id用在唯一的元素上，而class不止用在一个元素上。
通配符选择器：* {margin:0; padding:0} IE6版本浏览器不支持
注：*代表html内的标签（包括<html></html>本身），
除 <!DOCTYPE HTML>和<head></head>头部标签和头部标签里面的内容
组合选择器： body,h3,ul,ol,li {margin:0; padding:0;}
注：为了减少重复声明，组合选择器是被允许的，只要用英文逗号隔开选择器就可以了
关系选择器
(层级选择器)
包含选择器（后代选择器）：div a{ width:300px; height:300px; background:red;}
注：只要网页存在<div></div> 并在它内部存在<a></a>,无论是多少层。
它的上级元素什么，都可以对它进行修饰。
子选择器： div>div>p{ width:300px; height:300px background:red}
#out>div>p{ width:300px; height:300px background:red}
注：只要能在<body></bod>中，无论从什么位置开始找，只要能找到
爷爷>爸爸>儿子 关系的 那么这个种关系的儿子元素，将会被修饰。 （IE6不支持）
实例一：
-------------------------------------------------------------------------------------
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#outer>div>p{
width:200px;
height:200px;
background:url("ganjing.jpg");
border:4px solid green;
}
</style>
</head>
<body>
<div id="outer">
<p>abc</p>
<div>
<p>xyz</p> <!-- 会被修饰 -->
<p> ddc</p> <!-- 会被修饰 -->
<div>
<p>aaa</p> <!-- 不会被修饰 -->
fff
</div>
</div>
</div>
</body>
</html>
----------------------------------------------------------------------------------------------------------
实例二
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div>div>p{
width:200px;
height:200px;
background:url("ganjing.jpg");
border:4px solid green;
}
</style>
</head>
<body>
<div >
<p>abc</p>
<div>
<p>xyz</p> <!-- 会被修饰 -->
<p> ddc</p> <!-- 会被修饰 -->
<div>
<p>aaa</p> <!-- 会被修饰 -->
fff
</div>
</div>
</div>
</body>
</html>
-------------------------------------------------------------------------------------------------------------------
实例三
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#out>div>p{
width:200px;
height:200px;
background:url("ganjing.jpg");
border:4px solid green;
}
</style>
</head>
<body>
<div id="out" >
<p>abc</p>
<div>
<div><p>xyz</p></div> <!--不 会被修饰 -->
<p> ddc</p> <!-- 会被修饰 -->
<div>
<p>aaa</p> <!--不会被修饰 -->
fff
</div>
</div>
</div>
</body>
</html>
相邻选择器：.outer>main+div{width:200px; height:200px;background:green}
注：.outer 子级元素<main></main>下方同级标签紧挨着的div标签，中间不可以有其他标签。（IE6不支持）
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/*紧挨着p标签的div元素：
1，同级紧挨着
2，内部紧挨着p的div子元素（也就是第一个子元素div）*/
p+div{
background:blue;
}
/*兄弟选择器*/
/*p~div{
background-image: red;
}*/
</style>
</head>
<body>
<div>
南帝
<p>
<a href="#">baidu</a>
<b>dd</b>
<div>北丐</div> <!-- 会被修饰 -->
<div>东邪</div> <!-- 不会被修饰 -->
</p>
烦烦烦
<div>西毒</div> <!-- 会被修饰 -->
<a href="#">baidu</a>
<div>洪七公</div> <!-- 不会被修饰 -->
</div>
</body>
</html>
兄弟选择器 .outer>main~ul{ background:red }
注：.outer子级元素<main></main>的下方同级ul标签，中间可以有其他标签。 （IE6不支持）
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/*兄弟选择器*/
.outer>main~ul{
background:red;
}
/*相邻选择器*/
.outer>main+div{
width:200px;
height:200px;
background:yellow;
}
</style>
</head>
<body>
<div class="outer">
<main>
<div>内部紧挨着</div>
<p>duanluo</p>
<ul>
<li>neibu liebiao</li>
</ul>
</main>
<div>紧挨着</div>
<ul>
<li>liebiao</li>
</ul>
</div>
</body>
</html>
属性选择器:
tag[attribute]选择具有attribute属性的元素。
tag[attribute=value]选择具有attribute属性且属性值等于value的元素。
tag[attribute~=value]选择具有attribute属性且属性值为一用空格分隔的字词列表，其中一个等于value的元素。
tag[attribute|=value]选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素。
tag[attibute^=value]匹配具有attribute属性、且值以valule开头的E元素
tag[attribute$=value]匹配具有attribute属性、且值以value结尾的E元素
tag[attribute*=value]匹配具有attribute属性、且值中含有value的E元素
如： [name] div[id]、a[href] 、div[id="xy"]、[class~='a'] (IE6 不支持)
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div[id]{
background:blue;
}
div[id='xyz']{
background:yellow;
}
a[href]{
background:red;
}
div[name="username"]{
background:green;
}
.a{
border:1px solid red;
}
.b{
background:pink;
}
.c{
width:200px;
}
div[class~='a']{
height:200px;
}
</style>
</head>
<body>
<div id="abc">
南帝
<p>
<div id="xyz">北丐</div>
<div name="username">东邪</div>
<div name="userpwd">****</div>
</p>
<a href="#">baidu</a>
<div class="b a c">西毒</div>
</div>
</body>
</html>
-------------------------------------------------------------------------------------------
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/* 具有name属性，以b开始*/
*[name^='b']{
border:1px solid red;
}
/* 具有name属性，并且name值以i结尾*/
*[name$='i']{
background:blue;
}
/* 具有name属性，属性值中包含ao*/
*[name*='ao']{
color:green;
}
/* 具有class属性，值以news开头后面跟-的div元素*/
div[class|='news']{
width:200px;
height:150px;
background:yellow;
}
</style>
</head>
<body>
<table name="biaoge">
<tr>
<td>aaa</td>
</tr>
</table>
<div name="biaoshi">xxx</div>
<p name='juzi'>ooooo</p>
<div class='news-top'>顶部新闻</div>
<div class="news-bottom">底部的新闻</div>
</body>
</html>
伪类选择器（伪元素选择器）
链接伪类选择器: a:link{ }（访问之前的状态）、a:hover{ }（鼠标放在链接上的状态）、a:active{ }（鼠标点击时的状态）、a:visited{ }（访问过以后的状态）、
注： 以上可以简写，：link{ } :hover{ } :active{ } :visited{ }
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
p a:link{ color: red;}
a:link{
/*字体颜色*/
color:green;
}
a:visited{
color:blue;
}
a:active{
color:pink;
}
a:hover{
color:orange;
}
</style>
</head>
<body>
<a href="#">暮春堂社区</a>
<a href="#">五月天社区</a>
<p>
<a href="#">天上人间</a>
</p>
</body>
</html>
用户行为伪类选择器
E:focus{ sRules } 设置对象在成为输入焦点（该对象的onfocus事件发生）时的样式。常用于 input:focus{ } IE6 IE7 不支持
注：常用表单的input类型中的text,password的表单，鼠标选中后，将会被修饰。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/*获取焦点时设置样式*/
input:focus{
border:1px solid red;
}
/*匹配使用特殊语言的E元素注意：括号内不要引号 */
div:lang(en){
background:green;
border:2px solid blue;
}
/*.hongse{
background:red;
}*/
/*div:not(.hongse){
background:yellow;
}*/
</style>
</head>
<body>
<form action="">
<input type="text">
</form>
<div>xyz</div>
<div class="hongse">red</div>
<div lang="en" >pink</div>
</body>
</html>
E:hover{sRules} 鼠标放在上面将会出现修饰效果 如：b:hover{color:green}
注：IE6只支持a元素的:hover，从IE7开始支持其它元素的:hover。
E:active{sRlues} 鼠标点击将会出现修饰效果 如：b:active{color:red}
注：IE6,7只支持a元素的:active，从IE8开始支持其它元素的:active。
语言伪类选择符：E:lang(){ sRules } 匹配使用特殊语言的E元素。常用的有两种：E:lang(en){ }、E:lang(zh-cn){ } 。div:lang(en){ border:2px dashed red}
注：首先网页标签内必须设置 <html lang="en" ></html>全局设置或<div lang="en"></div>单个设置。IE6 IE7 不支持
此伪类标签优先级高于其他。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/*获取焦点时设置样式*/
input:focus{
border:1px solid red;
}
/*匹配使用特殊语言的E元素注意：括号内不要引号 */
div:lang(en){
background:green;
border:2px solid blue;
}
/*.hongse{
background:red;
}*/
/*div:not(.hongse){
background:yellow;
}*/
</style>
</head>
<body>
<form action="">
<input type="text">
</form>
<div>xyz</div>
<div class="hongse">red</div>
<div lang="en" >pink</div>
</body>
</html>
否定伪类选择符:E:not(){ sRules } 匹配不含有s选择符的元素E。如：div:not(.hos){ } div:not(#bos){ } IE6-IE8都不支持
注：在<div></div>中不含有.hos的类将被修饰 在<div></div>中不含有bos的ID类将被修饰。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/*获取焦点时设置样式*/
input:focus{
border:1px solid red;
}
/*匹配使用特殊语言的E元素注意：括号内不要引号 */
/*div:lang(en){
background:green;
border:2px solid blue;
}*/
/*.hongse{
background:red;
}*/
div:not(.hongse){
background:yellow;
}
</style>
</head>
<body>
<form action="">
<input type="text">
</form>
<div>xyz</div>
<div class="hongse">red</div>
<div lang="en" >pink</div>
</body>
</html>
结构性伪类选择器：
E:first-child{ sRules }、E:last-child{ sRules }、E:only-child{ sRules }、E:nth-child(n){ sRules }、E:nth-last-child(n){ sRules }
说明：要使该属性生效，E对象必须是某个对象的子元素。如 a:first-child{ } div>a:first-child{ } IE6-IE8不支持。
注：只匹配同类型元素的上下相邻元素E。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/*a元素它是父元素下第一个孩子*/
a:first-child{
background:red;
}
/*a元素它是父元素下最后一个孩子*/
a:last-child{
background:yellow;
}
/*a元素它是父元素下第二个孩子*/
a:nth-child(2){
color:orange;
font-size:2em;
}
/*a元素它是父元素下唯一的一个孩子*/
div>a:only-child{
background:orange;
}
/*div元素它是父元素body下第2个孩子*/
body>div:nth-child(2){
border:2px solid red;
}
/*div元素它是父元素body下倒数第1个孩子*/
body>div:nth-last-child(1){
background:yellow;
}
</style>
</head>
<body>
<div>
<a href="#">校园美女</a>
<a href="#">街拍美女</a>
<a href="#">自拍美女</a>
<a href="#">偷拍美女</a>
</div>
<div>
<a href="#">夜拍</a>
</div>
<div>
倒数第一个
</div>
</body>
</html>
----------------------------------------------------------------------
E:first-of-type{ sRules }、E:last-of-type{sRules}、E:only-of-type{ sRules }、E:nth-of-type(n){ sRules }、E:nth-last-of-type(n){ sRules }
说明：匹配同类型中的第一个同级兄弟元素E。 IE6-IE8不支持。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
li:first-of-type{
background:red;
}
li:last-of-type{
background:blue;
}
/*li:nth-of-type(2){
background:yellow;
}*/
li:nth-child(2){ background:yellow;}
li:only-of-type{
background:orange;
}
</style>
</head>
<body>
<ul>
<li>11</li>
<!-- <a href="#">xxx</a> -->
<li>222</li>
<img src="yaoyao.jpg" alt="">
<li>33</li>
<li>444</li>
<li>55</li>
</ul>
<div>
<li>aaa</li>
<li>bbb</li>
<li>cccc</li>
</div>
<div>
<li>only</li>
</div>
</body>
</html>
E:empty{ sRules } 匹配没有任何子元素（包括文本内容）的元素，如<div></div>里面没有任何标签和内容。
注： IE6-IE8不支持，
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
main:empty{height: 100px;width: 100px;background: red}
</style>
</head>
<body>
<div name="dd">jjj</div>
<div></div>
<div>111</div>
<main></main>
</body>
</html>
用户界面(UI)
元素状态伪类选择符
E:checked{ sRules } 匹配用户界面上处于选中状态的元素E。(用于input type为radio与checkbox时)
例如：input:checked+div:after{content:'选择器选择了我';color:red;} IE6-IE8不支持。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/*匹配用户界面上处于选中状态的元素E。(用于input type为radio与checkbox时) */
input:checked+div:after{content:'选择器选择了我';color:red;}
</style>
</head>
<body>
<form action="">
<input type="checkbox" checked><div>提示：</div>
<input type="radio">
</form>
</body>
</html>
E:enabled{ sRules } 匹配用户界面上处于可用状态的元素E
注：IE6-IE8不支持
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
input:enabled{background: red;}
input:disabled{background:orange;}
</style>
</head>
<body>
<form action="" method="" enctype="multipart/form-data">
<input type="text" placeholder="jack" name="" disabled><br>
<input type="password" name=""><br>
<input type="text" name="">
</form>
</body>
</html>
E:disabled{ sRules } 匹配用户界面上处于禁用状态的元素E。
注：IE6-IE8不支持
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
input:enabled{background: red;}
input:disabled{background:orange;}
</style>
</head>
<body>
<form action="" method="" enctype="multipart/form-data">
<input type="text" placeholder="jack" name="" disabled><br>
<input type="password" name=""><br>
<input type="text" name="">
</form>
</body>
</html>
目标伪类选择符： E:target{ sRules } 匹配相关URL指向的E元素。 IE6-IE8不支持
说明： div:target{ border:1px solid gr
<a href="#num1">一号</a>
<a href="#num2">二号</a>
<div id="num1">这里是一号</div>
<div></div>
<div id="num2">这里是二号</div>
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
div:target{height: 100px;width: 100px;border:1px solid red;}
</style>
</head>
<body>
<a href="#num1">一号</a>
<a href="#num2">二号</a>
<div id="num1">这里是一号</div>
<div></div>
<div id="num2">这里是二号</div>
</body>
</html>
伪对象选择器
E:first-letter/E::first-letter版本：CSS1/CSS3(标签内文本第一个单词/汉字会被修饰)
E:first-line/E::first-line版本：CSS1/CSS3 (标签内文本第一行会被修饰)
注：IE6及更早浏览器下，E:first-line选择符与包含规则的花括号之间不能紧挨着，需留有空格或换行。
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
p:first-letter{color:red;}
div>pre:first-line{color:green}
</style>
</head>
<body>
<div>
<pre>
你是我的小小够
你是我骨头，
每天下午我在
家里头
</pre>
</div>
<p>我是一只小小鸟</p>
</body>
</html>
E:before/E::before{ sRules } 设置在对象前（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用
E:after/E::after{ sRules } 设置在对象后（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用
注：E:after/E:before IE6-IE7不支持 E::after/E::before IE6-IE8不支持
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
p::after{border: 2px solid red;content: "这是内容";}
p::before{border: 2px solid green;content: "这是前面"}
</style>
</head>
<body>
<p>dd </p>
</body>
</html>
E::selection(sRules) 设置对象被选择时的样式（文本被被光标覆盖时的被修饰）。 IE6-IE8不支持
注：支持非火狐b::selection{color:red;}
支持火狐b::-moz-selection{color:red }
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
b::selection{color:red;}
b::-moz-selection{
color:red;
}
</style>
</head>
<body>
<b>这是个应用的selection的伪对象</b>
</body>
</html>
----------------------------------
内核类型 写法(E::selection)
Webkit(Chrome/Safari) E::selection
Gecko(Firefox) E::-moz-selection
Presto(Opera) E::selection
Trident(IE) E::selection
注意：CSS3将伪对象选择器(Pseudo-Element Selectors)前面的单个冒号(:)修改为双冒号(::)用以区别伪类选择器
(Pseudo-Classes Selectors)，但以前的写法仍然有效。即E:after可转化为E::after
CSS属性
字体属性：font:[<字体风格>||<字体变形>||<字体加粗>]？<字体大小>[/<行高>]?<字体族科> 推荐使用此种简略写法。
说明：
font-family 字体族科 任意字体族科名称都可以使用，例如Times,serif,Arial 等，而且多个族科的赋值
是可以使用的，中间用逗号分隔，以防止选择不存在的字体族科,中文字体要加单引号或双引号引起来。
font-size 字体大小 可以使用绝对大小、相对大小、长度和百分比
font-style 字体风格 normal（普通），italic(斜体)、或 oblique(倾斜)
font-weight 字体加粗 normal、bold、bolder 或 lighter等
font-variant 字体变形 normal(普通)、 或 smal-caps（小型大写字母)
注意：导入外部字体（写在<style></style>标签内： @font-face{font-family:'楷体';src:url("simkai.ttf")}
<!DOCTYPE html>
<html>
<head>
<title>字体属性</title>
<meta charset="utf-8">
<style type="text/css">
/*导入外部字体*/
@font-face{font-family:'楷体';url("STCAIYUN.TTF")}
/*p{font:italic small-caps bolder 14px/28px '宋体';}*/
P{
/*font-style:italic;
font-weight:bolder;*/
font-size:20px;
line-height:28px;
font-family: '楷体';
font-variant:small-caps;
}
</style>
</head>
<body>
<p>
ee E，曲项向天歌<br>
白毛浮绿水<br>
红掌拨清波<br>
</p>
</body>
</html>
颜色属性： 允许网页制作者指定一个元素的颜色，在CSS中可以使用color属性设定文本的颜色，为了避免与
用户的样式表之间的冲突，背景和颜色属性应该始终一起指定。例如： h3 {color: #000080}
背景属性：
background: <背景颜色>||<背景图像>||<背景重复>||<背景附件>||<背景位置> 推荐使用此种简略写法
说明：
background-color 背景颜色 值和color属性值设定方式相同和值可以填颜色单位规定的，或使用
transparent(透明)值。
background-image 背景图像 图片URL或者none(无,不使用此属性既可)
background-repeat 背景重复 repeat(默认)、no-repeat、 repeat-y、repeat-x
background-attachmet 背景附件 scroll(滚动）或 fixed(固定)
background-position 背景位置 横向关键字（left center right),纵向关键字（top center bottom） 百分比
和长度也可以作为安排背景图像的位置
多背景实例：div{width:800px; height:800px; background:url(yaya.jpg) no-repeat,url(dudu.jpg) no-repeat,url(qingxin.jpg) no-repeat;
background: HTML5新属性
background-origin：
padding-box： 从padding区域（含padding）开始显示背景图像。
border-box： 从border区域（含border）开始显示背景图像。
content-box： 从content区域开始显示背景图像。
background-size:
auto： 背景图像的真实大小。
cover： 将背景图像等比缩放到完全覆盖容器，背景图像有可能超出容器。
contain： 将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内。
300px 500px: 使用长度单位设置背景图片大小，可以只写宽度或高度，图片会等比改变。
50% 50%： 使用百分比 设置图片大小，百分比是相对于容器大小的。
IE6-IE8不支持
边框属性：
border: <宽度>||<风格样式>||<颜色> 如：border: 2px solid orange ; 推荐使用简写方式
边框属性：用于设置一个元素 边框宽度、边框风格、边框颜色 如：border-width: 2px; border-style: solid; border-color: orange;
每种属性都可以分别设置每个边的属性 border-left-width:2px dashed green;，也可以设置一个边的所有属性如border-left: 1px solid yellow;
上、下、左、右边框属性的设置：可以使用1~4个 长度值（用于宽度)、关键字（风格样式)、颜色值(颜色属性），如果4个值都给出了，它们
分别应用于上、右、下、左（顺时针）边框属性。如果给出一个值，它将被运用到各边上。如果两个或三个值
给出了，省略了的值与对边相等。 具体参考细说PHP第二版（62页边框属性）
border:HTML5新增属性
border-image: IE6-IE10不支持，此属性不讲解。
box-shadow： 设置标签边框阴影 box-shadow: 1px 2px 2px 2px white inset(内阴影，省略时为外阴影)
说明：依次是：水平偏移(可以为负值)、垂直偏移(可以为负值)、模糊值(不能为负值)、延伸值(不能为负值)、颜色值、 阴影类型（默认外阴影,inset内阴影）
border-radius： 设置标签边框圆角 border-radius: 50px/40%;
说明：用长度值设置对象的圆角半径长度。不允许负值
用百分比设置对象的圆角半径长度。不允许负值
参数省略，则默认等于第1个参数
水平半径：如果提供全部四个参数值，将按上左(top-left)、上右(top-right)、下右(bottom-right)、下左(bottom-left)的顺序作用于四个角。
如果只提供一个，将用于全部的于四个角。 如果提供两个，第一个用于上左(top-left)、下右(bottom-right)，第二个用于上右(top-right)、下左(bottom-left)。
如果提供三个，第一个用于上左(top-left)，第二个用于上右(top-right)、下左(bottom-left)，第三个用于下右(bottom-right)。 垂直半径也遵循以上4点。
文本属性
文本缩进 text-indent: 允许是长度值，可以是负数。允许是百分比值。可以是负百分比。
注意：文本缩进只在块标签中生效如，<div></div> <p></p>,当然可以把行标签转换为块标签用，display:block;或display:inline-block;
内容的水平对齐方式 text-align: left/center/right /justify 默认：left。
注：此属性也只对块元素生效。
IE9及更早浏览器不支持justify；不支持CSS3新增参数值start | end。
Safari5.1不支持justify。
Chrome13.0-16.0不支持justify。
Opera11.50-11.60不支持justify；不支持CSS3新增参数值start | end。
文本字母大小写 text-transform: none/capitalize/uppercase/lowercase ；
说明：无变化/单子首字母大写/全部大写/全部小写。
文字修饰 text-decoration: none/underline/overline/line-through/blink
说明：无变化/下划线/上划线/删除线/闪烁
CSS3新增属性 text-decoration：[ text-decoration-line ] || [ text-decoration-style ] || [ text-decoration-color ] || blink
说明： 同css1 text-decoration || 同边框样式 || 颜色 ||闪烁
兼容性说明：IE9及更早浏览器不支持blink，且不支持CSS3下的text-decoration复合属性属写法。
Firefox4.0-9.0不支持CSS3下的text-decoration复合属性属写法。
Safari5.1不支持blink，且不支持CSS3下的text-decoration复合属性属写法。
Chrome13.0不支持blink，且不支持CSS3下的text-decoration复合属性属写法。
Opera11.50-11.60不支持CSS3下的text-decoration复合属性属写法。
text-shadow: 2px 2px 2px #ededed; 水平偏移可以是负值，垂直偏移可以是负值，模糊值不能为负值，颜色 ; 阴影及模糊效果
注意：可以设定多组效果，每组参数值以逗号分隔。 IE6-IE9不支持。
letter-spacing：修饰单个字母或者文字间的间距，使用长度修饰，允许负值。如：letter-spacing:10px;
word-spacing: 只修饰单词之间的间距，使用长度值修饰，允许负值。如：word-spacing:20px;
text-overflow: clip(默认 隐藏不显示省略标记)/ellipsis（显示省略标记）。 对溢出文本处理
注意：此属性要和 overflow:hidden; white-space:nowrap; text-overflow;三个同时使用。用途:新闻版块，截取一部分做标题。
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>text-overflow_CSS参考手册_web前端开发参考手册系列</title>
<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com" />
<meta name="copyright" content="www.doyoe.com" />
<style>
.test li{margin-top:10px;}
.test .clip p{overflow:hidden;width:200px;white-space:nowrap;text-overflow:clip;}
.test .ellipsis p{overflow:hidden;width:200px;white-space:nowrap;text-overflow:ellipsis;}
</style>
</head>
<body>
<ul class="test">
<li class="clip">
<strong>clip: 直接将溢出的文字裁剪</strong>
<p>测试用文字测试用文字测试用文字测试用文字测试用文字测试用文字</p>
</li>
<li class="ellipsis">
<strong>ellipsis: 将溢出的文字显示省略标记（...）</strong>
<p>测试用文字测试用文字测试用文字测试用文字测试用文字测试用文字</p>
</li>
</ul>
</body>
</html>
white-space：normal/pre/nowrap/pre-wrap/pre-line ;
normal： 默认处理方式。
pre： 用等宽字体显示预先格式化的文本，不合并文字间的空白距离，当文字超出边界时不换行。可查阅pre对象
nowrap： 强制在同一行内显示所有文本，直到文本结束或者遭遇br对象。
pre-wrap： 用等宽字体显示预先格式化的文本，不合并文字间的空白距离，当文字碰到边界时发生换行。
pre-line： 保持文本的换行，不保留文字间的空白距离，当文字碰到边界时发生换行。
兼容性：IE7及更早浏览器不支持pre-wrap | pre-line。
word-wrap：normal(不处理)/break-wrap（强制换行); 只用来修饰英文。
说明：关于英文换行，如果单词间有间隔，可以自动换行，
line-height：长度/百分比 ；行高 允许负值。配合height使用可以垂直居中。
CSS3了解属性：
text-stroke : 颜色; 指定文字的填充颜色。 Webkit(Chrome/Safari) 写法： -webkit-text-fill-color
text-fill-color: 宽度(描边宽度) 颜色(描边颜色); 文字描边属性。Webkit(Chrome/Safari)写法：-webkit-text-stroke
列表属性
list-style:[ list-style-image ] || [ list-style-position ] || [ list-style-type ]; j简写方式。
自定义列表图片 || 图片或符号位置(inside/outside) || 列表符号
分开方 式：list-style-type: none|disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none 等等。
list-style-image:url(yaya.gif);
list-style-position: inside|outside;
布局属性
display: none || block || inline || inline-block; 定义元素显示方式。
隐藏 || 块级|| 内联元素||内联块元素
注意：display:none;为不占位隐藏。visibility:hidden; 占位隐藏。
说明：行内元素特点:
1.排列在一行 2.不能修饰行高，文本缩进，不能被大部分CSS属性修饰。
块状元素特点：
1.每个元素单独占一行 2.可以修饰行高，文本缩进等。可以更好的被CSS属性修饰。
float: left || right || none ; 左浮动 || 右浮动 || 不浮动 注:想脱离浮动 同时使用float:none; clear:both;
clear: left || right: || both; 清除左浮动 || 清除右浮动 || 清除两侧浮动 注：只要你在那种类型的浮动序列中，才能清除相应浮动。
<!DOCTYPE html>
<html>
<head>
<title>float</title>
<meta charset="utf-8">
<style type="text/css">
div:first-child{
position: fixed;
width: 200px;
height: 200px;
border: 1px solid green;
}
.div{
width: 200px;
height: 200px;
float: left;
border: 1px solid red;
margin: 10px;
padding: 12px;
}
div:nth-child(2){
float:none;
clear: right;
}
</style>
</head>
<body>
<div>ddd</div>
<div class="div">
111
</div>
<div class="div">
222
</div>
<div class="div">
333
</div>
</body>
</html>
visibility：visible | hidden | collapse； 元素可视 | 元素隐藏 | 隐藏表格 注：与display:none; 不同，visibility:hidden; 此为占位隐藏
overflow: visible | hidden | auto | scroll ; 不剪切 | 隐藏 | 自动 | 滚动（滚动条）
overflow-x:visible | hidden | auto | scroll ; 水平不剪切 | 水平隐藏 | 水平自动 | 水平滚动（滚动条）
overflow-y:visible | hidden | auto | scroll ; 垂直不剪切 |垂直隐藏 | 垂直自动 | 垂直滚动（滚动条）
尺寸属性
width:auto | 长度值 | 百分比 不允许负值
min-width: 长度值 | 百分比 不允许负值 IE6不支持
max-width: 长度值 | 百分比 不允许负值 IE6不支持
height: auto | 长度值 | 百分比 不允许负值
min-height: 长度值 | 百分比 不允许负值 IE6不支持
max-height: 长度值 | 百分比 不允许负值 IE6不支持
外边界、内填充属性
margin: auto | 长度值 | 百分比; 允许负值。
margin-top: auto | 长度值 | 百分比; 允许负值。
margin-right: auto | 长度值 | 百分比; 允许负值。
margin_bottom: auto | 长度值 | 百分比; 允许负值。
margin-left: auto | 长度值 | 百分比; 允许负值。
padding: 长度值 | 百分比 ; 不允许负值。
padding-top: 长度值 | 百分比 ; 不允许负值。
padding-right: 长度值 | 百分比 ; 不允许负值。
padding-bottom: 长度值 | 百分比 ; 不允许负值。
padding-left: 长度值 | 百分比 ; 不允许负值。
如果提供全部四个参数值，将按上、右、下、左的顺序作用于四边。
如果只提供一个，将用于全部的四边。
如果提供两个，第一个用于上、下，第二个用于左、右。
如果提供三个，第一个用于上，第二个用于左、右，第三个用于下。
(margin: auto | 长度值 | 百分比; 允许负值。
margin-top: auto | 长度值 | 百分比; 允许负值。
margin-right: auto | 长度值 | 百分比; 允许负值。
margin_bottom: auto | 长度值 | 百分比; 允许负值。
margin-left: auto | 长度值 | 百分比; 允许负值。, padding: 长度值 | 百分比 ; 不允许负值。
padding-top: 长度值 | 百分比 ; 不允许负值。
padding-right: 长度值 | 百分比 ; 不允许负值。
padding-bottom: 长度值 | 百分比 ; 不允许负值。
padding-left: 长度值 | 百分比 ; 不允许负值。)
定位属性
position: static | relative | absolute |fixed:
static： 无特殊定位，对象遵循正常文档流。top，right，bottom，left等属性不会被应用。
relative： 对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。
absolute： 对象脱离正常文档流，使用top，right，bottom，left等属性进行绝对定位。而其层叠通过z-index属性定义。
fixed： 对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。IE6及以下不支持此参数值
说明：当position值为,relative absolute fixed 一个时（一个元素，只能选择一种定位 ）,将配合top right bottom left 一起使用。
1.如果子级元素是绝对定位（必须有top/left/bottom/right中一属性有值）,父级元素也有position 属性，子级位置移动将以父级作为参照。
2.如果子级元素是相对定位，无论父级是否有postition属性。 子级位置移动将以父级作为参考。
3.如果子级元素是绝对定位，（必须有top/left/bottom/right中有个属性有值）,父级元素没有position属性，子级位置移动以body元素作为参考。
表格属性
table-layout：auto | fixed 表格单元格布局算法（自动 | 固定）
auto： 默认的自动算法。布局将基于各单元格的内容。表格在每一单元格读取计算之后才会显示出来。速度很慢 (默认)
fixed： 固定布局的算法。在这算法中，水平布局是仅仅基于表格的宽度，表格边框的宽度，单元格间距，列的宽度，而和表格内容无关。也就是说，内容可能被裁切
border-collapse：separate | collapse 表格的行的边框和单元格的边框是合并还是独立。
separate： 边框独立 (默认)
collapse： 相邻边被合并
border-spacing：<length>{1,2} 当表格边框独立时，行和单元格的边框在横向和纵向上的间距 IE6-IE7不兼容
该属性作用等同于标签属性cellspacing。
只有当表格边框独立（即border-collapse属性等于separate时）此属性才起作用。
如果提供全部两个length值时，第一个作用于横向间距，第二个作用于纵向间距。
如果只提供一个length值时，这个值将作用于横向和纵向上的间距。
对应的脚本特性为borderSpacing。
caption-side：top | right | bottom | left caption对象是在表格的那一边 IE6-IE7不兼容
empty-cells：hide | show 当表格的单元格无内容时，是否显示该单元格的边框。 IE6-IE7不兼容
其他属性
用户界面：curosr 在对象上移动的鼠标指针采用何种系统预定义的光标形状。
cursor：[<url> [<x> <y>]?,]*[ auto | default | none | context-menu | help | pointer | progress | wait |
cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | e-resize | n-resize |
ne-resize | nw-resize | s-resize | se-resize | sw-resize | w-resize | ew-resize | ns-resize | nesw-resize |
nwse-resize | col-resize | row-resize | all-scroll]
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>cursor_CSS参考手册_web前端开发参考手册系列</title>
<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com" />
<meta name="copyright" content="www.doyoe.com" />
<style>
.test{width:400px;border-collapse:collapse;font:14px/1.5 georgia,arial,serif,sans-serif;}
.test td{padding:2px 10px;border:1px solid #ddd;}
.test td:hover{background:#eee;}
.auto{cursor:auto;}
.default{cursor:default;}
.none{cursor:none;}
.context-menu{cursor:context-menu;}
.help{cursor:help;}
.pointer{cursor:pointer;}
.progress{cursor:progress;}
.wait{cursor:wait;}
.cell{cursor:cell;}
.crosshair{cursor:crosshair;}
.text{cursor:text;}
.vertical-text{cursor:vertical-text;}
.alias{cursor:alias;}
.copy{cursor:copy;}
.move{cursor:move;}
.no-drop{cursor:no-drop;}
.not-allowed{cursor:not-allowed;}
.e-resize{cursor:e-resize;}
.n-resize{cursor:n-resize;}
.ne-resize{cursor:ne-resize;}
.nw-resize{cursor:nw-resize;}
.s-resize{cursor:s-resize;}
.se-resize{cursor:se-resize;}
.sw-resize{cursor:sw-resize;}
.w-resize{cursor:w-resize;}
.ew-resize{cursor:ew-resize;}
.ns-resize{cursor:ns-resize;}
.nesw-resize{cursor:nesw-resize;}
.nwse-resize{cursor:nwse-resize;}
.col-resize{cursor:col-resize;}
.row-resize{cursor:row-resize;}
.all-scroll{cursor:all-scroll;}
.url{cursor:url(skin/cursor.gif),
url(skin/cursor.png),
url(skin/cursor.jpg),
pointer;}
</style>
</head>
<body>
<table class="test">
<caption>cursor光标类型</caption>
<tbody>
<tr>
<td class="auto">auto</td>
<td class="default">default</td>
<td class="none">none</td>
<td class="context-menu">context-menu</td>
<td class="help">help</td>
<td class="pointer">pointer</td>
<td class="progress">progress</td>
</tr>
<tr>
<td class="wait">wait</td>
<td class="cell">cell</td>
<td class="crosshair">crosshair</td>
<td class="text">text</td>
<td class="vertical-text">vertical-text</td>
<td class="alias">alias</td>
<td class="copy">copy</td>
</tr>
<tr>
<td class="move">move</td>
<td class="no-drop">no-drop</td>
<td class="not-allowed">not-allowed</td>
<td class="e-resize">e-resize</td>
<td class="n-resize">n-resize</td>
<td class="ne-resize">ne-resize</td>
<td class="nw-resize">nw-resize</td>
</tr>
<tr>
<td class="s-resize">s-resize</td>
<td class="se-resize">se-resize</td>
<td class="sw-resize">sw-resize</td>
<td class="w-resize">w-resize</td>
<td class="ew-resize">ew-resize</td>
<td class="ns-resize">ns-resize</td>
<td class="nesw-resize">nesw-resize</td>
</tr>
<tr>
<td class="nwse-resize">nwse-resize</td>
<td class="col-resize">col-resize</td>
<td class="row-resize">row-resize</td>
<td class="all-scroll">all-scroll</td>
<td class="url">url</td>
</tr>
</tbody>
</table>
</body>
</html>
用户界面: resize：none | both | horizontal | vertical 对象的区域是否允许用户缩放，调节元素尺寸大小。
none： 不允许用户调整元素大小。
both： 用户可以调节元素的宽度和高度。
horizontal： 用户可以调节元素的宽度
vertical： 用户可以调节元素的高度。 IE6-IE10不支持
内容： content 用来和:after及:before伪元素一起使用，在对象前或后显示内容。
div:after{
content:"PHP是最好的行业";
}
IE6-IE7 不支持
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div{
width:200px;
height:200px;
border:1px solid red;
}
div:after{
content:"PHP是最好的行业";
}
div:hover{
/*鼠标的形状*/
cursor:wait;
/*放大缩小*/
zoom:2;
}
textarea{
width:570px;
height:95px;
background:url("textbg.jpg") no-repeat;
/*设置或检索对象的区域是否允许用户缩放，调节元素尺寸大小。*/
resize:none;
border:0px;
padding:20px;
}
</style>
</head>
<body>
<div>苍老师说：</div>
<textarea name="" id="" cols="30" rows="10">asdfas</textarea>
</body>
</html>
HTML+CSS实例
下拉菜单实例
#header>ul>li:hover>ul{display: block;}
#header>ul ul{border: 1px solid #FF6599;border-top: 0;background:white;display: none;}
<!DOCTYPE HTML>
<html>
<head>
<title>下拉菜单</title>
<meta charset="utf-8">
<style type="text/css">
body{
margin:0;
padding:0;
text-align: center;
}
#header{
width: 960px;
height: 37px;
margin:0 auto;
margin-top: 3px;
}
ul{
list-style-type: none;
margin:0;
padding:0;
}
a{
text-decoration: none;
}
a:hover{
background:#ED3577;
}
ul li a{
display: inline-block;
height: 35px;
line-height: 35px;
width: 80px;
color: #FFFFFF;
}
#header>ul{
width: 960px;
height: 35px;
background: #FF6599;
}
#header>ul>li{
line-height: 35px;
float: left;
width: 80px;
height: 35px;
}
#header>ul>li:hover>ul{
display: block;
}
#header>ul ul{
border: 1px solid #FF6599;
background:white;
display: none;
}
#header>ul ul a{
color:#FF6599;
}
</style>
</head>
<body>
<div id="header">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">今日最热</a></li>
<li>
<a href="#">衣服</a>
<ul>
<li><a href="#">上衣</a></li>
<li><a href="#">裙子</a></li>
<li><a href="#">裤子</a></li>
<li><a href="#">内衣</a></li>
</ul>
</li>
<li><a href="#">鞋子</a></li>
<li><a href="#">包包</a></li>
</ul>
</div>
</body>
</html>
回到顶部 | 分享到 微博 空间
#fatie{width: 46px;height: 69px;position:fixed;right: 128px;top: 235px;}
#fatie>a:hover{position:relative; left:1px; top:1px;}
<!DOCTYPE html>
<html>
<head>
<title>fixed应用实例</title>
<meta charset="utf-8">
<style type="text/css">
body{
margin: 0;
padding: 0;
text-align: center;
}
#bod{
width: 1349px;
height: 3000px;
margin: 0 auto;
background:url(bg.png) no-repeat center center;
}
#fatie{
width: 46px;
height: 69px;
position:fixed;
right: 128px;
top: 235px;
}
#ding>a:hover,#fatie>a:hover,#ke>a:hover, #jian>a:hover{
position: relative;
left:1px;
top: 1px;
}
#ke{
width: 46px;
height: 69px;
position:fixed;
right: 129px;
top: 482px;
}
#jian{
width: 46px;
height: 69px;
position:fixed;
right: 128px;
top: 530px;
}
#ding{
width: 46px;
height: 69px;
position:fixed;
right: 128px;
top: 578px;
}
</style>
</head>
<body>
<div id="bod">
<div id="fatie" >
<a href=""><img src="fa.jpg"></a>
</div>
<div id="ke">
<a href=""><img src="ke.jpg"></a>
</div>
<div id="jian">
<a href=""><img src="jian.jpg"></a>
</div>
<div id="ding">
<a href=""><img src="ding.jpg"></a>
</div>
</div>
</body>
</html>
fixedh回到顶端 发帖.rar
微博发心情 文本框
仿天猫横向弹出菜单
<!DOCTYPE html>
<html>
<head>
<title>左侧弹出菜单实例</title>
<meta charset="utf-8">
<style type="text/css">
body{
margin: 0;
padding:0;
text-align: center;
}
ul,li{
list-style-type: none;
color: white;
margin: 0;
padding:0;
}
a{
text-decoration: none;
color: white;
}
#header{
width: 1049px;
height: auto;
margin: 0 auto;
text-align: left;
margin-top: 3px;
}
#header>ul:first-child{
float: left;
width: 960px;
height: 37px;
border-bottom:2px solid black;
}
#header>ul:first-child>li{
float: left;
width: 90px;
height: 35px;
line-height: 35px;
text-align: center;
margin-right: 3px;
}
#header>ul:first-child>li a{
color: black;
font-weight: bolder;
display:inline-block;
width: 90px;
height: 35px;
}
#header>ul:first-child>li a:hover{
position: relative;
left: 1px;
top: 1px;
}
#header #shangpin{
width: 170px;
height: 37px;
background:black;
line-height: 37px;
}
#header #shangpin>a{
color: white;
font-weight: bolder;
display:inline-block;
width: 170px;
height: 37px;
}
/*纵向列表*/
ul#lie{
/*list-style: url(lie.jpg)inside;*/
height: 480px;
width: 170px;
}
ul#lie>li{
height: 30px;
width: 170px;
}
ul#lie>li>a{
font-size: 12px;
display: block;
height: 30px;
width: 170px;
line-height: 30px;
text-indent: 27px;
}
ul#lie>li>a:hover{
background:#A70000;
}
div#lier{
height: 480px;
background:#C40000;
height: 480px;
width: 170px;
float: none;
clear: left;
}
/*弹出菜单开始*/
ul#tanchu{
width: 80px;
height: 250px;
background:white;
position: fixed;
top:42px;
left:329px;
display: none;
/* border:1px solid blue;*/
}
#tanchu li{
width: 80px;
line-height:34px;
height:34px;
text-align: center;
}
#tanchu li .lis{
display:block;
width: 60px;
line-height: 34px;
height: 34px;
border-bottom:1px solid #ededed;
color:#532828;
margin-left:9px;
}
ul#tanchu #tanchu1{
height: 46px;
width: 80px;
line-height: 46px;
display: block;
text-align: center;
color:#532828;
}
ul#tanchu #tanchu2{
height: 46px;
width: 80px;
line-height: 46px;
display: block;
text-align: center;
color:#532828;
/* border:1px solid green;*/
}
ul#tanchu #tanchu2 div{
height: 46px;
width: 60px;
line-height: 46px;
display: inline-block;
text-align: center;
border-bottom: 1px solid #ededed;
}
ul#lie>li:hover>ul#tanchu{
display: block;
}
</style>
</head>
<body>
<div id="header">
<ul>
<li id="shangpin"><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>
<div id="lier">
<ul id="lie">
<li><a href="#">精品市场</a>
<ul id="tanchu">
<li id="tanchu1"><a id="tanchu2" href="#"><div>女装</div></a></li>
<li><a class="lis" href="#">男装</a></li>
<li><a class="lis" href="#">内衣</a></li>
<li><a class="lis"href="#">箱包</a></li>
<li><a class="lis" href="#">户外</a></li>
<li><a class="lis" href="#">女鞋</a></li>
<li><a class="lis" href="#">美食</a></li>
</ul>
</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>
<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>
</div>
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- CSS基础：text-overflow:ellipsis溢出文本显示省略号的详细方法_CSS教程
- CSS基础：text-overflow:ellipsis溢出文本显示省略号的详细方法_CSS教程
- css入门基础详细教程
- css基础教程
- CSS应用基础教程(2)应用方式
- 从基础开始:CSS实用教程（三）
- 从基础开始:CSS实用教程（二）
- 网页设计基础:Div+CSS布局入门教程
- jquery基础教程四(css的操作之css,height和width)
- CSS应用基础教程(5)文字性质
- CSS应用基础教程(1)基本认识
- [jQuery教程]jquery基础教程三(css的操作之addClass和removeClass)
- Flash基础知识详细教程接龙
- [jQuery教程]jquery基础教程四(css的操作之css,height和width)
- （转）jquery基础教程三(css的操作之addClass和removeClass)
- CSS应用基础教程(3)应用补充
- 实用CSS教程：从基础开始（一）
- CSS创建三栏网页布局---CSS基础教程
- CSS基础学习：样式表CSS简明教程
- CSS基础教程17篇（转载）