html+css制作简单的静态页面

第一次玩博客，很多东西都不太会玩，慢慢摸索，慢慢进步，勿怪！

本文举两个例子，1为仿聚美优品登录页面，2为仿英雄联盟首页。

聚美优品登录页面效果图

聚美优品登录页面效果图英雄联盟页面效果图

仿聚美优品代码：

reset.css：

/*样式初始化工作*/
body,button,dd,dl, dt,form, h1, h2, h3, h4, h5, h6, hr, input, legend, li, ol, p, pre, td, textarea, th, ul,a,div,span {
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
a{
text-decoration: none;
}
.clear{
clear: both;
}

html：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="css/style.css" />
</head>
<body>
  
  


  <div class="wrapper">
   
   <div class="row_one">
    <img src="img/logo_new_v1.jpg" alt="" />
    <div class="rightimg1 bg_img"></div>
    <div class="rightimg2 bg_img"></div>
    <div class="rightimg3 bg_img"></div>
   </div>
   
   <div class="row_two">
    <div class="two_left"></div>
    <div class="tow_right">
     <form action="">
      <div class="form1">
       <div>用户注册</div>
       <span>已有账号<a href="">在此登录</a></span>
      </div>
      <div class="form2">
       <input type="text" placeholder="手机号" />
      </div>
      <div class="form3">
       <input type="text" placeholder="短信验证码" />
       <a href="">获取短信校验</a>
      </div>
      <div class="form4">
       <input type="text" placeholder="密码"/>
      </div>
      <div class="form5">
       <input type="text" placeholder="重复密码"/>
      </div>
      <div class="form6">
       <button>同意协议并注册</button>
      </div>
      <div class="form7">
       <a href="">《聚美优品用户协议》</a>
      </div>
     </form>
    </div>

   </div>
   
   <p class="row_three">
     Copyright © 2010-2015 北京创锐文化传媒有限公司 Jumei.com 保留一切权利。客服热线：400-123-8888 <br />
     京公网安备 11010102001226 号 | 京ICP证111033号 | 食品流通许可证 SP1101051110165515 (1-1) | 营业执照
   </p>
   
   <div class="row_four">
    <div class="left_img1"></div>
    <div class="left_img2"></div>
    <div class="left_img3"></div>
    <div class="left_img4"></div>
   </div>
  </div>
</body>
</html>

css：

@import url("reset.css");

/*容器是980px，始终处于屏幕的居中位置*/
.wrapper{
width: 980px;
height: auto;

margin: 0 auto;
/*border: 1px solid #000;*/
}
.bg_img{
background-image: url(../img/header_corn_new_v2.png);
}
/*第一行开始*/
.row_one{
height: 85px;
}
/*右边的背景图片*/
.rightimg1,.rightimg2,.rightimg3{
float: right;
margin: 20px 20px 0 0;
height: 31px;
}
.rightimg1{
width: 108px;
background-position: 0 -64px;
}
.rightimg2{
width: 105px;
background-position: -3px -32px;
}
.rightimg3{
width: 100px;
background-position: -5px 0;
}
/*第一行结束*/
/*第二行开始*/
.row_two{
height: 465px;
}
.two_left{
width: 422px;
height: 370px;
background-image: url(../img/signPic.jpg.png);
margin: 65px 0 0 0;
float: left;
}
.tow_right{
width: 340px;
height: 385px;
/*border: 1px solid #000;*/
float: right;
margin: 25px 17px 0 0;
box-shadow: #CCCCCC -2px 2px 3px 1px}
.tow_right>form>div{
padding: 0px 29px 0 20px;
margin: 13px 0 0 0;
height: 40px;
line-height: 40px;
}
form input{
font-size: 16px;
border: 1px solid #CCCCCC;
padding-left: 5px;
}
.form1 div{
float: left;
font-size: 24px;
color: #fe0404;
}
.form1 span{
float: right;
font-size: 12px;
color: #ccc;
}
.form1 span a{
color: #fe0404;
}
.form2 input,.form4 input,.form5 input{
width: 288px;
height: 38px;
}
.form3 input{
width: 144px;
height: 34px;
}
.form3 a{
width: 118px;
height: 34px;
border: 1px solid #CCCCCC;
float: right;
margin: 3px -3px 0 0;
background-color: #ddd;
text-align: center;
line-height: 34px;
color: #00f;
font-weight: bold;
font-size: 12px;
}
.form6 button{
width: 295px;
    height: 38px;
    background-color: #f8296d;
    border: none;
    font-size: 16px;
    color: #fff;
}
.form7 a{
color: #f8296d;
font-size: 14px;
}
/*第二行结束*/
/*第三行开始*/
.row_three{
text-align: center;
font-size: 12px;
}
/*第三行结束*/
/*第四行开始*/
.row_four{
height:52px ;
}
.left_img1,.left_img2,.left_img3,.left_img4{
float: left;
width:125px;
height: 51px;
background-image: url(../img/header_corn_new_v2.png);
margin-top: 15px;
}
.left_img2,.left_img3,.left_img4{
margin-left: 65px;
}
.left_img1{
background-position:0 -96px;
margin-left: 140px;
}
.left_img2{
background-position:0 -148px;
}
.left_img3{
background-position:0 -198px;
}
.left_img4{
background-position:0 -249px;
}

仿英雄联盟代码：

html：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>英雄联盟全新官方网站-腾讯游戏</title>
  <link rel="stylesheet" type="text/css" href="css/lolstyle.css"/>
</head>
<body>
<div class="wrapper">
  
  <div class="row_one">
   <div class="left_img1 bg_img"></div>
   <div class="a a1"><a class="bai" href="">游戏资料<br /><span>GAME INFO</span></a></div>
   <div class="a a2"><a class="bai" href="">商城/合作<br /><span>STORE</span></a></div>
   <div class="a a2"><a class="bai" href="">用户互动<br /><span>COMMUNITY</span></a></div>
   <div class="a a2"><a class="bai" href="">赛事中心<br /><span>EVENTS</span></a></div>
   <div class="a a2"><a class="bai" href="">自助系统<br /><span>SYSTEM</span></a></div>
   <div class="right_img1 bg_img"></div>
   <div class="right_img2 bg_img"></div>
   <div class="a3">
    <div class="right_img3 bg_img"></div>
   </div>
   <div class="a4">亲爱的召唤师，欢迎<a class="huang bai" href="">登录</a><br /><span>登陆后查看自己的战绩、资产、声望值等</span></div>
  </div>
  
  <div class="row_two">
   <div class="b1">
    <span>当前游戏版本：</span>
    <span class="b2">Ver7.19</span>
    <span class="b3"><a class="huang" href="">版本详情</a></span>
   </div>
  </div>
     
  <div class="row_three">
    <div class="c c1"><a class="hui1" href="">综合资讯</a></div>
    <div class="c c2"><a class="hui1" href="">视频中心</a></div>
    <div class="c c2"><a class="hui1" href="">赛事中心</a></div>
    <div class="c c2"><a class="hui1" href="">活动中心</a></div>
  </div>
  
  <div class="row_four">
   <div class="d d1"></div>
   <div class="d d2">
    <div class="d21"></div>
    <div class="d22">
     <div class="d3">
      <ul>
       <li class="l1"><div class="dl1 dl"></div><div class="dl31 d1311"></div><a class="hui" href="">周边商城</a></li>
       <li class="l2"><div class="dl2 dl"></div><a class="hui" href="">宇宙官网</a></li>
       <li class="l3"><div class="dl3 dl"></div><a class="hui" href="">新手推荐</a></li>
      </ul>
     </div>
     <div class="d3-1">
      <ul>
       <li class="l1"><div class="d31 dm"></div><a class="hui" href="">CDK兑换</a></li>
       <li class="l2"><div class="d32 dm"></div><div class="dl31 d1312"></div><a class="hui" href="">峡谷之巅</a></li>
       <li class="l3"><div class="d33 dm"></div><div class="dl31 d1312"></div><a class="hui" href="">新客户端</a></li>
      </ul>
     </div>
     <div class="d3-1">
      <ul>
       <li class="l1"><div class="d34 dm"></div><a class="hui" href="">领奖中心</a></li>
       <li class="l2"><div class="d35 dm"></div><a class="hui" href="">游戏资料</a></li>
       <li class="l3"><div class="d36 dm"></div><div class="dl31 d1311"></div><a class="hui" href="">轮换模式</a></li>
      </ul>
     </div>
     <div class="d3-1">
      <ul>
       <li class="l1"><div class="d37 dm"></div><a class="hui" href="">在线客服</a></li>
       <li class="l2"><div class="d38 dm"></div><a class="hui" href="">玩家论坛</a></li>
       <li class="l3"><div class="d39 dm"></div><a class="hui" href="">官方微博</a></li>
      </ul>
     </div>
    </div>
   </div>
   <div class="clear"></div>
  </div>
  
  <div class="row_five">
   <ul>
    <li class="la"><a class="la1 la" href="">最新资讯</a></li>
    <li class="la"><a class="la2 la" href="">综合新闻</a></li>
    <li class="la"><a class="la1 la" href="">官方公告</a></li>
    <li class="la"><a class="la1 la" href="">赛事新闻</a></li>
    <li class="la"><a class="la1 la" href="">论坛资讯</a></li>
    <li class="la"><a class="la1 la" href="">周免英雄</a></li>
    <li class="la"><a class="la2 la" href="">最新皮肤</a></li>
    <li class="la"><a class="la1 la" href="">最新英雄</a></li>
   </ul>
  </div>
  
  <div class="row_six">
   <div class="f1">
    <div class="f11">
     <div class="f111"></div>
     <div class="f112">
      <span class="f1121 f1123">
       小组赛收官预告 EDG能否创FNC奇迹
      </span>
      <span class="f1122 f1123"><a class="hui2" href="">
       在当天比赛中，LPL赛区一号种子EDG与总决赛霸主SKT所在的A组，将决出最后
        两个晋级名额。而在八强席位全部确定后，还将进行淘汰赛对阵的抽签仪式。</a>
      </span>
     </div>
    </div>
    <div class="f12">
     <ul>
      <li><span class="f9 f1221 f11211 f8">新闻</span></li>
      <li><span class="f9 f1222 f11211"><a class="hui2" href="">小青龙为悟空手办作词作曲发布新歌</a></span> </li>
      <li><span class="f9 f1223 f11211">10/13</span></li>
     </ul>
     <ul>
      <li><span class="f9 f1221 f8 f11212">新闻</span></li>
      <li><span class="f9 f1222 f11212"><a class="hui2" href="">总决赛歌曲合辑萧敬腾领头献唱</a></span> </li>
      <li><span class="f9 f1223 f11212">10/13</span></li>
     </ul>
     <ul>
      <li><span class="f9 f1221 f8 f11212">新闻</span></li>
      <li><span class="f9 f1222 f11212"><a class="hui2" href="">2017全球总决赛半决赛售票重启公告</a></span> </li>
      <li><span class="f9 f1223 f11212">10/13</span></li>
     </ul>
     <ul>
      <li><span class="f9 f1221 f8 f11212">新闻</span></li>
      <li><span class="f9 f1222 f11212">萧敬腾演唱总决赛歌曲《爱的大未来》</a></span> </li>
      <li><span class="f9 f1223 f11212">10/13</span></li>
     </ul>
     <ul>
      <li><span class="f9 f1221 f8 f11212">新闻</span></li>
      <li><span class="f9 f1222 f11212"><a class="hui2" href="">唯你独享，悟空头像已发放</a></span> </li>
      <li><span class="f9 f1223 f11212">10/13</span></li>
     </ul>
     <ul>
      <li><span class="f9 f1221 f8 f11212">新闻</span></li>
      <li><span class="f9 f1222 f11212"><a class="hui2" href="">全球总决赛中文歌曲《Change Your Mind》发布</a></span> </li>
      <li><span class="f9 f1223 f11212">10/13</span></li>
     </ul>
     <ul>
      <li><span class="f9 f1221 f8 f11212">新闻</span></li>
      <li><span class="f9 f1222 f11212"><a class="hui2" href="">/开发者：任务系统更新</a></span> </li>
      <li><span class="f9 f1223 f11212">10/13</span></li>
     </ul>
     <ul>
      <li><span class="f9 f1221 f8 f11212">新闻</span></li>
      <li><span class="f9 f1222 f11212"><a class="hui2" href="">10月13日，免费英雄更新公告</a></span> </li>
      <li><span class="f9 f1223 f11212">10/13</span></li>
     </ul>
     <ul>
      <li><span class="f9 f1221 f8 f11212">新闻</span></li>
      <li><span class="f9 f1222 f11212"><a class="hui2" href="">龙珠晋级在望IMT与GAM力争八强</a></span> </li>
      <li><span class="f9 f1223 f11212">10/13</span></li>
     </ul>
     <ul>
      <li><span class="f9 f1221 f8 f11212">新闻</span></li>
      <li><span class="f9 f1222 f11212"><a class="hui2" href="">英雄更新：痛苦之拥伊芙琳</a></span> </li>
      <li><span class="f9 f1223 f11212">10/13</span></li>
     </ul>
    </div>
    <div class="f13">阅读更多<a class="huang1" href="">最新资讯</a></div>
   </div>
   <div class="f2">
    <div class="f21"></div>
    <div class="f22">
     <div class="f221 f2211"></div>
     <div class="f221 f2212 f22111"></div>
    </div>
    <div class="f22">
     <div class="f221 f2213"></div>
     <div class="f221 f2214 f22111"></div>
    </div>
    <div class="f22">
     <div class="f221 f2215"></div>
     <div class="f221 f2216 f22111"></div>
    </div>
    <div class="f23"><span class="hui2 hui3">免费时间：2017-10-13至2017-10-20</span></div>
    <div class="f23">
     <div class="f221 f2217"></div>
     <div class="f221 f2218 f22111"></div>
    </div>
    <div class="f22">
      <div class="f24"></div>
      <div class="f25 f22111">
       <span class="hei">本游戏适合18岁（含）以上玩家娱乐</span><br />
       <span class="hui4">抵制不良游戏拒绝盗版游戏注意自我保护谨防上当受骗<br />适度游戏益脑沉迷游戏伤身合理安排时间享受健康生活</span>
      </div>
     </div>
   </div>
  </div>
  
  <div class="row_five">
   <ul>
    <li class="la"><a class="la1 la" href="">最新推荐</a></li>
    <li class="la"><a class="la2 la" href="">视频推荐</a></li>
    <li class="la"><a class="la1 la" href="">活动推荐</a></li>
   </ul>
  </div>
  
     <div class="row_eight">
     <div class="h1">
       <div class="h11 h0"></div>
       <span class="hui4">《S7鬼佬爱解说》：RNG暴打SSG，外国解说惨遭打脸</span>
     </div>
     <div class="h1 h2">
       <div class="h12 h0"></div>
       <span class="hui4">7.20版本老司机：寡妇制造者重做上线！</span>
     </div>
     <div class="h1 h2">
       <div class="h13 h0"></div>
       <span class="hui4">《S7鬼佬爱解说》：入围赛WE称霸，惊艳外国解说</span>
     </div>
     <div class="h1 h2">
       <div class="h14 h0"></div>
       <span class="hui4">《S7鬼佬爱解说》：外国解说称赞Uzi奇迹蜕变！</span>
     </div>
     <div class="h1 h2">
       <div class="h15 h0"></div>
       <span class="hui4">神级瑞雯面对四人毅然反打！所有觉得她疯了</span>
     </div>
     <div class="h1 h2">
       <div class="h16 h0"></div>
       <span class="hui4">北美第一见血封喉，极限操作秒5杀</span>
     </div>
     </div>
     
     <div class="row_nine">阅读更多<a class="huang1" href="">最新资讯</a></div>
     
     <div class="row_ten">
     <div class="j ">
       <span class="lan">腾讯互动娱乐|广告服务|腾讯游戏招聘|腾讯游戏客服|游戏活动|游戏地图|商务合作|腾讯网|网站导航|<br />腾讯公司版权所有</span>
       <span class="bai2">COPY © 1998-2017 TENCENT.ALL RIGHTS RESERVED. <br />&COPY; 2012 Riot Games,Inc.ALL RIGHTS RESERVED. <br />
       文网进字[2011]004号 & ISBN 978-7-89989-145-2</span><span class="lan1">|新出网证（粤）子010号|粤网文【2017】6138-1456号</span>
     </div>
     </div>
</div>
</body>
</html>

css：

@import url("reset.css");
.wrapper{
width: 1423px;
height: auto;
margin: 0 auto;
border: 1px solid #000;
position:relative
}
/*第一行开始*/
.row_one{
height: 90px;
background-color: #000;

}
.a{
width: 80px;
height: 90px;
float: left;
text-align: center;
margin-top: 21px;
}
.a1{
margin-left: 23px;
}
.a2{
margin-left: 39px;
}
.a3{
width: 80px;
height: 80px;
background-image: url(../HTML任务5/3：英雄联盟/素材/peron.png);
/*background-position: center center;*/
background-size: 100% 100%;
background-size: 66px 66px;
margin: 10px 0 0 29px;
float: left;
}
.a4{
color: #FFFFFF;
width: 225px;
height: 50px;
float: left;
margin: 18px 0 0 17px;
}
.bg_img{
background-image: url(../HTML任务5/3：英雄联盟/素材/icon.png);
float: left;
}
.left_img1{
width: 188px;
height: 95px;
background-position:0 -33px ;
margin: 6px 0 0 90px;
}
.right_img1{
width: 28px;
height: 28px;
background-position: -8px 0;
margin: 25px 0 0 32px;
}
.right_img2{
width: 23px;
height: 28px;
background-position: -45px 0;
margin: 25px 0 0 14px;
}
.right_img3{
width: 78px;
height: 78px;
background-position: 0px -169px;
margin-left: -5px;
margin-top: -2px;
}
/*第一行结束*/
/*第二行开始*/
.row_two{
height: 352px;
background-image: url(../HTML任务5/3：英雄联盟/素材/bg-top.jpg);
/*background-position: center center;*/
background-size: 100% 100%;

}
.b1{
width: 251px;
height: 28px;
font-size: 10px;
color: #FFFFFF;
/*margin: 0 60px 55px 0;*/
position: absolute;
right: 135px;
top: 390px;
}
.b2{
color: #dfb257;
}
.b3{
color: #dfb257;
width: 84px;
height: 28px;
opacity: .5;
border: 1px solid #dfb257;
box-shadow: -1px 1px 1px 1px;
}
/*第二行结束*/
/*第三行开始*/
.row_three{
height: 60px;
background-color: fdfdfd;
}
.c{
width: 112px;
height: 60px;
float: left;
text-align: center;
line-height: 60px;
font-weight:bold;
font-size: 18px;
font-family: 宋体;
color: #555555;
/*color: #ddb257;*/
}
.c1{
margin: 0 0 0 92px;
}
.c2{
margin-left: 47px;
}
/*第三行结束*/
/*第四行开始*/
.row_four{
height: 440px;
background-image: url(../HTML任务5/3：英雄联盟/素材/bg-content-top.jpg);
background-size: 100% 100%;
}
.d{
height: 402px;
float: left;
margin-top: 39px;
margin-left: 27px;
}
.d1{
width: 821px;
background-image: url(../HTML任务5/3：英雄联盟/素材/img01.jpg);
/*background-position: center center;*/
background-size: 100% 100%;
margin-left: 92px;
}
.d2{
width: 402px;
height: 402px;
float: left;
}
.d21{
height: 151px;
background-image: url(../HTML任务5/3：英雄联盟/素材/video-img.png);
background-size: 100% 100%;
}
.d22{
height:251px ;
}
.d3{
margin-top: 9px;
/*width: 397px;*/
height: 55px;
}
.d3-1{
margin-top: 5px;
height: 55px;
}
.l1,.l2,.l3{
width: 131px;
height: 55px;
background-color: #fff;
float: right;
line-height: 55px;
text-align: center;
/*background-image: url(../HTML任务5/3：英雄联盟/素材/icon.png);*/
}
.l2{
margin-right: 3px;
margin-left: 3px;
}
.dl{
float: left;
width: 26px;
height: 32px;
background-image: url(../HTML任务5/3：英雄联盟/素材/icon.png);
margin-left: 10px;
margin-top: 14px;
}
.dm{
float: left;
width: 26px;
height: 32px;
background-image: url(../HTML任务5/3：英雄联盟/素材/icon.png);
margin-left: 10px;
margin-top: 14px;
}
.dl1{
background-position: -592px 0px;
}
.dl2{
background-position: -562px 0px;
}
.dl3{
background-position: -201px 0px;
/*background-color: #f00;*/
}
.d31{
background-position: -288px 0px;
}
.d32{
background-position: -652px 0px;
}
.d33{
background-position: -381px 0px;
}
.d34{
background-position: -471px 0px;
}
.d35{
background-position: -261px 0px;
}
.d36{
background-position: -622px 0px;
}
.d37{
background-position: -441px 0px;
}
.d38{
background-position: -412px 0px;
}
.d39{
background-position: -502px 0px;
}
.dl31{
float: right;
width: 16px;
height: 16px;
background-image: url(../HTML任务5/3：英雄联盟/素材/icon.png);
margin-right: 20px;
margin-top: 7px;
}
.d1311{
background-position: -105px 0px;
}
.d1312{
background-position: -128px 0px;
}
/*第四行结束*/
/*第五行开始*/
.row_five{
height: 57px;
width: auto;
margin-left: 97px;
margin-top: 66px;
}
.la{
width: 155px;
height: 57px;
line-height: 57px;
float: left;
text-align: center;
}
.la1{
margin-left: 0px;
display:block;
color: #555555;
border-bottom: 2px solid #555555;
}
.la2{
margin-left: 0px;
display:block;
color:#dfb257;
border-bottom: 2px solid #dfb257;
}
/*第五行结束*/
/*第六行开始*/
.row_six{
height: 656px;
margin-top: 22px;
}
.f1{
width: 823px;
height: 656px;
margin-left: 92px;
float: left;
}
.f11{
height: 124px;
/*background-color:blue;*/
}
.f12{
width: 823px;
height: 533px;
}
.f13{
height: 30px;
background-color: #ebebeb;
margin-top: -31px;
text-align: center;
line-height: 30px;
color: #555;
}
.f111{
height: 124px;
width: 202px;
float: left;
background-image: url(../HTML任务5/3：英雄联盟/素材/pic-news9.jpg);
background-position: 100% 100%;
}
.f112{
height: 124px;
width: 621px;
float: left;
}
.f1121{
font-size: 36px;
font-weight: bold;
}
.f1122{
font-size: 14px;
color: #555555;
}
.f1123{
display: block;
margin-left: 15px;
}
.f1221{
width: 70px;
background-color: #ebebeb;
}
.f1222{
width: 703px;
padding-left: 10px;
}
.f1223{
width: 40px;
}

.f8{
text-align: center;
}
.f9{
color: #555;
height: 35px;
display: block;
line-height: 35px;
font-size: 14px;
float: left;
}
.f11211{
margin-top: 22px ;
}
.f11212{
margin-top: 13px;
}
.f2{
width: 402px;
height: 656px;
margin-left: 19px;
float: left;
}
.f21{
height: 157px;
background-image: url(../HTML任务5/3：英雄联盟/素材/skin01.jpg);
background-position: 100% 100%;
}
.f22{
height: 71px;
margin-top: 10px;
}
.f221{
width: 195px;
height: 70px;
float: left;
background-position: 100% 100%;
}
.f23{
height: 71px;
}
.f2211{
background-image: url(../HTML任务5/3：英雄联盟/素材/skin02.jpg);
}
.f2212{
background-image: url(../HTML任务5/3：英雄联盟/素材/skin03.jpg);
}
.f2213{
background-image: url(../HTML任务5/3：英雄联盟/素材/skin04.jpg);
}
.f2214{
background-image: url(../HTML任务5/3：英雄联盟/素材/skin05.jpg);
}
.f2215{
background-image: url(../HTML任务5/3：英雄联盟/素材/skin06.jpg);
}
.f2216{
background-image: url(../HTML任务5/3：英雄联盟/素材/skin03.png);
}
.f2217{
background-image: url(../HTML任务5/3：英雄联盟/素材/pic-go-qt.jpg);
}
.f2218{
background-image: url(../HTML任务5/3：英雄联盟/素材/pic-go-mall.jpg);
}
.f24{
width: 71px;
height: 71px;
background-image: url(../HTML任务5/3：英雄联盟/素材/icon.png);
background-position: -330px -89px;
float: left;
}
.f25{
width: 302px;
height: 71px;
float: left;
}
.f22111{
margin-left: 12px;
}
/*第六行结束*/
/*第七行已完成*/
/*第八行开始*/
.row_eight{
height: 160px;
margin-top: 20px;
margin-left: 92px;
}
.h1{
width:190px;
height: 160px;
float: left;
}
.h0{
height: 100px;
background-size: 190px 100px;
}
.h11{
background-image: url(../HTML任务5/3：英雄联盟/素材/video1.jpg);
}
.h12{
background-image: url(../HTML任务5/3：英雄联盟/素材/video2.jpg);
}
.h13{
background-image: url(../HTML任务5/3：英雄联盟/素材/video3.jpg);
}
.h14{
background-image: url(../HTML任务5/3：英雄联盟/素材/video4.jpg);
}
.h15{
background-image: url(../HTML任务5/3：英雄联盟/素材/video5.jpg);
}
.h16{
background-image: url(../HTML任务5/3：英雄联盟/素材/video6.jpg);
}
.h2{
margin-left: 20px;
}
/*第八行结束*/
/*第九行开始*/
.row_nine{
width: 1239px;
height: 30px;
    background-color: #ebebeb;
    margin-left: 92px;
    text-align: center;
    line-height: 30px;
    color: #555;
}
/*第九行结束*/
/*第十行开始*/
.row_ten{
height: 163px;
background-image: url(../HTML任务5/3：英雄联盟/素材/bg-footer.jpg);
background-position: -247px 0;
margin-top: 53px;
}
.j{
width: 530px;
height: 163px;
margin-left: 498px;
/*line-height: 163px;*/
}
/*第十行结束*/
.lan1{
display: block;
color: #568193;
font-size: 10px;
}
.lan{
display: block;
color: #568193;
font-size: 10px;
padding: 35px 0 0 0;
}
.bai2{
display: block;
color: #fff;
font-size: 10px;
}
.hei{
font-size: 14px;
font-weight: bold;
}
.hui4{
color: #555555;
}
.hui3{
/*padding-left: 100px;
padding-top: 20px;*/
position: absolute;
right: 92px;
top: 1505px;
font-size: 14px;
}
.hui2{
color: #555;
}
.bai{
color: #FFFFFF;
font-size: 18px;
}
.huang{
color:#dfb257;
text-decoration: underline;
}
.huang1{
color:#dfb257;
}
span{
font-size: 10px;
}
.hui{
font-size:13px;
margin-left: 6px;
display: block;
width: 88px;
height: 55px;
color: #555555;
}
.hui:hover{
color: #dcc18a;
/*border-bottom:1px solid #dcc18a;*/
cursor: context-menu;
}
.c>.hui1:hover{
color: #dcc18a;
border-bottom:1px solid #dcc18a;
cursor: context-menu;
}
.hui1{
display: inline-block;
width: 112px;
height: 60px;
color: #555555;
}
.b3:hover{
box-shadow: -3px 3px 3px 2px; ;
}
.la:hover{
font-weight: bold;
}

成品图：

html+css制作简单的静态页面

猜你喜欢