div布局

最新推荐文章于 2024-11-15 17:17:38 发布
最新推荐文章于 2024-11-15 17:17:38 发布
阅读量385 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： html 文章标签： div class border input function xhtml
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/zhanghgsr/article/details/7176459
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>隐藏/显示层</title>
<style type="text/css">
<!--
body{
background: #FFF;
color: #000;
margin: 0;
padding: 0;
text-align: left;
}
div,form,ul,ol,li,span,p {
border: 0;
margin: 0;
padding: 0;
}
.clear{
clear: both;
font-size: 1px;
visibility: hidden;
}
.class_title{
margin: 0 auto;
height: 17px;
border: 1px solid #9EB1C0;
padding: 1px;
}
.class_title h2{
margin: 0;
padding: 2px 0 2px 18px;
height: 12px;
font: bold 13px ;
cursor:pointer;
letter-spacing: 2px;
text-align: left;
}
#tabclass1{
background:url();
background:#66CC66;
}
#class_cnt1{
border: solid #9EB1C0;
border-width: 0 1px 1px 1px;
height: 60px;
margin: 0 auto;
text-align: left;
display: block;
overflow:hidden;
padding-left:10px;
}
#class_cnt2{
border: solid #9EB1C0;
border-width: 0 1px 1px 1px;
height: 60px;
margin: 0 auto;
text-align: left;
display: none;
overflow:hidden;
padding-left:10px;
}
#class_cnt3{
border: solid #9EB1C0;
border-width: 0 1px 1px 1px;
height: 60px;
margin: 0 auto;
text-align: left;
display: none;
overflow:hidden;
padding-left:10px;
}
#class_cnt1 p{
    margin:0;
    padding:3px;
    line-height:150%;
}
#content_admin{
border: solid #9EB1C0;
border-width: 1px 1px 1px 1px;
width: 700px;
height: 1000px;
background: #FFF;
color: #000;
margin: 0;
}
#content_top{
width: 700px;
height: 210px;
float:left;
background: #FFF;
color: #000;
}
#content_top_left{
border: solid #9EB1C0;
border-width: 1px 1px 1px 1px;
width: 200px;
height: 200px;
float:left;
background: #FFF;
color: #000;
margin: 10px 10px 10px 10px;
}
#content_top_right{
border: solid #9EB1C0;
border-width: 1px 1px 1px 1px;
width: 460px;
height: 200px;
float:left;
background: #FFF;
color: #000;
margin-top:10px;
margin-right:10px;
}
#content_bottom{
width: 700px;
height: 400px;
float : left;
background: #FFF;
color: #000;
margin-top:10px;
}
#content_bottom_left{
border: solid #9EB1C0;
border-width: 1px 1px 1px 1px;
width: 200px;
height: 400px;
float : left;
background: #FFF;
color: #000;
margin: 10px 10px 10px 10px;
}
#content_bottom_right{
border: solid #9EB1C0;
border-width: 1px 1px 1px 1px;
width: 460px;
height: 400px;
float:left;
background: #FFF;
color: #000;
margin-top:10px;
margin-right:10px;
}
#condition1{
border: solid #9EB1C0;
border-width: 1px 1px 1px 1px;
width: 100px;
height: 160px;
float:left;
background: #FFF;
color: #000;
margin-top:10px;
margin-left:10px; 
}
#condition2{
border: solid #9EB1C0;
border-width: 1px 1px 1px 1px;
width: 100px;
height: 160px;
float:left;
background: #FFF;
color: #000;
margin-top:10px;
margin-left:10px; 
}
#condition3{
border: solid #9EB1C0;
border-width: 1px 1px 1px 1px;
width: 100px;
height: 160px;
float:left;
background: #FFF;
color: #000;
margin-top:10px;
margin-left:10px; 
}
#condition4{
border: solid #9EB1C0;
border-width: 1px 1px 1px 1px;
width: 100px;
height: 160px;
float:left;
background: #FFF;
color: #000;
margin-top:10px;
margin-left:10px; 
}




-->
</style>
<script language="javascript" type="text/javascript">
<!--
function getObject(objectId) {
     if(document.getElementById && document.getElementById(objectId)) {
// W3C DOM
return document.getElementById(objectId);
     } else if (document.all && document.all(objectId)) {
// MSIE 4 DOM
return document.all(objectId);
     } else if (document.layers && document.layers[objectId]) {
// NN 4 DOM.. note: this won't find nested layers
return document.layers[objectId];
     } else {
return false;
     }
}


function displayList(class_cnt){    
       var h = getObject(class_cnt).offsetHeight;
       var max_h = 60;
      
       var anim = function(){
     h += 20; 
     if(h >= max_h){ 
             getObject(class_cnt).style.height = "60px";
             getObject('tabclass1').style.backgroundImage="url()";    
             if(tt){window.clearInterval(tt);}
     }
     else{
                 getObject(class_cnt).style.display="block";
                 getObject(class_cnt).style.height = h + "px";
     }
     }
   
   var tt = window.setInterval(anim,0.2);
}


