div+css 布局

来源：互联网发布：jenkins 插件源码下载编辑：程序博客网时间：2024/05/20 15:59

div+css

１．新建一个页面.aspx文件，代码如下：

<body>
    <form id="form1" runat="server">
        <div>
            <img src="tu.png" alt="效果图" />
        </div>
        
        <div id="header">
        <span id="date">2008.04.15</span>
            <p>
                <span class="t">页头</span><br />
                页面居中时宽度为700px<br />
                页面自适应时宽度自适应<br />
                高度固定为100px<br />
                色彩代码为:#0099CC
            </p>
        </div>
        
        
        <div id="middle1">
            <p>
                <span class="t">栏目1</span><br />
                宽度固定120px<br />
                高度固定为300px<br />
                色彩代码为:#FF9900
            </p>
            <a class="more" href="http://blog.csdn.net/naturelife" target="_blank">更多>></a>
        </div>
        <div id="middle234">
            <div id="middle2">
                【栏目2】</div>
            <div id="middle3">
                【栏目3】</div>
            <div id="middle4">
                【栏目4】</div>
        </div>
        <div id="middle5">
            【栏目5】</div>
        
        
        <div id="footer">
            <p>
                <span class="t">页脚</span><br />
                页面居中时宽度为700px<br />
                页面自适应时宽度自适应<br />
                高度固定为100px<br />
                色彩代码为:#009966
            </p>
        </div>
        
    </form>
</body>

２．新建一个．css文件　代码如下：

body
{
width: auto;

}

#header
{
width: 980px;
height: 100px;
background: #0099cc;
}

#middle1
{
float: left; /*向左浮动*/
width: 220px; /*宽度*/
height: 320px;
text-align: center; /*文本居中*/
background: #ff9900;
margin: 1px 1px 1px 0px;
}

#middle234
{
width: 520px;
height: 320px;
float: left; /*向左浮动*/
margin: 1px 0px 0px 0px; /*外边距*/
text-align: right; /*文本居右*/
background: red;

}

#middle5
{
float: left; /*向右浮动*/
margin: 1px 0px 1px 1px;
width: 238px; /*宽度*/
height: 320px;
background: #3399ff;

}

#footer
{
width: 980px;
height: 100px;
background: #009966;
}

大家可以试下，刚开始学习，有待提高．