(靜态LOL輪播圖布局)
前言
學習了一段時間的JavaScript總覺得并不是非常熟練，寫一個靜态LOL輪播圖練練手。
輪播圖在許多網站上都可以看到，像淘寶，京東等電商網站的首頁，是不可或缺的頁面元素。
先來看看實作效果吧~
一、輪播圖效果
二、輪播圖是什麼？
示例：輪播圖是指在一個子產品或者視窗，通過滑鼠點選或手指滑動後，可以看到多張圖檔。這些圖檔統稱為輪播圖，這個子產品叫做輪播子產品
三、樣式标簽是什麼？
style标簽的作用是用來說明所要定義的樣式，style标簽用于為HTML文檔定義樣式資訊，在style元素裡，可以指定HTML元素在浏覽器裡的呈現方式，style标簽應放在head裡
代碼如下（示例）：
<style>
</style>
輪播圖大體結構：
HTML部分：
建立一個div标簽，用于編寫整個輪播圖結構，指令.banner
<div class="banner">
根導航據banner中内容，劃分成img區域，以及導航區域,區域div
<div class="banner_img">
<img src="https://ossweb-img.qq.com/upload/adw/image/977/20220513/1880117fcca33efc8c78ca9710544c12.jpeg">
</div>
<div class="banner_nav">
網頁還原過程中，如果需要編寫對應的并列結構，直接使用無序清單進行開發ul>li
<ul>
<li class="active">EDG冠軍戰隊皮膚</li>
<li>EDG冠軍榮耀寶箱</li>
<li>西部魔影2022</li>
<li>西部魔影通行證</li>
<li>2022西部秘寶</li>
</ul>
</div>
</div>
</body>
</html>
CSS部分：
清除網頁的預設距離
*{margin:0;
padding:0;
}
網頁長寬高度大小
.banner{
width: 820px;
height: 380px;
background-color:blue;
}
背景圖檔大小
.banner_img{
width: 820px;
height: 340px;
background-color:red;
}
.banner_nav{
width: 820px;
height: 40px;
background-color:green;
}
後代選擇器，先找容器，再找内部标簽
banner_nav li{
width: 164px;
height: 40px;
由于li在網頁中屬于塊元素
獨立成行 浮動屬性
讓原本上下排列的li，并排
float:left;
清除li前面的清單符号
list-style:none;
字号是:14px
font-size: 14px;
文本的水準居中
text-align:center;
文本垂直居中 單行文本垂直居中
當行高等于目前容器的高度時内部文字垂直居中
line-height: 40px;
/* 設定背景顔色 */
background-color:#e3e2e2;
}
.banner_nav .active{
background-color:white;
color:#ab8e66;
邊框會增加元素的實際占位
border-bottom: 2px solid #cea861;
height: 38px;
三、head完整代碼
代碼如下（示例）：
<style>
/* 清除網頁的預設距離 */
*{margin:0;
padding:0;
}
/* 清除網頁的預設距離 */
*{margin:0;
padding:0;
}
.banner{
width: 820px;
height: 380px;
background-color:blue;
}
.banner_img{
width: 820px;
height: 340px;
background-color:red;
}
.banner_nav{
width: 820px;
height: 40px;
background-color:green;
}
/* 後代選擇器，先找容器，再找内部标簽 */
.banner_nav li{
width: 164px;
height: 40px;
/* 由于li在網頁中屬于塊元素，獨立成行 */
/* 浮動屬性，讓原本上下排列的li，并排 */
float:left;
/* 清楚li前面的清單符号 */
list-style:none;
/* 字号是:14px; */
font-size: 14px;
/* 文本的水準居中 */
text-align:center;
/* 文本垂直居中 單行文本垂直居中，當行高等于目前容器的高度時内部文字垂直居中 */
line-height: 40px;
/* 設定背景顔色 */
background-color:#e3e2e2;
}
.banner_nav .active{
background-color:white;
color:#ab8e66;
/* 邊框會增加元素的實際占位 */
border-bottom: 2px solid #cea861;
height: 38px;
}
</style>
小項目完整代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>靜态lol輪播圖布局</title>
<style>
/* 清除網頁的預設距離 */
*{margin:0;
padding:0;
}
.banner{
width: 820px;
height: 380px;
background-color:blue;
}
.banner_img{
width: 820px;
height: 340px;
background-color:red;
}
.banner_nav{
width: 820px;
height: 40px;
background-color:green;
}
/* 後代選擇器，先找容器，再找内部标簽 */
.banner_nav li{
width: 164px;
height: 40px;
/* 由于li在網頁中屬于塊元素，獨立成行 */
/* 浮動屬性，讓原本上下排列的li，并排 */
float:left;
/* 清除li前面的清單符号 */
list-style:none;
/* 字号是:14px; */
font-size: 14px;
/* 文本的水準居中 */
text-align:center;
/* 文本垂直居中 單行文本垂直居中，當行高等于目前容器的高度時内部文字垂直居中 */
line-height: 40px;
/* 設定背景顔色 */
background-color:#e3e2e2;
}
.banner_nav .active{
background-color:white;
color:#ab8e66;
/* 邊框會增加元素的實際占位 */
border-bottom: 2px solid #cea861;
height: 38px;
}
</style>
</head>
<body>
<!-- 建立一個div标簽，用于編寫整個輪播圖結構，指令.banner -->
<div class="banner">
<!-- 根導航據banner中内容，劃分成img區域，以及導航區域,區域div -->
<div class="banner_img">
<img src="https://ossweb-img.qq.com/upload/adw/image/977/20220513/1880117fcca33efc8c78ca9710544c12.jpeg">
</div>
<div class="banner_nav">
<!-- 網頁還原過程中，如果需要編寫對應的并列結構，直接使用無序清單進行開發ul>li -->
<ul>
<li class="active">EDG冠軍戰隊皮膚</li>
<li>EDG冠軍榮耀寶箱</li>
<li>西部魔影2022</li>
<li>西部魔影通行證</li>
<li>2022西部秘寶</li>
</ul>
</div>
</div>
</body>
</html>
<!-- ps工具
1.标尺 ctrl+r
2.移動工具 v 用于移動标尺線
3.放大鏡工具 z
4.抓手工具 按住空格鍵
5.切片工具 ps 工具欄第五個
6.吸管工具 I -->
![主流浏覽器四大綜合性能測試[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)