<!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=utf-8">
<link href="css/css.css" rel="stylesheet" type="text/css">
<style type="text/css">
body {
font-family: sans-serif;
font-size: 14px;
}
/**{*/
/*border:1px solid black;*/
/*}*/
//布局代码
#container {
width: 911px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
#head {
text-align: left;
}
#row0 {
padding-top:0;
}
#grid1_0 {
float: left;
width: 700px;
height: inherit;
}
#grid1_1 {
width: 204px;
float: right;
height: inherit;
}
#grid4_0 {
float: left;
width: 449px;
height: inherit;
}
#grid4_1 {
float: right;
width: 450px;
height: inherit;
}
#grid6_0 {
float: left;
width: 294px;
height: inherit;
}
#grid6_1 {
float: right;
width: 608px;
height: inherit;
}
#foot{
padding-bottom:8px;
}
.row {
float:left;
width:100%;
padding-top:8px;
text-align: left;
}
</style>
<script type="text/javascript">
//将某个div放置在divMap中指定的区域
function preparedDiv(divId)
{
if(typeof disableDivs != "undefined" && disableDivs === true)
{
return;
}
if(typeof divMap[divId] == "undefined" || divMap[divId] == null)
{
alert("在divMap中未找到快"+divId+"的定义!");
return false;
}
var targetDiv = document.getElementById(divMap[divId]);
var srcDiv = document.getElementById(divId);
targetDiv.innerHTML = srcDiv.innerHTML;
}
// var disableDivs = true;
var divMap = {headContent:"head",
search:"row0",
news:"grid1_0",newsAd:"grid1_1",
ad0:"row3_ad0",
stockBid:"grid4_0",projectBid:"grid4_1",
ad1:"row5_ad1",
regionInfo:"grid6_0",
materialInfo:"grid6_1",
ad2:"row7_ad2",
company:"row8",
ad3:"row9_ad3",
knowledge:"row10",
footContent:"foot"
};
</script>
</head>
<body>
<div id="container">
<div id="head">
head loading...
</div>
<div id="row0" class="row">
row0 loading...
</div>
<div id="row1" class="row">
<div id="grid1_0">
grid1_0 loading...
</div>
<div id="grid1_1">
grid1_1 loding...
</div>
</div>
<div id="row3_ad0" class="row">
row3_ad0 loading...
</div>
<div id="row4" class="row">
<div id="grid4_0">grid4_0 loading...</div>
<div id="grid4_1">grid4_1 load...</div>
</div>
<div id="row5_ad1" class="rowAd row">
row5_ad1 loading...
</div>
<div id="row6" class="row">
<div id="grid6_0">grid6_0 loading...</div>
<div id="grid6_1">grid6_1 loading...</div>
</div>
<div id="row7_ad2" class="row">
row7_ad2 loading...
</div>
<div id="row8" class="row">
row8 loading...
</div>
<div id="row9_ad3" class="row">
row9_ad3 loading...
</div>
<div id="row10" class="row">
row10 loading...
</div>
<div id="foot" class="row">foot loading...</div>
</div>
//velocity include 这个页面所有块的内容
#parse("/website/indexDivs.htm")
//indexDivs.htm里面的一块代码
<div id="ad2" style="display:none">
</div>
<script type="text/javascript">
preparedDiv("ad2");
</script>
</body>
</html>
分享到:
相关推荐
寻找父元素的第一个子元素,在所有的子元素中排序 :last-child 寻找父元素的最后一个子元素,在所有的子元素中排序 :nth-child 寻找父元素中的指定位置子元素,在所有的子元素中排序 例子 p:nth-child...
第一次看到这个名词,我是拒绝的,css什么时候还有这个东西?于是迫不及待的google了一下,才发现原来它无时无刻不在我们的css当中,只不过它并不是一个属性,不需要我们平常使用手写罢了。但是它的重要性确是杠杠的...
HTML_CSS_DIV网页设计与布局 (21世纪高等教育计算机规划教材) - 聂斌是比较新的教材 用做网页的 新个人第一次上传资源,就觉得可以分享很开心
《精通CSS高级WEB标准解决方案》中文pdf版(扫描版) 计算机电子书下载,学习css的好书,小弟第一次发帖子,搜了下没有这本书,如果有错误请及时联系,谢谢.Amazon第一CSS畅销书,最有用的CSS技术汇总,解密业界大师绝技...
《精通CSS高级WEB标准解决方案》中文pdf版(扫描版) 计算机电子书下载,学习css的好书,小弟第一次发帖子,搜了下没有这本书,如果有错误请及时联系,谢谢.Amazon第一CSS畅销书,最有用的CSS技术汇总,解密业界大师绝技...
DOM 构建结束后,css 文件还未下载完成这段时间内,渲染流水线一直在等待,因为下一步是合成布局树。合成布局树需要 CSSOM 和 DOM,所以需要等待 CSS 加载结束并解析为 CSSOM。这种情况下,CSS 没有阻塞 DOM 的生成...
所以在学习一周后,自己尝试着第一次将学习的知识点运用起来。图中也是刚做是记得插入视频、图片点击后变换位置、图片等是遇到的最大的困难之处。现在想想觉得很简单,毕竟已经学会有一年多的时间了。一直没有发,...
■Amazon第一CSS畅销书 ■最有用的CSS技术汇总 ■解密业界大师绝技 CSS作为Web标准的一部分,已经成为现代网页设计中必不可少的关键要素。CSS是一种简单的语言,但是由于种种原因,真正精通CSS却绝非...
刚学完js,自己动手写了一下京东的首页,因为是第一次写,布局啥的有些问题,所以在不同分辨率下可能网页布局会有问题,分辨率调成1371x736就行了
6、inset:将默认外阴影转为内阴影 在第一位 4、轮廓 轮廓指的是边框的边框,绘制于边框外的线条。 属性:outline:width style color; width:宽度 style:线条样式 color:线条颜色 outline:none/0; 取消轮廓 5...
实际上,这是我制作的第一个出色的布局之一。 我刚刚发现了CSS Grid,并想到了使用它的想法。 从那时起,我一直没有停止使用CSS Grid。 显然,该布局是无响应的,而且事实上,我什至不确定我是否可以使用自己使用的...
这是我第一次了解CSS网格布局时所制作的视频的源代码。 这不是原始代码,我当时没有发布。 我从观看视频时重新创建了代码,因为它似乎已经很流行了,这对其他人可能有用。 。 (标签列表)。 注意事项 这些图像是...
本参考手册是在《完美网页设计CSS快速参考》基础上进行的第3次重要升级,同时参考了W3C官方网站信息、微软DHTML参考资料,以及苏昱的《样式表中文手册》信息,在此表示感谢。本手册服务对象为网页前台设计师,在参考...
实现页面的第一的步骤是分析页面的总体布局,进而写出总体的html骨架,从图片中我们可以看到,微信布局大体上是左右分布,分三块。 左侧:功能导航按钮。 中间:通讯录选择列表 右侧:微信Logo 使用FSCapture的取色...
Grade-Admin学校作业,B/S的成绩管理系统,第一次系统使用前端开发##说明##主要使用了bootstrap进行css布局,在框架选择上,有意使用angular但是由于不熟练且项目日期要求比较高,放弃使用。java做后台数据库交互,...
今天是第一次写博客,已经迫不及待地想把这周在逆战班学习的内容分享一下,这是我对css浮动与清除浮动的理解,希望可以帮助你。 CSS浮动与清除浮动( 本文以div元素布局为例。) 前言:由于CSS内容比较多,只能有...
程序版本:1.0 开发者:郭子 ... 程序安装说明: ...然后直接在打开程序的...这是本人第一次用PHP 开发的作品.把注释写得很详细.如果你也是PHP新手的话可以研究学习,加以改进. 纯div+css布局.所有的代码都是本人一点一点写的.
第一次尝试:我已经启动了 index.html 文件。 我已经添加了徽标和搜索栏,并在查找如何使用 css 的 flex 定位后将它们居中。 我已经完成了大部分作业。 我在页面布局中使用了 flexbox。 尽管如此,我确实遇到了...
第一次挑战 在此挑战中,当用户单击问题时,javascript负责显示答案。 第二次挑战 在此挑战中,javascript负责通过单击按钮来显示社交网络的图标 第三次挑战 在这个挑战中,目标是创建一个带有验证的注册表格。 ...
Muuri 创建响应式、可排序、可过滤和可拖动的布局。 与现有的相比,Muuri 是 Packery、Masonry、Isotope... 这就是为什么大多数这些额外功能都内置在 Muuri 的核心中,因此您不必去寻找额外的库或第 n 次重新发明轮子。