CSS概述:
Cascading Style Sheets:層疊樣式表
作用:
用來美化我們的HTML頁面的
HTML 決定網(wǎng)頁的骨架
CSS 化妝
CSS的簡(jiǎn)單語法:
在一個(gè)style標(biāo)簽中乍狐,去編寫CSS 內(nèi)容割坠,最好將style標(biāo)簽寫在這個(gè)head標(biāo)簽中
<style>
選擇器{
屬性名稱:屬性的值;
屬性名稱2:屬性的值2夯接;
}
<\style>
CSS選擇器:幫助我們找到我們要修飾的標(biāo)簽或者元素
元素選擇:
元素的名稱{
屬性名稱:屬性的值;
屬性名稱:屬性的值炭庙;
}
ID選擇器:
以#號(hào)開頭
#ID的名稱{
屬性名稱:屬性的值先嬉;
屬性名稱:屬性的值;
}
類選擇器:
以 . 開頭
.類的名稱{
屬性名稱:屬性的值光督;
屬性名稱:屬性的值阳距;
}
類和ID選擇器的異同點(diǎn)
同:都可以應(yīng)用于任何元素
異:1. ID選擇器在文檔中只能使用一次,類選擇器可以使用多次
- 可以使用類選擇器詞列表方法為一個(gè)元素同時(shí)使用多個(gè)樣式
子選擇器
用于選擇指定標(biāo)簽元素的第一代子元素
例如: .food>li{border:1px solid red;} 這行代碼會(huì)使class名為food下的子元素li加入紅色實(shí)線邊框
后代選擇器
加入空格用來指定標(biāo)簽元素下的后輩元素
.first span{color:red;}
子選擇器與后代選擇器的區(qū)別
子選擇器僅指它的直接后代或者說是第一代后代结借,而后代選擇器是作用于所有子后代元素 后代選擇器通過空格來進(jìn)行選擇 而子選擇器是通過 > 來選擇
特殊性
為同一個(gè)元素設(shè)置了不同的樣式筐摘,瀏覽器會(huì)根據(jù)權(quán)值來判斷使用哪種樣式。使用權(quán)值高的船老。
權(quán)值規(guī)則:標(biāo)簽的權(quán)值為1咖熟;類選擇符權(quán)值為10; ID選擇符的權(quán)值最高是100努隙,還有一個(gè)比較特殊的權(quán)值--繼承球恤,有些文獻(xiàn)顯示它只有0.1
層疊
在HTML中對(duì)于同一個(gè)元素有多個(gè)CSS樣式存在,而且有相同的權(quán)重荸镊,會(huì)根據(jù)這些CSS樣式的前后順序來決定咽斧,處于最后面的樣式將被應(yīng)用(后面的會(huì)覆蓋前面的樣式)
內(nèi)聯(lián)樣式表(標(biāo)簽內(nèi)部)> 嵌入樣式表(當(dāng)前文件中)> 外部樣式表(外部文件中)
CSS的引入方式:
外部樣式:通過link標(biāo)簽引入一個(gè)外部的CSS文件
內(nèi)部樣式:直接再style標(biāo)簽內(nèi)編寫CSS代碼
行內(nèi)樣式:直接在標(biāo)簽中添加一個(gè)style屬性堪置,編寫CSS樣式
CSS首頁優(yōu)化(LOGO部分)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.logo{
float: left;
width: 33%;
/*border-width: 1px;
border-style: solid;
border-color: red;*/
height: 60px;
line-height: 60px;
/* border: 1px solid red;*/
}
.amenu{
color: white;
text-decoration: none;
height: 50px;
line-height: 50px;
}
.product{
float: left; text-align: center; width: 16%; height: 240px;
}
</style>
</head>
<body>
<!--
1. 創(chuàng)一個(gè)最外層div
2. 第一部份: LOGO部分: 嵌套三個(gè)div
3. 第二部分: 導(dǎo)航欄部分 : 放置5個(gè)超鏈接
4. 第三部分: 輪播圖
5. 第四部分:
6. 第五部分: 直接放一張圖片
7. 第六部分: 抄第四部分的
8. 第七部分: 放置一張圖片
9. 第八部分: 放一堆超鏈接
-->
<div>
<!--2. 第一部份: LOGO部分: 嵌套三個(gè)div-->
<div>
<div class="logo">
<img src="../img/logo2.png"/>
</div>
<div class="logo">
<img src="../img/header.png"/>
</div>
<div class="logo">
<a href="#">登錄</a>
<a href="#">注冊(cè)</a>
<a href="#">購物車</a>
</div>
</div>
<!--清除浮動(dòng)-->
<div style="clear: both;"></div>
<!--3. 第二部分: 導(dǎo)航欄部分 : 放置5個(gè)超鏈接-->
<div style="background-color: black; height: 50px;">
<a href="#" class="amenu">首頁</a>
<a href="#" class="amenu">手機(jī)數(shù)碼</a>
<a href="#" class="amenu">電腦辦公</a>
<a href="#" class="amenu">鞋靴箱包</a>
<a href="#" class="amenu">香煙酒水</a>
</div>
<!--4. 第三部分: 輪播圖-->
<div>
<img src="../img/1.jpg" width="100%"/>
</div>
<!--5. 第四部分:-->
<div>
<div><h2>最新商品<img src="../img/title2.jpg"/></h2></div>
<!--左側(cè)廣告圖-->
<div style="width: 15%; height: 480px; float: left;">
<img src="../products/hao/big01.jpg" width="100%" height="100%"/>
</div>
<!--
右側(cè)商品
-->
<div style="width: 84%; height: 480px;float: left;">
<div style="height: 240px; width: 50%; float: left;">
<img src="../products/hao/middle01.jpg" height="100%" width="100%" />
</div>
<div class="product">
<img src="../products/hao/small08.jpg" />
<p>高壓鍋</p>
<p style="color: red;">$998</p>
</div>
<div class="product">
<img src="../products/hao/small08.jpg" />
<p>高壓鍋</p>
<p style="color: red;">$998</p>
</div>
<div class="product">
<img src="../products/hao/small08.jpg" />
<p>高壓鍋</p>
<p style="color: red;">$998</p>
</div>
<div class="product">
<img src="../products/hao/small08.jpg" />
<p>高壓鍋</p>
<p style="color: red;">$998</p>
</div>
<div class="product">
<img src="../products/hao/small08.jpg" />
<p>高壓鍋</p>
<p style="color: red;">$998</p>
</div>
<div class="product">
<img src="../products/hao/small08.jpg" />
<p>高壓鍋</p>
<p style="color: red;">$998</p>
</div>
<div class="product">
<img src="../products/hao/small08.jpg" />
<p>高壓鍋</p>
<p style="color: red;">$998</p>
</div>
<div class="product">
<img src="../products/hao/small08.jpg" />
<p>高壓鍋</p>
<p style="color: red;">$998</p>
</div>
<div class="product">
<img src="../products/hao/small08.jpg" />
<p>高壓鍋</p>
<p style="color: red;">$998</p>
</div>
</div>
</div>
<!--6. 第五部分: 直接放一張圖片-->
<div>
<img src="../products/hao/ad.jpg" width="100%"/>
</div>
<!--7. 第六部分: 抄第四部分的-->
<div>
<div><h2>最新商品<img src="../img/title2.jpg"/></h2></div>
<!--左側(cè)廣告圖-->
<div style="width: 15%; height: 480px; float: left;">
<img src="../products/hao/big01.jpg" width="100%" height="100%"/>
</div>
<!--
右側(cè)商品
-->
<div style="width: 84%; height: 480px;float: left;">
<div style="height: 240px; width: 50%; float: left;">
<img src="../products/hao/middle01.jpg" height="100%" width="100%" />
</div>
<div class="product">
<img src="../products/hao/small08.jpg" />
<p>高壓鍋</p>
<p style="color: red;">$998</p>
</div>
<div class="product">
<img src="../products/hao/small08.jpg" />
<p>高壓鍋</p>
<p style="color: red;">$998</p>
</div>
<div class="product">
<img src="../products/hao/small08.jpg" />
<p>高壓鍋</p>
<p style="color: red;">$998</p>
</div>
<div class="product">
<img src="../products/hao/small08.jpg" />
<p>高壓鍋</p>
<p style="color: red;">$998</p>
</div>
<div class="product">
<img src="../products/hao/small08.jpg" />
<p>高壓鍋</p>
<p style="color: red;">$998</p>
</div>
<div class="product">
<img src="../products/hao/small08.jpg" />
<p>高壓鍋</p>
<p style="color: red;">$998</p>
</div>
<div class="product">
<img src="../products/hao/small08.jpg" />
<p>高壓鍋</p>
<p style="color: red;">$998</p>
</div>
<div class="product">
<img src="../products/hao/small08.jpg" />
<p>高壓鍋</p>
<p style="color: red;">$998</p>
</div>
<div class="product">
<img src="../products/hao/small08.jpg" />
<p>高壓鍋</p>
<p style="color: red;">$998</p>
</div>
</div>
</div>
<!--8. 第七部分: 放置一張圖片-->
<div>
<img src="../img/footer.jpg" width="100%"/>
</div>
<!--9. 第八部分: 放一堆超鏈接-->
<div style="text-align: center;">
<a href="#">關(guān)于我們</a>
<a href="#">聯(lián)系我們</a>
<a href="#">招賢納士</a>
<a href="#">法律聲明</a>
<a href="#">友情鏈接</a>
<a href="#">支付方式</a>
<a href="#">配送方式</a>
<a href="#">服務(wù)聲明</a>
<a href="#">廣告聲明</a>
<br />
Copyright ? 2005-2016 傳智商城 版權(quán)所有
</div>
</div>
</body>
</html>
CSS的盒子模型
萬物皆盒子
內(nèi)邊距:
padding-top:
padding-right:
padding-bottom:
padding-left:
padding: 10px; 上下左右都是10px
padding: 10px 20px; 上下都是10px 左右是20px
padding: 10px 20px 30px; 上 10px 右 20px 下 30px 左 20px
padding: 10px 20px 30px 40px; 上右下左,順時(shí)針方向
外邊距:
margin-top:
margin-right:
margin-bottom:
margin-left:
CSS絕對(duì)定位:
position: absulte
top:控制距離頂部的位置
left:控制距離左邊的位置
步驟分析:
1.總共5部分
2.第一部分是LOGO部分
3.第二部分是導(dǎo)航菜單
4.第三部分是注冊(cè)部分
5.第四部分是FOOTER圖片
6.第五部分是一堆超鏈接
代碼實(shí)現(xiàn):
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="../css/main.css"/>
</head>
<body>
<!--
1. 總共是5部分
2. 第一部分是LOGO部分
3. 第二部分是導(dǎo)航菜單
4. 第三部分是注冊(cè)部分
5. 第四部分是FOOTER圖片
6. 第五部分是一堆超鏈接
-->
<div>
<!--2. 第一部分是LOGO部分-->
<div>
<div class="logo">
<img src="../img/logo2.png" />
</div>
<div class="logo">
<img src="../img/header.png" />
</div>
<div class="logo">
<a href="#">登錄</a>
<a href="#">注冊(cè)</a>
<a href="#">購物車</a>
</div>
</div>
<!--清除浮動(dòng)-->
<div style="clear: both;"></div>
<!--3. 第二部分是導(dǎo)航菜單-->
<div style="background-color: black; height: 50px;">
<a href="#" class="amenu">首頁</a>
<a href="#" class="amenu">手機(jī)數(shù)碼</a>
<a href="#" class="amenu">電腦辦公</a>
<a href="#" class="amenu">鞋靴箱包</a>
<a href="#" class="amenu">香煙酒水</a>
</div>
<!--4. 第三部分是注冊(cè)部分-->
<div style="background: url(../image/regist_bg.jpg);height: 500px;">
<div style="position:absolute;top:200px;left:350px;border: 5px solid darkgray;width: 50%;height: 50%;background-color: white;">
<table width="60%" align="center">
<tr>
<td colspan="2"><font color="blue" size="6">會(huì)員注冊(cè)</font>USER REGISTER</td>
</tr>
<tr>
<td>用戶名:</td>
<td><input type="text"/></td>
</tr>
<tr>
<td>密碼:</td>
<td><input type="password"/></td>
</tr>
<tr>
<td>確認(rèn)密碼:</td>
<td><input type="password"/></td>
</tr>
<tr>
<td>email:</td>
<td><input type="email"/></td>
</tr>
<tr>
<td>姓名:</td>
<td><input type="text"/></td>
</tr>
<tr>
<td>性別:</td>
<td><input type="radio" name="sex"/> 男
<input type="radio" name="sex"/> 女
<input type="radio" name="sex"/> 妖
</td>
</tr>
<tr>
<td>出生日期:</td>
<td><input type="date"/></td>
</tr>
<tr>
<td>驗(yàn)證碼:</td>
<td><input type="text"/></td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="注冊(cè)"/></td>
</tr>
</table>
</div>
</div>
<!--5. 第四部分是FOOTER圖片-->
<div>
<img src="../img/footer.jpg" width="100%"/>
</div>
<!--9. 第四部分: 放一堆超鏈接-->
<div style="text-align: center;">
<a href="#">關(guān)于我們</a>
<a href="#">聯(lián)系我們</a>
<a href="#">招賢納士</a>
<a href="#">法律聲明</a>
<a href="#">友情鏈接</a>
<a href="#">支付方式</a>
<a href="#">配送方式</a>
<a href="#">服務(wù)聲明</a>
<a href="#">廣告聲明</a>
<br />
</div>
</div>
</body>
</html>