[散修弟子]CSS-2186|2016年10月04日的日报-技能树.IT修真院

发表于： 2016-10-04 16:40:15

1 660

完成任务三。

没有制定宽度，用的是自适应。pc端界面不好看，手机端还是比较接近psd的。

手机端，效果图：手机宽度太小，width小于640，看不到全部。

pc端效果图。

html 代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>task3</title>
<meta name="viewport" content="width=device-width, intial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />
<link rel="stylesheet" href="03.css" />
</head>
<body>
<header>
  <div><img src="back.png" alt="back"> 返回</div>
  <div>魔禁</div>
  <div><img src="menu.png" alt="menu"><img src="menu.png" alt="menu"><img src="menu.png" alt="menu"></div>
</header>
<section>
<img src="goback.png" alt="goback" >
<img src="logo.png" alt="logo" >
<p>
葡萄藤轻游戏专注与桌游领域，提供在线杀人游戏、捉鬼、炸狼堡等多种聚会游戏，以下线下聚会桌游道具。
</p>
<div>
  <div><img src="qun.png" alt="qun"><br>290560933</div>
  <div><img src="bjptteng.png" alt="bjpttrng"><br>BJPTTeng</div>
</div>
</section>
</body>
</html>

主要还是用div和float来完成，切图水准太差，效果图显示很差。

重点还是css代码：

*{
margin:0;
}
body{
  text-align:center;
  color:white;
  font-size:30px;
}
header {
background-color:#22292c;
height:88px;
padding:0 16px;
font-size:34px;
}
header div{
float:left;
width:33%;
line-height:88px;
}
.back{
text-align:left;
font-size:26px;
}
.menu {
text-align:right;
}
header div img{
vertical-align:middle;
}

section {
background-color:#68cdd5;
position:relative;
}
.goback{
position:absolute;
top:18px;
left:34px;
}
.logo{
display:block;
padding:110px 0;
margin: 0 auto;
}

p{
padding:0 92px;
text-align:left;
line-height:55px;
}
.btn{
font-size:24px;
padding:180px 0 200px 0;
}
.btn1{
float:left;
width:50%;
}

因为task3标签元素比较少，所以用了很多标签名选择器。

页面主要是水平居中，对img和匿名内联元素都有用。还可以继承；

垂直居中比较麻烦，我用的是让行高等于父元素，实现单行文本垂直居中。

网址：http://thefang.applinzi.com/

代码：https://github.com/mrfangbin/task