发表于： 2019-11-01 20:21:29
1 919
今日完成：
下载PS ，好慢呀
学习使用PS切图：
切完之后会生产一个文件夹，里面是切好的图，挑出来会用到的加到项目中：
task3.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1,minimum-scale=1,,maximum-scale=1,user-scale=no">
<title>task3</title>
<link rel="stylesheet" type="text/css" href="../css/task3.css">
</head>
<body>
<div class="outer">
<div class="top">
<img src="../img/task3_1.png" alt="无" >
</div>
<p>
葡萄藤轻游戏专注于桌游领域，提供在线杀人游戏，捉鬼，炸狼堡等多种聚会游戏，以线下聚会桌游道具。</p>
<div class="picture" >
<img src="../img/task3_2.png" alt="无" class="img1">
<img src="../img/task3_3.jpg" alt="无" class="img2">
</div>
</div>
</body>
</html>
task3.css
*{
margin:0;
padding: 0;
}
.outer{
background-color:rgb(104,205,213);
overflow: hidden;
height: 100vh;
}
.top{
text-align: center;
margin-top: 100px;
}
.picture {
width: 100%;
margin-top: 20%;
float: left
}
p {
color: white;
font-size: 1rem;
margin-top: 50px;
padding-left: 15%;
padding-right: 15%;
line-height: 30px;
}
.img1 {
margin-left: 15%;
margin-bottom: 20%;
width: 70px
}
.img2 {
margin-right: 15%;
float: right;
width: 70px
}
深度思考：
1.如何利用PS切图以及从UI图中获取所需信息？
选择切片工具
将鼠标放到图片待切附近点击拖拽，用方框框住
点击文件===》存储位web文件格式
保存之后，会生产一个image文件夹，里面就是切好的图。
拿到一张ui图之后，首先要做的就是观察整个布局。然后就是一些基本的信息：图片中的字体，图标的颜色、大小，图标之间
的间距。也可以通过选中图中的文字，在ps字符栏查看它的字体，大小，字间距，行间距等信息。可以通过吸管选中图标，从拾色器中看到颜色的六位编码，可以通过标尺工具测量图标的大小，间距。
2.px、em、rem、%、vw、wh、vm等单位有什么区别？
1）px就是piexl像素的缩写，相对长度单位，网页设计常用的单位。像素px是相对于显示器屏幕分辨率而言的。
2）em是相对长度单位。相对于当前对象内文本的字体尺寸（参考物是父元素的font-size）
如当前父元素的字体尺寸未设置，则相对于浏览器默认字体尺寸。
3）rem是相对于HTML根元素的字体大小（font-size）来计算长度单位
优点：只需要设置根目录的大小就可以把整个页面的成比例调好
rem兼容性 ：除了IE8及更早版本外，所有浏览器均已支持rem
如果你没有设置html的字体大小，就会以浏览器默认字体大小，一般是16px
em与rem的区别：
rem是相对于根元素（html）的字体大小，而em是相对于其 父元素的字体大小。
4）%
一般来说是相对于父元素
1、对于普通定位元素就是我们理解的父元素
2、对于position:absolute;的元素是相对于已定位的父元素
3、对于position:fixed;的元素是相对于Viewport(可视窗口)
5）vw 是相对视口的宽度而定的，长度等于视口宽度的1/100，假如浏览器的宽度为200px,那么1vw就等于2px(200px/100)
6）vh是相对于视口高度而定的，长度等于视口高度的1/100
7）vm相对于视口的宽度或高度中较小的那一个，其中较小的那个被分为100单位的vm
比如浏览器高度为900px,宽度为1200px,取最小的浏览器高度，1vm=900px/100=9px
缺点：兼容性差
3.如何进行自适应网页设计？
4.css有哪些选择器，优先级如何计算？
5.什么时候用margin好，什么时候用padding好？
6.手机分辨率和网页中的px是一回事吗？
明日计划：
完成任务四
遇到的问题：
对padding 、margin的使用有点混乱，对概念理解不到位。
收获：
学会了使用ps 切图
返回列表
评论