院系信息科学与技术学院学号　　　　　　　　班　级０６　班

Size: px

Start display at page:

Download "院系信息科学与技术学院学号　　　　　　　　班　级０６　班"

杨绩金
4 years ago
Views:

实验题目 HTML&CSS 实验 (7) 实验目的学习一个通用的布局设计实验工具可以采用 Visual Studio Dreamweaver 等具有网页编辑功能的软件打开并编辑页面, 或者直接在 Eclipse 或 netbeans 下编辑运行也可以使用在线调试 :http://172.18.187.11:8080/lab/html7/ 实验内容 1 阅读给定的框架(sysu.

1 实验题目 HTML&CSS 实验 (7) 实验目的学习一个通用的布局设计实验工具可以采用 Visual Studio Dreamweaver 等具有网页编辑功能的软件打开并编辑页面, 或者直接在 Eclipse 或 netbeans 下编辑运行也可以使用在线调试 : 实验内容 1 阅读给定的框架(sysu.html) 1) 整个框架分为 :header nav subnav mainbody footer 五个部分 (div) 2) 除了 main, 每个区都定义了高度和宽度, 并且宽度均为 998px, 并用样式 "margin:0 auto" 对中整个网页定义了背景色 "#005825" 3) 为了以后可以定位内部的 logo 等元素,header 采用 position:relative, 其它 4 个区均属于正常流 4) main 的背景色为白色 "#FFFFFF", 没有定义宽度, 让它扩展到整个网页宽, 并且包含三个部分 :mainbody,quicklinks,sublinks 它的高度是由这三部分的高度决定的这三个部分的宽度均为 998px, 用样式 "margin:0 auto" 对中 header nav subnav mainbody quicklinks sublinks footer 以下步骤逐步加入各个部分的 html 和 style,visual studio netbeans 和 eclipse 的菜单中都有自动格式化操作, 做完每步都可以格式化 html 2 加入 header.css( 增加语句 <link rel="stylesheet" href="css/header.css">) 和 header.html( 拷贝粘贴 )

2 到 sysu.html 中 Header 问题 1:header 分为三个区 (div):logo, version, searchbox, 采用什么样式令它们放置在同一行? 答 : 使用了 position: absolute; 进行定位,abosolute 相对于非 static 的最靠近的祖先元素进行定位问题 2: search 按钮如何与 search 输入框垂直对中的? 答 : 使用了 vertical-align: middle; vertical-align 属性设置元素的垂直对齐方式 Middle 是把此元素放置在父元素的中部 3 加入 nav.css 和 nav.html( 菜单栏 )

