知識(shí)點(diǎn)總結(jié)
position三種形式
1.靜態(tài)定位 position:static; (標(biāo)準(zhǔn)流中的元素默認(rèn)形式，基本不存在)
2.相對(duì)定位 ** position:relative;**(相對(duì)于自己定位)
定位坐標(biāo)：top|bottom|left|right
取值為正：往盒子里走；取值為負(fù)，網(wǎng)盒子內(nèi)走
3.絕對(duì)定位 position:absolute;(相對(duì)于定位元素)
定位坐標(biāo)：top|bottom|left|right
4.固定定位 position:fixed;(相當(dāng)于網(wǎng)頁窗口)
問題:在IE6.IE7下不兼容
定位坐標(biāo)：top|bottom|left|right
z-index
目的：實(shí)現(xiàn)盒子的邏輯關(guān)系，疊加
作用： z-index:【數(shù)字】; 提高層級(jí)
CSS精靈----雪碧技術(shù)
運(yùn)用背景圖的backfround-position屬性
background-position：水平方向坐標(biāo) 垂直方向坐標(biāo);
游標(biāo)
cursor:pointer; 當(dāng)鼠標(biāo)移上時(shí)糕珊，鼠標(biāo)變小手
可見性
display:none; 完全隱藏，不占位（還有inline|block|inline-block）
visibility:hidden; 占位隱藏 （或visibility:visible; 占位可見）
overflow:hidden; （溢出隱藏）
或overflow-x:hidden; 水平（淘寶首頁在用） overflow-y:hidden; 垂直
列表
控制列表項(xiàng)目編號(hào)/符號(hào)的屬性：list-style
list-style-type|list-style-position|list-style-image
list-style-type:none 取消項(xiàng)目編號(hào)/符號(hào) 最常用
list-style-type:disc 小圓點(diǎn) 默認(rèn)
list-style-type:square 小方塊
list-style-type:circle 空心圓
list-style-position:inside; 項(xiàng)目符號(hào)在邊框內(nèi)顯示 padding:0;margin:0;
list-style-position:outside; 項(xiàng)目符號(hào)在邊框內(nèi)顯示
通常：不用列表的默認(rèn)項(xiàng)目編號(hào)/符號(hào)，通常用背景圖吗氏，配合padding-left
完成前面的小點(diǎn)
迅雷看看案例
Emmet
作用：快速書寫HTML和CSS,帶你飛
快捷鍵：ctrl+e或Tab
常用寫法
1.html:5 + 快捷鍵 調(diào)出html5基本骨架；
html:xt+ 快捷鍵 調(diào)出xhtml1.0基本骨架
2.簡(jiǎn)單元素寫法：標(biāo)簽名稱（+快捷鍵）
3.帶類(class)元素的寫法：標(biāo)簽名稱.類名（+快捷鍵）
4.帶id元素的寫法：標(biāo)簽名稱#id（+快捷鍵）
5.雙種屬性下并排書寫即可
6.兄弟級(jí)并列元素寫法：兄標(biāo)簽+弟標(biāo)簽（+快捷鍵）
7.父子級(jí)嵌套關(guān)系的寫法：父標(biāo)簽>子標(biāo)簽（+快捷鍵）
8.如果讓某個(gè)元素重復(fù)雷逆，可以用*
9.如果某個(gè)數(shù)值是遞增的弦讽，可以用$配合*使用
注：實(shí)際開發(fā)中，不提倡使用*{margin:0;padding:0;},太耗費(fèi)資源膀哲，很多網(wǎng)站均提供了css初始化的功能往产，如 Yahoo reset css
寫代碼過程中的總結(jié)
1.vertical-align:top(最頂)|bottom(最底)|sub(下標(biāo))|super(上標(biāo))|text-top(父元素頂)|text-bottom(父元素底)|baseline(默認(rèn)。元素放在父元素基線上)|%(使用"line-height"屬性的百分比值來排列此元素某宪，可為負(fù))
2.調(diào)用css樣式表:<head></dead>中添加<link rel="stylesheet"
href="--/--.css">
3.應(yīng)用swf動(dòng)態(tài)圖片：在對(duì)應(yīng)位置加<embed src="---/---.swf">
4.提取公共類：例：寬度均為800px,在css中用.w800{width:800px;margin:0 auto}其中margin:0 auto;是集中對(duì)齊
5.盒子寬度的算法：盒子占空間的寬度 = 盒子內(nèi)容寬度（width） + 左右padding + 左右border + 左右margin
6 IE6下盒子不能小于13px
如果一個(gè)盒子小于了13px仿村，那么就給它加overflow:hidden;
7.不透明度:
標(biāo)準(zhǔn)瀏覽器下----opacity:0~1;
IE6|IE7|IE8下：fiter:alpha(opacity:0~100);
8.解決在IE6下有雙倍邊距的問題：把他們轉(zhuǎn)化成行內(nèi)元素，也就是說
在float:left;或float:right的后面兴喂，添加display:inline;
注意：不要給ol和ul加display:inline;
9.如果行內(nèi)元素右浮動(dòng)奠宜，而且它是最后一個(gè)元素，那么它在低版本IE下會(huì)在下一行顯示
解決方案：1. 將該元素放在第一個(gè)的位置瞻想；2. 不用浮動(dòng)压真，改用絕對(duì)定位
10.禁止文字換行：white-space:nowrap;
11.代碼：text-align:right;展開的快捷代碼：ta:r
代碼：text-align:center;展開的快捷代碼：ta:c
代碼：text-align:left;;展開的快捷代碼：ta:l
代碼：background-color:;展開的快捷代碼：bgc
迅雷看看代碼
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>迅雷看看</title>
<link rel="stylesheet" href="css1/base1.css">
<link rel="stylesheet" href="css1/index1.css">
</head>
<body>
<!--第一部分 stsrt-->
<div class=" w970 header">
<!--分成三個(gè)部分，用了三個(gè)div-->
<div class="logo fl">
<embed src="images1/logo.swf"/ ><!--錯(cuò)誤：未加/-->
</div>
<div class="center fl">
<form action="">
<input type="text" name="q" value="金陵十三釵" class="q"/>
<input type="submit" value="搜 索" class="p"/>
</form>
<p>
<a href="">熱播榜</a>
<a href="">鄉(xiāng)愛5結(jié)局</a>
<a href="">我的老爹</a>
<a href="">小姨多鶴</a>
<a href="">歐陽德</a>
<a href="">龍門飛甲</a>
<a href="">大沖鋒</a>
</p>
</div>
<div class="signed fl">
<a href="">登陸</a>
|
<a href="">注冊(cè)</a>
|
<a href="">迅雷會(huì)員</a>
|
<a href="" class="sub">訂閱</a><br><!--錯(cuò)誤：寫成/br蘑险，導(dǎo)致整個(gè)都顯示不出來-->
<a href="">會(huì)員專區(qū)</a>
|
<a href="">移動(dòng)產(chǎn)品</a>
|
<a href="">游戲</a>
|
<a href="">幫助</a>
</div>
</div>
<!--第一部分結(jié)束 end-->
<!--第二部分開始 start-->
<div class="nav w968"><!--錯(cuò)誤:w968未寫入""內(nèi)-->
<ul class="main-nav fl"><!--錯(cuò)誤：fl未寫入""中-->
<li class="cur"><a href="">首頁</a></li>
<li><a href="">電影</a></li>
<li><a href="">電視劇</a></li>
<li><a href="">綜藝</a></li>
<li><a href="">動(dòng)漫</a></li>
<li><a href="">紀(jì)錄片</a></li>
<li><a href="">視頻快報(bào)</a></li>
<li><a href="">娛樂</a></li>
<li><a href="">電視臺(tái)</a></li>
</ul>
<ul class="sub-nav fl">
<li><a href="">歐美大片</a></li>
<li><a href="">經(jīng)典大片</a></li>
<li><a href="">華語大片</a></li>
</ul>
<ul class="user-nav fl">
<li>我看過的<s></s></li>
<li>下載迅雷<s></s></li>
</ul>
</div>
<!--第二部分結(jié)束 end-->
<!--第三部分滴肿、主體部分 start-->
<div class="main w970">
<div class="banner fl">
<div>
<a href=""></a>
<p>“趙家班”首部悲情大戲《櫻桃》開播 沈春陽挑戰(zhàn)傻娘角色 宋小寶顛覆化身“悲情男”(更新至08集)</p>
</div>
<ul>
<li class="cur"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li style="margin-right:0"></li>
</ul>
</div>
<div class="banner-right fr">
<ul class="banner-right-nav ">
<li>全部</li>
<li class="cur">電影</li>
<li>電視劇</li>
<li>綜藝</li>
<li>動(dòng)漫</li>
<li>記錄</li>
</ul>
<ol>
<li><span>01</span><a href="">深宮諜影</a>更新至26集<strong>7.5 <a href="">深宮諜影</a></strong></li>
<li><span>02</span><a href="">鄉(xiāng)村愛情5</a>44集全<strong>7.8<a href="">鄉(xiāng)村愛情5</a></strong></li>
<li><span>03</span><a href="">如意</a>更新至39集<strong>7.3<a href="">如意</a></strong></li>
<li><span>04</span><a href="">北京愛情故事</a>39集全<strong>8.5<a href="">北京愛情故事</a></strong></li>
<li><span>05</span><a href="">怪俠歐陽德</a>69集全<strong>9.5<a href="">怪俠歐陽德</a></strong></li>
<li><span>06</span><a href="">北京愛情故事</a><strong>8.5<a href="">北京愛情故事</a></strong></li>
<li><span>07</span><a href="">怪俠歐陽德</a><strong>9.5<a href="">怪俠歐陽德</a></strong></li>
<li><span>08</span><a href="">北京愛情故事</a><strong>8.5<a href="">北京愛情故事</a></strong></li>
<li><span>09</span><a href="">怪俠歐陽德</a><strong>7.5<a href="">怪俠歐陽德</a></strong></li>
<li><span>10</span><a href="">北京愛情故事</a><strong>7.5<a href="">北京愛情故事</a></strong></li>
</ol>
<ul>
<li class="banner-right-nav1"></li>
<li class="banner-right-bottom"></li>
</ul>
</div>
</div>
<!--第三部分、主體部分 end-->
</body>
</html>
CSS
@charset "utf-8";
/*公共部分*/
.w970{
width: 970px;
margin: 0 auto;
}
.w968{
width: 968px;
margin:0 auto;
border: 1px solid #ddd;
}
body{
font-size: 12px;
font-family: "宋體";
color:#aaaaaa;
}
a{
color:#3d3d3d;
text-decoration: none;
font-size: 12px;
}
a:hover{
text-decoration: underline;
}
/*公共部分結(jié)束*/
/*第一部分 start*/
.header{
height: 108px;
}
.logo{
width: 290px;
height: 108px;
}
.logo embed{
width: 290px;
height: 108px;
}
.center{
width: 400px;
height: 88px;
padding-top: 20px;
}
.center form{
width: 394px;
height: 27px;
border: 3px solid #eee;
}
.q{
width: 320px;
height: 25px;
line-height: 25px;
border: 1px solid #babebf;
border-right: none;/*解決了在IE6.7下的框內(nèi)字居中問題*/
font-size:12px;
outline: none;
color: #999;
padding-left: 5px;
float:left;/*解決了在IE6.7版本下的代碼換行問題*/
}
.p{
width:68px;
height: 27px;
background: url(../images1/headerpage_02.png);
border: 0 none;
color: white;
font-size: 14px;
font-weight: bold;
outline: none;
float:left;
}
.center p{
padding-top: 9px;
}
.center p a{
font-size: 12px;
color: #999;
margin:0 3px;
}
.signed{
width: 280px;
height: 68px;
padding-top: 40px;
text-align: right;
line-height: 20px;
color:#ececec;
}
.signed a{
color: #999;
font-size: 12px;
}
.sub{
background: url(../images1/dy.png) no-repeat 0 1px;
padding-left: 15px;
}
/*第二部分 start*/
.nav{
height: 35px;
line-height: 35px;
}
.nav li{
float: left;
display: inline;
}
.nav a{
color: #3d3d3d;
}
.main-nav li{
padding: 0 10px;
}
.main-nav a{
font-size: 14px;
}
.main-nav a:hover{
color: #0081cc;
}
.main-nav.cur a{
color: #0081cc;
font-weight: bold;
}
.sub-nav{
background: url(../images1/subnav_bg.png) no-repeat 0 7px;/*出現(xiàn)問題*/
margin-left:10px;
}
.sub-nav li{
padding: 0 11px;
position:relative;
}
.sub-nav img{
position: absolute;
top: 0px;
left:44px;
}
.user-nav{
margin-left: 57px;
color: #666666;
}
.user-nav li{
position:relative;
margin-right:20px;
}
.user-nav s{
width: 5px;
height: 3px;
background:url(../images1/headerpage.png) 0 -64px;
position:absolute;
right:-9px;
top:16px;
overflow:hidden;
}
/*第二部分 end*/
/*第三部分 主體部分 start*/
.main{
height: 365px;
margin-top: 10px;
background-color: #000000;
padding:8px 0 7px 0;
}
.banner{
width: 740px;
height: 365px;
}
.banner-right{
width: 230px;
height: 365px;
background: pink;
}
.banner div {
width: 740px;
height: 310px;
margin-bottom: 8px;
position: relative;
}
.banner div a{
font-size: 14px;
}
.banner div img{
width: 740px;
height: 310px;
}
.banner div p{
width: 740px;
height: 33px;
line-height: 33px;
position:absolute;
left:0px;
bottom: 0px;/*錯(cuò)誤：把bottom寫成right,導(dǎo)致文字始終在圖片下方*/
background-color: #000;
font-size: 14px;
color: #fff;
text-indent:15px;
opacity: 0.5;
filter:alpha (opacity:50);
}
.banner ul{
}
.banner ul li{
width: 56px;
height: 45px;
float:left;
display:inline;
background: url(../images1/rank.png) -228px -51px;
cursor: pointer;
padding:1px;
margin-right: 4px;
}
.banner ul img{
width:56px;
height: 45px;
}
.banner li.cur{
padding-top: 5px;
margin-top: -4px;
background-position: -228px 0px;
}
.banner-right {
width: 218px;
height: 353px;
border: 1px solid #393939;
background: url(../images1/rank.png);
font-size: 12px;
padding: 10px 5px 0;/*順序：上佃迄、左右泼差、下*/
}
.banner-right-nav {
width: 210px;
height: 21px;
border-left: 1px solid #545454;
border-top: 1px solid #545454;
margin:0 auto;
}
/*第三部分 主體部分 end*/
