Web编程基础测试题第一部分（网页基础 ）.ppt

电子信息工程学院网页布局 《WEB编程基础》 二、关键技术 8、 DIV+CSS （2）页面布局与规划 页面的布局，大致分为以下几个部分： 1）顶部部分，其中又包括了LOGO、MENU和一幅Banner图片； 2）内容部分又可分为侧边栏、主体内容； 3）底部，包括一些版权信息。 电子信息工程学院网页布局 《WEB编程基础》 二、关键技术 8、 DIV+CSS （3）DIV结构 图2 DIV结构图 电子信息工程学院网页布局 《WEB编程基础》 二、关键技术 8、 DIV+CSS （3）DIV结构 │body {}　/*这是一个HTML元素，具体我就不说明了*/　　└#Container {}　/*页面层容器*/　　　　　├#Header {}　/*页面头部*/　　　　　├#PageBody {}　/*页面主体*/　　　　　│　├#Sidebar {}　/*侧边栏*/　　　　　│　└#MainBody {}　/*主体内容*/　　　　　└#Footer {}　/*页面底部*/ 电子信息工程学院网页布局 《WEB编程基础》 二、关键技术 8、 DIV+CSS （4）写入整体层结构与CSS div id=container!--页面层容器-- 　　div id=Header!--页面头部-- 　　/div 　　div id=PageBody!--页面主体-- 　　　　div id=Sidebar!--侧边栏-- 　　　　/div 　　　　div id=MainBody!--主体内容-- 　　　　/div 　　/div 　　div id=Footer!--页面底部-- 　　/div /div 电子信息工程学院网页布局 《WEB编程基础》 二、关键技术 8、 DIV+CSS （4）写入整体层结构与CSS /*基本信息*/ body {font:12px;margin:0px;text-align:center;background:#FFFFFF;} /*页面层容器*/ #container {width:100%} /*页面头部*/ #Header {width:800px;margin:0auto;height:100px;background:#FFCC99} /*页面主体*/ #PageBody {width:800px;margin:0auto;height:400px;background:#CCFF00} /*页面底部*/ #Footer {width:800px;margin:0auto;height:50px;background:#00FFFF} 电子信息工程学院网页布局 《WEB编程基础》 三、网页布局制作 1、 创建层结构 body div id=Header !--页面头部-- /div div id=PageBody !--页面主体-- div id=homeNav !--侧边栏-- div 首页 /div div 学院概况 /div 电子信息工程学院网页布局 《WEB编程基础》 二、关键技术 5、 CSS 属性选择器 （2）属性和值选择器 下面的例子为 title=“ Hello world ” 的所有元素设置样式： （3）属性和值选择器 - 多个值 下面的例子为包含指定值的 title 属性的所有元素设置样式。适用于由空格分隔的属性值： [title= Hello world ] { border:5px solid blue; } [title~=hello] { color:red; } 电子信息工程学院网页布局 《WEB编程基础》 二、关键技术 5、 CSS 属性选择器 （4）设置表单的样式 属性选择器在为不带有 class 或 id 的表单设 置样式时特别有用！ input[type=text] { width:150px; display:block; margin-bottom:10px; background-color:yellow; font-family: Verdana, Arial; } input[type=button] { width:120px; margin-left:35px; display:block; font-family: Verdana, Arial; } 电子信息工程学院网页布局 《WEB编程基础》 二、关键技术 6、 创建CSS （1）外部样式表 当样式需要应用于很多页面时，外部样式表将是理想的选择