当我们放缩页面的时候就能发现超过宽度时会自动换行问题 2: 菜单项之间的竖线是怎么实现的? 答 : background: url(.

3 nav 问题 1:nav 中的菜单项为什么可以排在一行? 答 : 内联元素在没有任何布局属性作用时, 默认排列方式是在同行排列, 直到宽度超出包含它的容器宽度时才自动换行当我们放缩页面的时候就能发现超过宽度时会自动换行问题 2: 菜单项之间的竖线是怎么实现的? 答 : background: url(../images/nav-spe.jpg) no-repeat left; 用了一个背景然后不重复位置位于左边 4 加入 subnav.css 和 subnav.html( 子菜单栏 ) * 子菜单是通过 javascript 显示出来的 ( 已

经加入到网页中了 ) 把 /*test*/ 下的 div{} 删除, 并在 body 中加入背景图 bodybg.jpg, 得到中大主页的菜单样子 (www.sysu.edu.cn) 问题 1: 子菜单栏的竖线是怎么实现的? 答 :subnav.

4 经加入到网页中了 ) 把 /*test*/ 下的 div{} 删除, 并在 body 中加入背景图 bodybg.jpg, 得到中大主页的菜单样子 ( 问题 1: 子菜单栏的竖线是怎么实现的? 答 :subnav.html 中手动加入的 5 main 的 mainbody 由 indexline 区和 cols 区组成 indexline 区存放宣传画,cols 区存放内容 indexline 包含 box 区和 content_main 区每个区包含一幅图 ( 原来每个区包含多副图, 做成自动播放模式 ) 这一步加入 indexline.css 和 indexline.html

5 问题 1:box 区和 content_main 区为什么可以排在同一行? 答 :box 使用了 float:right 而 content_main 使用 float:left 所以他们就分列左右不过这里有个问题, 超宽之后就不会在同一行 Css 中 box 宽度和 content_main 宽度超过 998px( 设定 ) 就不会在同一行 6 cols 又分为两列 colsleft 和 cols02 colsleft 又分为四个区 : 两个类名为 cols01 的区, 一个隔离区 (clear), 一个公告 (gonggao) 区第一个 cols01 区有两个栏目, 第二个 cols01 区有三个栏目这一步加入 colsleft.css 和 colsleft.html

clearfix 属性清除.clearfix:after { content:".

6 问题 1: 两个类名为 cols01 为什么可以排在同一行? 它们为什么可以垂直对齐? 答 :2 个 cols01 都有 float:left 的属性问题 2:clear 区的作用是什么? 还有替代方法吗? 答 :clear 属性规定元素的哪一侧不允许其他浮动元素, 此处是 clear: both; 所以其两边没有浮动元素所以 clear 区的作用是清楚 float 确保公告区位于上面几个区的下面, 不会产生重叠可以使用 clearfix 属性清除.clearfix:after { content:"."; display:block; height:0; visibility:hidden; clear:both; } 问题 3:colsleft 栏目的标题中的间隔线和标题下面的点线是怎么加入的? 答 :background: url(../images/title-spe.jpg) right no-repeat; background: url(../images/dot.png) no-repeat left;

7 问题 4:cols01 中的栏目采用了浮动方法吗? 答 : 用了 float: left; 问题 5: 每个栏目边框下面的阴影是怎么加入的? 答 : 在 channel_shadow 类中定义背景, background: url(../images/bo-shadow.jpg) no-repeat bottom center; 此处位于背景不重复位于底部中间问题 6: 为什么中大校报一栏的图像 url 没有出现在 colsleft.html 中? 答 :iframe 元素会创建包含另外一个文档的内联框架 ( 即行内框架 ), 其中的规定在 iframe 中显示的文档的 URL 7 加入 cols02.css 和 cols02.html 完成后截屏 :

8 问题 1:cols02 为什么可以和 colsleft 排在一行? 答 :cols02 使用了 float: left; 且 cols02 和 colsleft 宽度之和不超过 998xp 的设定值 8 加入 quicklinks.html 和 quicklinks.css 9 加入 sublinks.html 和 sublinks.css 10 加入 footer.html 和 footer.css

9 问题 1:footer 中三块为什么可以排在一行? 它们之间的间隔线是怎么做到的? 答 :3 个 buttom 的元素都是 float:left, 不超宽的时候会并排左边 2 个元素的样式有 : border-right: #FFFFFF 1px solid; 所以在其右边会有一条边框问题 2:footer 中的背景颜色是在哪里设置的? 答 : 一开始的时候 ( 再给 body 加背景图之前 )footer 继承自 body,body 的背景颜色设置是绿色的,footer 中没有设置背景颜色, 所以也是绿色的但是这里问题就出现了, 之前我们把 body 加了个背景图片, 把 body 的绿色干掉了, 所以要实现 footer 的背景色还是在要在 foot 中设置

5-1 nav css 5-2

5 HTML CSS HTML CSS Ê Ê Ê Ê 5-1 nav css 5-2 5-1 5 5-1-1 5-01 css images 01 index.html 02 5-3 style.css css 03 CH5/5-01/images 04 images index.html style.css 05

院 系 信息科学与技术学院 学 号 班 级 ０６ 班

院系信息科学与技术学院学号　　　　　　　　班　级０６　班