发表于： 2018-08-19 20:39:22
1 804
今天完成的事情：
今天写了任务总结，回顾了一下任务1，任务2，任务3
并且完成了任务1任务2任务3，的深度思考，下载了ps软件任务4资源，用秘钥和百度教程，配置好了git，装上了webstorm，用百度上面找到的链接。
明天计划的事情：开始任务4，了解任务4资源，做好任务4的准备工作。
遇到的问题：对于概念的理解很模糊，而且基础知识有一些也不了解，并且任务的很多深度思考，自己并不是很理解也是看了百度。
收获：又看了一遍任务123过了一遍又以前想不通的，现在想通了许多，以前不理解的现在也多少了解了一下。收获很多嘛。
任务1总结！
学到了网页是什么组成 的从系统运行来看，需要域名、空间以及网站的内容。
域名：就是可以让别人在浏览器中找到你是一个数字和字母组成的名字而且·域名有时间限制，长时间不用就注销了别人就可以再次注册。
空间：空间就是在网上的一个存储网站内容的地方‘。
网站内容：网站内容一般由展示界面、程序和资料组成，界面就是肉眼能够直观了解网站的页面，所有的页面都是由程序来支撑的，在加上与网站相关的资料，组成了一个完整的网站内容。
如何生成一个网页：了解了网页的内容就要用到HTML标签，html>
<head>网页的代码是要写在HTML里面
<title>标题要写在title里面</title>
</head>
<body>
显示的内容图片以及需要表达的东西写在body里面。
</body>
</html>
html和css如何搭配工作：
你如果想要写代码就可以用分开来写的方法就是html加css的方法来写用这个代码<link rel="stylesheet" href="style.css"/>，把你想要写的style写到css文件夹里面这样很方便，同时不容易搞混。
页面代码调试可以用网页检查的方法看着调试很方便同时也能看到自己代码那地方有问题，表现出来又是什么样的，更好的看出来自己的错误。
盒子模型具有内容(content)、内边距(padding)、边框(border)、外边距(margin)Margin(外边距) - 清除边框外的区域，外边距是透明的。Border(边框) - 围绕在内边距和内容外的边框。Padding(内边距) - 清除内容周围的区域，内边距是透明的。内容就是填充物。
浮动浮动就是浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
任务2总结；
学会了如何使用github以及调配Git用电脑地址使Git，与GitHub链接然后传到GitHub上面，利用GitHub搭建网站在网页什么看到自己的代码。学会使用服务器。
任务3总结
学习了px、em、rem、%、vw、wh、vm等单位有什么区别？我用的最多的是vw,任务3还学会了如何使用ps切图，把自己想要的切下来然后背景虚化使用到自己的网页上面我就是这样做的。任务3也用到了盒子模型以及浮动，什么时候用margin好，什么时候用padding好？所有浏览器都支持padding，但是要用内边距还是外边距就论情况，margin会出现垂直外边距合并的情况，也就是俗称外边距塌陷。在非标准流中就不会出现这种情况。
如何进行自适应网页设计？ 首先使用在HTML头部增加viewport标签。然后不用绝对宽度用自适应的宽度，以及流动布局就可以实现。
深度思考@任务1
1.HTML文件里开头的Doctype有什么作用
2.如何理解盒模型及其content、padding、border、margin？
content就是内容显示的文本图像以及需要表达的东西，padding就是内边距清除内容周围的区域，内边距是透明的。border就是边框围绕在内边距和内容的边框。
margin就是外边框区分与其他元素是透明的。
3.常见的inline元素、block元素、inline-block元素有哪些？它们之间有什么区别
inline是内联元素，block是块级元素，inline-block是内联块元素。
4.如何使用浏览器的F12调试页面？
进入浏览器然后点f12点击小手机图标，开发者工具会将页面模式换成模拟手机浏览的状态，然后放大放小进行观察，哪里不符合要求就点哪里然后修改，修改完复制过去就行了。根据浏览器上面调好的修改自己的代码。
5.九宫格的布局你还能想到哪些办法实现？它们各自的优势劣势是什么？
绝对定位绝对定位相对于浮动，复杂一些，计算繁琐，没有浮动简单代码少，而且绝对定位需要的单位有限。
6.IDE是什么？它和文本编辑器相比有什么优缺点？
编辑器就是纯粹的文本编辑器，简单明了使用方便，但是同样的没有其他功能只能文本编辑。
ide则不同，IDE就像是带有软件开发的集合开发环境。用起来更专业
7.加和不加meta的viewport有什么区别？
meta标签的作用是让当前viewport的宽度等于设备的宽度，同时不允许用户手动缩放。也许允不允许用户缩放不同的网站有不同的要求，但让viewport的宽度等于设备的宽度，不加的话有可能会出现问题，meta就是为了解决这些问题。
任务2深度思考；
1.如何使用svn将代码上传至github?
注册github账号创建库，获得秘钥然后要你输入SSH密匙的存放位置，可以不管，直接回车使用默认路径。再输入你想要的密码，SSH key就生成了。现在你需要将这个Key提交到GitHub，首先打开Key保存的位置，里面会有三个文件，找到id_rsa.pub，用文本编辑器打开，复制里面的全部字符。到GitHub，在右上方工具栏里找到Account Settings。在这个页面上有一个SSH Public Keys标签，选择Add another public key。Title可以随便填一个，Key就粘贴刚才的字符，提交。
2.如何使用git将代码上传至github?
注册github账号以及创建一个库，下载git配置git，获得秘钥，然后要你输入SSH密匙的存放位置，可以不管，直接回车使用默认路径。再输入你想要的密码，SSH key就生成了。现在你需要将这个Key提交到GitHub，首先打开Key保存的位置，里面会有三个文件，找到id_rsa.pub，用文本编辑器打开，复制里面的全部字符。到GitHub，在右上方工具栏里找到Account Settings。在这个页面上有一个SSH Public Keys标签，选择Add another public key。Title可以随便填一个，Key就粘贴刚才的字符，提交。然后进入要上传的仓库，右键git bash，添加远程地址。上传自己的任务就行了。
3.svn和git有什么区别?
SVN是Subversion的简称，是一个开放源代码的版本控制系统,支持大多数常见的操作系统。
SVN对中文支持好，操作简单，美工人员，产品人员，测试人员，实施人员都可轻松上手。使用界面统一，功能完善，操作方便。集中式版本控制系统缺点就是必须联网才能工作，对网络的带宽要求高。
Git是开源的分布式版本控制系统，用于敏捷高效地处理任何或小或大的项目Git是一个开源的分布式版本控制系统,用以有效、高速的处理从很小到非常大的项目版本管理
对程序源代码进行差异化的版本管理，代码库占极少的空间。易于代码的分支化管理。不支持中文，图形界面支持差，使用难度大。不易推广
4.如何利用github搭建自己的个人网站？
- 注册GitHub账号，并创建一个代码仓库，
- 编写网站代码或者使用开源的网站项目，
- 将域名和刚创建的网站代码仓库相关联。
5.如何配置nginx，实现在手机上查看页面？
下载nginx然后打开会你会发现有个黑色弹出框一闪即逝；说明成功启动；
然后随便打开一个浏览器；输入localhost出现welcomein NGINX :说明配置成功。
6.如何将代码部署至自己的服务器？
将本地/var/www目录下的项目目录提交到本地仓库，本地仓库提交更改到服务器仓库（把新的代码提交上去），服务器仓库checkout更改（用新的代码覆盖旧的代码），将服务器仓库目录的代码复制到/var/www（覆盖原来的代码，完成新代码的部署）。
任务3深度思考；
1.如何利用PS切图以及从UI图中获取所需信息？
一张图片拿到我们手里，首先要做的就是观察整个布局，我们可以通过选中图片中的文字，通过字符栏看到文字的字体，文字的大小，字间距，行间距等信息，可以通过吸管工具选中图标，从拾色器中看到颜色的六位编码，可以通过标尺工具测量图标的大小，间距等。
2.px、em、rem、%、vw、wh、vm等单位有什么区别？
px像素（Pixel）值是固定的，不会随着屏幕宽度变而变。
em:是相对单位。em其实就是一种排版的测试单位.
rem的区别：em相对于父元素，rem相对于根元素。这极大地简化了与相关长度单位的合作。
%(percentage)以百分比形式设置的长度基于父元素的相同属性的长度。例如，如果一个元素以450px宽度呈现，宽度设置为50％的子元素将呈现225px。
vw-这是“视口宽度”单位。 1vw等于视口宽度的1％。它与百分比类似，不同之处在于，所有元素的值都保持一致，无论其父元素或父元素宽度如何。
vh-这与vw（视口宽度）单位相同，只是它基于视口高度。vmin and vmax：关于视口高度vh和宽度vw两者的最小值或者最大值。
3.如何进行自适应网页设计？
在HTML头部增加viewport标签。不使用绝对定位，使用流动布局。
4.css有哪些选择器，优先级如何计算？
id选择器 类选择器 css复合选择器 标签指定式选择器 后代选择器 并集选择器
子元素选择器,只选择某个元素的子元素。子选择器使用了大于号（子结合符）。
子结合符两边可以有空白符，这是可选的。
相邻兄弟选择器可选择紧接在另一元素后的元素，且二者有相同父元素。
css属性选择器,属性选择器可以根据元素的属性及属性值来选择元素。
5.什么时候用margin好，什么时候用padding好？
margin始终是透明的；margin是用来隔开元素与元素的间距；padding是用来隔开元素与内容的间隔。看情况使用。
6.手机分辨率和网页中的px是一回事吗？
一般来说，px就是对应设备的物理像素，然而如果输出设备的解析度与电脑显示器大不相同，所以并不是一回事。
返回列表
评论