码迷,mamicode.com
首页 > Web开发 > 详细

HTML布局思路

时间:2016-07-20 21:15:49      阅读:204      评论:0      收藏:0      [点我收藏+]

标签:

1.DIV+CSS布局

(1)按照由上到下,由里到外的方式

(2)样式由CSS去改变

代码:

    <style type="text/css">
        * {
            margin:0px;/*去除页面的边距*/
            padding:0px;
        }
        body {
            width:100%;
            height:100%;
        }
        #one {
            position:relative;
            background-color:black;
            width:100%;
            height:600px;/*必须设置宽高,不然div不显示。*/
        }
        #top {
            position:relative;
            background-color:red;
            width:80%;
            height:80px;
        }
        #main1 {
            background-color:purple;
            position:relative;
            margin-left:10%;/*距离左边多远*/
            top:20%;/*距离顶端多远*/
            width:500px;
            height:100px;
            float:left;
        }
        #main2 {
            background-color:blue;
            position:relative;
            margin-left:10%;/*距离左边多远*/
            top:20%;/*距离顶端多远*/
            width:500px;
            height:100px;
            float:left;
        }
        #bottom {
            background-color:aqua;
            position:relative;
            margin-left:30%;/*距离左边多远*/
            top:50%;/*距离顶端多远*/
            width:800px;
            height:100px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div id="one"><%----%>
        <%--三个并列在外层--%>
        <div id="top">

        </div>
        <div id="main1">

        </div>
        <div id="main2">

        </div>
        <div id="bottom">

        </div>
    </form>

页面形式:

技术分享

 

HTML布局思路

标签:

原文地址:http://www.cnblogs.com/bosamvs/p/5689489.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!