html+css英雄联盟列表

浏览数：27 / 时间：2015年06月09日
<strong><span style="font-size:12px;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>MyHtml.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
	
	<style type="text/css">
		*{margin:0px 0px ; padding:0px 0px;}
		body{background:#000;position:relative;}
		body .bg {width:1300px;height:700px;position:absolute;left:20px;
			top:10px;box-shadow:2px 2px 10px #FF9933}
		body .bg img{width:1300px;height:700px;}
		.log{width:200px ;height:127px;position:absolute;top:-0x;left:260px;}
		.log img{width:200px ;height:127px;}
		.list{width:270px;/*height:500px;*/
			top:100px;left:220px;position:absolute;}	
		.list ul{width:280px;list-style:none;}
		.list ul li{display:block;width:280px;
				height: 20px;
				overflow: hidden;
				border-right: 2px solid #5C362E;
				border-left: 2px solid #5C362E;
				border-image: none;
				margin: 5px;
				border-width: 2px;
				border-style: solid;
				border-color: #E58D3F #5C362E;
				padding: 0px;
				position: relative;}
		.list ul li:nth-child(1){display:block;
				width:280px;
				height:320px;
				border-right: 2px solid #5C362E;
				border-left: 2px solid #5C362E;
				border-image: none;
				margin: 5px;
				border-width: 2px;
				border-style: solid;
				border-color: #E58D3F #5C362E;
				padding: 0px;
				position: relative;}
		.list .put{width:115px; height:76px;/*border:2px solid #000;*/
			padding:0px 0px;position:absolute;left: 195px;
			bottom: 18px;
			opacity:0.8;
			filter:alpha(opacity=3);
			-moz-opacity:0.8;}
		.list .put img{width:115px; height:76px;margin:-25px -21px;}
		.list ul:hover li{height:20px;}
		.list ul li:hover{height:420px;} 
		.list ul li h4{display:block;line-height:20px;text-align:center;font-family:"微软雅黑";color: #FBE18A;
			border-bottom:1px solid #000;background:rgba(107,52 ,3,0.5)}
		.list ul li img{display:block;width:230px;height:390px;position:absolute;
			left:20px;top:24px;}
		.list ul li .title{width:230px;height:165px;
			position:absolute;left:19px;top:250px;border:1px solid #B07831;}
		.list ul li .title p{color: #FFFFB7;background:rgba(0,0,0,0.5);
				font-size: 15px;text-align:center;
				font-family: "微软雅黑";}
	</style>
  </head>
  	
  <body>
  		<div class="bg"><img src="images/a9.jpg"/></div>
  		<div class="log">
  			<img src="images/00.png"/>
  		</div>
   	<div class="list">
   		<ul>
   			<li>
				<h4>探险家-伊泽瑞尔</h4>   				
   				<img src="images/4.jpg"/>
   				<div class="title">
   					<p>
   					伊泽瑞尔<br/>
   					是联盟中最受欢迎的英雄之一
   					——英俊的外表及飘逸的技能组合，
   					在游戏的任何时期都是主角般的存在。
   					与很多ADC英雄不同，
   					EZ的输出手段主要以技能为主，
   					且没有控制技能，虽然门槛高，
   					但熟练之后将是非常强大的英雄。</p>
   				</div>
				<div class="put"><img src="images/put.GIF"/></div>
   			</li>
   			<li>
				<h4>复仇焰魂布兰德</h4>   				
   				<img src="images/3.jpg"/>
   				<div class="title">
   					<p>
   					最强的法系后期英雄<br/>
   					技能的超远射程跟清兵能力让火人很难被压，<br>
   					被动技能耗血能力极强，初期爆发吓人，
   					除了贫血和缺乏稳定控制技能外输出绝对是一流的，
   					不管是对单体还是群体。</p>
   				</div>
				<div class="put"><img src="images/put.GIF"/></div>
   			</li>
   			<li>
				<h4>虚空先知-马尔扎哈</h4>   				
   				<img src="images/5.jpg"/>
   				<div class="title">
   					<p>
   					马尔扎哈<br>
   					是一名以推线作为主要工作的英雄，
   					同样，他的线上能力非常注重，有消耗有爆发，
   					还有非常恶心的沉默以及大招提供的控制。
   					EZ的输出手段主要以技能为主，<br>
   					且没有控制技能，虽然门槛高，
   					但熟练之后将是非常强大的英雄。</p>
   				</div>
				<div class="put"><img src="images/put.GIF"/></div>
   			</li>
   			<li>
				<h4>齐天大圣</h4>   				
   				<img src="images/6.jpg"/>
   				<div class="title">
   					<p>
   					一个性质非常平衡的英雄<br>
   					能进能退
   					，既可以自由进入对方阵型，也可利用幻象平安逃生，
   					无论是面对对方的坦克还是脆皮，
   					Q技能的减防特效都会让他的对手十分头痛，
   					而有了大招的悟空更是有着极大的团队价值，
   					是个非常适合骚扰和打乱对方阵型的英雄。</p>
   				</div>
				<div class="put"><img src="images/put.GIF"/></div>
   			</li>
   			<li>
				<h4>德玛西亚之力</h4>   				
   				<img src="images/7.jpg"/>
   				<div class="title">
   					<p>
   					盖伦<br/>
   					脱离战斗后生命回复速度非常快。
   					冲入敌阵后开启“勇气”能吸收更多的伤害。
   					盖伦的技能只受冷却时间限制，
   					所以残暴之力对盖伦有极大提升。
   					盖伦对护甲高的英雄没什么办法。
   					生命值过低时请远离盖伦，
   					盖伦一般从草丛里发动伏击，</p>
   				</div>
				<div class="put"><img src="images/put.GIF"/></div>
   			</li>
   			<li>
				<h4>刀锋之影</h4>   				
   				<img src="images/8.jpg"/>
   				<div class="title">
   					<p>
   					刀锋之影<br/>
   					极强的灵活性，神出鬼没的GANK能力，
   					是刺客中的佼佼者，
   					在后期甚至能轻易在几秒内带走任何脆皮英雄。
   					有着非常令人恐惧的爆发能力，
   					同时也有不弱的逃生能力，
   					让他能自由进出于战场之中，
   					是个可玩性很高的英雄。</p>
   				</div>
				<div class="put"><img src="images/put.GIF"/></div>
   			</li>
   			<li>
				<h4>盲僧</h4>   				
   				<img src="images/10.jpg"/>
   				<div class="title">
   					<p>
   					盲僧<br/>
   					盲僧的机动性和前期的高伤害是打野英雄中拔尖的，
   					不论上单中单打野在前期都非常容易击杀对手。
   					后期能力略弱而且盲僧的操作要求比较高，
   					如果没有好的操作，这个英雄的优势就很难体现。</p>
   				</div>
				<div class="put"><img src="images/put.GIF"/></div>
   			</li>
   			<li>
				<h4>宝石骑士</h4>   				
   				<img src="images/1.jpg"/>
   				<div class="title">
   					<p>
   					塔里克<br/>是个团队价值非常高的辅助，
   					两个团队BUFF技能，还有前中期能进行游走，
   					都可以为团队带来比对面更大的收益，
   					集加血控制与一身的他更是与任何英雄都能有很好的配合，
   					是个人见人爱的强力辅助。</p>
   				</div>
				<div class="put"><img src="images/put.GIF"/></div>
   			</li>
   		</ul>
   	</div>
  </body>
</html>
</span></strong>