CSS基础总结
1.html添加属性和css添加属性不同点：
html:
<table width="800" height="200"></table>
css:
<h1 style="width:800px;height:200px;">这里是内容</h1>
2.在HTML中引入CSS的方法
1）行内式：在标记中直接加样式
<h1 style="样式属性:值;样式属性:值;样式属性:值;">这里是内容</h1>
eg:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>行内式</title> </head> <body> <h1 style="background-color: blue;color: #fff;text-align: center;">我要成为优秀的设计师</h1> <p style="width: 500px;height: 100px;line-height: 100px;background-color: yellow;color: red;text-align: center;">学习CSS功能很强大</p> </body> </html>
拓展：
（1）如果做类似团购式网站的图片+文字的邮件（小网页），一般用行内式样式来学页面。
（2）关于颜色值的简写：
#ffffff可以写成#fff
#ffcc00可以写成#fc0
（3）CSS的一个小技巧：一个大块里如果只有一行文字，想让这行文字在大块里垂直居中，就加line-height（行高属性）
2）嵌入式：将页面中各种元素（所有的样式）的设置写在<head></head>之间。
结构：
<html> <head> <title>页面标题</title> <style type="text/css"> 样式 </style> </head> <body> <h1>内容</h1> <p>内容</p> </body> </html>
eg:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>嵌入式</title> <style type="text/css"> h1{background-color: blue;color: #fff;text-align: center;} p{width: 500px;height: 100px;line-height: 100px;background-color: yellow;color: red;text-align: center;} </style> </head> <body> <h1>我要成为优秀的设计师</h1> <p>学习CSS功能很强大</p> </body> </html>
3)导入式：
<style type="text/css">
@import"mystyle.css";
</style>
独立样式文件里固定格式：
@charset "utf-8";
eg:
html: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>导入式</title> <style type="text/css"> @import"mystyle.css" </style> </head> <body> <h1>我要成为优秀的设计师</h1> <p>学习CSS功能很强大</p> </body> </html>
css:
@CHARSET "UTF-8";
h1{background-color: blue;color: #fff;text-align: center;}
p{background-color: yellow;height: 100px;line-height: 100px;color: red;text-align: center;}
4)链接式
<link href="mystyle.css" rel="stylesheet" type="text/css" />
eg:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>链接式</title> <link href="mystyle1.css" rel="stylesheet" type="text/css"/> </head> <body> <h2>我要成为优秀的设计师</h2> <p>这是一个神奇的网站</p> </body> </html>
拓展
导入式与链接式的区别：
1）如果页面用的是导入式样式，那么在下载页面时，先看见HTML结构，再看见样式，如果网速慢，页面加载慢的话，那么用户第一眼看见的页面效果很不美观。
2）如果页面用的是链接式，能保证用户在打开页面时，能同时看见美化后的页面效果。
CSS层叠性：
1）行内样式>ID样式>类别样式>标记样式
2）如果给同一个标签定义相同的属性，在样式文件里，底下的文件会覆盖上面的文件
3.CSS的基本选择器
1）标记选择器
h1{属性：值;属性：值;属性：值;属性：值;}
h2{属性：值;属性：值;属性：值;属性：值;}
p{属性：值;属性：值;属性：值;属性：值;}
eg:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>嵌入式</title> <style type="text/css"> h1{background-color: blue;color: #fff;text-align: center;} p{width: 500px;height: 100px;line-height: 100px;background-color: yellow;color: red;text-align: center;} </style> </head> <body> <h1>我要成为优秀的设计师</h1> <p>我要学习CSS</p> </body> </html>
2)类别选择器
.class{属性：值;属性：值;}
里面的class将来写成你定义选择器类别的名称（名称不能是中文，最好是英文单词或拼音）
结构：
<html> <head> <style type="text/css"> .样式名｛属性：值；属性：值;｝ </style> </head> <body> <p class="这里是样式名字，你随便起">这里是内容</p> <p class="这里是样式名字，你随便起">这里也是内容</p> <p class="这里是样式名字 这里也是名字">这里也是内容</p> </body> </html>
eg:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>类别选择器</title> <style type="text/css"> .red{color: red;font-size: 25px;} .blue{color: blue;font-size: 35px;} .bg{background-color: #d8d8d8;} </style> </head> <body> <p class="red">我是红色的文字，我的字号是25像素</p> <p class="blue bg">我是蓝色的文字，我的字号是35像素</p> <p>我是第三行文字，我不要背景</p> </body> </html>
3)ID选择器（代表唯一）
结构：
<html> <head> <style type="text/css"> #样式名｛属性：值；属性：值;｝ </style> </head> <body> <p id="这里是样式名">这里是内容</p> <p id="这里是样式名">这里也是内容</p> </body> </html>
eg:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>ID选择器</title> <style type="text/css"> #red25{color: red;font-size: 25px;} #green35{color: green;font-size: 35px;} </style> </head> <body> <p id="red25">这个标签很神奇</p> <p id="green35">我要完全掌握CSS的用法</p> </body> </html>
4.复合选择器
1）交集选择器
标记选择器（名称）.类别选择器（名称）{属性：值;}
例如：
p.one{}
p.two{}
.one{}
.two{}
<p class="one"></p>
<p class="two"></p>
<p class="three"></p>
<p class="four"></p>
eg:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>交集选择器</title> <style type="text/css"> p{color: red;} .green{color:green} p.green{font-size: 40px;} h3.green{font-size: 50px;} </style> </head> <body> <p>我是第一个p标记</p> <p class="green">我是第二个p标记</p> <h2 class="green">我是标题</h2> <h3 class="green">我是第二个标题</h3> </body> </html>
2）并集选择器
类别选择器（名称）,标记选择器（名称）{属性：值;}
eg:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>并集选择器</title> <style type="text/css"> p,h2,h3,h4,h5{color: green;font-size: 40px;} </style> </head> <body> <p>我是第一行</p> <p>我是第二行</p> <h2>我是h2标题</h2> <h3>我是h3标题</h3> <h4>我是h4标题</h4> <h5>我是h5标题</h5> </body> </html>
3）后代选择器
类别选择器（名称） 标记选择器（名称）{属性：值;}
eg:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>后代选择器</title> <style type="text/css"> p,h2,h3{color: green;font-size: 40px;} p strong{color: red;} h2 strong,h3 strong{color:blue;} </style> </head> <body> <p><strong>我是</strong>第一行</p> <p><strong>我是</strong>第二行</p> <h2><strong>我是</strong>h2标题</h2> <h3><strong>我是</strong>h3标题</h3> </body> </html>
5.一个小例子：列表嵌套
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>并集选择器</title> <style type="text/css"> h2{font-size: 30px;color: blue;font-style: italic;} em{font-size: 40px;color: red;font-style: normal;font-family: "微软雅黑","黑体","宋体"} li li{font-size: 30px;color: green;font-family: "黑体";} </style> </head> <body> <em>优秀设计师</em> <h2>网页设计课程</h2> <p>欢迎大家学习网页设计课程</p> <ul> <li>在这里，你可以学习到： <ul> <li>HTML</li> <li>CSS <ul> <li>CSS初级</li> <li>CSS中级</li> <li>CSS高级</li> </ul> </li> <li>Javascript</li> </ul> </li> <li>你还可以学习到： <ol> <li>fireworks</li> <li>flash</li> <li>dreamweaver</li> </ol> </li> </ul> <p>如果您有任何问题及时提问</p> </body> </html>
拓展：
font-style:italic设置字体样式为斜体
font-style:normal;取消标签自带的样式效果
font-family:"微软雅黑","黑体","宋体";
text-indent:2em;让文字首行缩进2个汉字
6.超链接的样式
1）a:link 链接
a:visited 访问后
a:hover 鼠标经过
a:active 鼠标点击时
注：以上顺序不能替换
2）做企业站关于链接文字的状态常用以下几种：
1.链接文字默认没有下划线，鼠标经过有下划线，访问后没有下划线（普通企业站）
2.链接文字都没有下划线，可能默认链接时一种颜色，鼠标经过变一种颜色（普通企业站）
3.链接文字默认有下划线，鼠标经过有下划线并且可以变颜色（新闻站用的多）
注意：通常情况下，链接和访问后的状态是相同的
3）text-decoration用于控制链接文字要不要下划线
text-decoration:none;没有下划线
text-decoration:underline;有下划线
font-weight:normal; 让文字不加粗
font-weight:bold 加粗
eg:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>链接文字样式的设置</title> <style type="text/css"> a:link,a:visited{font-size: 18px;color: red;text-decoration: none;} a:hover{color:green;} p.one a:link,p.one a:visited{font-size: 12px;color: #666;text-decoration: none;} p.one a:hover{text-decoration: underline;} p.two a:link,p.two a:visited{font-size: 12px;color: blue;text-decoration: none;} p.two a:hover{text-decoration: underline;} </style> </head> <body> <a href="#">公司简介</a> <a href="#">产品介绍</a> <a href="#">联系我们</a> <p class="one"><a href="#">点击查看更多精彩内容</a></p> <p class="two"><a href="#">更多</a></p> </body> </html>
7.margin:外边距
1）有四个：
margin-top顶部外边距
margin-right右侧外边距
margin-bottom底部外边距
margin-left左侧外边距
注意：书写顺序为上、右、下、左,顺序不能颠倒
2）简写
margin:20px;
上、右、下、左外边距都是20px;
margin:20px 30px 50px;
第一个值是顶部，第二个值是左和右，第三个值是底部
margin:20px 40px;
第一个值代表顶部和底部，第二个值代表左侧和右侧。
8.padding内边距
padding-top顶部内边距
padding-right右侧内边距
padding-bottom底部
padding-left左侧
注意：书写顺序为上、右、下、左,顺序不能颠倒
边距清零
body,h1,h2,h3,h4,h5,h6,p,ul,li,ol,dl,dt,dd{margin:0;padding:0;}
*{margin:0;padding:0;}
9.例子：百度搜索结果页面
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>百度收索结果页</title> <style type="text/css"> h2,p{margin: 0;padding: 0;} h2 a:link,h2 a:visited{font-size: 16px;color: blue;font-weight: normal;} p{font-size: 12px;width: 700px;line-height: 20px;} .green{color:green;margin-bottom: 25px;} p a:link,p a:visited{color: #666;margin-left: 6px;} span{color:red;} </style> </head> <body> <h2><a href="#">百度<span>旅游</span>_<span>旅游</span>攻略_<span>旅游</span>景点大全——让旅行更简单</a></h2> <p>百度<span>旅游</span>为你提供最详实的<span>旅游</span>资讯,<span>旅游</span>攻略指南,<span>旅游</span>景点大全,更有真实用户的<span>旅游</span>经历,游记攻略。百度<span>旅游</span>,让你的<span>旅游</span>更欢乐,旅行更简单。</p> <p class="green">lvyou.baidu.com/ 2013-12-28<a href="#">百度快照</a></p> <h2><a href="#">百度<span>旅游</span>_<span>旅游</span>攻略_<span>旅游</span>景点大全——让旅行更简单</a></h2> <p>百度<span>旅游</span>为你提供最详实的<span>旅游</span>资讯,<span>旅游</span>攻略指南,<span>旅游</span>景点大全,更有真实用户的<span>旅游</span>经历,游记攻略。百度<span>旅游</span>,让你的<span>旅游</span>更欢乐,旅行更简单。</p> <p class="green">lvyou.baidu.com/ 2013-12-28<a href="#">百度快照</a></p> <h2><a href="#">百度<span>旅游</span>_<span>旅游</span>攻略_<span>旅游</span>景点大全——让旅行更简单</a></h2> <p>百度<span>旅游</span>为你提供最详实的<span>旅游</span>资讯,<span>旅游</span>攻略指南,<span>旅游</span>景点大全,更有真实用户的<span>旅游</span>经历,游记攻略。百度<span>旅游</span>,让你的<span>旅游</span>更欢乐,旅行更简单。</p> <p class="green">lvyou.baidu.com/ 2013-12-28<a href="#">百度快照</a></p> <h2><a href="#">百度<span>旅游</span>_<span>旅游</span>攻略_<span>旅游</span>景点大全——让旅行更简单</a></h2> <p>百度<span>旅游</span>为你提供最详实的<span>旅游</span>资讯,<span>旅游</span>攻略指南,<span>旅游</span>景点大全,更有真实用户的<span>旅游</span>经历,游记攻略。百度<span>旅游</span>,让你的<span>旅游</span>更欢乐,旅行更简单。</p> <p class="green">lvyou.baidu.com/ 2013-12-28<a href="#">百度快照</a></p> <h2><a href="#">百度<span>旅游</span>_<span>旅游</span>攻略_<span>旅游</span>景点大全——让旅行更简单</a></h2> <p>百度<span>旅游</span>为你提供最详实的<span>旅游</span>资讯,<span>旅游</span>攻略指南,<span>旅游</span>景点大全,更有真实用户的<span>旅游</span>经历,游记攻略。百度<span>旅游</span>,让你的<span>旅游</span>更欢乐,旅行更简单。</p> <p class="green">lvyou.baidu.com/ 2013-12-28<a href="#">百度快照</a></p> <h2><a href="#">百度<span>旅游</span>_<span>旅游</span>攻略_<span>旅游</span>景点大全——让旅行更简单</a></h2> <p>百度<span>旅游</span>为你提供最详实的<span>旅游</span>资讯,<span>旅游</span>攻略指南,<span>旅游</span>景点大全,更有真实用户的<span>旅游</span>经历,游记攻略。百度<span>旅游</span>,让你的<span>旅游</span>更欢乐,旅行更简单。</p> <p class="green">lvyou.baidu.com/ 2013-12-28<a href="#">百度快照</a></p> </body> </html>
页面效果
10.全局声明
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>并集选择器</title> <style type="text/css"> *{font-size:40px;color: red;} </style> </head> <body> <p>我是第一行文字</p> <h2>我是第一行标题文字</h2> <h3>我是第二行标题文字</h3> </body> </html>
11.盒子模型
<div></div>
1）div属于一个大盒子，可以将h1至h6，p这些标签包进去，不能相反去做
例如：
<div>
<h2></h2>
<ul><li></li></ul>
<p></p>
<dl></dl>
</div>
2）边框属性：
border
类型border-style
颜色border-color
粗细border-width
边框属性的简写
border:1px solid #fc0;
3）DIV的一个技巧
如果想让一个DIV（大盒子）在浏览器里水平居中显示，那么给这个DIV加margin:0 auto;
4）当然DIV宽度是980px，边框是1px,那么这个div的总宽度是982px
如果我的DIV宽度就必须固定为980px，但是又加1px的边框，那么div宽度就应该写成978px
5）大盒子宽度
大盒子总宽度＝第一个盒子宽度＋间距（第一个到第二个之间的距离）＋第二个盒子宽度＋间距＋第三个盒子宽度＋左右的边框
大盒子总高度＝第一个盒子高度＋间距（第一个到第二个之间的距离）＋第二个盒子高度＋间距＋第三个盒子高度＋上下的边框
eg：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>盒子模型</title> <style type="text/css"> div{width:980px;height: 200px;border: 1px solid #A5CDEE; text-align: center;line-height: 200px;margin: 0 auto;} .two{border: 1px solid red;} </style> </head> <body> <div>我是一个盒子，我是大banner</div> <p>我是一个段落</p> <div class="two">我是一个盒子，我是大banner</div> </body> </html>
eg：（以下盒子为360*310的，注意要减掉padding和border的值）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>盒子模型</title> <style type="text/css"> div{width: 338px;height: 288px;border: 1px solid #ccc;padding-top: 20px;padding-left: 20px;} </style> </head> <body> <div>我是内容</div> </body> </html>
6）margin值的计算规则
1.如果两个对象在一行里，第一个对象加了右边距，第二个对象加了左边距，那么margin值等两个边距之和；
2.如果两个对象在两行，上面对象加了下边距，下面对象加了上边距，那么margin值取最大的那个值。
eg:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>定位原则</title> <style type="text/css"> span{padding: 10px;} .left{background-color: yellow;margin-right: 30px;} .right{background-color: blue;margin-left: 40px;} div{border: 1px solid red; background-color: yellow; width: 300px; height: 150px;} .top{margin-bottom: 30px;} .bottom{margin-top: 50px;} </style> </head> <body> <span class="left">left</span> <span class="right">right</span> <p>这是一个段落</p> <p>这是一个段落</p> <div class="top">我是一个块元素</div> <div class="bottom">我也是一个块元素</div> </body> </html>
12.块级元素（block）和行内元素（inline）
1）块级元素（block）
<div>块级元素
2）行内元素（inline）
<span>行内元素
3）几个属性
display:blcok;显示为块（可以将行内元素转成块级元素）
display:inline;显示为行内（可以将块级元素转成行内元素）
display:inline-block;显示为行内块（可以将行内元素转成行内块，目的加宽和高）
eg：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>行内元素与块级元素之间的转换</title> <style type="text/css"> span{background-color:yellow;display: inline-block;border: 1px solid red;width: 300px;height: 100px;} div{background-color: blue;border: 1px solid #000; color: #fff; display: inline;} </style> </head> <body> <span>我是一个行内元素</span> <span>我是一个行内元素</span> <span>我是一个行内元素</span> <div>我是一个块级元素</div> <div>我是一个块级元素</div> <div>我是一个块级元素</div> </body> </html>
13.background:url(图片路径) no-repeat left top
背景图片默认位置是当前左侧和顶部
如果想左侧并且居中left center
左侧并且底部left bottom
如果右侧且居中right center
no-repeat不平铺
repeat-x水平方向平铺
repeat-y垂直方向平铺
eg：时事新闻
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>时事新闻</title> <style type="text/css"> *{margin: 0;padding: 0;list-style: none;} .box{width: 358px;height: 308px;border: 1px solid #abbaca;} h1{width: 348px;height: 40px;line-height: 40px;background-color: #eef2f6;font-size: 16px;padding-left: 10px;} ul{width: 328px;height: 238;padding: 15px;} li{padding-left: 10px;font-size: 14px;background:url(dot.jpg) no-repeat left center;line-height: 29px;} li a:link, li a:visited{color: #004276;text-decoration: none;} li a:hover{color: #c00;text-decoration: underline;} </style> </head> <body> <div class="box"> <h1>时事新闻</h1> <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> </ul> </div> </body> </html>
页面效果
14.盒子浮动
float:left 左浮动
float:right 右浮动
清除浮动 clear:both
eg:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>盒子浮动</title> <style type="text/css"> .father{padding: 30px;border: 1px solid #000;background-color: yellow;} .father div{padding: 10px;border: 1px solid #000;background-color: #ccc;} .son1{float:left;margin-right: 10px;} .son2{float:left;margin-right: 10px;} .son3{float:left;} p{margin:0;padding:0;border:1px solid #000; background-color: #fc0;clear: both;} </style> </head> <body> <div class="father"> <div class="son1">son1</div> <div class="son2">son2</div> <div class="son3">son3</div> <p>这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落</p> </div> </body> </html>
15.相对定位
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>相对定位</title> <style type="text/css"> .father{border: 1px solid #000;background-color: yellow;padding: 30px;} .son{border: 1px solid red; padding: 10px;background-color: #ccc;position: relative;top:50px;left: 50px;} </style> </head> <body> <div class="father"> <div class="son">我是一个小盒子</div> </div> </body> </html>
16.绝对定位
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>绝对定位</title> <style type="text/css"> .father{border:1px solid #000;background-color: yellow;padding: 30px;} .son{border: 1px solid red;padding: 10px;background-color: #ccc;position: absolute;right: 500px;top: 300px;} </style> </head> <body> <div class="father"> <div class="son">我是一个小盒子</div> </div> </body> </html>
17.相对加绝对定位
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>相对定位加绝对定位</title> <style type="text/css"> .father{width: 500px;height: 300px;border: 1px solid #000;background-color: yellow;position: relative;} .son1{width: 80px;height: 30px;border: 1px solid red;line-height: 30px;text-align: center;background-color: #ccc;position: absolute;right: 20px;bottom: 20px;} .son2{width: 80px;height: 30px;border: 1px solid red;line-height: 30px;text-align: center;background-color: #ccc;position: absolute;left: 20px;top: 20px;} </style> </head> <body> <div class="father"> <div class="son1"><a href="#">更多..</a></div> <div class="son2"><a href="#">更多..</a></div> </div> </body> </html>
页面效果
18.兼容IE6的方法：
_属性：值
19.cursor: pointer; 让光标变手形
20.overflow: hidden; 溢出隐藏
1)如果一个列表li，宽度300PX，高度是30px，加的内容超出这个范围会显示在li的外面，如果你希望超出的部分隐藏，那么加 overflow: hidden;
2)如果一个块里的内容不确定高度的时候，那么这个块不能指定固定的高，此时加overflow: hidden;(可以让块的高度自适应)
3)dl {width:300px;overflow: hidden;}
