简单首页 template

最新推荐文章于 2024-10-06 20:32:41 发布

继续去踢波

最新推荐文章于 2024-10-06 20:32:41 发布

阅读量894

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/LOW584710047/article/details/39928291

版权

HTML 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

做管理系统常用到的管理页面, 常常是通过嵌入 iframe 实现的, 做个笔记方便日后直接使用自行添加 1.html、2.html、3.html这几个页面

<!doctype>

<html>
	<head>
		<title>template</title>
		<meta charset='utf-8' />
		<style>
			html, body{
				margin: 0;
				padding: 0;
			}
			body {
				color: #333;
				font-size: 13px;
				font-family: 'Segoe UI', Verdana, Helvetica, Sans-Serif;
			}
			#div_head{
				height: 70px;
				line-height: 70px;
			}
			#div_head label{
				margin-left: 20px;
			}
			#div_head_nav{
				float: right;
			}
			#div_head_nav span{
				margin-right: 20px;
			}
			#div_content, #div_tree_nav_container, #div_iframe_container, #iframe_content{
				min-height: 460px;
				_height:expression(this.scrollHeight < 460 ? '460px' : 'auto');
			}
			#div_tree_nav_container_title, #div_content table td{
				border-bottom: 1px solid #3176c1;
			}
			#div_content table, #div_content table tr, #div_content table td{
				margin: 0;
				padding: 0;
				vertical-align: top;
				border-collapse: collapse;/*单元格无间距*/
			}
			#div_footer {
				margin-top: 10px;
				margin-bottom: 20px;
				text-align: center;
			}
			#div_head img, #div_footer img {
				vertical-align: middle;
				border: 0;
			}
			/*页面容器*/
			#div_container{
				/* 设置最小宽度,兼容多浏览器,当浏览器宽度小于这个值时呈现滚动条 */
				/* 最外层div 如果不设置width 会自适应浏览器宽度 */
				/* 嵌套在其他标签里面的div width = 100%父标签width */
				min-width: 1300px;
				/* sets max-width for IE */
				_width: expression(document.body.clientWidth < 1300 ? '1300px' : 'auto');
			}
			/*树目录容器*/
			#div_tree_nav_container{
				min-width: 200px;
				_width: expression(document.body.clientWidth < 200 ? '200px' : 'auto');
			}
			#td_tree_nav_container{
				border-top: 1px solid #3176c1;
				border-right: 1px solid #3176c1;
			}
			#td_iframe_container{
				width: 100%;
			}
			/*iframe容器*/
			#div_iframe_container{
				min-width: 1100px;
				_width: expression(document.body.clientWidth < 1100 ? '1100px' : 'auto');
			}
			#div_tree_nav_container_title{
				height: 30px;
				line-height: 30px;
				font-weight: bold;
				text-align: center;
				background-color: #e7f4f8;
			}
			#div_tree_nav_container_tree{
				text-align: center;
			}
		</style>
		<script>
			window.onload = function(){
				alert('index_template');
				var my_date = new Date();
				var copyright_str = '&copy;2013 - ' + my_date.getFullYear() + ' xxxx 保留所有权利'
				var qq_str = ' 服务QQ: xxxxxxxxxx'
				+ ' <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=xxxxxxxxxx&site=qq&menu=yes">'
				+ ' <img src="http://wpa.qq.com/pa?p=2:xxxxxxxxxx:42" alt="在线咨询" title="在线咨询" /></a>'
				var phone_str = ' 服务电话: xxxx - xxxx';
				var obj = document.getElementById('div_footer');
				if (self == top) {
					obj.style.display = 'block';
					obj.innerHTML = copyright_str + qq_str + phone_str;
				}
				else {
					//在iframe中
					obj.style.display = 'none';
				}
				set_iframe('./1.html');
				function set_iframe(url){
					document.getElementById('iframe_content').src = url;
				}
				document.getElementById('a_1').onclick = function(){
					set_iframe('./1.html')
				}
				document.getElementById('a_2').onclick = function(){
					set_iframe('./2.html')
				}
				document.getElementById('a_3').onclick = function(){
					set_iframe('./3.html')
				}
			}
		</script>
    	</head>

	<body>
		<!-- 容器 -->
		<div id='div_container'>
			<!-- 头部 -->
			<div id='div_head'>
				<img src='./Logo.gif' alt='Logo' title='Logo' />
				<label>你好: xxx</label>
				<div id='div_head_nav'>
					<span><a href='./index_template.html'>首页</a></span>
					<span><a href='#'>我的应用</a></span>
					<span><a href='#'>意见反馈</a></span>
					<span><a href='#'>帮助</a></span>
					<span><a href='#'>退出</a></span>
				</div>
			</div>
			<!-- 内容页 -->
			<div id='div_content'>
				<table>
					<tr>
						<td id="td_tree_nav_container">
							<!-- 导航栏 -->
							<div id='div_tree_nav_container'>
								<!-- 标题 -->
								<div id='div_tree_nav_container_title'>导航栏</div>
								<!-- 链接 -->
								<div id='div_tree_nav_container_tree'>
									<div>
										<div><a href='#' id='a_1'>1</a></div>
										<div><a href='#' id='a_2'>2</a></div>
										<div><a href='#' id='a_3'>3</a></div>
									</div>
								</div>
							</div>
						</td>
						<td id="td_iframe_container">
							<!-- iframe页 -->
							<div id='div_iframe_container'>
								<iframe id="iframe_content" frameBorder='0' width='100%'></iframe>
							</div>
						</td>
					</tr>
				</table>
			</div>
			<!-- 脚注 -->
			<div id='div_footer'></div>
		</div>
	</body>
