发表于： 2018-07-29 00:12:52
2 636
今天完成的事情：
- 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小时）
学习内外边距内容，学习盒子模型，学习切图
切图如下，不知道是不是这么切的，还是说要把这些抠图抠出来，吧背景去掉
自己加了图片，调整后的代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>魔镜</title>
<style type="text/css">
body {
background-color: rgb(104,205,213);
margin: 0;
padding: 0;
}
.box2 {
text-align: center;
}
.box3>p {
color:#FFFFFF ;
font-size: 20px;
line-height: 40px;
margin: 20% 10% 20% 10%;
text-align: left;
}
.box4,.box5 {
text-align: center;
width: 50%;
float: left;
margin-bottom: 20%;
}
</style>
</head>
<body>
<div class="box">
<div class="box1">
<img class="jiantou" src="mojingimages\1.jpg">
</div>
<div class="box2">
<img class="logo" src="mojingimages\2.png">
</div>
<div class="box3">
<p>葡萄藤轻游戏专注于桌游领域，提供在线杀人游戏，捉鬼，炸狼堡等多种聚会游戏，以下线下聚会桌游道具。</p>
</div>
<div class="box4">
<img class="logo" src="mojingimages\3.png">
</div>
<div class="box5">
<img class="logo" src="mojingimages\4.png">
</div>
</div>
</body>
</html>
效果如图
明天计划的事情：
继续做任务
遇到的问题：
1、任务二中的gitub相关任务，由于找了很久的vpn，还是有相关下载，链接，登陆方面的问题，暂时跳过了，进入任务三，做一个移动端简单页面
2、还请师兄帮忙检查代码，自己写不知道有没有错，不知道有没有不合理的地方，不知道有没有可以精简的地方
3、不知道切图做的是不是这个
4、9.（知识学习）查看学习资料——《自适应——关于自适应，屏幕分辨率，图片尺寸》（1小时）
该条任务中没有太懂，最后的代码具体语义是什么？
#header {background:url(/bg@1x.png);}@media screen and (-webkit-device-pixel-ratio: 2) {#header {background:url(/bg@2x.png);}}
收获：自己写一个简单页面
最后谢谢师兄！
返回列表
评论