发表于: 2017-03-23 22:56:30
4 705
首先,热烈祝贺中国足球队在世界杯亚洲十二强赛取得首个3分,而且赢得还是棒子队,大快人心,雄起!!!
咳咳,我激动个啥,言归正传,做任务一的时候,nginx的配置其实是一知半解,这次任务3就露馅了【捂脸】,刚好今天微信公众号的线下小课堂web(第五十七期)有关于nginx配置的教程,hahaha,天助我也
一、今天完成的事:
1、下载PS并未魔镜介绍页切图:
因为此次设计图都分了图层的,所以采用图层智能编辑法:
1)选中要切内容所在的图层,右键点击选择转换为智能对象。
2)右击选中编辑内容
3)点击文件>存储为web所用的png24格式(Alt+shift+Ctrl+s)
4) 如果是两个图层,可以按住ctrl同时选中两个图层转换
2、魔镜介绍页的代码编写:
1)魔镜介绍页html结构:
把页面拆分为以下几个部分:带箭头的圆拆为一部分、葡萄藤logo拆为一部分、文字拆为一部分、下方的两个图标为一部分,然后嵌套两个图标(左右隔一个)
2)魔镜介绍页CSS样式:
1.页面样式初始化
*{margin:0;padding:0;}
2.外层容器样式设置
position:relative;
width:100%;
max-width:640px;
min-width:320px;
margin:0 auto;
3.带圈符号
根据div盒子的在不设置任何属性时居上靠左的特性,并给盒子设置上外边距margin-top:2%;以及左外边距margin-left:2%;进行布局定位,需要注意的是:因为是要做自适应的页面,所以无论是上边距还是左边距不能设置固定值。
4.葡萄藤logo
葡萄藤所在的盒子设置文本居中text-align:center;属性使图标无论是放大分辨率还是缩小分辨率,都始终居中。
5.文字内容
给文本设置一个盒子text,在这里是不能用text-align:center;文本进行居中的,如果设置了文本居中属性,就会出现问题,当一行字没有占满一行时,也会居中,这样就会显的不美观了,所以只能使用其他式进行居中,比如设置内边距padding值,给予上下左右四个内边距值为18%,如图十所示因为左右两边距离页面边界都为18%,所以自然而然的也就是居中了。
6.底部图标
整体设宽,然后分别左右浮动
二、遇到的问题:
1.字体自适应,低于350时会错位
2. 配置nginx,实现在手机上查看页面
三、明天计划的事:
1、任务4切图
2、缕清任务4代码思路
四、学到的知识(收获):
一、背景介绍
1、nginx是什么?
Nginx是一个高性能服务器,那么什么是高性能服务器呢?
一般的用户所反映,能接受的打开网页的速度是在4秒以内越快越好,很有可能超过4秒你的网页可能会被别人关闭,那么高性能所指的,就是指那些响应速度很快的那些网站。而nginx就是能帮你构建出这种高性能服务器的一个平台。
二、知识剖析
1、谁选择了Nginx,
国内:百度、京东、新浪、网易、腾讯、知乎、搜狐、盛大
淘宝使用的是自己改造过的nginx,Tengine
国外:woedpress、facebook、github
nginx有什么优点
1、支持SLN
2、更加高效、更加安全
3、快速传输媒体
4、支持web加速提升移动端性能
5、防DDos攻击
6、跨平台
7、高并发
三、怎么安装
1、选择对应的系统版本
2、windows系统可以到官网网站
http://nginx.org/下载对应版本
四、实际操作
1、使用putty、Bitvise等工具连上你的服务器
2、使用root账户
3、输入命令sudo apt ingstall nginx
4、把你的网页上传到服务器上,可以通过各种方式FTP等
评论