您当前的位置:365bet > HTML5 / CSS3 >

于是我们开始动手吧

发布时间:2018-11-28 19:58编辑:admin1阅读(

      周一离职并且入职了,于是开始了做新项目,那天我问了下前端大哥,我们做的项目需要兼容哪些浏览器,他说需要兼容IE9以上与chrome,ff,我一下就诡异的笑了。。。。

      这不是HTML5与CSS3项目的温床吗?这次真的捡到宝了,再也不用担心IE678的问题了,可以肆意的使用最新的技术了。

      紧接着问题也来了,我现在需要切图了,对于我这种前端,css一直是短板,更何况切图!!!说实话我还真没有完整的切一张图来试试,于是今天让我们来试试吧!!!

      今天我们要做的是这张图,我在威客上面找了好久,终于找到一张较合适的图呀,今天我们就来无偿奉献下吧,有图有真相,先上图吧!!

      这里也对自己提出要求,希望做出来的页面与设计图完全一致,365bet体育但估计有点玄,希望大致一致吧,于是我们开始动手吧!

      第三步,我们看看会用到哪些小图标,先全部给抠下来吧,暂时只弄了这么多需要再弄吧:

      PS:背景我本来想用渐变的,365bet体育但是米有成功。。。。导航上的分割符就用了渐变啦。。。

      我们看到主体部分还是很长的,主体是个标准的两列布局,我们还是使用float算了。。。于是就这个样子啦:

      光是左边还是不好,我们在右边也来一个呗,我们注意到左边有个比较通用的盒子模型,于是我们上手吧: