`
zengshaotao
  • 浏览: 796322 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

position div

 
阅读更多

代码：


效果：



改变里面的position属性值：




改变图一中的left=30px：




代码：
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.6.1.js"></script>
<link rel="stylesheet" href="../css/pagestyle.css" type="text/css" />
<style type="text/css">
.td1{background-color:Silver;}
</style>
<script language="javascript">


//页面初始化时处理相关信息
$(function(){

//改变网页背景颜色
$("#changeBgColor").change(function(){
var bgColor = $(this).val();
$("body").css("background-color",bgColor);
});

      $("#tb tr").mouseover(function(){
           $(this).addClass("td1"); 
      });
      $("#tb tr").mouseout(function(){
           $(this).removeClass("td1"); 
      });
     
});

function ggg(){
$("#dddd").show("1000");
}
</script>
<title>Insert title here</title>
</head>
<body id="ddd" bgcolor="green" leftMargin=100 topMargin=20 marginheight="0" marginwidth="0">
<div style="">
<div id="dddd" style="left:30px;position:absolute;width:200px;height:100px;z-index:99;display:none;background-color:blue"></div>
<form id="form1">
<input type="text" value="test"><br><br>
改变网页背景:
<select id="changeBgColor">
<option value="green" selected>绿色</option>
<option value="blue">蓝色</option>
<option value="red">红色</option>
<option value="yellow">黄色</option>
</select>
</form>
<table id="tb">
    <tr>
     <th>姓名</th>
     <th>年龄</th>
     <th>籍贯</th>
     <th>手机</th>
    </tr>
    <tr>
     <td>alp</td>
     <td>zweizig</td>
     <td>上海</td>
     <td>13088888888</td>
    </tr>
<tr>
     <td>alp</td>
     <td>zweizig</td>
     <td>上海</td>
     <td>13088888888</td>
    </tr>
</table>
<input type="text" value="xiamian "><br><br>
   </form>
</div>
</body>
</html>
  • 大小: 63.3 KB
  • 大小: 33.2 KB
  • 大小: 21.9 KB
  • 大小: 20 KB
分享到：
| 脚本收集
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    div的position属性

    ### div的position属性详解 #### 一、流动模型（块元素与内联元素） 流动模型是CSS布局的基础，指的是在没有特别指定定位方式的情况下，元素按照文档流的自然顺序排列。 - **块元素**：默认情况下，每个块元素...

    div弹出层position属性小解

    ### div弹出层position属性小解 在网页布局与设计中，`position` 属性是 CSS 中一个非常重要的属性，它决定了元素如何在页面中定位。对于创建弹出层、模态框等交互式组件来说，正确理解并使用 `position` 属性至关...

    div+js分页效果

    $('#div'+currentPosition).hide(); currentPosition++; $('#div'+currentPosition).show(); }else{ $('#div'+currentPosition).hide(); currentPosition = 0; $('#div'+currentPosition).show(); ...

    DIV+CSS DIV居中布局

    本篇文章将深入探讨如何利用`DIV+CSS`实现`DIV`的居中布局。 首先，我们要理解`&lt;div&gt;`元素。`&lt;div&gt;`是“division”的缩写，代表一个区域或区块，在HTML中用于组合其他元素，是构建网页布局的基础。通过设置`&lt;div&gt;`...

    delphi7使用mediaplayer播放mp3例子

    TrackBar1.Position := MediaPlayer1.Position div 1000; Mp3sizeSta := MediaPlayer1.Position div 1000; minutes := Trunc(Mp3sizeSta / 60); Second := Mp3sizeSta mod 60; Label1.Caption := IntToStr...

    实现百度效果 自动显示数据库中的数据

    function positionDiv() { var DivRef= document.getElementById("search_suggest"); DivRef.style.position = "absolute"; var t=document.getElementById("ba"); DivRef.style.top= getAbsolutePos(t).y+20...

    DIV遮罩层 div div

    通常，这个`&lt;div&gt;`元素被设置为绝对定位（`position: absolute`），并覆盖在整个页面之上，其宽度和高度根据页面的实际大小动态调整，以确保遮罩层可以完全覆盖页面的所有内容。遮罩层的背景色一般设为半透明，以...

    CSS的position属性在DIV层中的应用

    而.banner.content作为子DIV，设置了position:absolute，并且left、right、bottom属性都设置为0，表示子DIV将在父DIV的底部水平居中对齐，并且填充整个父DIV的宽度。 此外，.banner.content还设置了文本的样式，...

    鼠标移动到div上显示制定信息或者div（自适应显示位置）

    position: absolute; /* 使div相对于文档定位 */ background-color: white; padding: 10px; border: 1px solid #ccc; display: none; /* 默认隐藏 */ } ``` 现在，我们需要使用JavaScript（这里我们可以使用...

    div悬浮在canvas上

    在本例中，我们可能需要将div的`position`设置为`absolute`，然后通过`z-index`属性设定它的层级，确保它位于canvas之上。 ```css .floating-div { position: absolute; z-index: 1; /* 比canvas的z-index值大 ...

    DIV弹出层+定位

    在`DIV定位`方面，`position:absolute`属性使得`DIV`可以相对于其最近的非静态定位祖先元素进行定位，如果没有这样的祖先，它将相对于整个文档定位。通过设置`top`和`left`属性，我们可以精确地控制弹出层在页面上的...

    css中position:fixed实现div居中上下左右居中

    本篇文章主要探讨了如何利用CSS属性position:fixed来实现DIV的绝对居中。 首先，了解position:fixed属性的作用是关键。position:fixed表示元素相对于浏览器窗口进行定位，这意味着无论页面如何滚动，元素都将保持在...

    拖动多个div

    this.style.position = 'absolute'; // 设置div为绝对定位 this.offsetStartX = event.clientX - this.offsetLeft; // 记录初始偏移量 this.offsetStartY = event.clientY - this.offsetTop; }); // 添加...

    div滚动条 带滚动条的div div滚动条样式

    * `position`：设置 DIV 元素的定位方式，可以是 `absolute` 或 `relative`。 * `top` 和 `left`：设置 DIV 元素的坐标位置。 * `height` 和 `width`：设置 DIV 元素的高和宽。 * `overflow-x` 和 `overflow-y`：...

    js控制div全屏

    position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: white; /* 根据需要自定义背景颜色 */ } ``` 6. **浏览器兼容性处理**：全屏API在不同浏览器中的实现可能会有所不同，...

    div模式窗口-div模式窗口

    - `position`: 设置`div`的位置，如`static`(默认)，`relative`，`absolute`，或`fixed`。对于创建浮动窗口或固定定位的元素，`absolute`和`fixed`尤为常用。 - `width`和`height`: 定义`div`的尺寸。 - `margin`...

    html div没有被撑开的原因及解决办法

    如果`div`内部的子元素被设置了`position: absolute`，它会从正常文档流中移除，不再影响父元素的尺寸。因此，父`div`可能不会自动扩展以适应它。 **解决方案：** 1. 如果可能，避免使用绝对定位，或者尝试使用相对...

    Jquery弹出div层窗口以及div屏幕居中,背景滤镜效果,div拖拽效果

    要使div在屏幕中居中，可以结合CSS的`position`属性和`margin`属性。对于绝对定位的元素，可以使用`margin: auto`来实现水平居中。例如： ```css .centered-div { position: absolute; top: 50%; left: 50%; ...

    DIV的Style常用属性

    Position 属性用于设置 DIV 的定位方式，常用的值有 relative、absolute 和 fixed。 例如：&lt;div style="position:relative;top:10px;left:10px;width:140px;height:140px;background-color:White;"&gt;&lt;/div&gt; ...

    javascript浮动div，可拖拽div,遮罩层(div和iframe实现)

    1. **CSS 定位**：使用 `position: absolute` 或 `position: fixed` 来定义 Div 的位置。 - `position: absolute;` 表示 Div 相对于最近的非静态定位祖先元素定位。 - `position: fixed;` 表示 Div 相对于浏览器...

Magicbox
Global site tag (gtag.js) - Google Analytics