zoukankan      html  css  js  c++  java
  • HTML 布局 PHP

    布局特点:

    顶部固定、导航菜单固定、底部永远处于页面底部。

    代码如下:

    <!DOCTYPE html>
    
    <html>
    <head>
    	<title></title>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    	<style type="text/css">
    		html, body
    		{
    			padding:0;
    			margin:0;
    			height:100%;
    			position:relative; 
    		}
    		#divHeader 
    		{
    			background-color:rgba(200,200,200,0.95);
    			*background-color:#ddd;
    			position:fixed;
    			100%;
    			height:50px;
    			top:0px;
    			outline:solid 5px rgba(200,200,200,0.6);
    		}
    		
    		#divMain
    		{
    			padding-top:60px;
    			padding-bottom:60px;
    			padding-left:100px;
    			background-color:white;
    			_padding-top:10px;
    			_padding-bottom:10px;
    		}
    		
    		#divFooter 
    		{
    			background-color:#ddd;
    			position:absolute;
    			100%;
    			height:50px;
    			bottom:0px;
    			_position:;
    		}
    		
    		#divNav
    		{
    			90px; position:fixed; left:0px; top:60px; bottom:60px; overflow:auto;
    			_position:absolute;
    		}
    		
    		#divNav a
    		{
    			display:block;
    			padding:3px;
    			margin:0 3px;
    			background-color:#eee;
    		}
    		
    		#divNav a:hover
    		{
    			background-color:#aaa;
    		}
    	</style>
    	<script type="text/javascript">
    		function addContent()
    		{
    			for (var i = 0; i < 10; i++)
    			{
    				document.getElementById('divMain').innerHTML += 'CONTENT<br />';
    			}
    		}
    
    		function resetContent()
    		{
    			document.getElementById('divMain').innerHTML = '';
    		}
    	</script>
    </head>
    <body style="background-color:#fff;">
    <div style="position:relative; min-height:100%;">
    <div id="divNav">
    <a href="#">菜单1</a>
    <a href="#">菜单1</a>
    <a href="#">菜单1</a>
    <a href="#">菜单1</a>
    <a href="#">菜单1</a>
    <a href="#">菜单1</a>
    <a href="#">菜单1</a>
    <a href="#">菜单1</a>
    <a href="#">菜单1</a>
    <a href="#">菜单1</a>
    </div>
    <div id="divHeader">
    divHeader
    <input type="button" value="add content" onclick="addContent();" />
    <input type="button" value="reset content" onclick="resetContent();" />
    </div>
    <div id="divMain">
    CONTENT<br />
    CONTENT<br />
    CONTENT<br />
    CONTENT<br />
    CONTENT<br />
    CONTENT<br />
    CONTENT<br />
    CONTENT<br />
    CONTENT<br />
    CONTENT<br />
    CONTENT<br />
    CONTENT<br />
    CONTENT<br />
    CONTENT<br />
    CONTENT<br />
    CONTENT<br />
    CONTENT<br />
    CONTENT<br />
    CONTENT<br />
    CONTENT<br />
    CONTENT<br />
    CONTENT<br />
    CONTENT<br />
    CONTENT<br />
    CONTENT<br />
    CONTENT<br />
    CONTENT<br />
    CONTENT<br />
    CONTENT<br />
    CONTENT<br />
    CONTENT<br />
    CONTENT<br />
    <div>
    haha
    </div>
    </div>
    <div id="divFooter">
    divFooter<br />
    divFooter<br />
    </div>
    </div>
    </body>
    </html>
    

      

  • 相关阅读:
    ROXFiler 2.6
    ubuntu下lxr的运用
    NTFS3G-Linux 的 NTFS 驱动步骤
    Songbird 0.2.5 Final
    ePDFView:一个轻量的 PDF 文档阅读东西
    Gmail Notifier:又一个 Gmail 邮件通知法式
    Hybrid Share-文件分享软件
    Dolphin:KDE 中的文件管理器
    文泉驿点阵宋体 0.8(嬴政)正式公布
    KDE 4 Kludge 发布宣布
  • 原文地址:https://www.cnblogs.com/zjfree/p/3021670.html
Copyright © 2011-2022 走看看