发表于： 2016-10-02 21:30:35
1 575
刚开始得到任务的时候，想着先按固定大小做出来，然后再转换em、rem等，出了不少问题。后来改了方向，照着手机端的效果做做成了，主流机型全部适应。可是在电脑上，高度有些问题，出现了滚动条。水平还有待提高。不早了，明天再上任务二。附任务三代码及效果图：
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
body{
background-color:#68cdd5;
line-height:1.4em;
color:white;
}
img{
max-width:100%;
}
.logo{
text-align:center;
}
.main{
width:80%;
margin:0 auto;
color:white;
margin-top:20%;
}
.gamePart{
margin-top:40%;
text-align:center;
}
.game1{
float:left;
margin-left:15%;
}
.game2{
float:right;
margin-right:15%;
}
</style>
<title>桌游</title>
</head>
<body>
<div class="container">
<header><img src="back.png" /></header>
<div class="logo"><img src="logo.png" /></div>
<div class="main">葡萄藤轻游戏专注于桌游领域，提供在线杀人游戏，捉鬼，炸狼堡等多种聚会游戏，以下线下聚会桌游道具。</div>
<div class="gamePart">
<div class="game1"><img src="game1.png" /><br />290560933</div>
<div class="game2"><img src="game2.png" /><br />BJPTTeng</div>
</div>
</div>
</body>
</html>
返回列表
评论