index.html

  1. <html xmlns="http://www.w3.org/1999/xhtml">
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  4. <title>无标题文档</title>
  5.  
  6. 	<frameset rows="132,*"  frameborder="no" border="0" framespacing="0">
  7. 		<frame src="head.html" name="head" scrolling="no"  noresize="noresize"/>
  8. 		<frameset cols="400px,*" frameborder="no" border="0" framespacing="0">
  9. 			<frame src="left.html" name="left" scrolling="no" noresize="noresize" />
  10. 			<frame src="main.html" name="main" scrolling="no" noresize="noresize" />
  11. 		</frameset>
  12. 	</frameset><noframes></noframes>
  13. </head>
  14.  
  15. <body>
  16. </body>
  17. </html>

left.html

  1. <html xmlns="http://www.w3.org/1999/xhtml">
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  4. <title>无标题文档</title>
  5.  
  6. 	<style>
  7. 		body{
  8. 			margin:0px;
  9. 			border:0px;
  10. 			font-size:12px;
  11. 		}
  12.  
  13. 		#container{
  14. 			width:136px;
  15. 			height:500px;
  16. 			background-color:#FFFFFF;
  17. 		}
  18.  
  19. 		#style1{
  20. 			margin-left:2px;
  21. 			background-image:url(image/2.jpg);
  22. 			width:136px;
  23. 			height:42px;
  24. 			color:#FFFFFF;
  25. 		}
  26.  
  27. 		#style1 div{
  28. 			padding-top:25px;
  29. 			padding-left:30px;
  30. 		}
  31.  
  32. 		.style211{
  33. 			background-image:url(image/3.jpg);
  34. 			width:130px;
  35. 			height:20px;
  36. 		}
  37. 		.style211 div{
  38. 			padding-top:3px;
  39. 			padding-left:30px;
  40. 			color:#FFFFFF;
  41. 		}
  42. 		.style211 div a{
  43. 			color:#FFFFFF;
  44. 			text-decoration:none;
  45. 		}
  46.  
  47. 		.style212{
  48. 			border:1px solid #3300FF;
  49. 			width:130px;
  50. 			height:130px;
  51. 		}
  52. 		.style212 ul{
  53. 			list-style-type:none;
  54. 			list-style-image:url(image/icon.png);
  55. 		}
  56. 		.style212 ul li{
  57. 			margin-bottom:1px;
  58. 		}
  59. 		.style212 ul li a{
  60. 			text-decoration:none;
  61. 		}
  62. 		.style212 ul li a:hover{
  63. 			font-size:16px;
  64. 		}
  65.  
  66. 	</style>
  67.  
  68. 	<script>
  69. 		function hiddenDiv(div)
  70. 		{
  71. 			div.style.display=(div.style.display=='none'?'block':'none');
  72. 		}
  73. 	</script>
  74.  
  75. </head>
  76. 	<div id="container" >
  77. 		<div id="style1">
  78. 			<div>菜单管理</div>
  79. 		</div>
  80.  
  81. 		<div id="style2">
  82. 			<div class="style21">
  83. 				<div class="style211">
  84. 					<div><a href="javascript:void" onClick="hiddenDiv(document.getElementById('1'))">业务中心</a></div>
  85. 				</div>
  86.  
  87. 				<div class="style212" id="1">
  88. 					<ul>
  89. 						<li><a href="http://www.baidu.com">短信群发</a></li>
  90. 						<li><a href="http://www.baidu.com">短信群发</a></li>
  91. 						<li><a href="http://www.baidu.com">短信群发</a></li>
  92. 						<li><a href="http://www.baidu.com">短信群发</a></li>
  93. 					</ul>
  94. 				</div>
  95. 			</div>
  96.  
  97. 			<div class="style21">
  98. 				<div class="style211">
  99. 					<div><a href="javascript:void" onClick="hiddenDiv(document.getElementById('2'))">业务中心2</a></div>
  100. 				</div>
  101.  
  102. 				<div class="style212" id="2">
  103. 					<ul>
  104. 						<li><a href="http://www.baidu.com">短信群发2</a></li>
  105. 						<li><a href="http://www.baidu.com">短信群发2</a></li>
  106. 						<li><a href="http://www.baidu.com">短信群发2</a></li>
  107. 						<li><a href="http://www.baidu.com">短信群发2</a></li>
  108. 					</ul>
  109. 				</div>
  110. 			</div>
  111. 		</div>
  112. 	</div>
  113. <body>
  114.  
  115. </body>
  116. </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. （七）solr7之Terms组件的使用

    (七)solr7之Terms组件的使用 Terms组件提供访问索引项的字段和每个词相匹配的文档数量. 这可以用于建立一个自动建议特性或任何其他的特性,而这个terms不是搜索或文档级别的水平.快速检索 ...

  2. 第五课 nodejs 路由实现并处理请求作出响应

    1创建一个http Server 文件server.js var http = require('http');var url = require('url');function start(rout ...

  3. 关于JAVA中String类型的最大长度

    前些天看到一道面试题,题目很容易理解:String的长度限制是多少? 针对这个题目,浏览了网友的回答,大概得到了3个层次的答案. 最浅的层次: 近似计算机内存大小的长度.这是作为一个程序员最浅显的回答 ...

  4. git commit -a -m "DM 1、获取aliOssSTS值，计算签名，实现视频PUT/POST2种上传方式上传；"

    git commit -a -m "DM 1.获取aliOssSTS值,计算签名,实现视频PUT/POST2种上传方式上传:" 微信小程序的视频上传

  5. Exponential Backoff

    f^x(f^y+f-m)+f-n =f^(x+y)+f^(f-m)+(f-n) <?php $exponent=0; w(80,3); function w($input,$base){ glo ...

  6. jQuery获取相邻标签的值

    <!-- Mazey's jQuery --><script language="javascript" type="text/javascript&q ...

  7. 0x02 MySQL SQL基本语句

    有了mysql这个数据库软件,就可以将程序员从对数据的管理中解脱出来,专注于对程序逻辑的编写 mysql服务端软件即mysqld帮我们管理好文件夹以及文件,前提是作为使用者的我们,需要下载mysql的 ...

  8. Mac下最好用的文本编辑器

    友情提醒:图多杀猫. 曾经在Windows下一直用gVim.能够用键盘控制一切,操作起来是又快又爽,还支持一大堆插件.想怎么玩就怎么玩.后来转Mac后,也沿袭着之前的习惯.一直在用终端的Vim.偶尔会 ...

  9. 关于服务器jdk版本和代码编译调试兼容问题

    首先代码是基于哪个版本编写和调试,有没有用到新版本jdk新的特性,类啊接口啊啥的,用到了的话,就不行了 其他都共有的是向下兼容的 最好开发环境的jdk版本和部署环境的jdk版本匹配.

  10. spring中配置缓存—ehcache

    常用的缓存工具有ehcache.memcache和redis,这里介绍spring中ehcache的配置. 1.在pom添加依赖: <!-- ehcache 相关依赖 --> <de ...