zoukankan      html  css  js  c++  java
  • 17_7_24 html 好看的布局

    基本布局

    <!DOCTYPE html>
    <html>
        <head>
            <title>div样式</title>
            <meta charset = "utf-8">
            <!-- 使用CSS样式来控制div布局 -->
            <style type="text/css">
                /*定义全局的div布局*/
                #global{
                    /*设置宽度,设置百分比可以根据浏览器自适应宽度*/
                     1900px;
                    /*设置高度,950px是设置是实体高度,不能自适应的*/
                    height: 800px;
                    /*设置背景颜色,方便区分布局*/
                    background-color: silver; 
                }
                /*定义头部布局,前面的div可以不用写,#号前面默认有个id,凡事定义了id的标签,都可以用#号来表示*/
                #heading{
                     100%;
                    height: 100px;
                    background-color: #BB80F7;
                }
                #content_menu{
                     20%;
                    height: 700px;
                    background-color: #C5E9F3;
                    /*定义浮动,不定义的话,界面会乱*/
                    float: left;
                }
                #content_body{
                     80%;
                    height: 700px;
                    background-color: #F7575d;
                    float:left
                }
                #floor{
                    /*删除浮动,不然会被其他的浮动给遮住*/
                    clear: both;
                    height: 100px;
                    background-color: #8080FF
                }
            </style>
        </head>
        <body>
            <!-- 在这里控制全局的页面,定义div的id是"global" -->
            <div id="global">
                <div id="heading">我是头部的布局</div>
                <div id="content_menu">我是正文部分,我想去左边的菜单呆着</div>
                <div id="content_body">我是正文部分</div>
                <div id="floor">我在最下面,抢不到沙发,坐个地板可以吧</div>
            </div>
        </body>
    </html>
    
    
  • 相关阅读:
    比特币安全
    vxworks 的 socket, thread, 信号量模型
    libx264 安卓编译
    优秀的gdb图形化前端调试器
    gdb revert, Go to previous line in gdb
    进藏体会,高原反应
    将 ssh (security shell) 移植到 vxworks
    Pcap4J实现抓包器
    有时候有些服务类的网站就是不走心啊
    都市夜未眠
  • 原文地址:https://www.cnblogs.com/du1991/p/7227922.html
Copyright © 2011-2022 走看看