</html>


//根据嵌入的页面的大小自动调节父页面iframe容器大小

<pre name="code" class="html"><!doctype>

<html>
	<head>
		<title>1</title>
		<meta charset='utf-8' />
		<script>
			window.onload = function(){
				iframe_auto_fit();
			}
			function iframe_auto_fit(){
				try{
					if(window != parent){
						var obj = parent.document.getElementById('iframe_content');
						if(obj.contentWindow == window){
							var h1 = h2 = 0;
							obj.parentNode.style.height = obj.offsetHeight +'px';
							obj.style.height = '10px';
							if(document.documentElement && document.documentElement.scrollHeight){
								h1 = document.documentElement.scrollHeight;
							}
							if(document.body) {
								h2 = document.body.scrollHeight;
							}
							var h = Math.max(h1, h2);
							if(document.all) {
								h += 4;
							}
							if(window.opera) {
								h += 1;
							}
							obj.style.height = obj.parentNode.style.height = h +'px';
						}
					}
				}
				catch (ex){
					alert(ex.message);
				}
			}
		</script>
	</head>
	<body>
		1111111111<br/><br/><br/>1111111111<br/><br/><br/>1111111111<br/><br/><br/>1111111111<br/><br/><br/>1111111111<br/><br/><br/>1111111111<br/><br/><br/>1111111111<br/><br/><br/>1111111111<br/><br/><br/>1111111111<br/><br/><br/>1111111111<br/><br/><br/>1111111111<br/><br/><br/>1111111111<br/><br/><br/>1111111111<br/><br/><br/>1111111111<br/><br/><br/>1111111111<br/><br/><br/>1111111111<br/><br/><br/>1111111111<br/><br/><br/>1111111111<br/><br/><br/>1111111111<br/><br/><br/>1111111111<br/><br/><br/>1111111111<br/><br/><br/>1111111111<br/><br/><br/>1111111111<br/><br/><br/>1111111111<br/><br/><br/>1111111111<br/><br/><br/>1111111111<br/><br/><br/>1111111111<br/><br/><br/>1111111111<br/><br/><br/>1111111111<br/><br/><br/>1111111111<br/><br/><br/>1111111111<br/><br/><br/>1111111111<br/><br/><br/>1111111111<br/><br/><br/>1111111111<br/><br/><br/>1111111111<br/><br/><br/>
	<body>
</html>