當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

小案例：搭建简易版王者荣耀英雄购买商城网页版

發布時間：2024/7/5 编程问答 27 豆豆

生活随笔收集整理的這篇文章主要介紹了小案例：搭建简易版王者荣耀英雄购买商城网页版小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

一、網頁賞析：

二、代碼分三部分：

1、html代碼：

2、main.css賞析：

3、初始化reset.css代碼：

三、主要素材下載地址：

一、網頁賞析：

二、代碼分三部分：

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; }

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

總結

以上是生活随笔為你收集整理的小案例：搭建简易版王者荣耀英雄购买商城网页版的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： SemEval-2010任务8：成对名词
下一篇：关于Django中JsonRespons