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
分享到:
相关推荐
前插入" onclick="appendBefore('innerDiv', document.form1.field1.value);"> 中插入" onclick="insertWithin('innerDiv', document.form1.field1.value);"> 后插入" onclick="appendAfter('innerDiv', document...
document.body.removeChild(document.getElementById("InnerDiv")); } if(document.getElementById("LoadingImg")!=null) { document.body.removeChild(document.getElementById("LoadingImg")); } } //遮罩...
jquery.longPicShow插件 -鼠标悬停在图片的顶部或者底部的时候,多出部分的图片自动滚动显示,类似QQ空间里... $(".innerdiv").longPicShow(150); }) 当然,你可以设置滚动速度,本例默认为150,数值越大,速度越快
innerDiv.addEventListener('click', function(event) { event.stopPropagation(); // 内部div的事件处理代码 }); ``` 2. **使用事件捕获阶段**: 事件处理有冒泡和捕获两个阶段。默认情况下,事件从最不具体...
<div @click="alert('inner div')">点击我</div> </div> ``` 当点击内部的 `div` 时,会先触发外部 `div` 的事件处理函数,然后再触发内部 `div` 的事件处理函数。 4. **`.self`**:只在事件源元素本身触发事件...
var innerDiv = $("div #inner"); // 选取内部div var innerParagraph = $("#inner p"); // 选取内部div中的段落 var infoParagraph = $("p.info"); // 选取具有info类的段落 ``` #### 获取或设置属性值 ```...
这里使用一个固定定位的外层div `#outerdiv` 和一个绝对定位的内层div `#innerdiv`,内层div中包含大图 `#bigimg`: ```html <div id="outerdiv" class="wrap"> <div id="innerdiv" style="position:absolute;"> ...
`.wrap_inner_l`和`.wrap_inner_m`进一步细化了内部的布局,同样利用浮动和负边距来实现内容的对齐。 总的来说,CSS+div自适应窗口宽度主要依靠`min-width`, `width`, `float`和百分比单位等属性来实现。通过合理的...
例如,`outerDiv`和`innerDiv`分别代表地图的外部容器和内部地图区域,`toggleZoomDiv`和`togglePushPinDiv`可能是用于控制地图缩放和定位的按钮。 CSS样式定义了这些`div`的布局和外观,比如`outerDiv`的高度和...
在Div+CSS实例中,"index.htm"通常是首页文件,"inner-page.html"可能是内页模板,而"contact.html"可能是联系页面。每个HTML文件都会引用CSS文件,如"innerstyle.css"和"style.css",来定义各个Div元素的样式。CSS...
var innerdiv = document.createElement("div"); // 创建一个input标签,类型为file var inputNode = document.createElement("input"); inputNode.name = "fileName"; inputNode.type = "file"; // 创建一...
- **index.htm, contact.html, inner-page.html**:这些都是HTML文件,可能包含了Div元素和其他HTML元素,利用引用的CSS文件来实现布局和设计。`index.htm`是主页,`contact.html`是联系方式页面,`inner-page.html`...
4. inner-page.html:这个文件可能代表内部页面的模板,展示如何设计和组织网站的其他非首页内容。 5. images:这是一个目录,存放了模板中使用的图像资源,如产品图片、背景图或者图标等。 总结来说,这个"红酒...
.inner-container { display: flex; justify-content: center; align-items: center; } ``` 以上方法根据具体需求和浏览器兼容性选择合适的方式。在实际应用中,通常会结合使用这些技术,以确保在不同设备和...
div_inner_html = get_inner_html(div_element) print(div_inner_html.decode()) ``` 这个例子中,`get_inner_html`函数遍历`div`元素的所有子元素,如果遇到相同类型的子元素,递归调用自身;否则,将子元素转换...
<div id="inner"> 示例图片"> </div> </div> ``` 此方法中,外部`div`设置了`position: relative`,而内部`div`设置了`position: absolute`,并通过`transform: translate(-50%, -50%)`来实现水平和垂直居中。 ...
而`inner-page.html`则代表内部页面,可以是具体的产品详情页或新闻资讯页,展示更详细的信息。 Div+CSS布局在模板中起到了关键作用。通过灵活使用div,我们可以创建多列布局,如两栏或三栏,适应不同的内容需求。...
同时,我们还定义了一个名为`outerdiv`的全屏半透明黑色背景层,以及一个`innerdiv`容器,用于显示放大的图片。`bigimg`是放大的图片元素,初始状态下其`src`为空。 接着,我们引入了jQuery库,因为我们将使用它来...
### CSS解决未知高度的DIV垂直居中 #### 知识点概述 在Web开发中,实现元素的垂直居中是一项常见的需求。对于已知高度的元素来说,这相对容易实现。但对于那些高度未知或者动态变化的元素,尤其是嵌套在另一个未知...