2018-03-12某证券招聘网站项目收获总结

pc端网页适配手机:

设置body的min-width:1200px;
同时设置meta标签控制缩放比例为1,最大和最小缩放比例为1,用户可以缩放


网页中的大块banner图片:

可以用背景做也可以用img标签做
背景的优势:可以控制图片的高度
背景的劣势:在不同尺寸的屏幕中可能出现显示不完全的现象。
img的优势:在不同尺寸的屏幕中,图片都可以完全显示,只需要将图片的宽度设置为100%就可以了


img标签默认有间距,需要设置为display:inline-block;


background设置图片位置的两个参数:前一个用于控制水平方向,后一个用于控制垂直方向,不能弄反


导航栏的每一项之间如果存在间距不能单纯的只是给一个面设置margin或者padding,这样会导致布局不对称。


页面元素的嵌套规范:一般都是块级元素包含内联元素,虽然反过来效果上没什么不同,但是不符合规范。


元素宽高属性的设定:一般都是由内层元素将外层元素撑开,而不用单独设置外层元素的宽高。
块级元素一般不用设置宽度属性,因为默认就是100%的。


css reset代码:


网页结构:


网页代码的复用:

建立在多个页面结构和功能相似的基础上,为每个页面的body设置一个id用于区分不同的页面。剩下的选择器最好都用class,至于不同页面中的差异可以通过对应的id选择器进行覆盖
js中改变样式,应该通过增加和移除类的方式,而不应该只是针对某一个元素的样式进行修改。


对已有插件样式的修改:根据状态改变找到对应的类所在的文件,进行修改。


已有轮播插件可能存在一个问题:整个插件的高度是由内部img元素撑起来的,这就导致了在元素没有加载完成时,整个插件高度为零,所以可以给其设置一个高度。


ps切图要精确

除主要内容外不能将布局切进去,那样是不规范的,如果以后布局发生微小变动不容易修改。


一定要让页面的每一个组件是一个整体

不能为了达到效果随意将一个背景添加到导航条后面的元素上。


使用jquery时,注意使用链式保证代码的简洁。


网页安全区

每一张网页设计稿都会有980px的安全显示区域,在布局时要注意网页在不同分辨率的电脑上是否会错位。最好在安全区内布局。拿来一个设计稿,首先想到的因该是怎么围绕着安全宽度980进行布局


::after ,::before伪类的使用

在文字前后有图标的时候可以使用(而不是和文字编辑在同一行中)。

你可能感兴趣的:(2018-03-12某证券招聘网站项目收获总结)