英雄联盟皮肤主页设计（综合练习）

分手后的思念是犯贱 2021-12-05 01:57 305阅读 0赞

做了一天的英雄联盟的主页，分享一下代码  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzU5OTM3Nw_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzU5OTM3Nw_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzU5OTM3Nw_size_16_color_FFFFFF_t_70 2]  
直接上代码吧

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		{<style type="text/css">
    			*{
    				margin:0 auto;
    				
    			}
    			.div1{
    				height: 1000px;
    				background-image: url(img/bg-01.jpg);
    				background-position: center;
    			}
    			.div2{
    				background-image: url(img/bgl-01.jpg);
    				/*background-repeat: no-repeat;*/
    				height: 1000px;
    				width: 1380px;
    			}
    			.logo{
    				display: block;
    				position: absolute;
    				width:167px ;
    				height: 67px;
    				/*border: 1px solid red;*/
    				margin-left: -84px;
    				left:50%;
    				top:30px;
    			}
    			.logo:hover{
    				background-image: url(img/spr.png);
    				background-repeat: no-repeat;
    				background-position: -53px -30px;
    				transform: scale(1.05);
    			}
    			.play{
    				display: block;
    				position: absolute;
    				width: 71px;
    				height: 70px;
    				background-image: url(img/play.png);
    				left: 47%;
    				top: 390px;
    				margin-left: -40px;
    				-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    			}
    			.play:hover{
    				transform: scale(1.05);
    			}
    			.btncontainer{
    				position: absolute;
    				height: 125px;
    				width: 100%;
    				left: 0;
    				bottom: -110px;
    				/*border: 1px solid red;*/
    			}
    			.btncontainer a{
    				display: block;
    				width: 287px;
        			height: 117px;
        			/*border: 1px solid black;*/
        			float: left;
        			background-image: url(img/spr.png);
    			}
    			.abt1{
    				background-position: -3px -284px;
    				margin-left: 300px;
    			}
    			.abt2{
    				background-position: -300px -135px;
    				/*margin-left: 50px;*/
    			}
    			.abt2:hover{
    				background-position: -300px -286px;
    			}
    			.btncontainer .abt3{
    				background-position:-585px -136px;
    				 
    			}
    			.btncontainer .abt3:hover{
    				background-position:-590px -283px;
    			}
    			.btncontainer .abt4{
    				background-position:-875px -136px;
    				 
    			}
    			.abt4:hover{
    				background-position:-875px -283px;
    			}
    			.bg2{
    				height: 4200px;
    				
    				background-image: url(img/bg-02.jpg);
    				background-repeat: no-repeat;
    				background-position: center top;
    			}
    			.bg3{
    				background-image: url(img/bgl-02.jpg);
    				height: 4200px;
    				background-position: center;
    				position: relative;
    				background-repeat: no-repeat;
    				/*width: 100%;   */
    			}
    			.first{
    				position: relative;
    				background-image: url(img/spr.png);
    				margin-left: 1050px;
    				top: 70px;
    				width: 556px;
    			    height: 77px;
    			    background-position: -1132px -444px;
    			}
    			.two{
    				display: block;
    				position: absolute;
    				/*border: 1px solid red;*/
    				height: 120px;
    				width: 300px;
    				
    				margin-left: 1010px;
    				margin-top: 130px;
    			}
    			.two1{
    				display: block;
    				background-image: url(img/num-spr.png);
    				width: 65px;
    			    float: left;
    			    margin-left: -10px;
    			    height: 82px;
    			    background-position: -501px 0;
    			}
    			.two2{
    				display: block;
    				background-image: url(img/num-spr.png);
    				width: 65px;
    			    float: left;
    			    margin-left: -10px;
    			    height: 82px;
    			    background-position: -690px 0;
    			}
    			.two3{
    				display: block;
    				background-image: url(img/num-spr.png);
    				background-position: -788px 0;
    				float: left;
    			    margin-left: -15px;
    			    width: 63px;
    			    height: 82px;
    			}
    			.two4{
    				display: block;
    				background-image: url(img/num-spr.png);
    				background-position: -788px 0;
    				float: left;
    			    margin-left: -15px;
    			    width: 63px;
    			    height: 82px;
    			}
    			.two5{
    				display: block;
    				background-image: url(img/spr.png);
    				float: left;
    			    width: 63px;
    			    height: 82px;
    			    margin-left: 5px;
    			    margin-right: 10px;
    			    background-position: -288px -10px;
    			}
    			.three{
    				display: block;
    				/*border: 1px solid red;*/
    				width: 260px;
    			    height: 300px;
    			    margin-left: 1340px;
    			    position: absolute;
    			    margin-top: 95px;
    			    z-index: 5;
    			}
    			.three a{
    				background-image: url(img/spr.png);
    				float: left;
    				width: 252px;
    			    height: 150px;
    			}
    			.three1{
    				background-position: -790px -1955px;
    			}
    			.three1:hover{
    				cursor: pointer;
    			}
    			.three2{
    				background-position: -1550px -268px
    			}
    			.three2{
    				cursor:pointer;
    			}
    			
    			.four{
    				position: absolute;
    				/*border: 1px solid red;*/
    			    display: block;
    			    background-image: url(img/spr.png);
    			    width: 556px;
    			    height: 80px;
    			    background-position: -1115px -615px;
    			    left: 1070px;
        			top: 465px;
    			}
    			.hero1{
    				height: 339px;
    				width: 197px;
    				position: relative;
    				background-image: url(img/hero-prop3.png);
    				left: 270px;
    				top: 500px;
    			}
    			.five{
    				font-weight: bold;
        			color: #bdc3ff;
    				height: 100px;
    				width: 350px;
    				/*border: 1px solid red;*/
    				position: relative;
    				left: 570px;
    				top: 150px;
    			}
    			.five a{
    				font-size: 14px;
    			    color: #66d9f7;
    			    float: right;
    			    margin-right: 50px;
    			    
    			}
    			.six{
    				/*border: 1px solid red;*/
    				height: 120px;
    				width: 300px;
    				position: absolute;
    				display: block;
    				left: 1300px;
        			top: 660px;
    			}
    			.six1{
    				background-image: url(img/spr.png);
    				background-position: -288px -10px;
    				float: left;
    			    width: 24px;
    			    height: 82px;
    			    margin-left: 57px;
    			    margin-right: 10px;
    			}
    			.six2{
    				background-image: url(img/num-spr.png);
    				background-position: -690px 0;
    				float: left;
    				width: 65px;
    			    float: left;
    			    margin-left: -10px;
    			    height: 82px;
    			}
    			.six3{
    				background-image: url(img/num-spr.png);
    				background-position: -690px 0;
    				width: 65px;
    			    float: left;
    			    margin-left: -10px;
    			    height: 82px;
    			}
    			.six4{
    				background-image: url(img/num-spr.png);
    				background-position: -788px 0;
    			    margin-left: -15px;
    			    width: 63px;
    			    height: 82px;
    			    float: left;
    			}
    			.six5{
    				background-image: url(img/num-spr.png);
    				background-position: -788px 0;
    			    margin-left: -15px;
    			    width: 63px;
    			    height: 82px;
    			    float: left;
    			}
    			.six p{
    				margin-left: 90px;
    				font-size: 16px;
    			    color: #828bdf;
    			    display: block;
    			}
    			.seven{
    				position: absolute;
    				background-image: url(img/spr.png);
    				background-position: -1555px -268px;
    				/*border: 1px solid red;*/
    				width: 270px;
    			    height: 150px;
    			    left: 1354px;
        			top: 802px;
    			}
    			.seven:hover{
    				cursor: pointer;
    			}
    			.eight{
    				background-image: url(img/spr.png);
    				background-position: -1545px -268px;
    				position: absolute;
    				/*border: 1px solid red;*/
    				width: 280px;
    			    height: 150px;
    			    left: 249px;
        			top: 1018px;
    			}
    			.night{
    				/*border: 1px solid red;*/
    				height: 120px;
    				width: 315px;
    				position: absolute;
    				display: block;
    				left: 610px;
    				top: 1018px;
    			}
    			.night1{
    				background-image: url(img/num-spr.png);
    			    background-position: -8px 0;
    				width: 65px;
    			    float: left;
    			    margin-left: -10px;
    			    margin-top: 20px;
    			    height: 82px;
    			}
    			.night2{
    				background-image: url(img/num-spr.png);
    				margin-top: 20px;
    				width: 65px;
    			    float: left;
    			    margin-left: -10px;
    			    height: 82px;
    			    background-position: -690px 0;
    			}
    			.night3{
    				background-image: url(img/num-spr.png);
    				margin-top: 20px;
    				width: 65px;
    			    float: left;
    			    margin-left: -10px;
    			    height: 82px;
    			    background-position: -595px 0;
    			}
    			.night4{
    				background-image: url(img/num-spr.png);
    				background-position: -269px 0;
    				margin-top: 20px;
    				width: 65px;
    			    float: left;
    			    margin-left: -10px;
    			    height: 82px;
    			}
    			.night5{
    				background-image: url(img/num-spr.png);
    				margin-top: 20px;
    				float: left;
    			    margin-left: -10px;
    			    width: 65px;
    			    height: 82px;
    			    background-position: -8px 0;
    			}
    			.night6{
    				background-image: url(img/spr.png);
    				float: left;
    			    width: 24px;
    			    height: 82px;
    			    margin-top: 20px;
    			    margin-left: 5px;
    			    margin-right: 10px;
    			    background-position: -288px -10px;
    			}
    			.div10{
    				position: absolute;
    				height: 50px;
    				width: 300px;
    				/*border: 1px solid red;*/
    				left: 610px;
    				top: 1120px;
    			}
    			.div10 p{
    				font-size: 16px;
    			    color: #828bdf;
    			    display: block;
    			}
    			.div11{
    				/*border: 1px solid red;*/
    				width: 440px;
    				height: 55px;
    				position: absolute;
    				left: 1173px;
        			top: 1031px;
        			background-image: url(img/spr.png);
        			background-position: -1231px -789px;
    			}
    			.div12{
    				/*border: 1px solid red;*/
    				width: 500px;
    				height: 100px;
    				position: absolute;
    				left: 1105px;
        			top: 1082px;
    			}
    			.div12 p{
    				margin-top: 5px;
    				font-weight: bold;
        			color: #bdc3ff;
    			}
    		</style>
    	</head>
    	<body>
    		<div class="div1">
    			<div class="div2">
    				<a class="logo"></a>
    				<span class="play"></span>
    				<div class="btncontainer">
    					<a class="abt1"></a>
    					<a class="abt2"></a>
    					<a class="abt3"></a>
    					<a class="abt4"></a>
    				</div>
    			</div>
    		</div>
    		<div class="bg2">
    			<div class="bg3">
    				<div class="first"></div>
    				<div class="two">
    					<span class="two1"></span>
    					<span class="two2"></span>
    					<span class="two3"></span>
    					<span class="two4"></span>
    					<span class="two5"></span>
    				</div>
    				<div class="three">
    					<a class="three1"></a>
    					<a class="three2"></a>
    				</div>
    				<div class="four"></div>
    				<p class="hero1"></p>
    				<div class="five">
    					<p><b>       时间：</b> 6月29日 10:00 -8月2日23:59</p>
    					<p><b>包含：</b>英雄(5折)+皮肤+图标(含载入边框)</p>
    					<a >查看英雄攻略>></a>
    				</div>
    				<div class="six">
    					<span class="six1"></span>
    					<span class="six2"></span>
    					<span class="six3"></span>
    					<span class="six4"></span>
    					<span class="six5"></span>
    					<p>英雄价：124505价</p>
    				</div>
    				<div class="seven"></div>
    				<div class="eight"></div>
    				<div class="night">
    					<span class="night1"></span>
    					<span class="night2"></span>
    					<span class="night3"></span>
    					<span class="night4"></span>
    					<span class="night5"></span>
    					<span class="night6"></span>
    				</div>
    				<div class="div10">
    					<p>英雄价：124505价</p>
    				</div>
    				<div class="div11"></div>
    				<div class="div12">
    					<p>                                               <b>时间：</b> 6月29日 10:00 -8月2日23:59</p>
    					<p>             <b>包含：</b>英雄(5折)+皮肤(8折)+以下7款炫彩皮肤瞬杀之影(8折)</p>
    					<p>           +图标含边框等</p>
    				</div>
    			</div>
    			
    		</div>
    	</body>
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzU5OTM3Nw_size_16_color_FFFFFF_t_70]: /images/20211205/81f61921c7dd4ec99af6f9ff457dcdd6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzU5OTM3Nw_size_16_color_FFFFFF_t_70 1]: /images/20211205/670ad8f3315a42a0a09f184a6d216fba.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzU5OTM3Nw_size_16_color_FFFFFF_t_70 2]: /images/20211205/7ec3bfbc354342b2b5100c5e5d52ba48.png