Skip to content

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

Initial commit

上级
隐藏空白字符变更
内嵌 并排
正在显示 包含 118 行增加 和 0 行删除
index.html 0 → 100644
浏览文件 @ d0690707
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>网页标题</title>
</head>
<body>
<h2>新的主页</h2>
</body>
</html>
readme.md 0 → 100644
浏览文件 @ d0690707
在进行本次实验之前，如果对VS code和CodeCode.net的使用方法不清楚，请查看[《Web前端技术实验环境使用手册》](https://www.codecode.net/engintime/web-group/book/blob/master/app-manual.md)的内容。
本项目用于完成[《Web前技术实验教程》](https://www.codecode.net/engintime/web-group/book)中的 实验5 DIV+CSS布局规划 中的 [任务2 设计2015年CERNET华东北地区年会网站](https://www.codecode.net/engintime/web-group/book#实验5-DIV+CSS布局规划)
# 实验所需知识点
1. 图层div标记
2. 样式style标记
3. 链接link标记
4. 无序列表ul标记
5. 表格table标记
6. 浮动框架iframe标记
7. 首页飘动窗口设计
# 页面设计要求
页面分成header、nav、menu、mainbody（分为main、rightbar左右两个子div）、footer等区域。如下图lab016-1所示：
![](./img/布局.png)
# 编程要求
根据要求，设计图lab016-2的网页，网页示意图如下：
![](./img/示例.png)
**按照下面的步骤继续实验：**
1.页面内容设计。
(1) 页面布局规划，根据图lab016-1在body标记中插入相关的DIV，形成DIV嵌套结构。代码如下：
``` html
<div id="container" class="">
<div id="header" class=""> </div>
<div id="nav" class=""> </div>
<div id="mainbody" class="">
<div id="main" class=""> </div>
<div id="rightbar" class=""> </div>
</div>
<div id="footer" class=""> </div>
</div>
```
(2) 在id为nav的标记中插入无序列表，设计导航菜单。代码如下:
``` html
<div id="nav" class="">
<ul>
<li><a href="#">首&nbsp;&nbsp;&nbsp;&nbsp;页</a></li>
<li><a href="#">会议介绍</a></li>
<li><a href="#">潍坊介绍</a></li>
<li><a href="#">日程安排</a></li>
<li><a href="#">大会报告</a></li>
<li><a href="#">宾馆交通</a></li>
<li><a href="#">资料下载</a></li>
<li><a href="#">会议注册</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</div>
```
(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标记，链接外部样式表，格式如下所示：
``` html
<link href="layout,1. css" rel="stylesheet " type="text/css" />
```
(2) 创建外部样式文件layout_1.css。
(3) 在layout_1.css文件中分别定义全局样式及各div样式。具体样式定义描述如下:
```
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、线型实线、白色。
```
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;}
```
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)访问本项目的参考答案
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论