HTML布局思路

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>

页面形式：

 

posted on 2016-07-20 19:33  bosamvs  阅读(776)  评论(0)  编辑  收藏  举报

导航