• 技术文章 >web前端 >html教程

    一般的 DIV + CSS 三栏式排版_html/css_WEB-ITnose

    2016-06-24 12:31:18原创1043

    一般三栏式的作法如下图所示,我的作法会有几个DIV框架:Top、Container、Left、Content、Right、Footer这几个常态会存在的DIV。


    ====================
    CSS原始码
    ====================
    body{
    margin:0; padding:0px} (如果你要置中,在Firefox要正常,就要改成margin: 0px auto;)

    #DivTop {
    width:1000px;
    } (或者设定百分比)

    #DivContainer {} (可以不用设立width,没有设定会预设为100%)

    #DivLeft {
    width:200px; float:left; }

    #DivRight {
    width:200px; float:right;}

    #DivContent {
    margin-left:200px;margin-right:200px;}

    #DivFooter {
    clear:both;}
    ====================
    HTML原始码
    ====================

    华山论剑室


    左边是圆

    右边是方

    中间方圆并济


    下踩八方

    ====================
    以上的HTML的排列是关键,中间的Container内包了左、中、右三个DIV内容,而左、中、右的原始码在本体HTML中的排列顺序依序是左、右、接下来才是Content
    这是因为我们在左Div与右Div设立了float:left(right)的浮动,因此会IE、Firefox浏?器会先决定左右的位置后,最后的中间Content再排进来,因为我们设立了margin -left:200px;margin-right:200px;,因此空出了左右的区块宽度。

    最后在DivFooter里一定要设定clear:both;的属性,是为了要清掉float的属性,好让footer可以紧接着在最下方正确呈现,若是你没有设立这个属性,嘿嘿...Footer就会给你浮上去,很不听话:P

    另外,Firefox对CSS整个场景所设定的height会影响底端的Footer,以及对于padding与margin的判断,IE与Firefox很不一样,因此设定上要小心,这点当你反覆设计较复杂的版型时就会碰到,不过知道这点比较好办了,不外乎是加加减减的算数问题。

    还有Firefox不吃text-align: center;这个CSS设定,因此传统的
    还蛮好用的啦:P,当然,可以解决的方法有很多,就看大家的创意了。

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    上一篇:网站制作采用DIV+CSS的优势_html/css_WEB-ITnose 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • CSS3 学习笔记_html/css_WEB-ITnose• 提高网页性能的九大技巧_html/css_WEB-ITnose• 【动态页面】(一)前提_html/css_WEB-ITnose• Codeforces Round #275 (Div. 2) C• 前端要给力之:代码可以有多烂?_html/css_WEB-ITnose
    1/1

    PHP中文网