zoukankan      html  css  js  c++  java
  • [网页基础]CSS+DIV布局,简单布局例子

    今天用CSS+DIV写了一个很典型的例子,小结一下供不会的网友参考,高手略过。

    写网页,一定得要CSS+DIV才好控使,CSS语句转来转去就是那几句,但要用好一定得多练习,今天写了一个简单的例子,代码很简单,用到了网上很多地方提到的"三列对齐"的技巧,这个布局很典型。

    先上图,一看就能明白:

    CSS语句如下:

        <style type ="text/css" >
        body{ margin :0;}
        .main{margin:0 auto; 400px; overflow :hidden ; background-color :#f0ffcd;padding:0;}/*主容器*/
        .top{margin:0;height:120px;background-color :#0099fd ;}/*顶*/
        .left{100px;height:auto;float:left; background-color :Green; }/*左部分*/
        .middle{ auto ;margin:0 80px 0 100px; overflow :hidden ;}/*中部*/
        .right{ margin :0; 80px; float :right ; background-color : Olive ;  }/*右部分*/
        .left,.middle,.right{margin-bottom:-10000px;padding-bottom:10000px;}/*三列一样高的技巧*/    
        .bottom{margin:0 auto; width :400px; height:120px;overflow :hidden ; background-color :#0099fd ;}/*底部*/
        .clear{ clear :both ; overflow :hidden ; }/*消除上边对下边的影响*/
        </style>

    主页<body>代码如下:

    <body>
        <form id="form1" runat="server">
        <div class ="main"><%--主容器--%>
            <div class ="top"><%--顶--%>
                <h3>页面测试</h3>
            </div>        
            <div class ="left"><%--左--%>
                <div class ="reporttitle"><h3 >这里是左边</h3></div>
            </div>
             <div class ="right" ><%--右--%>
                <h3>这里是右边</h3>
             </div>
             <div class ="middle" ><%--中--%>
                <h5>这里是中间这里是中间这里是中间这里是中间这里是中间这里是中间这里是中间这里是中间这里是中间这是中间这里是中里是中间这里是中间这里是中间这是中间这里是中间这里是中里是中间这里是中间这里是中间这是中间这里是中间这里是中里是中间这里是中间这里是中间这是中间这里是中间这里是中间这里是中间这里是中间这是中间这里是中间这里是中间这里是中间这里是中间</h5>
             </div>
             <div class ="clear"></div><%--BUG--%>        
        </div>
            <div class ="bottom"><%--页脚--%>
                <h3>这里是页脚,欢迎诉问小颗豆博客http://www.cnblogs.com/dooroo</h3>
             </div>
        </form>
    </body>

    用这个例子就可以扩展成很多的布局格式。

  • 相关阅读:
    架构师之路--视频业务介绍,离线服务架构和各种集群原理
    架构师之路--怎样聊技术天,限流技术和各类编程语言
    一条项目中常用的linux命令引发的经典算法题
    架构师之路--应用架构的选型和dubbo
    乐视开放平台技术架构-servlet和spring mvc篇
    架构师之路--从业务角度谈缓存的选型
    架构师之路--谈业务的合理架构
    IO回忆录之怎样过目不忘(BIO/NIO/AIO/Netty)
    520特篇-爱的境界
    编程十年的十种武学境界
  • 原文地址:https://www.cnblogs.com/dooroo/p/2801209.html
Copyright © 2011-2022 走看看