[散修弟子]Android-811|2018年10月17日的日报-技能树.IT修真院

发表于： 2018-10-17 17:19:17

1 775

2018/10/17

今日完成：

1、重新复习了一遍盒子模型。

2、查看学习资料ps切图，并完成了任务三需要的切图并导出切的图片。

3、利用盒子模型原理，用div初步进行页面布局，将切的图片运用到页面中。

用PS在原图中测量出每个盒子的边距，设计图是640宽，所以除以640用百分比表示盒子的边距；下面的两个盒子用浮动来体现。初步完成布局。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes"/>
    <title>task3</title>
    <link rel="stylesheet" type="text/css" href="task3.css">
</head>
<body>
<div class="task3-1"><img src="task3-01.png"/></div>
<div class="task3-2"><img src="task3-02.png"/></div>
<div class="text"><p>葡萄藤轻游戏专注于桌游领域，提供在线杀人游戏，捉鬼，炸狼堡等多种聚会游戏，以下线下聚会桌游道具。</p></div>
<div class="task3-3"><img src="task3-03.png" /></div>
<div class="task3-4"><img src="task3-04.png"/></div>
</body>
</html>

html {font-size:62.5%;}
body{margin: 0;
    padding: 0;
    background-color: #68cdd5;}
.task3-1{margin-top: 3.125%;
    margin-left: 5.47%;}
.task3-2{padding: 6.25% 0 18.75% 0;
    text-align: center;}
.text{margin: auto;
    width: 71%;
    font-size:3rem;
    text-align:left;
    font-family: "sans-serif";
    color:#ffffff;}
.task3-3{float: left;
    margin-left: 18.75%;
    padding-top:28.125%;}
.task3-4{float: right;
    margin-right: 17.2%;
    padding-top:28.125%;}