发表于： 2019-01-06 21:15:33
2 898
今天完成的事情：
1.（环境搭建）下载任务资源——魔镜介绍页.psd（0.5小时）
2.（知识学习）查看学习资料——《内外边距——margin和padding》（1小时）
3.（编码实战）利用盒子模型的原理，用div对页面进行布局（2小时）
4.（编码实战）为div添加样式和文本内容，让页面布局和设计图基本一致（0.5小时）
明天计划的事情：
作品的字号、字体、行距有待调整。
------------解决垂直居中之后继续-------------
5.（知识学习）查看学习资料——《PhotoShop——Photoshop之CSS切图》（1小时）
6.（编码实战）切图（测量、切割、导出）（0.5小时）
7.（编码实战）将切出的图片运用到页面中（0.5小时）
8.（知识学习）查看学习资料——《自适应——PX，EM，REM的概念，自适应布局的写法》（1小时）
9.（知识学习）查看学习资料——《自适应——关于自适应，屏幕分辨率，图片尺寸》（1小时）
10.（代码调试）让图片适应屏幕大小和清晰度（1小时）
11.（代码调试）调试代码，使得页面在不同分辨率不同设备上都能正常显示（1.5小时）
12.（环境搭建）配置nginx的http服务，使本地可以通过配置的域名访问（0.5小时）
13.（环境搭建）上传到学员服务器（0.5小时）
遇到的问题：
Q：搞不懂布局怎么设计？
A：根据元素分布，暂时先分成5块，利用Task1学的盒子模型进行尝试。
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Task3</title>
<style>
html, body{height:100%;}
.box1 { /* 这是 类选择器 */
float: left;
background-color: #68cdd5;
width: 100%;
height: 10%;
}
.box2 {
float: left;
background-color: #68cdd5;
width: 90%;
padding: 5%;
text-align:center;
}
.box3 {
float: left;
background-color: #68cdd5;
width: 80%;
height: 30%;
padding: 10%;
}
.box4 {
float: left;
background-color: #68cdd5;
width: 50%;
height: 40%;
text-align:center;
}
</style>
</head>
<body>
<div class="box1">返回</div>
<div class="box2">葡萄藤</div>
<div class="box3">葡萄藤轻游戏专注于桌游领域，提供在线杀人游戏，捉鬼，炸狼堡等多种聚会游戏，以下线下聚会桌游道具。</div>
<div class="box4">290560933</div>
<div class="box4">BJPTTeng</div>
</body>
效果如下：
这垂直居中明显有问题啊。
Q：height: 10%---- 用百分数的时候不起作用，用其它单位有反应，没法做自适应了，怎么办？
A：style里面加入这个
html, body{height:100%;}
百分比有继承关系，得做一下定义。
Q：padding用百分比，出来的效果和想象的不一样。
A：margin-top | margin-bottom | padding-top | padding-bottom 的百分比值参照的不是容器的高度，而是宽度。这个超坑爹。
-----------熬夜加一条----------------
Q：盒子里的内容没法垂直居中。
A：对应的类加入
display: flex;
justify-content:center;
align-items:Center;
Flexbox，CSS3的黑科技，超好用！
重构 style 部分的代码
<style>
html, body{height:100%;}
.box1 { /* 这是 类选择器 */
float: left;
background-color: #68cdd5;
width: 100%;
height: 10%;
display: flex;
align-items:Center;
}
.box2 {
float: left;
background-color: #68cdd5;
width: 100%;
height: 10%;
display: flex;
justify-content:center;
align-items:Center;
}
.box3 {
float: left;
background-color: #68cdd5;
width: 80%;
height: 20%;
padding: 0% 10%;
display: flex;
justify-content:center;
align-items:Center;
}
.box4 {
float: left;
background-color: #68cdd5;
width: 50%;
height: 60%;
display: flex;
justify-content:center;
align-items:Center;
}
</style>
效果：
返回列表
评论