王者榮耀英雄購買商城網頁版

網頁賞析：

程式碼分三部分：

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>  <div class="login">  <div class="loginbox">  <h3>

歡迎來到王者榮耀英雄購買商城！</h3>  <div class="loginrg">  <div class="inlogin"> 歡迎您： <a href="">張山</a> </div>
 <div class="unlogin"> <a href="">登入</a> <span>|</span> <a href=""

>註冊</a> </div>
 <div class="mylogin"> <span>|</span> <a href="">我的購物車</a> <span>|</span> <a href="">我的訂單</a> </div> </div> </div> </div>
 <div class="search">  <div class="searchbox">  <a href=""><img src="images/王者榮耀.jpg" alt=""></a>  <div class="searchcar"> <form action=""> <input class="txt"type="text" placeholder="搜尋"> <input class="sub"type="submit" value="搜尋" > </form> </div>  <div class="buy"> <a href="">我的購物車</a> <span>0</span>
</div> </div> </div>  <div class="cate">  <div class="catecon">  <a class="all" href="">全部英雄分類</a>  <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>
 <div class="slide">  <div class="slidecon">  <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>  <div class="slidepic">  <ul class="slist"> <li><a href=""><img src="images/李白.jpg" alt=""></a></li> </ul> </div>  <div class="rgpic"> <a href=""><img src="images/王昭君.jpg" alt=""></a> <a href=""><img src="images/關羽.jpg" alt=""></a> </div>
</div> </div>
 <div class="her">  <div class="hercon">  <div class="head"> <a class="fheada" href="">靈活刺客</a>  <ul class="headlist"> <li><span>|</span></li> <li><a href="">官方活動</a></li> <li><a href="">限時活動</a></li> </ul> <a class="headlista" href="">檢視更多>></a>
</div>  <div class="lfad"> <a href=""><img src="images/刺客.jpg" alt=""></a> </div>  <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>
 <div class="her">  <div class="hercon">  <div class="head"> <a class="fheada" href="">鐵血戰士</a>  <ul class="headlist"> <li><span>|</span></li> <li><a href="">官方活動</a></li> <li><a href="">限時活動</a></li> </ul> <a class="headlista" href="">檢視更多>></a>
</div>  <div class="lfad"> <a href=""><img src="images/亞瑟.jpg" alt=""></a> </div>  <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;
}

王者榮耀英雄購買商城網頁版

王者榮耀英雄購買商城網頁版

【王者榮耀之IT大神版】銘文說明

Python爬取王者榮耀英雄面板高清圖片

利用Python一鍵獲取王者榮耀英雄面板

王者榮耀英雄資料庫

node抓取王者榮耀英雄資料庫

大資料分析：王者榮耀英雄背景下的分詞報告

Unity (三) NavMeshAgent之：分層路面導航（王者榮耀，英雄聯盟中小兵分三路進攻敵方）

基於spec評論——王者榮耀交流協會Beta版的PSP DAILY作品

王者榮耀新英雄“女媧”慘遭削弱，曾經的霸主將一去不返！

用python的requests第三方模塊抓取王者榮耀所有英雄的皮膚

python爬蟲-20行代碼爬取王者榮耀所有英雄圖片，小白也輕輕松松

通過程序池爬取王者榮耀所有英雄面板和技能詳情

Python爬取王者榮耀手遊中的遊戲英雄角色

[2]嘗試用Unity3d製作一個王者榮耀(持續更新)->選擇英雄-(上)

[3]嘗試用Unity3d製作一個王者榮耀(持續更新)->選擇英雄-(中)

20行Python程式碼爬取王者榮耀全英雄面板

矽谷商城第二版2--首頁模塊

矽谷商城第二版3--分類模塊

王者榮耀成功的營銷之戰

王者榮耀英雄購買商城網頁版

相關推薦