Monthly Archives: September 2019

一个网站分为前后端和中间件，如果我们想要实现一个网站，前端部分肯定是不可缺少的。简单的功能可以去网上找一些模板来解决需求，但是如果想要做到完全自己得心应手不去修改别人的，最好还是自己实现前端。这里就进行简要介绍一下。 常规的情况下，我们一般把首页分为三部分，分别为 header，content，和footer。 其中header中又包含logo，banner和toolbar，content中包含不同的box，footer中一般是页脚部分。又因为现在普遍要自适应的缘故，所以一般我们不会把left和right写成整个body的100%，常规的情况下是让它auto，以便后期在css中根据不同的窗口大小展示不同的样式。auto是以中心为基点进行的，不能让它左右差距过大，所以在之前一般是要让他居中。又因为我们看内容一般是从左到右进行的，所以这里给予内容部分还要让他偏左开始。因为一些元素本身是带有样式的，所以我们在实现之前一般也要对它们进行样式清0，比如img边框、字体绝对从左到右显示，a的下划线等等。所以开始的时候我们一般需要这样处理。 处理了父层元素下面就要考虑到内层，内层有哪些块之前已经说了，下面就是分别定义宽高，为了方便区分，除了临时高度外，还可以给一个临时颜色加以区分。块中又包含了不同的元素部分，不同的元素又存在不同的处理方式。比如文章li的底部我们要给它dashed，content box要给它border。在有的浏览器上，border就等于在原div的基础之上增，所以这里我们一般是正常的浏览器不用处理，不正常的一般是width给99.8%然后!important; 又因为有的浏览器对height的识别不同，所以当我们应用到margin-top如果出现了层不正常下移，一般还要给一个减去margin top的高度。又因为在有的浏览器中高度不足会补全的原因，所以还得需要对overflow进行hidden。 不同的块之间为了方便可以定义一个专门的10px的div。完整的简单示例代码是这样的。