[成都|]PM-|2020年04月13日的日报-技能树.IT修真院

发表于： 2020-04-13 19:07:10

1 1424

今天的任务：

①今天主要完成任务3的页面制作，其中有一些疑问：

我可能没太理解切图的意义，psd文件中的图层可以直接右键导出png，用不着切图的啊？那是否任务3的切图是为了让人知道图标在整个页面的占比。

②一开始“back”图标用float属性会导致“葡萄藤”logo居中之后还会偏向右边，原因可能是居中命令是从“back”图标的右边界开始算的，所以我把“back”图标的位置属性改成了绝对位置：position: absolute;

③大概了解了Flex布局，其中“葡萄藤”logo就是Flex布局以确保是水平居中的，其他方法试了很多但都达不到居中的命令；

④之前文本字体大小会随着页面的缩放而改变，后来加入了meta标签属性后得以解决；

name="viewport" content="width=device-width, initial-scale=1.0"

⑤下面logo的文字和图标没有居中对齐，查找了师兄的日志有类似的提问，加入了text-align: center属性得以解决；

然后是用nginx用移动端访问网页：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="mojing.css">
    <title>魔镜</title>
</head>
<body>
    <div class="back"><img src="001.png"></div>
    <div class="logo1"><img src="002.png"></div>
    <div class="main"><p>葡萄藤轻游戏专注于桌游领域，提供在线杀人游戏，捉鬼，炸狼堡等多种聚会游戏，以及线下聚会桌游道具。</p></div>
    <div class="logo2"><img src="003.png"><p>290560933</p></div>
    <div class="logo3"><img src="004.png"><p>BJPPTeng</p></div>
</body>
</html>

*{
    margin: 0;
    padding: 0;
}
body{
    color: white;
    background-color: turquoise;
    font-size: 62.5%;
}
.back{
    position: absolute;
    top: 2vw;
    left: 2vw;
}
.logo1{
    display: flex;
    justify-content: center;
    margin-top: 10vw;
    margin-bottom: 5vw;
}
.main{
    line-height: 200%;
    font-size: 1.5rem;
    padding-left: 15%;
    padding-right: 15%;
}
.logo2{
    float: left;
    margin-top: 10vw;
    margin-left: 14vw;
    font-size: 1.2rem;
    text-align: center;
}
.logo3{
    float: right;
    margin-top: 10vw;
    margin-right: 14vw;
    font-size: 1.2rem;
    text-align: center;
}