-
Recent Posts
Recent Comments
Archives
Categories
Tags
友情链接
Tag Archives: auto
布局一个首页
一个网站分为前后端和中间件,如果我们想要实现一个网站,前端部分肯定是不可缺少的。简单的功能可以去网上找一些模板来解决需求,但是如果想要做到完全自己得心应手不去修改别人的,最好还是自己实现前端。这里就进行简要介绍一下。 常规的情况下,我们一般把首页分为三部分,分别为 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。完整的简单示例代码是这样的。