Skip to content

W
Web前端技术 - 实验5DIV＋CSS布局规划-任务（二）
提交 6706af5d 创建 作者: 宋海霞's avatar 宋海霞
浏览文件
操作

增加验证

上级 ec419a5d
显示空白字符变更
内嵌 并排
正在显示 包含 408 行增加 和 66 行删除
.gitignore 0 → 100644
浏览文件 @ 6706af5d
/__pycache__
.gitlab-ci.yml 0 → 100644
浏览文件 @ 6706af5d
image: "registry.cn-hangzhou.aliyuncs.com/engintime/selenium-standalone-chrome-python:latest"
stages:
- code-analysis
- case1
.codecode-runner: &codecode-runner
tags:
- ubuntu-16.04
- short-job
.codecode-analysis-runner: &codecode-analysis-runner
tags:
- ubuntu-16.04
- short-job
- code-analysis
code-analysis:
image: "registry.cn-hangzhou.aliyuncs.com/engintime/ubuntu_16.04_program_nodejs:latest"
stage: code-analysis
<<: *codecode-analysis-runner
script:
- sonar-scanner -Dsonar.projectKey=ProjectKey-$CI_PROJECT_ID -Dsonar.projectName=$CI_PROJECT_NAME -Dsonar.links.homepage=$CI_PROJECT_URL -Dsonar.host.url=$SONAR_URL -Dsonar.login=$SONAR_LOGIN -Dsonar.gitlab.commit_sha=$CI_COMMIT_SHA -Dsonar.gitlab.ref_name=$CI_COMMIT_REF_NAME -Dsonar.gitlab.project_id=$CI_PROJECT_ID -Dsonar.gitlab.url=$CODECODE_PROTOCOL$CODECODE_DOMAIN
allow_failure: true
only:
- master
case1:
stage: case1
<<: *codecode-runner
script:
- /opt/bin/entry_point.sh &
- python3 ci_test.py 127.0.0.1 4444 index.html
only:
- master
allow_failure: false
teacher-check1:
image: "registry.cn-hangzhou.aliyuncs.com/engintime/alpine_git:latest"
stage: case1
<<: *codecode-runner
script:
- git clone ${CODECODE_PROTOCOL}gitlab-ci-token:${CI_JOB_TOKEN}@${CODECODE_DOMAIN}/${CI_PROJECT_FORKSOURCE} template
- diff template/.gitlab-ci.yml .gitlab-ci.yml -b -B -i
- diff template/ci_test.py ci_test.py -b -B -i
- diff template/testcases.py testcases.py -b -B -i
only:
- master
when: manual
allow_failure: true
baidu.html 0 → 100644
浏览文件 @ 6706af5d
<!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=gb2312" />
<meta name="keywords" content="百度地图,百度地图API，百度地图自定义工具，百度地图所见即所得工具" />
<meta name="description" content="百度地图API自定义地图，帮助用户在可视化操作下生成百度地图" />
<title>百度地图API自定义地图</title>
<!--引用百度地图API-->
<style type="text/css">
html,body{margin:0;padding:0;}
.iw_poi_title {color:#CC5522;font-size:14px;font-weight:bold;overflow:hidden;padding-right:13px;white-space:nowrap}
.iw_poi_content {font:12px arial,sans-serif;overflow:visible;padding-top:4px;white-space:-moz-pre-wrap;word-wrap:break-word}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?key=&v=1.1&services=true"></script>
</head>
<body>
<!--百度地图容器-->
<div style="width:697px;height:550px;border:#ccc solid 1px;" id="dituContent"></div>
</body>
<script type="text/javascript">
//创建和初始化地图函数：
function initMap(){
createMap();//创建地图
setMapEvent();//设置地图事件
addMapControl();//向地图添加控件
}
//创建地图函数：
function createMap(){
var map = new BMap.Map("dituContent");//在百度地图容器中创建一个地图
var point = new BMap.Point(119.040166,36.672282);//定义一个中心点坐标
map.centerAndZoom(point,17);//设定地图的中心点和坐标并将地图显示在地图容器中
window.map = map;//将map变量存储在全局
}
//地图事件设置函数：
function setMapEvent(){
map.enableDragging();//启用地图拖拽事件，默认启用(可不写)
map.enableScrollWheelZoom();//启用地图滚轮放大缩小
map.enableDoubleClickZoom();//启用鼠标双击放大，默认启用(可不写)
map.enableKeyboard();//启用键盘上下左右键移动地图
}
//地图控件添加函数：
function addMapControl(){
//向地图中添加缩放控件
var ctrl_nav = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});
map.addControl(ctrl_nav);
//向地图中添加缩略图控件
var ctrl_ove = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:1});
map.addControl(ctrl_ove);
//向地图中添加比例尺控件
var ctrl_sca = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});
map.addControl(ctrl_sca);
}
initMap();//创建和初始化地图
</script>
</html>
\ No newline at end of file
ci_test.py 0 → 100644
浏览文件 @ 6706af5d
# CodeCode平台测试
from selenium import webdriver
from selenium.webdriver.common.desired_capabilities import DesiredCapabilities
from time import sleep
import os
from testcases import run_test
import sys
# 获取参数：服务地址，端口，文件名称
host_param = sys.argv[1]
port_param = sys.argv[2]
file_param = sys.argv[3]
# 准备调用远程webdriver所需参数
url = 'http://' + host_param + ':' + port_param + '/wd/hub'
# 调用远程driver
def get_remote_driver():
# 循环3次，调用远程webdriver
for i in range(0, 2):
try:
# 调用远程driver，获取成功即返回
if i==0:
# 等待5秒后重新获取
sleep(5)
elif i == 1:
# 等待10秒后重新获取
sleep(10)
else:
# 等待15秒后重新获取
sleep(15)
driver = webdriver.Remote(command_executor=url, desired_capabilities=DesiredCapabilities.CHROME)
return driver
except Exception:
print ("正在等待webdriver启动，请稍候...")
# 没有启动远程driver，程序终止
print ("webdriver启动失败，请重新操作！")
exit(1)
if __name__ == '__main__':
# 调用获取远程driver函数
driver = get_remote_driver()
# 设定窗口大小
driver.set_window_size(800,600)
# 打开本地html文件
driver.get('file:///' + os.path.abspath(file_param))
# 开始测试
run_test(driver)
# 退出driver
driver.quit()
floatwindow.js
浏览文件 @ 6706af5d
< script type = "text/javascript" >
function addEvent(obj, evtType, func, cap) {
function addEvent(obj,evtType,func,cap) {
cap = cap || false;
if (obj.addEventListener) {
obj.addEventListener(evtType, func, cap);
if(obj.addEventListener){
obj.addEventListener(evtType,func,cap);
return true;
} else if (obj.attachEvent) {
if (cap) {
......@@ -14,9 +13,10 @@
} else {
return false;
}
}
function getPageScroll(){
}
function getPageScroll(){
var xScroll,yScroll;
if(self.pageXOffset){
xScroll=self.pageXOffset;
......@@ -34,10 +34,9 @@
}
arrayPageScroll=new Array(xScroll,yScroll);
return arrayPageScroll;
}
}
function GetPageSize(){
function GetPageSize(){
var xScroll,yScroll;
if(window.innerHeight && window.scrollMaxY){
xScroll=document.body.scrollwidth;
......@@ -72,33 +71,31 @@
}
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 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(){
AdMoveConfig.Scroll=function(){
var winscroll=getPageScroll();
AdMoveConfig.ScrollX=winscroll[0];
AdMoveConfig.ScrollY=winscroll[1];
}
}
addEvent(window,"resize",AdMoveConfig.Resize);
addEvent(window,"scroll",AdMoveConfig.Scroll);
addEvent(window,"resize",AdMoveConfig.Resize);
addEvent(window,"scroll",AdMoveConfig.Scroll);
function AdMove(id){
function AdMove(id){
if(!AdMoveConfig.IsInitialized){
AdMoveConfig.Resize();
AdMoveConfig.IsInitialized=true;
......@@ -122,8 +119,8 @@
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);}
if(x<O){dirx= l;x= O;kx=Math.sin(rad);ky= Math.cos(rad);}
if(x>W){dirx=-1;x= w;kx=Math.sin(rad);ky=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);}
......@@ -134,5 +131,4 @@
obj.onmouseover = function(){clearInterval(interval);}
obj.onmouseout=function(){finterval=setInterval(obi.CustomMethod,delay);}
}
}
</script>
\ No newline at end of file
}
\ No newline at end of file
local_test.py 0 → 100644
浏览文件 @ 6706af5d
# 本地平台测试
from selenium import webdriver
from time import sleep
import os
from testcases import run_test
# 调用driver
def get_driver():
# 循环3次，调用远程webdriver
for i in range(0, 2):
try:
# 调用远程driver，获取成功即返回
if i==0:
# 等待5秒后重新获取
sleep(5)
elif i == 1:
# 等待10秒后重新获取
sleep(10)
else:
# 等待15秒后重新获取
sleep(15)
driver = webdriver.Chrome()
return driver
except Exception:
print ("正在等待webdriver启动，请稍候...")
# 没有启动远程driver，程序终止
print ("webdriver启动失败，请重新操作！")
exit(1)
if __name__ == '__main__':
# 调用获取driver函数
driver = get_driver()
# 设定窗口大小
driver.set_window_size(800,600)
# 打开本地html文件
driver.get('file:///' + os.path.abspath('index.html'))
# 开始测试
run_test(driver)
# 退出driver
driver.quit()
readme.md
浏览文件 @ 6706af5d
......@@ -16,13 +16,11 @@
![](./images/布局.png)
# 编程要求
根据要求，设计图lab016-2的网页，网页示意图如下：
![](./images/最终示例.png)
根据要求完成2015年CERNET华东北地区年会网站的设计。
*在trees文件夹中提供了设计所有的素材*
**按照下面的步骤继续实验：**
1.页面内容设计。
(1) 页面布局规划，根据图lab016-1在body标记中插入相关的DIV，形成DIV嵌套结构。代码如下：
**work_1**
根据页面效果图，在body标记中插入相关的DIV，形成DIV嵌套结构。代码如下：
``` html
<div id="container" class="">
<div id="header" class=""> </div>
......@@ -34,7 +32,9 @@
<div id="footer" class=""> </div>
</div>
```
(2) 在id为nav的标记中插入无序列表，设计导航菜单。代码如下:
**work_2**
在id为nav的标记中插入无序列表，设计导航菜单。代码如下:
``` html
<div id="nav" class="">
<ul>
......@@ -50,11 +50,13 @@
</ul>
</div>
```
(3) 在id为main的标记中插入相应的段落，其中标题“会议概要”“会议介绍”“会议动态”“宾馆地图”统一应用#bt样式，其格式如下:
**work_3**
a.在id为main的标记中插入相应的段落，其中标题“会议概要”“会议介绍”“会议动态”“宾馆地图”统一应用#bt样式，其格式如下:
``` css
#bt{font-size:28px; padding:2px 16px; font-weight:bold;}
```
(4) 其他段落内容如下：
b.其他段落内容如下：
```
会议概要
2015年CERNET华东北地区教育信息化技术研讨大会
......@@ -67,35 +69,44 @@
会议介绍
2015年4月22-25日，由CERNET华东北地区网络中心、CERNET安徽省网络中心、CERNET山东省网络中心及山东省教育技术与装备协会联合主办，潍坊医学院承办的中国教育和科研计算机网(CERNET)2015年华东北地区教育信息化技术研讨会在美丽的山东省潍坊市召开。研讨会主要议题包括先进网络技术、信息化规划与学校信息化实践、信息技术推动教育教学变革、技术应用研讨及工作交流等。会议将邀请CERNET专家、教育技术专家、部分国内高校及企业界专家作专家报告。
```
(5) 在id为rightbar的标记中，分别插入id为rightbar_up、rightbar_down的2个子div。
c.定义特别提醒div, id为gg3, 在div中插入图像超链接，并设置目标URL。
``` 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>
<div id="gg3" style="width:170px; height:55px;">
<a target="_parent" href="http://www.baidu.com/">
<img src="trees/tx.jpg" width="170" height="55" alt=""/>
</a>
</div>
```
(6) 在id为footer的标记中，插入1个p标记。内容如下所示:
**work_4**
在id为rightbar的标记中，分别插入id为rightbar_up、rightbar_down的2个子div。
a.在id为 rightbar_up的div中，插入段落p，内容为“会议动态”。
b.在id为rightbar_down的div中，插入3行3列的表格，表格中第2列中分别插入如下内容:潍坊天气预报、在线注册、修改信息。将“潍坊天气预报”设置为超链接，格式如下所示:
``` html
<p>&copy;Copyright CERNET 华东北地区网络中心。Designed By<a href ="http://nic.wfm.edu.cn" class= "footer">潍坊医学院网络信息中心</a> </p>
<a href="http://www.weather.com.cn/weather1d/101120601.shtml" target="_blank">潍坊天气预报</a>
```
c.在id为 rightbar_down 的div中，插入段落和浮动框架。代码格式如下:
``` html
<p id="bt">宾馆地图</p>
<iframe id="baidu" height="180px" width="200px" frameBorder="0" scrolling="no" src="http://it2015.sd.edu.cn/baidu. htm1">
</iframe>
```
d.在id为footer的标记中，插入1个p标记。内容如下所示:
``` html
<p>
&copy;Copyright CERNET 华东北地区网络中心。Designed By<a href ="http://nic.wfm.edu.cn" class= "footer">潍坊医学院网络信息中心</a>
</p>
```
(7) 完成上述操作后，整个页面的信息添加完毕。保存页面后在浏览器中查看，网页效果如下图lab016-3所示：
![](./images/全部信息.png)
2.表现设计。
在style标记中分别定义div、p、ul、li、a等标记的样式，其样式要求如下所示。
**work_5**
a.在head中添加style标记。
b.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. 消除列表项前的符号，使用列表样式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、垂直居中对齐、显示方式为块方式。
......@@ -105,21 +116,21 @@ b. 实现菜单水平导航，使用列表项样式li{float:left;}。
(12) 定义主体左侧部分div样式。#main样式为宽度60%、图层向左浮动，填充上下0、左右30px，边界上下0、左右自动。
(13) 定义主体右侧部分div样式。#rightbar样式为宽度30%、图层向右浮动。
(14) 定义版权div样式。#footer样式为背景颜色#FFFFFF、清除图层左右浮动、文本居中对齐、字体大小16px、行高40px。
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脚本，启动运行程序。
**提高**
设计首页飘动窗口。将“特别提醒”设置为飘动，然后重新保存文件，使用浏览器查看页面效果。
a.在body中插入JavaScript脚本，启动运行程序。
``` html
<script type="text/javascript">
var ad3 = new AdMove("gg3"); // 定义AdMove对象
ad3.Run();
</script>
```
(3) 在head标记中定义Javascript相关函数。内容见根目录下文件floatwindow.js。
b.在head标记中定义Javascript相关函数。内容见根目录下文件floatwindow.js。
# 页面效果
![](./images/最终示例.png)
5.确认设计正确后，提交作业到CodeCode.net平台。
# 教师参考答案
请教师用户首先访问[教师项目群组](https://www.codecode.net/engintime/web-group/web-front-teacher-group),申请权限并审核通过后，再[domain relative url](/engintime/web-group/web-front-teacher-group/Lab016.git)访问本项目的参考答案
sonar-project.properties 0 → 100644
浏览文件 @ 6706af5d
# Required metadata
sonar.projectVersion=1.0
sonar.sourceEncoding=UTF-8
# path to source directories (required)
sonar.sources=./
# path to the build artifact
sonar.artifact.path=build/app
testcases.py 0 → 100644
浏览文件 @ 6706af5d
# 测试用例
import sys
from colorama import Fore, init, AnsiToWin32
init(wrap=False)
stream = AnsiToWin32(sys.stderr).stream
# 字体颜色
red = lambda text: '\033[0;31m' + text + '\033[0m'
green = lambda text: '\033[0;32m' + text + '\033[0m'
# 根据操作平台的不同设置输出内容的颜色
def print_colorful_info(passflag, outputstr):
if sys.platform == 'linux':
# linux系统
if passflag == True:
# 通过验证
print (green(outputstr))
else:
# 未通过验证
print (red(outputstr))
else:
# windows操作系统
if passflag == True:
# 通过验证
print (Fore.GREEN + outputstr, file=stream)
else:
# 未通过验证
print (Fore.RED + outputstr, file=stream)
# 输出分数
def print_score():
if sys.platform == 'linux':
print ("\n*******************************************")
else:
print (Fore.WHITE + "\n*******************************************", file=stream)
print ("exec-score", final_score)
print ("*******************************************\n")
# 测试第一个要求，DIV嵌套结构
def work_1(driver):
try:
driver.find_element_by_xpath("//body/div[@id='container']")
driver.find_element_by_xpath("//body/div[@id='container']/div[@id='nav']")
driver.find_element_by_xpath("//body/div[@id='container']/div[@id='footer']")
print_colorful_info(True, 'work_1 测试成功')
global final_score
final_score = final_score + 10
except Exception:
print_colorful_info(False, 'work_1 测试失败：DIV嵌套结构不正确')
# 测试第二个要求，无序列表
def work_2(driver):
try:
driver.find_element_by_tag_name("ul")
driver.find_element_by_tag_name("li")
print_colorful_info(True, 'work_2 测试成功')
global final_score
final_score = final_score + 10
except Exception:
print_colorful_info(False, 'work_2 测试失败：无序列表不正确')
# 测试第三个要求，主要内容
def work_3(driver):
try:
driver.find_element_by_xpath("//body/div[@id='container']/div[@id='mainbody']/div[@id='main']")
driver.find_element_by_xpath("//body/div[@id='container']/div[@id='mainbody']/div[@id='main']/p")
driver.find_element_by_xpath("//body/div[@id='container']/div[@id='header']/div[@id='gg3']")
print_colorful_info(True, 'work_3 测试成功')
global final_score
final_score = final_score + 10
except Exception:
print_colorful_info(False, 'work_3 测试失败：主要内容不正确')
# 测试第四个要求，导航
def work_4(driver):
try:
driver.find_element_by_xpath("//body/div[@id='container']/div[@id='mainbody']/div[@id='rightbar']")
driver.find_element_by_xpath("//body/div[@id='container']/div[@id='mainbody']/div[@id='rightbar']/div[@id='rightbar_down']")
driver.find_element_by_xpath("//body/div[@id='container']/div[@id='mainbody']/div[@id='rightbar']/div[@id='rightbar_up']")
print_colorful_info(True, 'work_4 测试成功')
global final_score
final_score = final_score + 10
except Exception:
print_colorful_info(False, 'work_4 测试失败：导航rightbar不正确')
# 测试第五个要求，style标记
def work_5(driver):
try:
driver.find_element_by_tag_name("style")
print_colorful_info(True, 'work_5 测试成功')
global final_score
final_score = final_score + 10
except Exception:
print_colorful_info(False, 'work_5 测试失败：style标记不正确')
def run_test(driver):
global final_score
final_score = 50
work_1(driver)
work_2(driver)
work_3(driver)
work_4(driver)
work_5(driver)
# 运行结束后打印分数
print_score()
# 不是满分的话要将这个job置为failed
if final_score != 100:
# 退出driver
driver.quit()
# 错误码，job失败
exit(1)
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论