div+css格局之流体浮动布局-HTML教程-爱易网页

div+css格局之流体浮动布局

日期：2014-05-17　浏览次数：21121 次

div+css布局之流体浮动布局


?<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>流体浮动布局2</title>
<link rel="stylesheet" type="text/css" href="Layer2.css" />
</head>

<body>
    <div id="header">
        <h1>这里是标题</h1>
    </div>
    <div id="nav">
        <ul>
            <li>新闻</li>
            <li>杂志</li>
            <li>游戏</li>
            <li>音乐</li>
            <li>电影</li>
            <li>娱乐</li>
        </ul>
    </div>
    <div id="main">
        <p>对于ASP.NET而言，开发人员不可避免的会将ASP.NET与ASP进行比较，因为ASP.NET可以算作是ASP的下一个版本。但是ASP.NET却与ASP完全不同，可以说微软重新将ASP进行编写和组织形成ASP.NET技术。 </p>
        <p>在传统的ASP开发中，开发人员可以在页面中进行ASP代码的编写，当服务器请求相应的页面时，服务器会解析ASP代码进行页面呈现。ASP具有轻巧等特点，但是随着互联网的发展，ASP也越来越多的呈现出其不足之处，这些不足之处包括ASP代码无法和HTML代码很好的分离，这就造成了页面代码混乱、维护性低等情况。当ASP中出现错误或者需要进行功能的添加，就需要多大部分的页面进行更改，这样就降低了ASP程序的复用性和维护性。</p>
        <p>对于ASP.NET而言，开发人员不可避免的会将ASP.NET与ASP进行比较，因为ASP.NET可以算作是ASP的下一个版本。但是ASP.NET却与ASP完全不同，可以说微软重新将ASP进行编写和组织形成ASP.NET技术。 </p>
        <p>在传统的ASP开发中，开发人员可以在页面中进行ASP代码的编写，当服务器请求相应的页面时，服务器会解析ASP代码进行页面呈现。ASP具有轻巧等特点，但是随着互联网的发展，ASP也越来越多的呈现出其不足之处，这些不足之处包括ASP代码无法和HTML代码很好的分离，这就造成了页面代码混乱、维护性低等情况。当ASP中出现错误或者需要进行功能的添加，就需要多大部分的页面进行更改，这样就降低了ASP程序的复用性和维护性。 </p>
        <p>相对于ASP而言，ASP.NET具有更加完善的开发工具。在传统的ASP开发中，可以使用Dreamware、FrontPage等工具进行页面开发。当时使用Dreamware、FrontPage等工具进行ASP应用程序开发时，其效率并不能提升，并且这些工具对ASP应用程序的开发和运行也不会带来性能提升。 </p>
        <p>相比之下，对于ASP.NET应用程序而言，微软开发了Visual Studio开发环境提供给开发人员进行高效的开发，开发人员还能够使用现有的ASP.NET控件进行高效的应用程序开发，这些控件包括日历控件、分页控件、数据源控件和数据绑定控件。开发人员能够在Visual Studio开发环境中拖动相应的控件到页面中实现复杂的应用程序编写。 </p>
    </div>
    <div id="navr">
        <ul>
            <li>新闻</li>
            <li>杂志</li>
            <li>游戏</li>
            <li>音乐</li>
            <li>电影</li>
            <li>娱乐</li>
        </ul>
    </div>
    <div id="footer">
        <p>版权所有，翻版必究</p>
    </div>
</body>
</html>
?

/* CSS Document */
*{
    margin:0;
    padding:0;
}

body{
    margin:10px;
}

#header{
    border:1px solid black;
    height:80px;
    line-height:80px;
    margin-bottom:10px;
    background:gray;
}

#header h1{
    font-size:20px;
    text-align:center;
    height:100%;
}

#nav{
    border:1px solid black;
    height:400px;
    width:20%;
    float:left;
    margin-bottom:10px;
    background:blue;
}

#nav ul{
    text-align:center;
    list-style-type:none;
}

#main{
    border:1px solid black;
    height:400px;
    width:58%;
    float:left;
    margin-bottom:10px;
    margin-left:0.8%;
}

#main p{
    font-size:14px;
    word-spacing:2px;
    line-height:150%;
    text-indent:30px;
}

#navr{
    border:1px solid black;
    height:400px;
    width:20%;
    float:right;
    margin-bottom:10px;
    background:blue;
}

#navr ul{
    text-align:center;
    list-style-type:none;
}

#footer{
    border:1px solid black;
    height:80px;
    clear:both;
    background:silver;
    line-height:80px;
}

#footer p{
    text-align:center;
    height:100%;
}

效果如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>流体定位布局2</title>
<link rel="stylesheet" type="text/css" href="style2.css">
</head>

<body>

    <d

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

div+css格局之流体浮动布局

相关资料更多>

推荐阅读更多>