浅谈前段设计师应该如何做到各司其职

以下是html及样式文件的编码,

浅谈前段设计师应该如何做到各司其职

浅谈前段设计师应该如何做到各司其职

看没看到新的东西,不仅外包了content,上面讲换行文本我们使用到了的哟。新添img标签和span标签,span这个标签,用在这种小型的,特殊的短文本是很好用的,详询:http://www.w3school.com.cn/tags/tag_span.asp 。

其次,有些属性也是新介绍的,比如:border(描边使用),值什么意思看下图,是不是很亲切?除开solid这个值,当然还有其他值,乃们慢慢去试试。

浅谈前段设计师应该如何做到各司其职

再看看图中:

浅谈前段设计师应该如何做到各司其职

红色标示的部分,其实是可以复用黑色模块的东西的,只要稍作标题的颜色和大小调整即可。还有下面文前带点的文本,这样类似列表形式的文本,ul li标签是可以直接做到的,可以自己当做作业来做,下期就把上图中的东西全部排完了。

TIPS:排版中,我们多次为了让内容对齐,使用了margin-left:24px;即文本与黑框左边的距离。实际使用中,文本通常与装它的有色框是有一定距离的,为了美观,绝不会贴边出现:

浅谈前段设计师应该如何做到各司其职

但是每一句都加左边距,倒不如直接在black加内边距,单独每一句捏,就不需要加了:

.black{ width:356px; height:160px; background-color:#000000; opacity:0.6; margin-top:408px;padding-left:24px;}

注意了,这里有很重要的一点是:padding所加的左内边距是算在整个盒子宽内的,所以,width由原来的380px变为了356px。同样要是顶部加了padding-top,高也是相应要减掉一些的。

下图是随便网络一搜就能搜到的,但其实在实际使用中,width不仅仅是content里面的宽度,应该是要加上黄色的部分,曾经我有web工程师面试的时候就有这么一道题。或者说把紫色的边也加上,因为这些区域,除了空出来,服务于content,也放不了其他的了。且在没有margin的情况下,别的div要排也是贴着border,so……你懂的……-_-|||

浅谈前段设计师应该如何做到各司其职