css与div的一些属性使用

最新推荐文章于 2022-08-13 16:12:58 发布

潇潇微雨up

最新推荐文章于 2022-08-13 16:12:58 发布

阅读量738

点赞数

分类专栏： JavaWeb

本文链接：https://blog.csdn.net/u012760183/article/details/45792037

版权

JavaWeb 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

<html>

<head>

<style>

body{

这里设置全局的属性;

}

#style{....}

</style>

</head>

</html>

以上为基本结构。。

使用下述方法可以将超链接当做按钮使用：

<div id="style211">
				 <div><a href="javascript:void(0)" οnclick="hiddenDiv(document.getElementById('style212'))">业务中心</div>
				</div>

ul列表：

下面是隐藏列表的JavaScript代码

   <script>
   	function hiddenDiv(div){
		div.style.display=(div.style.display=="none"?"block":"none");
	}
   </script>

完整的代码如下：

<html>
 <head>
   <style>
   	body{
	margin:0px;
	padding:0px;
	font-size:12px;
	background-color:#1873aa;
	overflow:hidden;
	}
   
   #style1{
   background-image:url(images/style1.png);
   height:21px;
   margin:0 auto;
   padding:1px;
   width:147px;}
   #style1 div{
   color:#FFFFFF;
   margin-left:40px;
   margin-top:5px;

   }
   #container{
   background-color:#FFFFFF;
   border:solid #1873AA 5px;
   height:500px;
   }
   #style211{
   background-image:url(images/style2.png);
   height:24px;
   width:146px;
   text-align:center;
   padding:0.1px;
   margin:0 auto;}
   #style2{
   height:110px;
 
   width:146px;
   margin:0 auto;}
   #style211 div{
   color:#FFFFFF;
   margin-top:5px;
   margin-left:-15px;
   }
   #style212{
       border:solid 0.5px #1873AA;}
   #style212 ul{
   margin-top:2px;
   list-style-type:none;
 
   list-style-image:url(images/left3.png);
   }
   #style212 ul li{
   margin-top:2px;}
   #style212 ul li a{
   color:#033d61;
   text-decoration:none;
   }
   #style212 ul li a:hover{
   text-decoration:underline;
   font-size:13px;}
   
   </style>
   <script>
   	function hiddenDiv(div){
		div.style.display=(div.style.display=="none"?"block":"none");
	}
   </script>
 </head>
 
 <body>
 	<div id="container">
	<div id=style0>
		<div id="style1">
		 <div>管理菜单</div>
		</div>
		<div id="style2">
			<div id="style21">
				<div id="style211">
				 <div><a href="javascript:void(0)" οnclick="hiddenDiv(document.getElementById('style212'))">业务中心</div>
				</div>
				<div id="style212">
				  <ul>
				     <li><a href="">短信群发</a></li>
					 <li><a href="">短信群发</a></li>
					 <li><a href="">短信群发</a></li>
					 <li><a href="">短信群发</a></li>
				  </ul>
				</div>
			
			</div>
		    <div id="style22"></div>
			<div id="style23"></div>
		</div>
	
	</div>
   </div>
 </body>
 

</html>

潇潇微雨up

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css与div的一些属性使用

body{这里设置全局的属性;}#style{....} function hiddenDiv(div){div.style.display=(div.style.display=="none"?"block":"none");} 以上为基本结构。。使用下述方法可以将超链接当做按钮使用：业务中心 ul列表
复制链接

扫一扫

专栏目录