function hiddenList(class_cnt){
        var h = getObject(class_cnt).offsetHeight;
    var anim = function(){
      h -= 50;
     
      if(h <= 5){
              getObject(class_cnt).style.display="none";
            getObject('tabclass1').style.backgroundImage="url()"; 
            if(tt){window.clearInterval(tt);}
        }
        else{
            getObject(class_cnt).style.height = h + "px";
        }
    }
     
    var tt = window.setInterval(anim,2);
}


function showClassList(){
if (getObject('radio1').checked) {
displayList("class_cnt1");
hiddenList("class_cnt2");
hiddenList("class_cnt3");
} else if (getObject('radio2').checked) {
displayList("class_cnt2");
hiddenList("class_cnt1");
hiddenList("class_cnt3");
}else if (getObject('radio3').checked) {
displayList("class_cnt3");
hiddenList("class_cnt1");
hiddenList("class_cnt2");
}

   /*if(getObject(class_cnt).style.display == "none"){ 
displayList(class_cnt);
        
    }
    else{
      hiddenList(class_cnt);
}*/
}
-->
</script>
</head>
<body>
<div id="content_admin">
<div id="content_top">
<div id="content_top_left" >
<div id = "conditon_title">conditon_title</div>
<div id= "option">
<ul id="faceul">
<li id="tabclass1" onclick="showClassList()"><input name="condition" id="radio1" type="radio" value="1" />111111</li>
<div id="class_cnt1">
<input name="test11" type="checkbox" value="1" />test111<br />
<input name="test12" type="checkbox" value="2" />test112<br />
<input name="test13" type="checkbox" value="3" />test113<br />
</div>
<li id="tabclass1" onclick="showClassList()"><input name="condition" id="radio2" type="radio" value="2" />222222</li>
<div id="class_cnt2">
<input name="test21" type="checkbox" value="1" />test211<br />
<input name="test22" type="checkbox" value="2" />test212<br />
<input name="test23" type="checkbox" value="3" />test213<br />
</div>
<li id="tabclass1"><input name="condition" type="radio" value="3" />333333</li>
<li id="tabclass1" onclick="showClassList()"><input name="condition" id="radio3" type="radio" value="4" />444444</li>
<div id="class_cnt3">
<input name="test31" type="checkbox" value="1" />test311<br />
<input name="test32" type="checkbox" value="2" />test312<br />
<input name="test33" type="checkbox" value="3" />test313<br />
</div>
</ul>
</div>

</div>
<div id="content_top_right" >
<div id="condition1">
<div id = "conditon_title">title1</div>
<div id="test1" style="width:100px; height:140px; overflow-y:auto; overflow-x:auto">
<input name="test1" type="radio" value="1" />test111<br />
<input name="test1" type="radio" value="2" />test112<br />
<input name="test1" type="radio" value="3" />test113<br />
<input name="test1" type="radio" value="1" />test111<br />
<input name="test1" type="radio" value="2" />test112<br />
<input name="test1" type="radio" value="3" />test113<br />
<input name="test1" type="radio" value="1" />test111<br />
<input name="test1" type="radio" value="2" />test112<br />
<input name="test1" type="radio" value="3" />test113<br />
</div>
</div>
<div id="condition2">
<div id = "conditon_title">title2</div>
<div id="test1"  style="width:100px; height:140px; overflow-y:auto; overflow-x:auto">
<input name="test11" type="checkbox" value="1" />test111<br />
<input name="test12" type="checkbox" value="2" />test112<br />
<input name="test13" type="checkbox" value="3" />test113<br />
</div>
</div>
<div id="condition3">
<div id = "conditon_title">title3</div>
<div id="test1"  style="width:100px; height:140px; overflow-y:auto; overflow-x:auto">
<input name="test11" type="checkbox" value="1" />test111<br />
<input name="test12" type="checkbox" value="2" />test112<br />
<input name="test13" type="checkbox" value="3" />test113<br />
</div>
</div>
<div id="condition4">
<div id = "conditon_title">title4</div>
<div id="test1"  style="width:100px; height:140px; overflow-y:auto; overflow-x:auto">
<input name="test11" type="checkbox" value="1" />test111<br />
<input name="test12" type="checkbox" value="2" />test112<br />
<input name="test13" type="checkbox" value="3" />test113<br />
</div>
</div>
</div>
</div>
<div id="content_bottom">
<div id="content_bottom_left">
<div id = "conditon_title">title_bottom</div>
<div id="bottom_test1">
<input name="test1" type="radio" value="1" />test111<br />
<input name="test1" type="radio" value="2" />test112<br />
</div>
</div>
<div id="content_bottom_right">44444</div>
</div>


</div>


