王者荣耀英雄购买商城网页版
来源：互联网 发布：淘宝客服沟通技巧简答 编辑：程序博客网 时间：2024/04/30 00:18
网页赏析：
代码分三部分：
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=""><imgsrc="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=""><imgsrc="images/李白.jpg"alt=""></a></li>
</ul>
</div>
<!-- 4.3右边图片 -->
<div class="rgpic">
<a href=""><imgsrc="images/王昭君.jpg"alt=""></a>
<a href=""><imgsrc="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=""><imgsrc="images/刺客.jpg"alt=""></a>
</div>
<!-- 5.3右侧列表 -->
<ul class="herlist">
<li>
<h5>凤求凰—李白</h5>
<a href=""><imgsrc="images/刺客李白.jpg"alt=""></a>
<div>¥18888</div>
</li>
<li>
<h5>白龙吟—韩信</h5>
<a href=""><imgsrc="images/韩信.jpg"alt=""></a>
<div>¥18888</div>
</li>
<li>
<h5>剑舞者—花木兰</h5>
<a href=""><imgsrc="images/花木兰.jpg"alt=""></a>
<div>¥18888</div>
</li>
<li>
<h5>神梦一刀—橘右京</h5>
<a href=""><imgsrc="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=""><imgsrc="images/亚瑟.jpg"alt=""></a>
</div>
<!-- 6.3右侧列表 -->
<ul class="herlist">
<li>
<h5>老夫子</h5>
<a href=""><imgsrc="images/老夫子.jpg"alt=""></a>
<div>¥ 18888</div>
</li>
<li>
<h5>曹操</h5>
<a href=""><imgsrc="images/曹操.jpg"alt=""></a>
<div>¥ 18888</div>
</li>
<li>
<h5>吕布</h5>
<a href=""><imgsrc="images/吕布.jpg"alt=""></a>
<div>¥ 18888</div>
</li>
<li>
<h5>杨戬</h5>
<a href=""><imgsrc="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:0auto;
}
/* 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:010px;
}
.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:0auto;
/* 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:2pxsolid 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:1pxsolid #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:26pxauto 0;
}
/* 内容设置 宽1200 高40 居中 */
.catecon{
width:1200px;
height: 40px;
margin:0auto;
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:020px;
}
.catelist a{
color:white;
}
/* 4.slide 高270 内容宽1200高270 居中*/
.slide{
height:270px;
}
.slidecon{
width:1200px;
height: 270px;
margin:0auto;
}
/* 4.1左侧英雄列表设置 宽200高270 有问题找浮动 */
.flist{
width:200px;
height: 270px;
/* background: black; */
float:left;
}
/* 英雄列表 宽198 高44 边框 居中 背景图 */
.flist li{
width:198px;
height: 44px;
border:1pxsolid #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:0auto;
}
/* 上面文字 */
.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:0auto;
}
/* 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
阅读全文
1 0
- 王者荣耀英雄购买商城网页版
- 玩-王者荣耀-英雄缺点
- 论王者荣耀英雄花木兰
- 王者荣耀英雄分析--孙悟空
- 使用Unity3D提取王者荣耀英雄模型 VR资源
- CNN网络介绍与实践-王者荣耀英雄图片识别
- 王者荣耀
- 王者荣耀
- 王者荣耀版python赌博代码
- 王者荣耀: S7赛季官方最强英雄排名, 第一分分钟被削的节奏!
- 王者荣耀T恤图案图形设计大赛—英雄台词字体设计
- 王者荣耀T恤图案图形设计大赛—英雄台词字体设计
- 大数据分析：王者荣耀英雄背景下的分词报告
- 王者荣耀_KEY
- 王者荣耀提取攻略
- 从你王者荣耀爱玩的英雄类型，我就知道你关注哪些技术领域！
- vivo X20王者荣耀限量版：首款“撞色”全面屏手机为王者而生！
- 一起进入全面屏王者时代，vivo公布王者荣耀周年庆限量版X20
- 按钮按下与松开
- 3685: 普通van Emde Boas树——set
- Python教程之四----- 数据结构
- ngrox配置内网映射
- js promise 模式的 异步回调函数
- 王者荣耀英雄购买商城网页版
- UVA 1585
- 使用Razor视图引擎来生成邮件内容
- (三)java从零开始(方法和堆栈)有待研究
- UVA11419[SAM I AM] 二分图最小覆盖模型
- JAVA基础——关于java中数字类型面试题
- 优先队列详解(转载)
- 记一次完整手机APP项目的开发
- 【jQuery】on注册事件的时候处理函数自动运行
