`

inner DIV

阅读更多
inner DIV....



---------------------------------
HTML:
<?xml version="1.0" encoding="iso-8859-1"?>
<!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>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body {text-align:center}
#outer {
	width:60%;
	background:#ffffcc;
	margin:auto;
	text-align:center;
}
.inner {
	width:100px;
	height:100px;
	margin:5px; 
	border:1px solid #000;
}
* html .inner {display:inline}/* for ie*/
html>body #outer {display:table}/*for mozilla */
html>body .inner {display:table;float:left}/*for mozilla */
@media all and (min-width: 0px){/* opera 7 styles */
html>body .inner {display:inline-block;float:none;}
}

</style>
</head>
<body>
<!-- force quirks mode by using the xml pro-logue -->
<div id="outer"> 
  <div class="inner">test</div>
  <div class="inner">2</div>
  <div class="inner">3</div>
  <div class="inner">4</div>
  <div class="inner">5</div>
  <div class="inner">6</div>
  <div class="inner">7</div>
  <div class="inner">8</div>
  <div class="inner">9</div>
  <div class="inner">10</div>
  <div class="inner">11</div>
  <div class="inner">12</div>
  <div class="inner">13</div>
  <br style="clear:both" />
</div>
</body>
</html>
<script language="Javascript"> 
var now = new Date(); 
document.write("<img src='http://counter.yesky.com/counter.shtml?CID=54197&AID=-1&refer="+escape(document.referrer)+"&rand="+ now.getTime()  + "&cur="+escape(document.URL)+"' border='0' alt='' width='0' height='0'>"); 
</script> 
<noscript> 
<img src="http://counter.yesky.com/counter.shtml?CID=54197&AID=-1&refer=noscriptcounter&cur=noscriptcounter" border='0' width='0' height='0'/> 
</noscript>
  • 大小: 23.5 KB
分享到:
评论

相关推荐

    页面内js结点插入与追加(可更改为ajax模式)

    前插入" onclick="appendBefore('innerDiv', document.form1.field1.value);"&gt; 中插入" onclick="insertWithin('innerDiv', document.form1.field1.value);"&gt; 后插入" onclick="appendAfter('innerDiv', document...

    Web遮罩層的實現方式

    document.body.removeChild(document.getElementById("InnerDiv")); } if(document.getElementById("LoadingImg")!=null) { document.body.removeChild(document.getElementById("LoadingImg")); } } //遮罩...

    jquery.longPicShow插件 - js判断鼠标悬停位置控制图片

    jquery.longPicShow插件 -鼠标悬停在图片的顶部或者底部的时候,多出部分的图片自动滚动显示,类似QQ空间里... $(".innerdiv").longPicShow(150);  }) 当然,你可以设置滚动速度,本例默认为150,数值越大,速度越快

    事件冒泡解决方案

    innerDiv.addEventListener('click', function(event) { event.stopPropagation(); // 内部div的事件处理代码 }); ``` 2. **使用事件捕获阶段**: 事件处理有冒泡和捕获两个阶段。默认情况下,事件从最不具体...

    vue学习文档

    &lt;div @click="alert('inner div')"&gt;点击我&lt;/div&gt; &lt;/div&gt; ``` 当点击内部的 `div` 时,会先触发外部 `div` 的事件处理函数,然后再触发内部 `div` 的事件处理函数。 4. **`.self`**:只在事件源元素本身触发事件...

    query常用方法总结

    var innerDiv = $("div #inner"); // 选取内部div var innerParagraph = $("#inner p"); // 选取内部div中的段落 var infoParagraph = $("p.info"); // 选取具有info类的段落 ``` #### 获取或设置属性值 ```...

    jQuery实现的点击图片居中放大缩小功能示例

    这里使用一个固定定位的外层div `#outerdiv` 和一个绝对定位的内层div `#innerdiv`,内层div中包含大图 `#bigimg`: ```html &lt;div id="outerdiv" class="wrap"&gt; &lt;div id="innerdiv" style="position:absolute;"&gt; ...

    css+div自适应窗口宽度

    `.wrap_inner_l`和`.wrap_inner_m`进一步细化了内部的布局,同样利用浮动和负边距来实现内容的对齐。 总的来说,CSS+div自适应窗口宽度主要依靠`min-width`, `width`, `float`和百分比单位等属性来实现。通过合理的...

    Maps Javascript

    例如,`outerDiv`和`innerDiv`分别代表地图的外部容器和内部地图区域,`toggleZoomDiv`和`togglePushPinDiv`可能是用于控制地图缩放和定位的按钮。 CSS样式定义了这些`div`的布局和外观,比如`outerDiv`的高度和...

    简单设计DIV+CSS模板

    在Div+CSS实例中,"index.htm"通常是首页文件,"inner-page.html"可能是内页模板,而"contact.html"可能是联系页面。每个HTML文件都会引用CSS文件,如"innerstyle.css"和"style.css",来定义各个Div元素的样式。CSS...

    js实现动态添加上传文件页面

    var innerdiv = document.createElement("div"); // 创建一个input标签,类型为file var inputNode = document.createElement("input"); inputNode.name = "fileName"; inputNode.type = "file"; // 创建一...

    很有创造性的web2.0DIV模板

    - **index.htm, contact.html, inner-page.html**:这些都是HTML文件,可能包含了Div元素和其他HTML元素,利用引用的CSS文件来实现布局和设计。`index.htm`是主页,`contact.html`是联系方式页面,`inner-page.html`...

    红酒宣传DIV+CSS模板

    4. inner-page.html:这个文件可能代表内部页面的模板,展示如何设计和组织网站的其他非首页内容。 5. images:这是一个目录,存放了模板中使用的图像资源,如产品图片、背景图或者图标等。 总结来说,这个"红酒...

    DIV完全居中

    .inner-container { display: flex; justify-content: center; align-items: center; } ``` 以上方法根据具体需求和浏览器兼容性选择合适的方式。在实际应用中,通常会结合使用这些技术,以确保在不同设备和...

    python的xpath获取div标签内html内容,实现innerhtml功能的方法

    div_inner_html = get_inner_html(div_element) print(div_inner_html.decode()) ``` 这个例子中,`get_inner_html`函数遍历`div`元素的所有子元素,如果遇到相同类型的子元素,递归调用自身;否则,将子元素转换...

    图片居中到div中显示

    &lt;div id="inner"&gt; 示例图片"&gt; &lt;/div&gt; &lt;/div&gt; ``` 此方法中,外部`div`设置了`position: relative`,而内部`div`设置了`position: absolute`,并通过`transform: translate(-50%, -50%)`来实现水平和垂直居中。 ...

    进出口贸易公司DIV模板

    而`inner-page.html`则代表内部页面,可以是具体的产品详情页或新闻资讯页,展示更详细的信息。 Div+CSS布局在模板中起到了关键作用。通过灵活使用div,我们可以创建多列布局,如两栏或三栏,适应不同的内容需求。...

    js实现点击图片在屏幕中间弹出放大效果

    同时,我们还定义了一个名为`outerdiv`的全屏半透明黑色背景层,以及一个`innerdiv`容器,用于显示放大的图片。`bigimg`是放大的图片元素,初始状态下其`src`为空。 接着,我们引入了jQuery库,因为我们将使用它来...

    CSS解决未知高度的DIV垂直居中

    ### CSS解决未知高度的DIV垂直居中 #### 知识点概述 在Web开发中,实现元素的垂直居中是一项常见的需求。对于已知高度的元素来说,这相对容易实现。但对于那些高度未知或者动态变化的元素,尤其是嵌套在另一个未知...

Global site tag (gtag.js) - Google Analytics