• 自己写前端页面


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

    前也有接触一些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也不行,真正要做页面的时候肯定可以用

          得上的

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

  • 相关阅读:
    css之BFC和IFC
    关于移动端的适配问题
    前端构建工具gulp之实际应用
    前端构建工具gulp之基本介绍
    关于构造函数和原型prototype对象的理解
    Sublime Text 3的常用插件的安装和介绍
    Array对象的方法详情
    PHP中使用CURL实现GET和POST请求
    今天终于有空看看断点调试了
    ob_flush()和flush()的区别
  • 原文地址:https://www.cnblogs.com/shellphen/p/7052898.html
Copyright © 2020-2023  润新知