您的位置：首页 > Web前端 > CSS

[HTML+CSS]实现个小目标，比如1：1复制刀塔2官网

2016-09-20 09:58 411 查看
这是效果页面





1，首先布局。

没有布局，后面的一切都没法实现。这个是开始的第一步。



布局时，要定清楚几个div的位置。

然后就细节实现。说几个第一次遇到的新东西

1，一块区域，看着什么也没有却是一个链接。

实现倒也简单。做一个div 然后

opacity:0.0;filter(alpha=0)设置为完全透明就可以了。再在上面加上超链接。

2，一块区域，当鼠标停留其上时，该区域（图片）。变亮，移开又恢复原状。

实现：
img {opacity:0.7;filter(alpha=70)}
img:hover {opacity:1;[b]filter(alpha=100)}
要注意的问题：
1，在类的命名和书写规范上，和人家专业人员有大的差距。这个要加强理解和揣摩。
源代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<link href="style.css" type="text/css" rel="stylesheet">
<title>DotA2</title>
</head >
<body class="bg">
<div class="absu">
<div class="rela">
<a href="#"><img  src="Img/dota2_logo.png"/></a>
</div>
<a href="#"> <div class="touming">
</div></a>
<div class="enterl">
<div class="enterle1">
<a href="#"><img src="Img/enter1.jpg"/></a>
</div>
<div class="enterle2">
<a href="#"><img src="Img/enter2.jpg"/></a>
</div>
<div class="enterle3">
<a href="#"><img src="Img/enter3.jpg"/></a>
</div>
</div>
<div class="video">
<a href="#"><img src="Img/video.jpg"></a>
</div>
<div class="enterr">
<div class="enterrig1">
<a href="#"><img src="Img/enter4.jpg"/></a>
</div>
<div class="enterrig2">
<a href="#"><img src="Img/enter5.jpg"/></a>
</div>
<div class="enterrig3">
<a href="#"><img src="Img/enter6.jpg"/></a>
</div>
</div>
<div class="bottom">
<div class="bott1"><a href="#"><img src="Img/link1.jpg" ></a> </div>
<div class="bott2"><a href="#"><img src="Img/link2.jpg" ></a> </div>
<div class="bott3"><a href="#"><img src="Img/link3.jpg" ></a> </div>
<div class="bott4"><a href="#"><img src="Img/link4.jpg" ></a> </div>
<div class="bott5"><a href="#"><img src="Img/link5.jpg" ></a> </div>
</div>
</div>
<div class="last" >
<div class="wanmeilast">
<div class="threelast">
<div class="last1"><a href="#"><img src="Img/logo_wanmei.png" ></a> </div>
<div class="last2"><a href="#"><img src="Img/logo-valve.png"></a> </div>
<div class="last3">完美世界（北京）网络技术有限公司 版权所有 Copyright © 2012-2016 Perfect World Co., Ltd. All Rights reserved
<br/>©2012 Valve Corporation. All Rights reserved. Licensed to Perfect World Co., Ltd. in China</div>
</div>
<div class="yejiao">
<p> 京ICP证：050016号《网络文化经营许可证》编号：京网文[2011]0782-287号 《网络视听许可证》编号：0110587<br/>
京公网安备110105019888号 文网进字[2013] 028号 新出审字[2013] 1505号 ISBN：978-7-89989-826-0</p>
</div>

</div>
</div>
</body>
</html>

body{
width: 100%;
height: 1160px;
padding: 0px;
margin: 0px;
}
a{font-family:"Microsoft YaHei", "宋体",Arial, Helvetica, sans-serif; text-decoration:none;outline:none;}
a:hover{ text-decoration:underline;}
.absu{
width: 1008px;
height: 998px;
margin: 0 auto;
}
.rela{
padding-top: 20px;
margin-left:0px;
}
.tou
ada3
ming{
width: 1000px;
height: 425px;
background-color: aqua;
opacity:0.0;filter(alpha=0)
}
.bg{
background-image: url(Img/bg-dota.jpg);
background-repeat: no-repeat;
background-position: top;
}
.enterl{
float: left;
margin-top: 3px;
width: 200px;
height: 338px;
padding-left: 2px;
}
.video{
height: 338px;
width: 600px;
float: left;
margin-top: 3px;
padding-left: 2px;
}
.enterr{
margin-top: 3px;
width: 200px;
height: 338px;
float: left;

}
.enterle1,.enterle2,.enterle3,.enterrig1,.enterrig2,.enterrig3{
padding-top: 0px;
}
img {opacity:0.7;filter(alpha=70)}
img:hover {opacity:1;filter(alpha=100)}
.bottom{
margin-top: 371px;
height: 87px;

}
.bott1,.bott2,.bott3,.bott4,.bott5{
float:left;
padding-left: 1px;
}
.bott1{
margin-top: 2px;
margin-left: 2px;
}
.bott2{
margin-top: 3px;
}
.last{
width: 100%;
height: 160px;
background-color: #000;
background-repeat: no-repeat;

}
.wanmeilast{
width: 1008px;
height: 160px;
margin: 0 auto;

position: relative;
}
.threelast{
padding-top: 60px;
width: 1008px;
height: 36px;

}
.last1{
width: 135px;
height: 35px;

float: left;
}
.last2{
width: 135px;
height: 35px;

float: left;
}
.last3{
font-size: 12px;
font-family: "Microsoft YaHei", "宋体", Arial, Helvetica, sans-serif;
margin: 0;
line-height: 1.25;
width: 650px;
color: #A0A0A0;
height: 35px;
float: left;

}
.yejiao{
position: absolute;
top: 85px;
left: 230px;
line-height: 1.5;
font-size: 12px;
color: #333;
text-align: center;
}

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航