发表于： 2016-05-17 11:58:45
4 1380
用了两天时间写的,有些不明白的元素都大概了解了,这次更清楚绝对定位和相对定位了,但是只能兼容pc端的浏览器,公司的电脑配置不了nginx.回家在写个自适应的测试下移动端.废话不多说,上代码!!!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>mojin</title>
</head>
<style>
body{margin:0px; padding: 0px;}
a{color: #f8f6f5;
text-decoration: none;
}
p{margin:0; padding:0;}
.a2{
width: 640px;
height: 39px;
}
.a1{
width: 640px;
height: 88px;
background: #22292c;
}
.a1_1{
left: 17px;
margin-top: 24px;
position: absolute;
}
.a1_2{font-size: 32px; color: #f8f6f5;
position: absolute;
left:51px;
margin-top: 22px;
}
.a1_3{
font-size: 32px; color: #f8f6f5;
position: absolute;
left: 288px;
margin-top: 22px;
}
.a1_4{
position: absolute;
left: 585px;
margin-top: 32px;
}
.a3{
width: 640px;
height: 1009px;
background: #68cdd5;
}
.a3_1{position: absolute;
left: 35px;
margin-top: 19px;
}
.a3_2{position: absolute;
left: 195px;
margin-top: 116px;
}
.a3_3{
position: absolute;
left: 140px;
margin-top: 676px;
}
.a3_4{
position: absolute;
left: 423px;
margin-top: 676px;
}
.a3_5{
position: absolute;
left: 100px;
margin-top: 306px;
width: 440px;
height: 250px;
font-size: 28px; color: #ffffff;
line-height: 50px;
padding: 1px;
text-align: justify;
letter-spacing: 2px;
}
.a3_6{
position: absolute;
left: 127px;
margin-top: 780px;
font-size: 24px;color: #ffffff;
}
.a3_7{
position: absolute;
left: 418px;
margin-top: 780px;
font-size: 24px; color: #ffffff;
}
</style>
<body>
<div><img src="db1_01.jpg"></div>
<div>
<span><a href="url"><img src="db2.jpg" border="0"></a></span>
<p><a href="url">返回</a></p>
<p>魔镜</p>
<a href="url"><img src="db3.jpg" border="0"></a>
</div>
<div>
<a href="url"><img src="zb2.jpg" border="0"></a>
<a href="url"><img src="zb3.jpg" border="0"></a>
<a href="url"><img src="zb4.jpg"></a>
<a href="url"><img src="zb5.jpg"></a>
<p>葡萄藤轻游戏专注于桌游领域,提供在线杀人游戏,捉鬼,炸狼堡等多种聚会游戏,以下线下聚会桌游道具.</p>
<p>290560933</p>
<p>BJPTTeng</p>
</div>
</body>
</html>
返回列表
评论