目录
一、网页赏析：
二、代码分三部分：
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="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;}
三、主要素材下载地址：
百度网盘：/s/1i5tHYCl
