2019-4-26 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>
<!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>
2019-4-26 css学习笔记的更多相关文章
- CSS学习笔记
CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...
- HTML+CSS学习笔记 (7) - CSS样式基本知识
HTML+CSS学习笔记 (7) - CSS样式基本知识 内联式css样式,直接写在现有的HTML标签中 CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌 ...
- HTML+CSS学习笔记 (6) - 开始学习CSS
HTML+CSS学习笔记 (6) - 开始学习CSS 认识CSS样式 CSS全称为"层叠样式表 (Cascading Style Sheets)",它主要是用于定义HTML内容在浏 ...
- HTML+CSS学习笔记（5）- 与浏览者交互，表单标签
HTML+CSS学习笔记(5)- 与浏览者交互,表单标签 1.使用表单标签,与用户交互 网站怎样与用户进行交互?答案是使用HTML表单(form).表单是可以把浏览者输入的数据传送到服务器端,这样服务 ...
- HTML+CSS学习笔记(4) - 认识标签（3）
HTML+CSS学习笔记(4) - 认识标签(3) 1.使用<a>标签,链接到另一个页面 使用<a>标签可实现超链接,它在网页制作中可以说是无处不在,只要有链接的地方,就会有这 ...
- HTML+CSS学习笔记（3）- 认识标签（2）
HTML+CSS学习笔记(3)- 认识标签(2) 1.使用ul,添加新闻信息列表 在浏览网页时,你会发现网页上有很多信息的列表,如新闻列表.图片列表, 这些列表就可以使用ul-li标签来完成.ul-l ...
- HTML+CSS学习笔记(2) - 认识标签（1）
HTML+CSS学习笔记(2) - 认识标签(1) 1.语义化,让你的网页更好的被搜索引擎理解 标签的用途: 我们学习网页制作时,常常会听到一个词,语义化.那么什么叫做语义化呢,说的通俗点就是:明白每 ...
- HTML+CSS学习笔记(1) - Html介绍
HTML+CSS学习笔记(1) - Html介绍 1.代码初体验,制作我的第一个网页 <!DOCTYPE HTML> <html> <head> <meta ...
- css学习笔记四
广州天气变冷了,css学习笔记还是要总结. 总结: 1:几米页面静态页面主要是一列结构头部banner图,mainbody部分放文字内容和图书图片,底部是页面的版权信息 2:腾讯软件中心静态页面制作( ...
- CSS学习笔记：溢出文本省略（text-overflow）
原文:CSS学习笔记:溢出文本省略(text-overflow) 在CSS3中,text-overflow属性的基本语法如下: clip:表示不显示省略文本,简单的裁切. ellipsis:表示对象文 ...
随机推荐
- Mac 笔记本 开发日记
1.录屏,截图 Mac 自带录屏功能 command +control +o 2.复制当前应用,在启一个当前app窗口 command+n 3.快速回到桌面 command +f3 4.选中文件,复制 ...
- css：常见布局问题
一.单列布局 1. 水平居中 1.1 使用inline-block和text-align .parent{text-align:center;} .child{display:inline-block ...
- 吴裕雄 python深度学习与实践（9）
import numpy as np import tensorflow as tf inputX = np.random.rand(100) inputY = np.multiply(3,input ...
- 本学期c#学习总结
本学期c#学习总结 时间转瞬即逝,大一上半学期的学习生涯已经结束.虽然以前我没什么关于学习计算机的基础,但是经过了这几个月的学习我也还是有点收获的. 我发现c#语言的关键词有很多语言特性和固定的用法, ...
- mac下用命令行解压文件
在Mac上的归档工具不能够解压rar文件,这时可以使用终端中的unrar来解决问题. 步骤如下: 1.使用Homebrew安装unrar(有关Homebrew的安装和使用见Homebrew) $ br ...
- eclipse配置Servlet连接Mysql要注意的几个地方
用Servlet即把jdbc那套放到继承于HttpServlet的派生类之内,那段代码很简单 protected void doPost(HttpServletRequest request, Htt ...
- 真机调试adb：wait for device 解决方案
1.adb logcat 命令的时候,cmd总是提示adb server did't ACK. 分析一下,明显adb server没有开启成功,服务启动失败一般都是端口绑定失败,所以我们只 ...
- 阅读【现代网络技术 SDN/NFV/QOE 物联网和云计算】 第一章
本人打算阅读这本书来了解物联网和云计算的基础架构和设计原理.特作笔记如下: 作者: William Stallings 本书解决的主要问题: 由单一厂商例如IBM向企业或者个人提供IT产品和服务,包 ...
- faiss学习
faiss 学习 github wiki 介绍 Faiss:Facebook开源的相似性搜索类库 安装 在Mac系统编译安装Faiss faiss教程跟进--Makefile 编译 faiss安装 m ...
- python程序编写简介
语句和语法 # 注释 \ 转译回车,继续上一行,在一行语句较长的情况下可以使用其来切分成多行,因其可读性差所以不建议使用 : 将两个语句连接到一行,可读性差,不建议使用 : 将代码的头和体分开 语句( ...