ホームページ > 記事 > ウェブフロントエンド > div+cssの流動的なフローティングレイアウトlayout_html/css_WEB-ITnose
div+cssの流動的なフローティングレイアウトlayout_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 12:29:401598ブラウズ
FloatLayout3Cols.htm
<!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>
style.css
/* 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%;} このレイアウトの欠点は、ブラウザ ウィンドウのサイズを変更すると、コンテンツが表示されなくなることです。流れdiv は醜く見えます。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。