02-CSS&JS
阿新 • • 發佈：2018-12-03
使用CSS完成網站首頁的優化
需求分析:
由於我們昨天使用表格佈局存在缺陷,那麼我們要來考慮使用DIV+CSS來對頁面進行優化
表格佈局的缺陷:
1. 巢狀層級太多, 一旦出現巢狀順序錯亂, 整個頁面達不到預期效果
2. 採用表格佈局,頁面不夠靈活, 動其中某一塊,整個表格佈局的結構全都要變
技術分析
HTML的塊標籤:
* div標籤: 預設佔一行,自動換行
* span標籤: 內容顯示在同一行
CSS概述:
Cascading Style Sheets : 層疊樣式表
主要用作用:
- 用來美化我們的HTML頁面的
- HTML 決定網頁的骨架,CSS 化妝
- 將頁面的HTML和美化進行分離
CSS的簡單語法:
在一個style標籤中,去編寫CSS內容,最好將style標籤寫在這個head標籤中
<style>
選擇器{
屬性名稱:屬性的值;
屬性名稱2: 屬性的值2;
}
</style>
CSS選擇器: 要修飾的標籤或者元素 如div span
ID選擇器，只改變ID對應的元素:
以#號開頭 ID在整個頁面中必須是唯一的s
#ID的名稱{
屬性名稱:屬性的值;
屬性名稱:屬性的值;
}
<head 類選擇器:
以 . 開頭
.類的名稱{
屬性名稱:屬性的值;
屬性名稱:屬性的值;
}
< CSS的引入方式:
外部樣式: 通過link標籤引入一個外部的css檔案，提高程式碼複用性
.shuiguo{ //寫在css檔案中
color: pink;
}
.shucai{
color: green;
}
<link rel="stylesheet" href="style1.css" /> 在html檔案中只需要寫這一行，不需要再重複寫上面的程式碼
內部樣式: 直接在style標籤內編寫CSS程式碼
行內樣式: 直接在標籤中新增一個style屬性, 編寫CSS樣式
<div class="shuiguo" style="color: greenyellow;">甘蔗</div>
CSS浮動 : 浮動的元素會脫離正常的文件流,在正常的文件流中不佔空間
float屬性:
left
right
clear屬性: 清除浮動
both : 兩邊都不允許浮動
left: 左邊不允許浮動
right : 右邊不允許浮動
流式佈局
<body>
<!--向左浮動-->
<div style="float: left;width: 200px;height: 200px;background-color: red;"></div>
<div style="float: left;width: 200px;height: 200px;background-color: blue;"></div>
<div style="float: left;width: 200px;height: 200px;background-color: greenyellow;"></div>
<div style="clear: both;"></div><!--清除浮動，如果不清除會覆蓋-->
<div style="width: 200px;height: 200px;background-color: red;"></div>
<div style="width: 200px;height: 200px;background-color: blue;"></div>
<div style="float: left;width: 200px;height: 200px;background-color: greenyellow;"></div>
</body>
步驟分析:
- 創一個最外層div
- 第一部份: LOGO部分: 巢狀三個div
- 第二部分: 導航欄部分 : 放置5個超連結
- 第三部分: 輪播圖
- 第四部分:
- 第五部分: 直接放一張圖片
- 第六部分: 抄第四部分的
- 第七部分: 放置一張圖片
- 第八部分: 放一堆超連結
程式碼實現:
<!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; //行高內居中，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. 創一個最外層div
2. 第一部份: LOGO部分: 巢狀三個div
3. 第二部分: 導航欄部分 : 放置5個超連結
4. 第三部分: 輪播圖
5. 第四部分:
6. 第五部分: 直接放一張圖片
7. 第六部分: 抄第四部分的
8. 第七部分: 放置一張圖片
9. 第八部分: 放一堆超連結
-->
<div>
<!--2. 第一部份: LOGO部分: 巢狀三個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="#">註冊</a>
<a href="#">購物車</a>
</div>
</div>
<!--清除浮動-->
<div style="clear: both;"></div>
<!--3. 第二部分: 導航欄部分 : 放置5個超連結-->
<div style="background-color: black; height: 50px;">
<a href="#" class="amenu">首頁</a>
<a href="#" class="amenu">手機數碼</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>
<!--左側廣告圖-->
<div style="width: 15%; height: 480px; float: left;">
<img src="../products/hao/big01.jpg" width="100%" height="100%"/>
</div>
<!--
右側商品
-->
<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>
<!--左側廣告圖-->
<div style="width: 15%; height: 480px; float: left;">
<img src="../products/hao/big01.jpg" width="100%" height="100%"/>
</div>
<!--
右側商品
-->
<div style="width: 84%; height: 480px;float: left;">
<div style="height: 240px; width: 50%; float: left;">
<img src="../products/hao/middle01.jpg" height=