发表于: 2016-10-26 20:46:25

2 684


今天完成任务三

明天开始任务四

开始思路很混乱,借鉴他人后有了思路

今天学会了调整字体和居中

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <title>task3</title>
   <style>
body{
width:100%;
margin:0;
padding:0;
color:white;
background-color:#68cdd5;
}
.header{
width:100%;
height:auto;
background-color:#22292c ;
overflow: hidden;
}
#back1{
float:left;
width:30%;
}
#mojing{
float:left;
width:40%;
text-align:center;
font-size:2.0em;
line-height:2.0em;
}
#menue{
float:right;
width:30%;
text-align: right;
}
.content{
text-align: center;
font-size: 1.5em;
margin:0 12%
}
#left{
width: 50%;
float: left;
margin:7% 0;
}
#right{
width: 50%;
float: right;
margin:7% 0;
}
</style>
</head>
<body>
<div class="header">
   <div id="back1">
       <img src="../images/back1.png">
   </div>
   <div id="mojing">魔镜</div>
   <div id="menue">
       <img src="../images/menue.png">
   </div>
</div>
<div>
   <div>
       <img src="../images/back2.png">
   </div>
   <div class="content">
       <img src="../images/logo.png">
   </div>
   <div class="content">
      <p> 葡萄藤轻游戏专注于桌游领域,提供在线杀人游戏,捉鬼,炸狼堡等多种聚会游戏,以下线下聚会桌游道具。</p>
   </div>
</div>
<div class="content">
   <div id="left">
       <img src="../images/left.png">
   </div>
   <div id="right">
       <img src="../images/right.png">
   </div>
</div>
</body>
</html>



返回列表 返回列表
评论

    分享到