请选择 进入手机版 | 继续访问电脑版
开启辅助访问
帐号登录 |立即注册

HTML的DIV布局方式

 
知道<div>是定义一个块的了,那么就可以用<div>来页面布局了。可以分别将<div>定义成头部,左边菜单,中间正文,底部标签这几栏。只有修改这些定义过ID的<div>那一块的内容就会跟着被修改,是不是很炫酷?
[HTML] 纯文本查看 复制代码
<!DOCTYPE html>
<html>
    <head>
        <title>div样式</title>
        <meta charset = "utf-8">
        <!-- 使用CSS样式来控制div布局 -->
        <style type="text/css">
            /*定义全局的div布局*/
            div#global{
                /*设置宽度,设置百分比可以根据浏览器自适应宽度*/
                width: 100%;
                /*设置高度,950px是设置是实体高度,不能自适应的*/
                height: 800px;
                /*设置背景颜色,方便区分布局*/
                background-color: silver; 
            }
            /*定义头部布局,前面的div可以不用写,#号前面默认有个id,凡事定义了id的标签,都可以用#号来表示*/
            #heading{
                width: 100%;
                height: 100px;
                background-color: #BB80F7;
            }
            #content_menu{
                width: 20%;
                height: 700px;
                background-color: #C5E9F3;
                /*定义浮动,不定义的话,界面会乱*/
                float: left;
            }
            #content_body{
                width: 80%;
                height: 700px;
                background-color: #F7575d;
                float: right;
            }
            #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>

081325089069444.png
回复

使用道具 举报

0 个回复

倒序浏览

快速回复

您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

友情链接
  • 艾Q网

    提供设计文章,教程和分享聚合信息与导航工具,最新音乐,动漫,游戏资讯的网站。