小案例：搭建简易版王者荣耀英雄购买商城网页版
2024-05-30 20:16:36
目录
一、网页赏析：
二、代码分三部分：
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><!-- 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="data: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="data:images/李白.jpg" alt=""></a></li></ul></div><!-- 4.3右边图片 --><div class="rgpic"><a href=""><img src="data:images/王昭君.jpg" alt=""></a><a href=""><img src="data: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="data:images/刺客.jpg" alt=""></a></div><!-- 5.3右侧列表 --><ul class="herlist"><li><h5>凤求凰—李白</h5><a href=""><img src="data:images/刺客李白.jpg" alt=""></a><div>¥18888</div></li><li><h5>白龙吟—韩信</h5><a href=""><img src="data:images/韩信.jpg" alt=""></a><div>¥18888</div></li><li><h5>剑舞者—花木兰</h5><a href=""><img src="data:images/花木兰.jpg" alt=""></a><div>¥18888</div></li><li><h5>神梦一刀—橘右京</h5><a href=""><img src="data: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="data:images/亚瑟.jpg" alt=""></a></div><!-- 6.3右侧列表 --><ul class="herlist"><li><h5>老夫子</h5><a href=""><img src="data:images/老夫子.jpg" alt=""></a><div>¥ 18888</div></li><li><h5>曹操</h5><a href=""><img src="data:images/曹操.jpg" alt=""></a><div>¥ 18888</div></li><li><h5>吕布</h5><a href=""><img src="data:images/吕布.jpg" alt=""></a><div>¥ 18888</div></li><li><h5>杨戬</h5><a href=""><img src="data: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
小案例：搭建简易版王者荣耀英雄购买商城网页版相关推荐
- 面向对象02 - 案例：王者荣耀英雄选择
王者荣耀英雄选择案例 一.目标与说明 二.实现效果 三.写之前先分析 四.类 1. 玩家类 2. 亚瑟类 3. 鲁班类 4.英雄基类 5. 技能类和皮肤类 6. 总结 五.页面结构和逻辑 1. 页面元 ...
- (已更新）最新王者荣耀英雄图鉴小程序源码，包含王者中各大板块内容介绍
王者英雄图鉴是一个关于王者荣耀英雄介绍的小程序,有装备.技能.铭文.英雄.皮肤等各大板块,里面不仅详细介绍了各类信息还有教程等资源,进入英雄详情时还会播放台词. 小程序使用 uni-app 和 Tai ...
- CNN网络介绍与实践-王者荣耀英雄图片识别
作者介绍:高成才,腾讯Android开发工程师,2016.4月校招加入腾讯,主要负责企鹅电竞推流SDK.企鹅电竞APP的功能开发和技术优化工作. 本文主要是对CS231n课程学习笔记的提炼,添加了一些 ...
- CNN网络介绍与实践：王者荣耀英雄图片识别
欢迎大家前往腾讯云社区,获取更多腾讯海量技术实践干货哦~ 作者介绍:高成才,腾讯Android开发工程师,2016.4月校招加入腾讯,主要负责企鹅电竞推流SDK.企鹅电竞APP的功能开发和技术优化工作 ...
- 【机器学习实战】利用EM聚类算法对王者荣耀英雄进行聚类
目录 一.EM算法的步骤 二.EM算法的工作原理 三.在sklearn中创建GMM模型 四.工作流程 五.实战环节 1. 导包 2. 加载数据 3. 数据可视化分析 4. 特征工程 5. 数据规范化 ...
- 领铠服务器没有角色信息,王者荣耀英雄印记赠送功能出bug没显示怎么办 铠的印记消失出bug什么情况...
王者荣耀腾讯版V1.20.1.17 安卓最新版[7月新版] 类型:角色扮演大小:465.2M语言:中文 评分:7.8 标签: 立即下载 王者荣耀英雄印记消失怎么办 王者荣耀玩家现在点击赠送印记,会受到 ...
- 图片链接用src不能被爬虫爬到吗_爬虫：带你一键爬取王者荣耀英雄皮肤壁纸
一.前言 王者荣耀这款手游,想必大家都玩过或听过,游戏里英雄有各式各样的皮肤,制作得很精美,有些拿来做电脑壁纸它不香吗.本文带你利用Python爬虫一键下载王者荣耀英雄皮肤壁纸. 1. 目标 创建一个 ...
- 北京环球影城上线王者荣耀英雄主题活动
4月9日消息, "北京环球影城王者荣耀英雄盛会"主题活动于4月8日至7月3日登场. 据悉,北京环球度假区携手腾讯旗下"王者荣耀"IP,选取王者荣耀中" ...
- Java爬虫 --- 爬取王者荣耀英雄图片
Java爬虫 - 爬取王者荣耀英雄图片 import org.jsoup.Connection; import org.jsoup.Jsoup; import org.jsoup.nodes.Docu ...
最新文章
- 自定义MyHttpServletRequest解决过滤器拦截@RequestBody整体JSON请求问题
- 2019 ACM-icpc西安邀请赛总结（无题解）
- html5 coverflow,使用CSS+JS帮你实现苹果cover flow效果
- *[hackerrank]Girlfriend Necklace
- intellij服务器证书不受信任,ssl证书不受信任怎么办？ssl证书不受信任解决方案有什么？...
- js－document对象
- C++面向对象笔记：构造、析构函数、成员函数
- eclipse在debug启动时无法启动解决办法
- java 变量 安全访问_访问java变量
- git详细使用教程入门到精通(史上最全的git教程)
- 重庆大学计算机学院期刊范围,重庆大学期刊目录.doc
- Odin WindowEditor使用体会
- 安装SHARP MX-3618NC PCL6打印机驱动程序
- 转载：声优 - 野上ゆかな
- 接入物流快递单号自动识别查询接口API
- WOS（一）——文献高级检索
- java l老毕_她被毕福剑一手捧红，还给她牵线煤老板，老毕落难时她的做法超赞...
- IEC61850缩略语一览表
- ios wallet开发_iOS Wallet 开发
- springboot以FTP方式上传文件到远程服务器