一、网页赏析：

二、代码分三部分：

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="">查看更多&gt;&gt;</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="">查看更多&gt;&gt;</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;
}