王者榮耀英雄購買商城網頁版
網頁賞析：
程式碼分三部分：
1.html
2.初始化重置reset.css
3.主要格式main.css
注：最下面有需要的素材可供大家練習使用。
1.html程式碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible"
content="ie=edge">
<title>Document</title>
<link rel="stylesheet"
href="reset.css">
<link rel="stylesheet"
href="main.css">
</head>
<body>
<!-- 1.login部分 -->
<div class="login">
<!-- 1.1 login內容部分 -->
<div class="loginbox">
<!-- 1.11 左側歡迎欄 -->
<h3>歡迎來到王者榮耀英雄購買商城！</h3>
<!-- 1.12右側我的訂單 -->
<div class="loginrg">
<!-- 1.121 已經登入 -->
<div class="inlogin">
歡迎您：
<a href="">張山</a>
</div>
<!-- 1.122未登入 -->
<div class="unlogin">
<a href="">登入</a>
<span>|</span>
<a href="">註冊</a>
</div>
<!-- 1.123 我的訂單 -->
<div class="mylogin">
<span>|</span>
<a href="">我的購物車</a>
<span>|</span>
<a href="">我的訂單</a>
</div>
</div>
</div>
</div>
<!-- 2.search部分設定 -->
<div class="search">
<!-- 內部內容盒子設定 -->
<div class="searchbox">
<!-- 2.1左側logo設定 -->
<a href=""><img
src="images/王者榮耀.jpg"
alt=""></a>
<!-- 2.2搜尋框設定 -->
<div class="searchcar">
<form action="">
<input class="txt"type="text"
placeholder="搜尋">
<input class="sub"type="submit"
value="搜尋"
>
</form>
</div>
<!-- 2.3右側購物車 -->
<div class="buy">
<a href="">我的購物車</a>
<span>0</span>
</div>
</div>
</div>
<!-- 3.全部英雄分類 -->
<div class="cate">
<!-- 內部內容設定 -->
<div class="catecon">
<!-- 3.1全部英雄分類 -->
<a class="all"
href="">全部英雄分類</a>
<!-- 3.2首頁設定 -->
<ul class="catelist">
<li><a href="">首頁</a></li>
<li><span>|</span></li>
<li><a href="">英雄介紹</a></li>
<li><span>|</span></li>
<li><a href="">打折促銷</a></li>
</ul>
</div>
</div>
<!-- 4.slide -->
<div class="slide">
<!-- 裡面內容 -->
<div class="slidecon">
<!-- 4.1左側 英雄展示 -->
<ul class="flist">
<li><a href="">No.1【肉盾坦克】</a></li>
<li><a href="">No.2【鐵血戰士】</a></li>
<li><a href="">No.3【靈活刺客】</a></li>
<li><a href="">No.4【玄幻法師】</a></li>
<li><a href="">No.5【遠端射手】</a></li>
<li><a href="">No.6【第三輔助】</a></li>
</ul>
<!-- 4.2中間部分 slide圖 -->
<div class="slidepic">
<!-- 4.21中間圖片 -->
<ul class="slist">
<li><a href=""><img
src="images/李白.jpg"
alt=""></a></li>
</ul>
</div>
<!-- 4.3右邊圖片 -->
<div class="rgpic">
<a href=""><img
src="images/王昭君.jpg"
alt=""></a>
<a href=""><img
src="images/關羽.jpg"
alt=""></a>
</div>
</div>
</div>
<!-- 5.英雄設定 -->
<div class="her">
<!-- 內部內容 -->
<div class="hercon">
<!-- 5.1頭部div -->
<div class="head">
<a class="fheada"
href="">靈活刺客</a>
<!-- 3.2首頁設定 -->
<ul class="headlist">
<li><span>|</span></li>
<li><a href="">官方活動</a></li>
<li><a href="">限時活動</a></li>
</ul>
<a class="headlista"
href="">檢視更多>></a>
</div>
<!-- 5.2左側廣告 -->
<div class="lfad">
<a href=""><img
src="images/刺客.jpg"
alt=""></a>
</div>
<!-- 5.3右側列表 -->
<ul class="herlist">
<li>
<h5>鳳求凰—李白</h5>
<a href=""><img
src="images/刺客李白.jpg"
alt=""></a>
<div>¥18888</div>
</li>
<li>
<h5>白龍吟—韓信</h5>
<a href=""><img
src="images/韓信.jpg"
alt=""></a>
<div>¥18888</div>
</li>
<li>
<h5>劍舞者—花木蘭</h5>
<a href=""><img
src="images/花木蘭.jpg"
alt=""></a>
<div>¥18888</div>
</li>
<li>
<h5>神夢一刀—橘右京</h5>
<a href=""><img
src="images/橘右京.jpg"
alt=""></a>
<div>限時活動</div>
</li>
</ul>
</div>
</div>
<!-- 6.英雄設定 -->
<div class="her">
<!-- 內部內容 -->
<div class="hercon">
<!-- 6.1頭部div -->
<div class="head">
<a class="fheada"
href="">鐵血戰士</a>
<!-- 6.11首頁設定 -->
<ul class="headlist">
<li><span>|</span></li>
<li><a href="">官方活動</a></li>
<li><a href="">限時活動</a></li>
</ul>
<a class="headlista"
href="">檢視更多>></a>
</div>
<!-- 6.2左側廣告 -->
<div class="lfad">
<a href=""><img
src="images/亞瑟.jpg"
alt=""></a>
</div>
<!-- 6.3右側列表 -->
<ul class="herlist">
<li>
<h5>老夫子</h5>
<a href=""><img
src="images/老夫子.jpg"
alt=""></a>
<div>¥ 18888</div>
</li>
<li>
<h5>曹操</h5>
<a href=""><img
src="images/曹操.jpg"
alt=""></a>
<div>¥ 18888</div>
</li>
<li>
<h5>呂布</h5>
<a href=""><img
src="images/呂布.jpg"
alt=""></a>
<div>¥ 18888</div>
</li>
<li>
<h5>楊戩</h5>
<a href=""><img
src="images/楊戩.jpg"
alt=""></a>
<div>¥ 18888</div>
</li>
</ul>
</div>
</div>
</body>
</html>
2.main.css賞析：
/* 注：因為大部分文字都是12 顏色相同，所以總體設定 */
body{
font-size:12px;
color:#666666;
}
/* 1.login最外側盒子設定 高29 背景顏色#f7f7f7 下邊框1 */
.login{
height: 29px;
background:#f7f7f7;
border-bottom:
1px solid #dddddd;
}
/* 1.1 login內容部分設定 高20 寬1200 居中*/
.loginbox{
width:1200px;
height: 29px;
margin:0
auto;
}
/* 1.11左側歡迎欄設定 居中 注意浮動 */
.loginbox h3{
line-height:
29px;
float:left;
}
/* 1.12右側我的訂單設定 寬290 高29 居中 注意浮動 */
.loginrg{
width:290px;
height: 29px;
line-height:29px;
float:right;
}
/* 1.12登入與未登入設定隱藏 注意浮動*/
.inlogin{
float:left;
}
.unlogin{
display: none;
}
/* 1.121已經登入設定 a顏色orange */
.inlogin a{
color:red;
}
/* 1.122未登入設定 span左右間距 a 滑鼠點選變顏色; */
.unlogin span, .mylogin span{
margin:0
10px;
}
.unlogin a, .mylogin a{
color:#666666;
}
.unlogin a:hover, .mylogin a:hover{
color:red;
}
/* 2.search部分設定 寬預設 高90 */
.search{
height:90px;
}
/* 內部內容盒子設定 寬1200 高90 居中 背景顏色主要測試用*/
.searchbox{
width:1200px;
height: 90px;
margin:0
auto;
/* background: palegreen; */
}
/* 2.1左側logo設定 位置 上29 左17 */
.searchbox a{
margin-left:
17px;
margin-top:29px;
/* 注：浮動或者轉化行內塊元素，一般浮動為主 */
/* display: inline-block; */
float: left;
}
.searchbox img{
width:153px;
height:59px;
}
/* 2.2搜尋框設定 寬616 高38 邊框 位置左120 上36 浮動 */
.searchcar{
width:616px;
height: 38px;
border:2px
solid red;
margin-left:
120px;
margin-top: 36px;
/* 注：出問題找浮動 */
float:left;
}
/* 搜尋框搜尋欄設定 寬516 高38 居中 背景圖 縮排40 */
.searchcar .txt{
width:516px;
height: 38px;
line-height:
38px;
background: url(images/search.png)
no-repeat 12px
9px;
/* background: palevioletred; */
text-indent:
40px;
}
/* 搜尋框搜尋按鈕設定 寬100 高39 背景顏色 字白 14 行高38居中 浮動*/
.searchcar .sub{
width:100px;
height: 39px;
background: red;
font-size:14px;
color:white;
line-height:
39px;
float:right;
}
/* 2.3右側購物車 寬200 高40 右浮動 位置上36 */
.buy{
width:200px;
height: 40px;
float: right;
margin-top:36px;
/* background-color: red; */
}
/* 設定a 寬158 高38 居中 背景圖 字14顏色 縮排56 */
.buy a{
/* 因為要給行內元素設定寬高 改變型別 */
/* display: inline-block; */
float:left;
width:158px;
height: 38px;
border:1px
solid #dddddd;
margin-top:0;
margin-left:0;
color:red;
font-size:14px;
line-height:
38px;
background: url(images/buycar.png)
no-repeat 14px
10px;
text-indent:
56px;
/* background: purple; */
}
/* 設定span 寬40 高40 背景顏色 字18 白 居中 */
.buy span{
/* 因為要給行內元素設定寬高 改變型別 */
/* display: inline-block; */
float:right;
width:40px;
height: 40px;
background: red;
font-size:18px;
color:white;
line-height:
40px;
text-align: center;
/* float:right; */
}
/* 3.全部英雄分類最外側 高40 上26 邊框2 #37ab40 */
.cate{
width: 1200px;
height: 40px;
border-bottom:
2px solid red;
margin:26px
auto 0;
}
/* 內容設定 寬1200 高40 居中 */
.catecon{
width:1200px;
height: 40px;
margin:0
auto;
background:purple;
}
/* 3.1全部英雄分類 寬200高40 居中 字14 白背景色 浮動 */
.all{
width:200px;
height: 40px;
line-height:
40px;
text-align: center;
font-size:14px;
color:white;
/* 設定浮動主要是給首頁list找邊界 */
float:left;
}
/* 3.2首頁設定 寬215高40 左35 上下居中 */
.catelist{
width:215px;
height: 40px;
line-height:
40px;
margin-left:35px;
/* 注：有問題找浮動 */
float:left;
}
/* 設定li 字14 橫排一行浮動 */
.catelist li{
float:left;
}
/* span a 標籤設定 左右20 字型顏色 */
.catelist span{
margin:0
20px;
}
.catelist a{
color:white;
}
/* 4.slide 高270 內容寬1200高270 居中*/
.slide{
height:270px;
}
.slidecon{
width:1200px;
height: 270px;
margin:0
auto;
}
/* 4.1左側英雄列表設定 寬200高270 有問題找浮動 */
.flist{
width:200px;
height: 270px;
/* background: black; */
float:left;
}
/* 英雄列表 寬198 高44 邊框 居中 背景圖 */
.flist li{
width:198px;
height: 44px;
border:1px
solid #f7f7f7;
border-top:0;
line-height:
44px;
text-align: center;
float:left;
}
/* a 字14 背景圖 有問題找浮動 yo*/
.flist a{
font-size:14px;
width:198px;
height:44px;
color:red;
}
/* 4.2中間圖設定 寬760 高279 有問題找浮動 */
.slidepic{
width:760px;
height: 279px;
float:left;
overflow: hidden;
position: relative;
}
.slidepic img{
width:760px;
height:270px;
}
/* 中間圖寬760*4 高270 有問題找浮動*/
.slist{
width:3040px;
height:270px;
}
.slist li{
float:left;
}
/* 4.3右側圖片 消除行間距設定父元素為0*/
.rgpic{
font-size:0px;
}
.rgpic img{
width:240px;
height:135px;
}
/* 5.英雄 設定外高335 上25 內寬1200高335 居中*/
.her{
height: 335px;
margin-top: 25px;
}
.hercon{
width:1200px;
height: 335px;
margin:0
auto;
}
/* 上面文字 */
.head{
width:1200px;
height: 29px;
border-bottom:
2px solid red;
}
/* a 靈活刺客 16px margin-right:20px; */
.fheada{
font-size:16px;
margin-right:
20px;
color:blueviolet;
font-weight:
bold;
float:left;
}
/* li標籤 高29 左10 */
.headlist li{
height: 29px;
line-height:
29px;
float:left;
margin-left:
10px;
}
/* 更多設定 高20 */
.headlista{
height: 29px;
line-height:
29px;
float:right;
}
/* 5.2左側廣告 寬200 高300 有問題找浮動 */
.lfad{
width:200px;
height: 300px;
float:left;
}
.lfad img{
width:200px;
height: 300px;
}
/* 5.3右側列表產品 寬1000 高300*/
.herlist{
width:1000px;
height: 300px;
/* overflow: hidden; */
float:left;
}
/* 列表設定 寬249 高299 邊框下右 居中 */
.herlist li{
width:249px;
height: 299px;
border-bottom:
1px solid #666666;
border-right:
1px solid #666666;
text-align: center;
float:left;
}
/* 英雄設定 字14 高50 下10 */
.herlist h5{
font-size:14px;
height: 50px;
line-height:
50px;
color:purple;
font-weight:
bold;
margin-bottom:
10px;
}
.herlist img{
width:180px;
height:180px;
}
/* 金錢設定 字20 紅加粗 高35 上17 */
.herlist div{
font-size:20px;
color:red;
font-weight:
bold;
height: 35px;
line-height:
35px;
margin-top:17px;
}
/* 6.英雄 設定外高335 上25 內寬1200高335 居中*/
.her{
height: 335px;
margin-top: 25px;
}
.hercon{
width:1200px;
height: 335px;
margin:0
auto;
}
/* 6.1頭部文字 */
.head{
width:1200px;
height: 29px;
border-bottom:
2px solid red;
}
/* a 鐵血戰士 16px margin-right:20px; */
.fheada{
font-size:16px;
margin-right:
20px;
color:blueviolet;
font-weight:
bold;
float:left;
}
/* li標籤 高29 左10 */
.headlist li{
height: 29px;
line-height:
29px;
float:left;
margin-left:
10px;
}
/* 更多設定 高20 */
.headlista{
height: 29px;
line-height:
29px;
float:right;
}
/* 6.2左側廣告 寬200 高300 有問題找浮動 */
.lfad{
width:200px;
height: 300px;
float:left;
}
.lfad img{
width:200px;
height: 300px;
}
/* 6.3右側列表產品 寬1000 高300*/
.herlist{
width:1000px;
height: 300px;
/* overflow: hidden; */
float:left;
}
/* 列表設定 寬249 高299 邊框下右 居中 */
.herlist li{
width:249px;
height: 299px;
border-bottom:
1px solid #666666;
border-right:
1px solid #666666;
text-align: center;
float:left;
}
/* 英雄設定 字14 高50 下10 */
.herlist h5{
font-size:14px;
height: 50px;
line-height:
50px;
color:purple;
font-weight:
bold;
margin-bottom:
10px;
}
.herlist img{
width:180px;
height:180px;
}
/* 金錢設定 字20 紅加粗 高35 上17 */
.herlist div{
font-size:20px;
color:red;
font-weight:
bold;
height: 35px;
line-height:
35px;
margin-top:17px;
}
3.初始化reset.css程式碼：
/* 元素初始化，重置 */
/* 1.所有元素內外邊距初始化 */
/* 主要元素包括：body,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,dd,dt,li,put, */
*{
margin:0;
padding:0;
}
/* 2.列表小圓點格式化 */
ul,ol{
list-style:
none;
}
/* 3. a下劃線刪除 */
a{
text-decoration:none;
}
/* 4. 偽類 */
.clearfix:before, .clearfix:after{
content:
"";
display:
table;
}
.clearfix:after{
clear:
both;
}
.clearfix{
zoom:1;
}
/* 5.浮動 */
.rf{
float:right;
}
.lf{
float:left;
}
/* 6.標題標籤 */
h1,h2,h3,h4,h5,h6{
font-size:100%;
font-weight:normal;
}
/* 7.input */
input{
outline:none;
border:0;
}
主要素材下載地址：http://pan.baidu.com/s/1i5tHYCl
相關文章
- 購物商城首頁的js檔案，JS
- 暢購商城(七)：Thymeleaf實現靜態頁
- SOLIDWORKS教育版在哪裡購買Solid
- Redis-PHP版購買商品小程式RedisPHP
- CNN網路介紹與實踐：王者榮耀英雄圖片識別CNN
- 電商網站的購買按鈕網站
- 【零開始】怎樣購買、配置伺服器及釋出網站（頁）？伺服器網站
- 裝備購買
- 王者榮耀S14狂鐵的剋星英雄、最佳搭檔英雄詳解
- 網站空間應該如何購買？網站
- Python例子之下載王者榮耀全部英雄海報Python
- 人人商城PHP網站開啟網頁空白PHP網站網頁
- 直播帶貨原始碼，普通商城購物頁面的製作原始碼
- 購物商城專案
- 網購必看：網上買賣防騙術及指南
- 360奇酷手機青春版預約購買指南
- 網站空間應該如何購買呢網站
- 《夢幻西遊網頁版》資訊流買量觀察：魔性廣告+直白落地頁吸引玩家下載網頁
- xgp怎麼購買 電腦xgp購買流程詳解
- Python爬取王者榮耀英雄皮膚高清圖片Python
- 手環購買者分析：GfK智慧產品購買者洞察
- 網頁程式碼(主頁)（初始版）:網頁
- pycharm需要購買麼PyCharm
- 小白基金購買指南
- 華為暢享5怎麼買 華為暢享5預約購買地址+購買攻略
- 堅果手機怎麼購買 堅果手機購買指南
- 20行Python程式碼爬取王者榮耀全英雄皮膚Python
- 工業物聯網平臺：製造與購買
- Stephanie Agresta：女性網民的購買決策路徑REST
- 關於網站購買商品的一些感悟網站
- Digital Air Strike：汽車購買者前往評論網站研究汽車選購GitAI網站
- 暢購商城學習記錄
- eMarketer：多媒介購買渠道下的廣告主的媒體購買策略
- 湘宜購商城系統開發/湘宜購商城小程式開發技術方案
- 動態ip如何購買？
- Python 爬取 "王者榮耀.英雄桌布" 過程中的矛和盾Python
- 數字化的中國聲音——王者榮耀國際版英雄主題曲獲好萊塢音樂傳媒大獎
- 搶先購買 iPhone6S/6S Plus極速購買攻略iPhone