网页赏析：
代码分三部分：
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;
}
主要素材下载地址：http://pan.baidu.com/s/1i5tHYCl