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

最新推荐文章于 2022-10-25 18:36:29 发布

不言尘世

最新推荐文章于 2022-10-25 18:36:29 发布

阅读量584

点赞数 1

分类专栏：前端开发

本文链接：https://blog.csdn.net/weixin_43599377/article/details/96322109

版权

博主分享了自己花费一天时间设计的英雄联盟皮肤主页的创作过程，内容包含实际代码展示，是一篇关于前端开发的实战经验分享。

摘要由CSDN通过智能技术生成

做了一天的英雄联盟的主页，分享一下代码
在这里插入图片描述

直接上代码吧

<!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;