1.div 设置隐藏后页面占位/不占位
可直接在页面上做,如下
也可以写到css里
用javascript (网上找来的方法)
------------------------------------------
CSS/div
1.margin外边距外间距 即div与div间距
2.padding是比较常用CSS样式,可以利用padding内边距设置上、下、左、右对象内容与四个边距距离间隔。
divcss
float浮动用法(left right) Float常跟属性值left、right、none
Float:none 不使用浮动
Float:left 靠左浮动
Float:right 靠右浮动
-------------------------------------------
div 显示与隐藏
visibility隐藏的对象还保留对象显示时所占的物理空间,display则不保留。可以保存下面的代码看看效果:
具体步骤:
代码示例:
特别提示
用visibility属性控制隐藏的对象还占据着它显示时的位置,而display则没有。
特别说明
display属性设置元素的显示方式,对应脚本特性为display,可选值为none、block和inline,各值的说明如下:
none 隐藏元素,不保留元素显示时的空间。
block块方式显示元素。
inline 以内嵌方式显示元素。
inline-block对象显示为内嵌元素,但所有子对象都显示为块元素,相邻的内嵌元素将显示在同一行,允许空格。
list-item 将块元素显示为列表对象,并可以添加项目标点。(需要IE6.0+支持)
table-header-group 将元素作为表格标题组显示,相当于tHead元素。
table-footer-group 将元素作为表格脚注组显示,相当于tFoot元素。
visibility属性设置是否显示元素,对应的脚本特性为visibility,可选值为inherit、hidden和visible,各值的说明如下:
inherit 继承父元素的visibility属性设置。
hidden 隐藏元素,但保留其所占空间。
visible 显示元素(默认值)。
可直接在页面上做,如下
<div id="hid1" style="visibility:hidden; display:none"> <div id="hid1" style="display:none">隐藏不占位 <div id="hid1" style="visibility:hidden">隐藏占位 visibility:hidden/visible 设置为隐藏/显示(始终占位) display:none/block 设置为隐藏(不占位)/显示(不占位)
也可以写到css里
用javascript (网上找来的方法)
document.all("idname").style.display="none";
------------------------------------------
CSS/div
1.margin外边距外间距 即div与div间距
2.padding是比较常用CSS样式,可以利用padding内边距设置上、下、左、右对象内容与四个边距距离间隔。
divcss
float浮动用法(left right) Float常跟属性值left、right、none
Float:none 不使用浮动
Float:left 靠左浮动
Float:right 靠右浮动
-------------------------------------------
div 显示与隐藏
visibility隐藏的对象还保留对象显示时所占的物理空间,display则不保留。可以保存下面的代码看看效果:
具体步骤:
代码示例:
<div style="border:1px solid #000;background:#eee"> <span style="width:200;height:200;visibility:hidden"></span> ←SS属性为visibility:hidden的对象 </div><br> <div style="border:1px solid #000;background:#666"> <span style="width:200;height:200;display:none"></span> ←SS属性为display:none的对象 </div>
特别提示
用visibility属性控制隐藏的对象还占据着它显示时的位置,而display则没有。
特别说明
display属性设置元素的显示方式,对应脚本特性为display,可选值为none、block和inline,各值的说明如下:
none 隐藏元素,不保留元素显示时的空间。
block块方式显示元素。
inline 以内嵌方式显示元素。
inline-block对象显示为内嵌元素,但所有子对象都显示为块元素,相邻的内嵌元素将显示在同一行,允许空格。
list-item 将块元素显示为列表对象,并可以添加项目标点。(需要IE6.0+支持)
table-header-group 将元素作为表格标题组显示,相当于tHead元素。
table-footer-group 将元素作为表格脚注组显示,相当于tFoot元素。
visibility属性设置是否显示元素,对应的脚本特性为visibility,可选值为inherit、hidden和visible,各值的说明如下:
inherit 继承父元素的visibility属性设置。
hidden 隐藏元素,但保留其所占空间。
visible 显示元素(默认值)。
发表评论
-
jquery方法扩展使用
2014-12-02 19:28 790//非负浮点数 保留一位小数---添加到jquery.vali ... -
jquery操作select值,jqery设置select值
2014-10-15 21:26 1155每一次操作select的时候,总是要出来翻一下资料,不如自己总 ... -
jquery ajax相关操作
2014-09-28 13:50 841--ajax 请求当有记录时给予提交,rows为0时提示提示框 ... -
jquery ajax和data的使用
2014-09-04 14:58 1131function print(selId){ $. ... -
Js中parseFloat()精度问题
2014-07-08 16:11 2365<!DOCTYPE HTML PUBLIC " ... -
jquery attr()属性
2014-07-04 19:07 3069在JS中设置节点的属性与属性值用到setAttribute() ... -
CSS中line-height与height的区别
2014-07-03 19:32 1516CSS中line-height与height的区别? lin ... -
freemarker为空判断详细
2014-05-27 22:08 53037freemarker里面判断为空只有??,后来查找其他文档才发 ... -
FreeMarker中if标签内的判断条件
2014-05-13 18:41 17689FreeMarker中if标签内的判断条件 FreeMark ... -
FreeMarker 对null值的处理
2014-05-05 17:40 2677以下引用官方描述: The FreeMarker temp ... -
freemarker ?datetime ? time ?date
2014-04-30 16:28 2738?date,?time和?datetime,因为你指定的格式告 ... -
div设置显示与隐藏、边框等
2014-04-30 16:24 25191.div 设置隐藏后页面占 ... -
用jquery计算前两个文本框的结果等于第三个文本框
2014-04-23 21:19 1424//本记录是结束里程数-起始里程数=运行里程数 //其它 ... -
jQuery.validate使用手册-详解
2014-04-09 14:22 1218jQuery.validate是一款非常不错的表单验证工具,简 ... -
jQuery对表单元素的取值和赋值操作
2014-04-08 22:13 1446jQuery对表单元素的取值 ... -
JQuery获取input type="text"中的值的各种方式
2014-04-08 22:09 2112<!DOCTYPE html PUBLIC " ... -
freemarker list (长度,遍历,下标,嵌套,排序)
2014-03-13 09:56 137301. freemarker获取list的size : ... -
Extjs Config和Mixins
2014-03-05 13:23 1086Extjs 4中,为类型系统引入了Config概念,Con ... -
js回调函数
2014-03-04 11:40 1099回调函数(Callback Functions ... -
extjs4.0 Ext.Array 函数方法详解
2014-03-04 10:34 1183Ext.onReady(function(){ ...
相关推荐
现在,我们需要使用JavaScript(这里我们可以使用jQuery库,因为它简洁易懂)来监听"hover-div"的`mouseover`和`mouseout`事件,以便在鼠标进入和离开时显示和隐藏"info-div"。同时,我们还需要计算"info-div"的显示...
在JavaScript中,显示和隐藏`div`元素是前端开发中常见的需求。本篇文章将汇总15种不同的方法来实现这一功能。以下是对这些方法的详细解释: 1. **`display: block/none`**: - `display: block`使元素呈现在页面...
我们可以定义背景颜色、边框、阴影、字体等属性,以达到所需的效果。例如: ```css #popup { background-color: white; border: 1px solid #ccc; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); padding: 20px; ...
在网页设计和开发中,"表格,div等,多余部分隐藏,或者省略显示"是一个常见的需求,主要是为了优化页面布局,提高用户体验。这个主题主要涉及到CSS中的`overflow`属性和相关的技巧,让我们来深入探讨一下。 首先,...
当一个 div 设置为浮动后,它会尽可能地向页面的左或右侧移动,直到它的外边缘碰到包含它的边框或者其他浮动元素的外边缘。这样,我们可以创建一个在页面两侧显示的广告栏。 例如,如果我们想要在左侧创建一个浮动...
在描述中提到的“样式可调”,意味着我们可以自定义 DIV 的外观,包括边框、背景色、字体样式等。jQuery UI 提供了一套完整的主题系统,开发者可以使用预设的主题,也可以通过 ThemeRoller 工具创建自定义主题,确保...
- hidden:隐藏边框。 - border-color:用于设置边框的颜色,可以是预定义的颜色值(如red、green、blue等)、RGB、RGBA、HEX或HSL等。 下面的示例代码展示了如何使用border属性为div元素的不同边设置不同颜色的...
- `#fd` 定义了要显示或隐藏的 `div` 的基本样式,包括宽度、高度、背景色等,并且设置了 `overflow: hidden` 和 `position: absolute` 以实现动画效果。 - `.content` 类则为内部实际内容定义了一些基本样式。 ###...
3. **JavaScript交互**:接着,我们用JavaScript监听`mouseover`和`mouseout`事件,以在鼠标悬停时显示div,并在鼠标离开时隐藏它: ```javascript document.getElementById('hover-text').addEventListener('...
如果是JavaScript,它可能包含定义Div显示和隐藏的函数,以及与AJAX交互的部分;如果是CSS,它将定义窗口的样式和动画效果;如果是ASP.NET的代码文件,如.aspx或.cs,那么它可能包含了服务器端处理逻辑和与客户端...
- `display`: 控制`div`的显示方式,如设置为`block`使其作为块级元素独占一行,`inline-block`使其按行内元素排列,或`none`隐藏`div`。 - `position`: 设置`div`的位置,如`static`(默认),`relative`,`...
### DIV_CSS图片缩略显示详解 #### 一、概述 在网页设计中,为了提高用户体验,经常需要将图片以缩略图的形式展示出来,并在用户点击时显示全尺寸的图片。这种方式不仅能够节省加载时间,还能使页面布局更加美观、...
`会显示隐藏的DIV层。当鼠标离开按钮,`$("#popupLayer").hide();`则会隐藏它。此外,我们还为弹出层添加了一个`mouseleave`事件监听器,确保当鼠标离开弹出层时,即使没有离开按钮,也会隐藏弹出层。 4. **CSS样式...
这种效果常见于文章列表、菜单栏或者按钮等元素,当用户将鼠标悬停在某个元素上时,会有一个浮动的DIV层显现,显示更详细的内容或操作选项。 首先,我们需要理解`DIV`元素在HTML中的角色。`<div>`是“Division”的...
【DIV模态窗口实现】是一种常见的前端网页设计技术,它允许在不离开当前页面的情况下,弹出一个窗口显示额外的信息或功能。模态窗口通常用于登录、注册、提示信息、表单提交等场景,能够提供良好的用户体验,因为它...
开发者可以使用CSS(层叠样式表)来控制`div`的样式,包括位置、大小、颜色、边框等,使其成为构建网页布局的重要工具。 弹出层通常通过JavaScript或jQuery库实现,例如使用`show()`和`hide()`方法来控制`div`的...
这包括设置它们的宽高、边距、填充、背景色、边框等。同时,为了实现登录按钮的交互效果,还可以应用CSS3的伪类如`:hover`和`:active`来改变鼠标悬停或点击时的样式。此外,登录表单通常需要居中显示,这可以通过...
以及一系列的子div:一部分表示选项卡(可能使用`<a>`标签或`<button>`标签),另一部分表示与选项卡关联的内容区域(通常使用`<div>`标签并设置为隐藏)。每个选项卡都有唯一的标识,以便JavaScript可以识别和操作...
5. **样式设计**:通过CSS对弹出的div进行美化,包括位置、大小、背景色、边框、阴影等,以达到美观大气的效果。例如: ```css #popup { position: fixed; /* 固定位置 */ top: 50%; left: 50%; /* 居中 */ ...
2. CSS样式:通过CSS为div设置背景、边框、透明度等样式,使其看起来像一个提示框。同时,可以设定图片的样式,使其在div内居中展示。 3. JavaScript处理:添加事件监听器来响应用户的操作,例如点击按钮或者鼠标...