Skip to content

W
Web前端技术 - 实验5DIV＋CSS布局规划-任务（二）
提交 400d7c86 创建 作者: 王晓庆's avatar 王晓庆
浏览文件
操作

update

上级 d0690707
隐藏空白字符变更
内嵌 并排
正在显示 包含 205 行增加 和 46 行删除
img/floatwindow.js 0 → 100644
浏览文件 @ 400d7c86
< script type = "text/javascript" >
function addEvent(obj, evtType, func, cap) {
cap = cap || false;
if (obj.addEventListener) {
obj.addEventListener(evtType, func, cap);
return true;
} else if (obj.attachEvent) {
if (cap) {
obj.setCapture();
return true;
} else {
return obj.attachEvent("on" + evtType, func);
}
} else {
return false;
}
}
function getPageScroll(){
var xScroll,yScroll;
if(self.pageXOffset){
xScroll=self.pageXOffset;
}else if(document.documentElement && document.documentElement.scrollLeft){
xscroll =document.documentElement.scrollLeft;
}else if(document.body){
xScroll=document.body.scrollLeft;
}
if(self.pageYOffset){
yScroll=self.pageYOffset;
}else if(document.documentElement && document.documentElement.scrollTop){
yScroll=document.documentElement.scrollTop;
}else if(document.body){
yScroll=document.body.scrollTop;
}
arrayPageScroll=new Array(xScroll,yScroll);
return arrayPageScroll;
}
function GetPageSize(){
var xScroll,yScroll;
if(window.innerHeight && window.scrollMaxY){
xScroll=document.body.scrollwidth;
yScroll=window.innerHeight + window.scrollMaxY;
}else if(document.body.scrollHeight>document.body.offsetHeight){
xScroll=document,body.scrollwidth;
yScroll=document.body.scrollHeight;
}else{
xScroll=document.body.offsetwidth;
yscrol1=document.body.offsetHeight;
}
var windowWidth,windowHeight;
if(self,innerHeight){
windowwidth = self.innerwidth;
windowHeight = self.innerHeight;
}else if(document.documentElement && document.documentElement.clientHeight){
windowWidth = document.documentElement.clientWidth;
windowHeight = document.documentElement,clientHeight;
}else if(document.body){
windowWidth=document.body.clientwidth;
windowHeight=document,body.clientHeight;
}
if(yScroll < windowHeight){
pageHeight=windowHeight;
}else {
pageHeight=yScroll;
}
if (xScroll < windowWidth){
pageWidth=windowWidth;
}else{
pageWidth=xScroll;
}
arrayPageSize=new Array(pageWidth,pageHeight,windowWidth,windowHeight)
return arrayPageSize;
}
var AdMoveConfig=new Object();
AdMoveConfig.IsInitialized=false;
AdMoveConfig.Scrollx=0;
AdMoveConfig.ScrollY=0;
AdMoveConfig.MoveWidth=0;
AdMoveConfig.MoveHeight=0;
AdMoveConfig.Resize=function(){
var winsize=GetPageSize();
AdMoveConfig.MoveWidth=winsize[2];
AdMoveConfig.MoveHeight=winsize[3];
AdMoveConfig.Scroll();
}
AdMoveConfig.Scroll=function(){
var winscroll=getPageScroll();
AdMoveConfig.ScrollX=winscroll[0];
AdMoveConfig.ScrollY=winscroll[1];
}
addEvent(window,"resize",AdMoveConfig.Resize);
addEvent(window,"scroll",AdMoveConfig.Scroll);
function AdMove(id){
if(!AdMoveConfig.IsInitialized){
AdMoveConfig.Resize();
AdMoveConfig.IsInitialized=true;
}
var obj=document.getElementById(id);
obj.style.position="absolute";
var W=AdMoveConfig.MoveWidth - obj.offsetwidth;
var H=AdMoveConfig.MoveHeight - obj.offsetHeight;
var x = W * Math.random(),y = H* Math.random();
var rad=(Math.random()+1) * Math.PI/6;
var kx=Math.sin(rad),ky = Math.cos(rad);
var dirx =(Math.random()<0.5?1:-1), diry=(Math.random()<0.5?1:-1);
var step=1;
var interval;
this.SetLocation=function(vx,VY){x=vx;y=vy;}
this.SetDirection=function(vx,VY){dirx=vx;diry=vy;}
obj.CustomMethod=function(){
ObJ.style.left=(x+AdMoveConfig.ScrollX)+"px";
ObJ.style.top=(v+AdMoveConfig.ScrollY)+"px";
rad=(Math.random()+1)*Math.PI/6;
W = AdMoveConfig.MoveNidth-obj.offsetWidth;
H= AdMoveConfig.MoveHeight-obj.offsetHeight;
x=x + step*kx*dirx;
if(x<O){dirx= l;x= O;kx=Math.sin(rad)iky= Math.cos(rad);}
if(x>W){dirx=-1;x= w;kx=Math.sin(rad)iky=Math.cos(rad);}
y=y+ step*ky* diry;
if(y<O){diry=1;y= O;kx=Math.sin(rad);ky= Math.cos(rad);}
if(y>H){diry=-1;y=H;kx=Math.sin(rad);ky=Math.cos(rad);}
}
this.Run=function(){
var delay=10;
interval=setInterval(obj.CustomMethod,delay);
obj.onmouseover = function(){clearInterval(interval);}
obj.onmouseout=function(){finterval=setInterval(obi.CustomMethod,delay);}
}
}
</script>
\ No newline at end of file
readme.md
浏览文件 @ 400d7c86
......@@ -17,7 +17,7 @@
# 编程要求
根据要求，设计图lab016-2的网页，网页示意图如下：
![](./img/示例.png)
![](./img/最终示例.png)
**按照下面的步骤继续实验：**
1.页面内容设计。
(1) 页面布局规划，根据图lab016-1在body标记中插入相关的DIV，形成DIV嵌套结构。代码如下：
......@@ -48,58 +48,78 @@
</ul>
</div>
```
(3) 在id为main的标记中插入相应的段落，其中标题“会议概要”“会议介绍”“会议动态”“宾馆地图”统一应用#bt样式，其格式如下:
``` css
#bt{font-size:28px; padding:2px 16px; font-weight:bold;}
```
(4) 其他段落内容如下：
```
会议概要
2015年CERNET华东北地区教育信息化技术研讨大会
时间：2015年4月22日至4月25日
报到时间：2015年4月22日
地点：山东省潍坊市
会议主题：先进网络技术、信息化规划与学校信息化实践、信息技术推动教育教学变革、技术应用研讨及工作交流等。
主办：CERNET华东北地区网络中心、CERNET安徽省网络中心、CERNET山东省网络中心、山东省教育技术与装备协会
承办：潍坊医学院
会议介绍
2015年4月22-25日，由CERNET华东北地区网络中心、CERNET安徽省网络中心、CERNET山东省网络中心及山东省教育技术与装备协会联合主办，潍坊医学院承办的中国教育和科研计算机网(CERNET)2015年华东北地区教育信息化技术研讨会在美丽的山东省潍坊市召开。研讨会主要议题包括先进网络技术、信息化规划与学校信息化实践、信息技术推动教育教学变革、技术应用研讨及工作交流等。会议将邀请CERNET专家、教育技术专家、部分国内高校及企业界专家作专家报告。
```
(5) 在id为rightbar的标记中，分别插入id为rightbar_up、rightbar_down的2个子div。
``` html
a. 在id为 rightbar_up的div中，插入段落p，内容为“会议动态”。
b. 在id为rightbar_down的div中，插入3行3列的表格，表格中第2列中分别插入如下内容:潍坊天气预报、在线注册、修改信息。将“潍坊天气预报”设置为超链接，格式如下所示:
<a href="http://www.weather.com.cn/weather1d/101120601.shtml" target="_blank">潍坊天气预报</a>
c. 在id为 rightbar_down 的div中，插入段落和浮动框架。代码格式如下:
<p id="bt">宾馆地图</p>
<iframe id="baidu" height="180px" width="200px" frameBorder="0" scrolling="no" src="http://it2015.sd.edu.cn/baidu. htm1"></iframe>
```
(3) 在父div中插入子div，设置id为nav，内容为“这是导航信息区”。
(4) 在父div中插入子div，设置id为maincontent，内容中包含2个子div，2个子div的id分别为main、side，内容分别为“这是主体信息区”“这是右侧信息区”。
(5) 在父div中插入子div，设置class为clearfloat，内容为空，用于清除图层浮动。
(6) 在父div中插入子div，设置id为footer，内容为“这是版权信息区”。
2.表现设计。
(1) 在 head标记中插入link标记，链接外部样式表，格式如下所示：
(6) 在id为footer的标记中，插入1个p标记。内容如下所示:
``` html
<link href="layout,1. css" rel="stylesheet " type="text/css" />
<p>&copy;Copyright CERNET 华东北地区网络中心。Designed By<a href ="http://nic.wfm.edu.cn" class= "footer">潍坊医学院网络信息中心</a> </p>
```
(2) 创建外部样式文件layout_1.css。
(3) 在layout_1.css文件中分别定义全局样式及各div样式。具体样式定义描述如下:
(7) 完成上述操作后，整个页面的信息添加完毕。保存页面后在浏览器中查看，网页效果如下图lab016-3所示：
![](./img/全部信息.png)
2.表现设计。
在style标记中分别定义div、p、ul、li、a等标记的样式，其样式要求如下所示。
(1) 定义最外层div样式。#container样式为边界上下0、左右自动、宽度100%。
(2) 定义头部div样式。#header样式为内容水平居中、宽度100%、高度243px、背景颜色#7d26a8、图像header.png(在trees子目录下)、图像位置居中顶部、不重复。
(3) 定义导航div样式。#nav样式为宽度100%、高度40px、颜色白色、行高40px、内容水平居中、背景颜色#660066。
(4) 定义ul样式。ul标记样式为边界上下0、左右自动(不设置头部和导航条之间会有空白带)、宽度950px、列表样式类型none、内容水平居中。
(5) 用无序列表实现水平导航菜单。关键有两点:消除无序列表前面的符号、将默认垂直排列的菜单转换成水平排列的菜单。
```
a. 全局样式定义为边界上下为0px、左右为自动、字体特粗、大小28px、行高1.5em。
b. #container样式为宽度900px、边界上下为0px、左右为自动。
c. #header样式为高度70px、背景颜色#CCFFCC、底边界8px。
d. #nav样式为高度40px、背景颜色#CCFFCC、底边界8px。
e. #maincontent样式为底边界8px。
f. #main样式为图层向左浮动、宽度664px、高度400px、背景颜色#FFFF99。
g. #side样式为图层向右浮动、宽度 228px、高度400px、背景颜色#FFCC99。
h. .clearfloat样式为清除图层左、右浮动。
i. #footer样式为高度70px、背景颜色# CCFFCC、顶边框为粗细8px、线型实线、白色。
a. 消除列表项前的符号，使用列表样式ul{list-style-type:none;}。
b. 实现菜单水平导航，使用列表项样式li{float:left;}。
```
(6) 实现导航菜单均匀显示有两种方法:一是通过设置列表项的宽度、高度和文本居中实现，如“width:100px;text-align:center;font-size:l6px;”;二是通过设置每个列表项的边界(margin:0 20px;)来实现，在样式中追加属性值对“margin:Opx 20px;”。
(7) 定义ul中的1i样式。li样式为边界上下0、左右自动、向左浮动(实现菜单水平导航)，文本居中对齐、字体大小16px、宽度5.5em，填充上下 2px、左右8px。
(8) 定义ul中的a样式。a样式为字体大小16px、垂直居中对齐、显示方式为块方式。
(9) 定义ul中的a:link、a:visited、a:active样式。a:link、a:visited、a:active样式为颜色为白色、字符装饰为无。
(10) 定义ul中的a:hover样式。a:hover样式为背景颜色#9933ff、文本居中对齐、显示方式为块方式。
(11) 定义主体部分div样式。#mainbody样式为背景颜色#FFFFFF，填充上下0、左右自动，边界为上下0、左右自动、宽度1001px。
(12) 定义主体左侧部分div样式。#main样式为宽度60%、图层向左浮动，填充上下0、左右30px，边界上下0、左右自动。
(13) 定义主体右侧部分div样式。#rightbar样式为宽度30%、图层向右浮动。
(14) 定义版权div样式。#footer样式为背景颜色#FFFFFF、清除图层左右浮动、文本居中对齐、字体大小16px、行高40px。
3.完成图lab015-1所示网页设计后，使用浏览器查设计好的网页内容。
4.根据以上操作完成下图lab015-2和lab015-3的页面设计，并使用浏览器查设计好的网页内容。
(1) DIV_+CSS固定型页面布局设计，如下图lab015-2所示：
![](./img/固定布局2.png)
(2 )DIV_+CSS弹性页面布局设计，如下图lab015-3所示：
![](./img/弹性布局.png)
(3) 可参照下方内容设置图lab015-2和lab015-3页面的外部样式文件：
``` css
/* lab015-2样式 */
*{font-weight:colder; font-size:28px; margin:0;}
#container{margin:0 auto; width:900px;}
#header{height:100px; background:# 6CF;margin-bottom:5px;}
#mainContentf{margin-bottom:5px;}
#sidebar{float:left; width:200px; height:500px; background:#9FF;}
#content{float:right; width:695px;height:500px; background:#cFF;}
/* lab015-3样式 */
*{padding:0px; margin:0 auto; font-weight:bolder; font-size:24px;}
#container{width:100%;}
#header{height:100px; background:#99CC66; margin-bottom:5px;}
#menu{height:30px; background:#669933; margin-bottom:5px;}
#mainContent{margin-bottom:5px; height:350px;}
#sidebar{float:left; height:350px; background:#CCFE99;}
#content{margin-left:205px ;height:350px; background:#FFFFAA;}
#footer{height:60px; background:#99CC66;}
.clearfloat{clear:both;}
3.完成图lab016-2所示网页设计后，使用浏览器查设计好的网页内容。
4.设计首页飘动窗口。根据以下步骤完成飘动窗口的添加，然后重新保存文件，使用浏览器查看页面效果。
(1) 定义飘动图层div, id为gg3, 在div中插入图像超链接，并设置目标URL。
``` html
<div id="gg3" style="width:170px; height:55px;"> <a target="_parent" href="http://it2015.sd.edu.cn/tbtx.html"><img src="trees/tx.jpg" width="170" height="55" alt=""/>
</a></div>
```
(2) 在body中插入JavaScript脚本，启动运行程序。
``` html
<script type="text/javascript">
var ad3 = new AdMove("gg3"); // 定义AdMove对象
ad3.Run();
</script>
```
(3) 在head标记中定义Javascript相关函数。内容见根目录下文件floatwindow.js。
5.确认设计正确后，提交作业到CodeCode.net平台。
# 教师参考答案
......
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论