index.html

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>无标题文档</title>

	<frameset rows="132,*"  frameborder="no" border="0" framespacing="0">

		<frame src="head.html" name="head" scrolling="no"  noresize="noresize"/>

		<frameset cols="400px,*" frameborder="no" border="0" framespacing="0">

			<frame src="left.html" name="left" scrolling="no" noresize="noresize" />

			<frame src="main.html" name="main" scrolling="no" noresize="noresize" />

		</frameset>

	</frameset><noframes></noframes>

</head>

<body>

</body>

</html>

left.html

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>无标题文档</title>

	<style>

		body{

			margin:0px;

			border:0px;

			font-size:12px;

		}

		#container{

			width:136px;

			height:500px;

			background-color:#FFFFFF;

		}

		#style1{

			margin-left:2px;

			background-image:url(image/2.jpg);

			width:136px;

			height:42px;

			color:#FFFFFF;

		}

		#style1 div{

			padding-top:25px;

			padding-left:30px;

		}

		.style211{

			background-image:url(image/3.jpg);

			width:130px;

			height:20px;

		}

		.style211 div{

			padding-top:3px;

			padding-left:30px;

			color:#FFFFFF;

		}

		.style211 div a{

			color:#FFFFFF;

			text-decoration:none;

		}

		.style212{

			border:1px solid #3300FF;

			width:130px;

			height:130px;

		}

		.style212 ul{

			list-style-type:none;

			list-style-image:url(image/icon.png);

		}

		.style212 ul li{

			margin-bottom:1px;

		}

		.style212 ul li a{

			text-decoration:none;

		}

		.style212 ul li a:hover{

			font-size:16px;

		}

	</style>

	<script>

		function hiddenDiv(div)

		{

			div.style.display=(div.style.display=='none'?'block':'none');

		}

	</script>

</head>

	<div id="container" >

		<div id="style1">

			<div>菜单管理</div>

		</div>

		<div id="style2">

			<div class="style21">

				<div class="style211">

					<div><a href="javascript:void" onClick="hiddenDiv(document.getElementById('1'))">业务中心</a></div>

				</div>

				<div class="style212" id="1">

					<ul>

						<li><a href="http://www.baidu.com">短信群发</a></li>

						<li><a href="http://www.baidu.com">短信群发</a></li>

						<li><a href="http://www.baidu.com">短信群发</a></li>

						<li><a href="http://www.baidu.com">短信群发</a></li>

					</ul>

				</div>

			</div>

			<div class="style21">

				<div class="style211">

					<div><a href="javascript:void" onClick="hiddenDiv(document.getElementById('2'))">业务中心2</a></div>

				</div>

				<div class="style212" id="2">

					<ul>

						<li><a href="http://www.baidu.com">短信群发2</a></li>

						<li><a href="http://www.baidu.com">短信群发2</a></li>

						<li><a href="http://www.baidu.com">短信群发2</a></li>

						<li><a href="http://www.baidu.com">短信群发2</a></li>

					</ul>

				</div>

			</div>

		</div>

	</div>

<body>

</body>

</html>

div css 练习2的更多相关文章

  1. 前端之DIV+CSS布局

    刚开始学习javaweb,首先定位学习后端,可是随着学习的深入和项目的进行,越来越发现前端知识的欠缺,之前也随着视频看过,随着时间的流逝,具体的应用也随之忘记了. 而现在开始自己练习项目,发现前端知识 ...

  2. DIV+CSS布局中主要CSS属性介绍

    Float: Float属性是DIV+CSS布局中最基本也是最常用的属性,用于实现多列功能,我们知道<div>标签默认一行只能显示一个,而使用Float属性可以实现一行显示多个div的功能 ...

  3. div+css页面右侧底部悬浮层

    效果体验:http://hovertree.com/texiao/css/23/ 效果图: 代码如下: <!DOCTYPE html> <html> <head> ...

  4. DIV+CSS规范命名大全

    网页制作中规范使用DIV+CSS命名规则,可以改善优化功效特别是团队合作时候可以提供合作制作效率,具体DIV CSS命名规则CSS命名大全内容篇. 常用DIV+CSS命名大全集合,即CSS命名规则 D ...

  5. DIV+CSS 清除浮动方法总结

    DIV+CSS 清除浮动是页面布局中常见的问题,相信各位高手也都有自己的方法,今天在这里对常见的几种方法进行总结(PS:谈不上是原创,这里是我自己做的归纳总结,也是我自己内化的过程),希望对您能够有所 ...

  6. 十天学会<div+css>横向导航菜单和纵向导航菜单

    纵向导航菜单及二级弹出菜单 纵向导航菜单:一级菜单 <head><style type="text/css">body { font-family: Ver ...

  7. DIV+CSS布局网站基本框架

    html代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...

  8. DIV+CSS常用的网页布局代码

    单行一列以下是引用片段:body { margin: 0px; padding: 0px; text-align: center; }#content { margin-left:auto; marg ...

  9. div+css实例教程

    DIV+CSS是WEB设计标准,它是一种网页的布局方法.与传统中通过表格(table)布局定位的方式不同,它可以实现网页页面内容与表现相分离. 对于初学者来说,可能比较模糊不熟悉.毕竟,样式布局需要通 ...

  10. DIV+CSS:页脚永远保持在页面底部

    页脚永远保持在页面底部 有时候,我们用CSS创建一个高度自适应布局,如何保证页脚(footer)在内容不超过一屏的情况下始终保持在布局最下方是一个比较头疼的事.我看过一些利用绝对定位的例子,但总感觉不 ...

随机推荐

  1. js获取滚动条的位置

    页面具有 DTD,或者说指定了 DOCTYPE 时,使用 document.documentElement. 页面不具有 DTD,或者说没有指定了 DOCTYPE,时,使用 document.body ...

  2. POJ 1789 Truck History【最小生成树简单应用】

    链接: http://poj.org/problem?id=1789 http://acm.hust.edu.cn/vjudge/contest/view.action?cid=22010#probl ...

  3. redis集群报错，(error) MOVED 15495 127.0.0.1:7003

        节点会对命令请求进行分析和key的slot计算,并且会查找这个命令所要处理的键所在的槽.如果要查找的哈希槽正好就由接收到命令的节点负责处理, 那么节点就直接执行这个命令. 另一方面, 如果所查 ...

  4. JS replace()方法替换变量（可以对变量进行全文替换）

    转至:http://blog.sina.com.cn/s/blog_6552200b0102ve60.html 事情是这样的: 我要用 JS 替换一个多行文本的关键字 正常,没有变量的时候应该是这样: ...

  5. Js用户引导插件bootstrap-tour

    1.demo直接贴上来了,有什么不懂的,直接去官网上看,地址:http://bootstraptour.com/. 2.这个bootstrap-tour插件的版本是v0.12.0,复制下来代码,引入库 ...

  6. 005-MYSQL数据库设计原则

    1.核心原则 不在数据库做运算; cpu计算务必移至业务层; 控制列数量(字段少而精,字段数建议在20以内); 平衡范式与冗余(效率优先:往往牺牲范式) 拒绝3B(拒绝大sql语句:big sql.拒 ...

  7. Java基础—序列化与反序列化（转载）

    转载自: Java序列化与反序列化 1.Java序列化与反序列化 Java序列化是指把Java对象转换为字节序列的过程:而Java反序列化是指把字节序列恢复为Java对象的过程. 2.为什么需要序列化 ...

  8. Shell字符串操作

    @1:子串削除 ${string#substring} 从$string 的开头位置截掉最短匹配的$substring. ${string##substring} 从$string 的开头位置截掉最长 ...

  9. LeetCode：搜索旋转排序数组【33】

    LeetCode:搜索旋转排序数组[33] 题目描述 假设按照升序排序的数组在预先未知的某个点上进行了旋转. ( 例如,数组 [0,1,2,4,5,6,7] 可能变为 [4,5,6,7,0,1,2]  ...

  10. echarts3.8.4实现城市空气质量(结合百度地图bmap.js，小航哥)

    (小航哥自己实现的)为了事先地图效果,需要以下准备: 用百度地图作为地图,需要 1.bmap.min.js(下载地址https://github.com/ecomfe/echarts ,GitHub上 ...