由于公司人员配置的原因,不得已要自己制作页面了。对于大多数后端技术员来讲,自己写前端页面是件很痛苦的事情,但是没办法,只能是硬着头皮上了,虽然之
前也有接触一些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也不行,真正要做页面的时候肯定可以用
得上的
小弟才疏学浅,前端大神看到不要喷,你不会了解后端技术员做前端页面的痛