</body>
</html>
「HTML和CSS入门指南」div 详解
a451319296的博客
06-07 1495
div 标签是一个重要的标签，用于创建一个容器，可以将其中的内容作为一个整体进行布局和样式设置。在使用 div 标签时，请注意选择正确的属性和方法、语义化和嵌套，并避免兼容性问题。
div布局简单网站模板
04-02
在创建"div布局简单网站模板"时，通常会包括以下几个部分： 1. **头部（Header）**：通常包含网站的logo、导航菜单等，可以通过一个`div`元素来封装这些内容，并设置相应的样式使其居中或固定在顶部。 2. **主体...
div的定义div的用法 div的属性（最全的div学习页面）
m0_67042663的博客
08-22 8698
最全的div介绍
div盒子标签
huaz_md的博客
08-28 1381
div本身是没有任何含义的，它一般是作为划分区域的标签，是一个很单纯的标签，可塑性很强，一般用来做容器，所以称为盒子。把对应的内容放在div盒子里面（分割区域，div本身没有宽高、颜色属性）DOCTYPE html > < html lang = " en " > < head > < meta charset = " UTF-8 " > < title > 练习 < style > * {margin : 0;//清除外边距 padding : 0;
div介绍
m0_60030316的博客
02-21 373
div是在1999年ajax刚出的那个时间HTML4引入的，当然你也可以叫他图层，division。出现原因：更灵活、更通用的方法来组织和布局网页的内容，相对于上个版本HTML3。功能：无任何意义的提供结构和背景的容器标签。
CSS—DIV
qq_39162424的博客
12-05 1402
待整理  1. 集体声明：样式表中有相同的属性可以一起声明   2. 标记类型： 1. 内联：块级 2. div标记：浮动块   3. 盒子模型： 1. border：边框 2. padding：内边距 3. margin：外边距
js防止DIV布局滚动时闪动的解决方法
01-19
本文实例讲述了js防止DIV布局滚动时闪动的方法，分享给大家供大家参考。具体方法如下： 最近接触页面性能的东西，有很多细微又原始的内容，比如浏览器渲染。资料非常多，所以选一些做节译，备忘。 JavaScript多次写...
简单div布局网站模板
04-02
综上，"简单div布局网站模板"涵盖了网页设计的基本元素、CSS布局技巧以及简洁设计原则，对于初学者或快速构建网页的开发者来说，是一个很好的学习和实践资源。通过理解并运用这些知识点，可以有效提升网页的美观度和...
CSS+DIV布局赏析案例.zip_CSS+DIV布局赏析案例
09-22
本案例“CSS+DIV布局赏析案例”主要展示了如何通过这两种技术来实现高效、美观且易于理解的网页结构。下面我们将深入探讨CSS和DIV布局的相关知识点。 首先，CSS是一种样式表语言，用于描述HTML或XML（包括如SVG、...
div布局测试页面
02-09
自己写的div布局测试页面，希望与大家多多分享。谢谢
css div
04-14
NULL 博文链接：https://ssydxa219.iteye.com/blog/1685030
第九章 DIV+CSS布局
最新发布
2302_80749847的博客
11-15 1104
（division的缩写）是一个块级元素，用于组织和布局页面内容。<div>元素本身不带有具体的语义含义，它通常用作一个容器，以便通过CSS来应用样式。通过将<div>元素与其内容一起，可以创建页面的结构区块，如页眉、页脚、侧边栏、内容区域等。-- 这里是div的内容 --></div><html><head><title>Div标签示例</title></head><body>">这是一个div标签内的内容。
前端基础入门三大核心之HTML篇：深入解读div标签与HTML5的现代魅力
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
05-18 1183
HTML5不仅仅是HTML的一个版本更新，它引入了众多新特性，包括语义化标签、多媒体支持、离线存储、Canvas绘图等，极大地丰富了网页的功能和表现力。
DIV标签详细介绍
热门推荐
qq_37219446的博客
08-09 3万+
div 是 division 的简写，division 意为分割、区域、分组。比方说，当你将一系列的链接组合在一起，就形成了文档的一个 division。 可定义文档中的分区或节（division/section）。 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。如果用 id 或 class 来标记 ，那么该标签的作用会变得更加有效。...
div的简单布局
04-02 1万+
div的简单布局 一、标签定义及使用说明： 标签定义 HTML 文档中的一个分隔区块或者一个区域部分。 标签常用于组合块级元素，以便通过 CSS 来对这些元素进行格式化。 **二、提示和注释** 提示： 元素经常与 CSS 一起使用，用来布局网页。 注释：默认情况下，浏览器通常会在 元素前后放置一个换行符。然而，您可以通过使用 CSS 改变这种情况。 **三、属性** *1、全局属性* 1）accesskey 设置访问元素的键盘快捷键。 2）class 规定元素的类名（classname） 3）cont
html5 div 简单布局
我是天才的专栏
04-06 8964
html5 div 布局 body{ margin: 0px; padding: 0px; } div#container{ width: 100%; height:600px; backg
div标签
GF__marry的博客
09-06 4194
<div> div即division，即分区。一般在页面中不显示样式，需要通过id或class样式来试着样式，用于页面的分区。 width 表示div的宽 height表示div的高 padding表示div的内边距 margin表示div的外边距 margin: 0 auto; //div居中 border表示div的表框 border-color边框的颜色 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值