CSS+DIV 布局习作
效果图：


test.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="div_test.aspx.cs" Inherits="div_test" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>无标题页</title>
    <link href="div_test.css" type="text/css" rel="Stylesheet" />
</head>
<body>
    <form id="form1" runat="server">
    <div id="background">
        <div id="top"><h1>XXXX(北京)技术公司</h1>
        </div>
        <div id="nav">
            <ul id="nav2">
                <li>栏目1</li>
                <li>栏目2</li>
                <li>栏目3</li>
                <li>栏目4</li>
                <li>栏目5</li>
                <li>栏目6</li>
                <li>栏目7</li>
                <li>栏目8</li>
                <li>栏目9</li>
            </ul>
        </div>
        <div id="middle">
            <div id="left">
                <ul id="nav_left">
                <li>栏目1</li>
                <li>栏目2</li>
                <li>栏目3</li>
                <li>栏目4</li>
                <li>栏目5</li>
                <li>栏目6</li>
                <li>栏目7</li>
                <li>栏目8</li>
                <li>栏目9</li>
            </ul>
            </div>
            
            <div class="showwindow">
                <div class="show_title_title">新闻1</div>
                <ul class="show_title">
                <li>栏目1</li>
                <li>栏目2</li>
                <li>栏目3</li>
                <li>栏目4</li>
                <li>栏目5</li>
                <li>栏目6</li>
                <li class="more">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;更多</li>
                </ul>

            </div>
            <div class="showwindow">
            <div class="show_title_title">新闻2</div>
                <ul class="show_title">
                <li>栏目1</li>
                <li>栏目2</li>
                <li>栏目3</li>
                <li>栏目4</li>
                <li>栏目5</li>
                <li>栏目6</li>
                <li class="more">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;更多</li>
                </ul>
            </div>
            <div class="showwindow">
            <div class="show_title_title">新闻3</div>
                <ul class="show_title">
                <li>栏目1</li>
                <li>栏目2</li>
                <li>栏目3</li>
                <li>栏目4</li>
                <li>栏目5</li>
                <li>栏目6</li>
                <li class="more">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;更多</li>
                </ul>
            </div>
            <div class="showwindow">
            <div class="show_title_title">新闻4</div>
                <ul class="show_title">
                <li>栏目1</li>
                <li>栏目2</li>
                <li>栏目3</li>
                <li>栏目4</li>
                <li>栏目5</li>
                <li>栏目6</li>
                <li class="more">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;更多</li>
                </ul>
            </div>
            <div class="showwindow">
            <div class="show_title_title">新闻5</div>
                <ul class="show_title">
                <li>栏目1</li>
                <li>栏目2</li>
                <li>栏目3</li>
                <li>栏目4</li>
                <li>栏目5</li>
                <li>栏目6</li>
                <li class="more">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;更多</li>
                </ul>
            </div>
            <div class="showwindow">
            <div class="show_title_title">新闻6</div>
                <ul class="show_title">
                <li>栏目1</li>
                <li>栏目2</li>
                <li>栏目3</li>
                <li>栏目4</li>
                <li>栏目5</li>
                <li>栏目6</li>
                <li class="more">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;更多</li>
                </ul>
            </div>
        </div>
        <div id="bottom"></div>
    </div>
    </form>
</body>
</html>


testcss.css
body 
{
    margin-left:0px;
    margin-top:0px;
    font-size:13px;
    text-align:center;
}

#background
{
    background-color:Gray;
    width:800px;
    
    }

#top
{
    width:100%;
    height:80px;
    background-color:Yellow;
    text-align:center;
    padding-top:30px;
    }
    
#middle
{
    width:100%;
    height:450px;
    background-color:Blue;
    }

#bottom
{
    width:100%;
    height:80px;
    background-color:Yellow;
    
    }

#left
{
    width:150px;
    height:100%;
    background-color:Gray;
    float:left;
    }

#nav
{
    height:26px;
    background-color:Silver;
    width:100%;

    }

#nav2
{
 margin-left:140px;
    height:26;

    }
    
#nav2 li
{
    width:60px;
    height:20px;
    background-color:Black;
    color:White;
    float:left;
    text-align:center;
    margin-top:3px;
    margin-left:1px;
    padding-top:2px;
    }

#nav_left
{
     width:100px;
     margin-left:20px;
     margin-top:20px;
    }

#nav_left li
{
    width:100px;
    height:20px;
    text-align:center;
    background-color:Black;
    margin-left:1px;
    margin-bottom:1px;
    color:White;
    padding-top:6px;
    }

.showwindow
{
    width:180px;
    height:200px;
    background-color:White;
    margin-left:5px;
    margin-top:15px;
    float:left;
    color:White;
    }

.show_title
{
    color:White;
    margin-left:0px;
    margin-top:0px;    
}

.show_title li
{
    background-color:Black;
    margin-bottom:1px;
    height:20px;
    text-align:left;
    padding-left:10px;
    padding-top:4px;
    }

.show_title_title
{
    background-color:Black;
    color:White;
    height:20px;
    line-height:20px;
    top:2px;
    padding-top:5px;

    }

.more
{

 padding-left:100px;
    }
posted on 2008-04-30 13:51  晃晃悠悠  阅读(237)  评论(0)    收藏  举报
博客园  ©  2004-2025
浙公网安备 33010602011771号 浙ICP备2021040463号-3