自己写前端页面

      由于公司人员配置的原因,不得已要自己制作页面了。对于大多数后端技术员来讲,自己写前端页面是件很痛苦的事情,但是没办法,只能是硬着头皮上了,虽然之

前也有接触一些css,除了css3的一些属性,其他的基本都知道,并了解使用,可从始至终除了拼凑一些后台页面以外,就没有真正完整的做过几个前端页面。

     然后就着我所知道的那些标签跟css属性写起了页面。首先,我所知道的div+css布局:

1.    页面的左边跟右边要留白,不然分辨率一变,页面就没用了(定宽),我写的是1200px作为可视区。

2.    页面内容左右要居中,我只知道一个text-align=center,  和absolute+ margin 50%+偏移,  没有了

3.    上下居中,记得有一个vertical-align=middle,这个死活不知道怎么用,写上去没效果,还有一个就是自己摸索出来的 内层line-height +外层定高可以实现基本的标

       题 跟div上下居中,div只能是通过设置内层margin或者外层padding实现了

4.    多个div左右排布 ,float 

5.    li 左右排布  li 设置float left or right , list-style=none 去掉li前面那些点点  

6.    遮盖层,外面由两个div组成,一个做那个下面的遮盖层(带透明的,调opacity就好),还一个是要显示的内容,这里用position=absolute + z-index控制div的显示位

       置和底层表层

7.   关于position=absolute,如果次外层没有position=relative的情况下,写这个都是相对于整个窗口而言,如果有的话就是相对于次外层 而言,top left right bottom

      等控制位置就好

8.   字体颜色用 color控制,背景颜色用background-color:red(#ff0303),背景图background-image:url(路径);

9.   图片做超链接,把<img>套在<a>里面,想把<a>做到图的某个位置上的时候,就把<img>所在的容器设上position:relative,<a>设置position:absolute,调下top left ……

      就好了

10. 另外对于上下左右居中,我网上查了下有个很好的方式flex,不过这种IE9就给挂了,所以没去用

11. 关于div的高度,使用我这种布局的,padding也算里面,例如外层div 想让它高度为100px,然后设置了padding:20px ,那么它的height就只能设为80px了,不然就

      变成了120px了

12. 再分享几个东西,http://www.spritecow.com/(雪碧图)和 切图神器 pxcook(像素大厨)想再插个链接,插不上去,编辑html也不行,真正要做页面的时候肯定可以用

      得上的

小弟才疏学浅,前端大神看到不要喷,你不会了解后端技术员做前端页面的痛

原文地址:https://www.cnblogs.com/shellphen/p/7052898.html