Skip to content

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

调整readme

上级 4aa006f8
隐藏空白字符变更
内嵌 并排
正在显示 包含 9 行增加 和 7 行删除
readme.md
浏览文件 @ e31cbbd8
......@@ -13,12 +13,14 @@
# 页面设计要求
页面分成header、nav、menu、mainbody（分为main、rightbar左右两个子div）、footer等区域。如下图lab016-1所示：
![](./img/布局.png)
![](./images/布局.png)
# 编程要求
根据要求，设计图lab016-2的网页，网页示意图如下：
![](./img/最终示例.png)
**按照下面的步骤继续实验：**
![](./images/最终示例.png)
*在trees文件夹中提供了设计所有的素材*
**按照下面的步骤继续实验：**
1.页面内容设计。
(1) 页面布局规划，根据图lab016-1在body标记中插入相关的DIV，形成DIV嵌套结构。代码如下：
``` html
......@@ -81,10 +83,10 @@ c. 在id为 rightbar_down 的div中，插入段落和浮动框架。代码格式
```
(7) 完成上述操作后，整个页面的信息添加完毕。保存页面后在浏览器中查看，网页效果如下图lab016-3所示：
![](./img/全部信息.png)
![](./images/全部信息.png)
2.表现设计。
在style标记中分别定义div、p、ul、li、a等标记的样式，其样式要求如下所示。
在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。
......@@ -105,7 +107,7 @@ b. 实现菜单水平导航，使用列表项样式li{float:left;}。
(14) 定义版权div样式。#footer样式为背景颜色#FFFFFF、清除图层左右浮动、文本居中对齐、字体大小16px、行高40px。
3.完成图lab016-2所示网页设计后，使用浏览器查设计好的网页内容。
4.设计首页飘动窗口。根据以下步骤完成飘动窗口的添加，然后重新保存文件，使用浏览器查看页面效果。
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=""/>
......@@ -123,4 +125,4 @@ b. 实现菜单水平导航，使用列表项样式li{float:left;}。
5.确认设计正确后，提交作业到CodeCode.net平台。
# 教师参考答案
请教师用户首先访问[教师项目群组](https://www.codecode.net/engintime/web-group/web-front-teacher-group),申请权限并审核通过后，再[domain relative url](/engintime/web-group/web-front-teacher-group/Lab014.git)访问本项目的参考答案
请教师用户首先访问[教师项目群组](https://www.codecode.net/engintime/web-group/web-front-teacher-group),申请权限并审核通过后，再[domain relative url](/engintime/web-group/web-front-teacher-group/Lab016.git)访问本项目的参考答案
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论