Microsoft Word - 第5章.doc

Size: px

Start display at page:

Download "Microsoft Word - 第5章.doc"

馨贯牧
5 years ago
Views:

(1)DIV+CSS 页面布局设计 (2) 设计 2015 年 CERNET 华东北地区年会网站项目 1 DIV+CSS 页面布局设计 1.

1 实训 5 DIV+CSS 布局规划实训目标 (1) 熟悉常见网页布局结构类型 (2) 能够对主流商业网站布局结构进行分析 (3) 综合运用 DIV+CSS 对小型网站页面进行布局规划编写代码实现布局效果实训内容 (1) 使用 CSS 对 DIV 进行样式定义, 实现图层定位与布局 (2) 利用 DIV 的 float 属性来实现图层中多个子图层的水平排列 (3) 使用 DIV+CSS 完成常见的页面布局代码设计 (4) 综合运用 DIV+CSS 技术模拟真实网站进行网页仿真设计实训项目 (1)DIV+CSS 页面布局设计 (2) 设计 2015 年 CERNET 华东北地区年会网站项目 1 DIV+CSS 页面布局设计 1. 实训要求 (1) 固定页面布局设计, 用 DIV CSS 实现如图所示的布局效果 (2) 用 DIV+CSS 完成图所示的页面布局效果图 DIV+CSS 固定型页面布局之一图 DIV+CSS 固定型页面布局之二 (3) 弹性页面布局设计所谓弹性是指宽度与高度的单位为百分比, 而不是具体的数值运用 DIV+CSS 完成图所示的页面布局设计

Web 前端开发技术实验与实践 HTML CSS JavaScript( 第 2 版 ) 58 图 1-5-3 DIV+CSS 弹性页面布局 2.

实训所需知识点 (1) 图层 div 标记 <div style="position: absolute;left:10px;top:10px;width:100px;height:100px; background: red;"> </div>

2 Web 前端开发技术实验与实践 HTML CSS JavaScript( 第 2 版 ) 58 图 DIV+CSS 弹性页面布局 2. 实训内容 (1)DIV 创建与 DIV 嵌套 (2)DIV 属性的设置与应用 (3)DIV 样式引用方法 (4) 外部样式表的定义与引用 3. 实训所需知识点 (1) 图层 div 标记 <div style="position: absolute;left:10px;top:10px;width:100px;height:100px; background: red;"> </div> (2) 链接 link 标记 <link type="text/css" rel="stylesheet" href=" 外部样式表文件名称 " /> (3) 样式 style 标记 <style type= " url(" 外部样式表文件名称 "); </style> 4. 页面结构分析网站首页设计一般采用 DIV+CSS 结构进行布局通常页面 DIV 结构如图所示图一般网页布局 DIV 结构图

3 (1)HTML 代码中 DIV 结构规划 <div id="webpage">  <div id="head">  </div> <div id="mainbody">  <div id="sidebar">  </div> <div id="main">  </div> </div> <div id="footer">  </div> </div> (2) 编写外部样式表 css.css /* css.css*/ /* 基本信息 */ body{font:12px Tahoma; margin:0px; text-align:center; background:#ffffff; /* 页面样式 */ #webpage{width:100%; /* 页面头部样式 */ #head {width:800px;margin:0 auto;height:100px;background:#ffcc99; /* 页面主体样式 */ #mainbody{ width:100%; margin:8px auto; #sidebar{ background:#99cc33; width:25%; text-align:left; float:left; clear:left; overflow:hidden; #main{ background:#66ff66; width:75%; text-align:left; float:right; clear:right; overflow:hidden; #footer{ margin:0 auto; width:800px; height:50px;background:#00ffff; (3) 链接外部样式表 <link href="css.css" rel="stylesheet" type="text/css" /> 5. 实训过程与指导编程分别实现图图和图所示的布局效果以图为例, 具体步骤如下 : (1) 文档结构创建 1 启动程序, 创建 HTML 文档启动 EditPlus, 新建 HTML 网页, 在首行插入注释语句, 注明程序名称为 prj_5_1_1.html 格式如下:  2 保存文件输入文件名为 prj_5_1_1.html, 选择编码类型为 UTF-8, 然后保存文件 (2) 页面内容设计参照图页面结构分析, 分别在 body 标记中插入 8 个 div, 并在 div 中插入相关提示信息 1 在 body 标记中插入父 div, 设置 id 为 container 59 实训 5 科 DIV+CSS 布局规划

4 Web 前端开发技术实验与实践 HTML CSS JavaScript( 第 2 版 ) 60 2 在父 div 中插入子 div, 设置 id 为 header, 内容为这是头部信息区 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, 内容为这是版权信息区 (3) 表现设计 1 在 head 标记中插入 link 标记, 链接外部样式表格式如下所示 : <link href="layout_1.css" rel="stylesheet" type="text/css" /> 2 创建外部样式文件 layout_1.css 3 在 layout_1.css 文件中分别定义全局样式及各 div 样式具体样式定义描述如下 : 全局样式定义为边界上下为 0px 左右为自动字体特粗大小 28px 行高 1.5em #container 样式为宽度 900px 边界上下为 0px 左右为自动 #header 样式为高度 70px 背景颜色#CCFFCC 底边界 8px #nav 样式为高度 40px 背景颜色#CCFFCC 底边界 8px #maincontent 样式为底边界 8px #main 样式为图层向左浮动宽度 664px 高度 400px 背景颜色#FFFF99 #side 样式为图层向右浮动宽度 228px 高度 400px 背景颜色#FFCC99.clearfloat 样式为清除图层左右浮动 #footer 样式为高度 70px 背景颜色#CCFFCC 顶边框为粗细 8px 线型实线白色 (4) 保存并查看网页设计完成后通过浏览器观看页面效果, 如图所示根据图和图所示的页面效果, 设计 HTML 代码的 DIV 结构, 在 body 标记中插入相应的 DIV, 分别在不同的图层中插入相关提示信息, 根据页面布局效果, 参照 layout_1.css 格式编写外部样式文件 layout_2.css layout_3.css 格式如下所示: /*layout_2.css*/ *{font-weight:bolder;font-size:28px; margin:0; #container{margin:0 auto; width:900px; #header{height:100px; background:#6cf;margin-bottom:5px; #maincontent{margin-bottom:5px; #sidebar{float:left;width:200px;height:500px;background:#9ff; #content{float:right;width:695px;height:500px;background:#cff; /* layout_3.css */ *{padding:0px;margin:0 auto;font-weight:bolder;font-size:28px; #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:#ccff99; #content{margin-left:205px ;height:350px;

5 #menu {height:30px;background:#669933;margin-bottom:5px; #maincontent{margin-bottom:5px;height:350px; #sidebar{float:left; height:350px;background:#ccff99; #content{margin-left:205px ;height:350px; background:#ffffaa; #footer{height:60px; background:#99cc66;.clearfloat{clear:both; font-size: 1px;line-height: 0px; 项目 2 设计 2015 年 CERNET 华东北地区年会网站 1. 实训要求 (1) 运用 DIV+CSS 进行页面布局, 模仿网站构建一个完整的 2015 年 CERNET 华东北地区年会网站, 如图所示图年 CERNET 华东北地区年会网站首页 (2) 学会使用 4 种样式表分别对页面中文字段落图像等元素进行样式定义 (3) 学会创建 DIV 与设置 DIV 的属性 (4) 学会编写外部样式表文件, 并链接到 HTML 文档中 2. 实训内容 (1) 使用 DIV+CSS 布局技术年会网站页面布局 (2) 设计网站首页和二级导航页面的菜单 (3) 定义图层和图层嵌套 (4) 定义并引用内部样式表外部样式表 61 实训 5 科 DIV+CSS 布局规划

6 Web 前端开发技术实验与实践 HTML CSS JavaScript( 第 2 版 ) 3. 实训所需知识点 (1) 图层 div 标记 62 <div id="div1" class=" div2"> </div> (2) 链接 link 标记 <link type="text/css" rel="stylesheet" href="layout_link.css"/> (3) 样式 style 标记 <style url("layout_import.css"); #nav{background:#209060;width:100%;line-height:40px;color: white; </style> (4) 无序列表 ul 标记 <ul> <li> 首页 </li> <li> 会议介绍 </li> </ul> (5) 表格 table 标记 <table> <tr> <td><a href="#"> 在线注册 </a></td><td> </td> </tr> </table> (6) 浮动框架 iframe 标记 <iframe id="baidu" src=" ></iframe> (7) 首面漂动窗口设计 1 定义漂动图层 div,id 为 gg3, 在 div 中插入图像超链接, 并设置目标 URL <div id="gg3" style="width:170px;height:55px;"> <a target="_parent" href=" src="images/tx.jpg" width= "170" height="55" alt=""/></a> </div> 2 在 body 中插入 JavaScript 脚本, 启动运行程序 <script type="text/javascript"> var ad3=new AdMove("gg3"); // 定义 AdMove 对象 ad3.run(); // 启动运行 </script>

7 3 在 head 标记中定义 JavaScript 相关函数 <script type="text/javascript"> function addevent(obj,evttype,func,cap){ cap=cap false; if(obj.addeventlistener){ obj.addeventlistener(evttype,func,cap); return true; else if(obj.attachevent){ if(cap){ obj.setcapture(); return true; else{ return obj.attachevent("on" + evttype,func); else{ return false; function getpagescroll(){ var xscroll,yscroll; if (self.pagexoffset) { xscroll = self.pagexoffset; else if(document.documentelement&&document.documentelement.scrollleft){ xscroll = document.documentelement.scrollleft; else if (document.body) { xscroll = document.body.scrollleft; if (self.pageyoffset) { yscroll = self.pageyoffset; else if (document.documentelement && document.documentelement. scrolltop){ yscroll = document.documentelement.scrolltop; else if (document.body) { yscroll = document.body.scrolltop; arraypagescroll = new Array(xScroll,yScroll); return arraypagescroll; function GetPageSize(){ 63 var xscroll, yscroll; if (window.innerheight && window.scrollmaxy) { 实 xscroll = document.body.scrollwidth; 训 5 科 DIV+CSS 布局规划

8 Web 前端开发技术实验与实践 HTML CSS JavaScript( 第 2 版 ) 64 yscroll = window.innerheight + window.scrollmaxy; else if (document.body.scrollheight > document.body.offsetheight){ xscroll = document.body.scrollwidth; yscroll = document.body.scrollheight; else { xscroll = document.body.offsetwidth; yscroll = document.body.offsetheight; var windowwidth, windowheight; if (self.innerheight) { windowwidth = self.innerwidth; windowheight = self.innerheight; else if(document.documentelement && document.documentelement.clientheight){ windowwidth = document.documentelement.clientwidth; windowheight = document.documentelement.clientheight; else if (document.body) { windowwidth = document.body.clientwidth; windowheight = document.body.clientheight; if(yscroll < windowheight){ pageheight = windowheight; else { pageheight = yscroll; if(xscroll < windowwidth){ pagewidth = windowwidth; else { pagewidth = xscroll; 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 winsize=getpagesize(); AdMoveConfig.MoveWidth=winsize[2]; AdMoveConfig.MoveHeight=winsize[3];

9 AdMoveConfig.Scroll(); AdMoveConfig.Scroll=function(){ var winscroll=getpagescroll(); AdMoveConfig.ScrollX=winscroll[0]; AdMoveConfig.ScrollY=winscroll[1]; addevent(window,"resize",admoveconfig.resize); addevent(window,"scroll",admoveconfig.scroll); function AdMove(id){ if(!admoveconfig.isinitialized){ AdMoveConfig.Resize(); AdMoveConfig.IsInitialized=true; var obj=document.getelementbyid(id); obj.style.position="absolute"; var W=AdMoveConfig.MoveWidth-obj.offsetWidth; var H=AdMoveConfig.MoveHeight-obj.offsetHeight; var x = W*Math.random(),y = H*Math.random(); var rad=(math.random()+1)*math.pi/6; var kx=math.sin(rad),ky=math.cos(rad); var dirx = (Math.random()<0.5?1:-1), diry = (Math.random()<0.5?1:-1); var step = 1; var interval; this.setlocation=function(vx,vy){x=vx;y=vy; this.setdirection=function(vx,vy){dirx=vx;diry=vy; obj.custommethod=function(){ obj.style.left = (x + AdMoveConfig.ScrollX) + "px"; obj.style.top = (y + AdMoveConfig.ScrollY) + "px"; rad=(math.random()+1)*math.pi/6; W=AdMoveConfig.MoveWidth-obj.offsetWidth; H=AdMoveConfig.MoveHeight-obj.offsetHeight; x = x + step*kx*dirx; if (x < 0){dirx = 1;x = 0;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 < 0){diry = 1;y = 0;kx=Math.sin(rad);ky=Math.cos(rad); if (y > H){diry = -1;y = H;kx=Math.sin(rad);ky=Math.cos(rad); this.run=function(){ var delay = 10; interval=setinterval(obj.custommethod,delay); 65 实训 5 科 DIV+CSS 布局规划

10 Web 前端开发技术实验与实践 HTML CSS JavaScript( 第 2 版 ) 66 obj.onmouseover=function(){clearinterval(interval); obj.onmouseout=function(){interval=setinterval(obj.custommethod, delay); </script> 4. 页面设计要求页面布局结构如图所示, 将页面分成 header nav menu mianbody( 分为 mian rightbar 左右 2 个子 div) footer 等区域 header nav menu main rightbar footer 图 CERNET 华东北地区年会网站布局图层规划 5. 实训过程与指导编程实现 2015 年 CERNET 华东北地区年会网站具体步骤如下 : (1) 文档结构创建 1 启动程序, 创建 HTML 文档启动 EditPlus, 新建 HTML 网页, 在首行插入注释语句, 注明程序名称为 prj_5_2.html 格式如下:  2 保存文件输入文件名为 prj_5_2.html, 选择编码类型为 UTF-8, 然后保存文件 (2) 页面内容设计 1 页面布局规划根据图在 body 标记中插入相关 div, 形成 div 嵌套结构代码如下所示 : <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 的标记中, 插入无序列表, 设计导航菜单代码如下 :

11 <div id="nav" class=""> <ul> <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> <li><a href="#"> 联系我们 </a></li> </ul> </div> 3 在 id 为 main 的标记中插入相应的段落, 其中标题会议概要会议介绍会议动态宾馆地图统一应用 #bt 样式, 其格式如下 : #bt{font-size:28px;padding:2px 16px;font-weight:bold; 其他段落内容如下 : 会议概要 2015 年 CERNET 华东北地区教育信息化技术研讨大会时间 :2015 年 4 月 22 日至 4 月 25 日报到时间 :2015 年 4 月 22 日地点 : 山东省潍坊市会议主题 : 先进网络技术信息化规划与学校信息化实践信息技术推动教育教学变革技术应用研讨及工作交流等主办 :CERNET 华东北地区网络中心 CERNET 安徽省网络中心 CERNET 山东省网络中心山东省教育技术与装备协会承办 : 潍坊医学院会议介绍 2015 年 4 月日, 由 CERNET 华东北地区网络中心 CERNET 安徽省网络中心 CERNET 山东省网络中心及山东省教育技术与装备协会联合主办, 潍坊医学院承办的中国教育和科研计算机网 (CERNET)2015 年华东北地区教育信息化技术研讨会在美丽的山东省潍坊市召开研讨会主要议题包括先进网络技术信息化规划与学校信息化实践信息技术推动教育教学变革技术应用研讨及工作交流等会议将邀请 CERNET 专家教育技术专家部分国内高校及企业界专家作专家报告 4 在 id 为 rightbar 的标记中, 分别插入 id 为 rightbar_up rightbar_down 的 2 个子 div 在 id 为 rightbar_up 的 div 中, 插入段落 p, 内容为会议动态在 id 为 rightbar_down 的 div 中, 插入 3 行 3 列的表格, 表格中第 2 列中分别插入如下内容 : 潍坊天气预报在线注册修改信息将潍坊天气预报设置为超链接, 格式如下所示 : <a href=" target="_blank"> 67 实训 5 科 DIV+CSS 布局规划

12 Web 前端开发技术实验与实践 HTML CSS JavaScript( 第 2 版 ) 潍坊天气预报 </a> 在 id 为 rightbar_down 的 div 中, 插入段落和浮动框架代码格式如下 : 68 <p id="bt"> 宾馆地图 </p> <iframe id="baidu" height="180px" width="200px" frameborder="0" scrolling= "no" src=" ></iframe> 5 在 id 为 footer 的标记中, 插入 1 个 p 标记内容如下所示 : <p> Copyright CERNET 华东北地区网络中心 Designed By<a href=" wfmc.edu.cn" class="footer"> 潍坊医学院网络信息中心 </a></p> 6 完成上述操作后, 整个页面的内容信息添加完毕保存页面, 并在浏览器中查看网页效果如图所示图 CERNET 华东北地区年会网站初始页面

13 (3) 表现设计在 style 标记中分别定义 div p ul li a 等标记的样式, 其样式要求如下所示 : 1 定义最外层 div 样式 #container 样式为边界为上下 0 左右自动宽度 100% 2 定义头部 div 样式 #header 样式为内容水平居中宽度 100% 高度 243px 背景颜色 #7D26A8 图像 header23.png( 在 web 子目录下 ) 图像位置居中顶部不重复 3 定义导航 div 样式 #nav 样式为宽度 100% 高度 40px 颜色白色行高 40px 内容水平居中背景颜色 # 定义 ul 样式 ul 标记样式为边界为上下 0 左右自动( 不设置头部和导航条之间会有空白带 ) 宽度 950px 列表样式类型 none 内容水平居中用无序列表实现水平导航菜单关键有两点是消除无序列表前面的符号将默认垂直排列的菜单转换成水平排列的菜单消除列表项前的符号, 使用列表样式 ul{list-style-type:none; 实现菜单水平导航, 使用列表项样式 li{float:left; 实现导航菜单均匀显示有两种方法 : 一是通过设置列表项的宽度高度和文本居中实现, 如 width:100px;text-align:center;font-size:16px; ; 二是通过设置每个列表项的边界 (margin:0 20px;) 来实现, 在样式中追加属性值对 margin:0px 20px; 5 定义 ul 中的 li 样式 li 样式为边界为上下 0 左右自动向左浮动( 实现菜单水平导航 ) 文本居中对齐字体大小 16px 宽度 5.5em 填充上下 2px 左右 8px 6 定义 ul 中的 a 样式 a 样式为字体大小 16px 垂直居中对齐显示方式为块方式 7 定义 ul 中的 a:link a:visited a:active 样式 a:link a:visited a:active 样式为颜色为白色字符装饰为无 8 定义 ul 中的 a:hover 样式 a:hover 样式为背景颜色 #9933FF 文本居中对齐显示方式为块方式 9 定义主体部分 div 样式 #mainbody 样式为背景颜色 #FFFFFF 填充上下 0 左右自动边界为上下 0 左右自动宽度 1001px 10 定义主体左侧部分 div 样式 #main 样式为宽度 60% 图层向左浮动填充上下 0 左右 30px 边界为上下 0 左右自动定义主体右侧部分 div 样式 #rightbar 样式为宽度 30% 图层向右浮动定义版权 div 样式 #footer 样式为背景颜色 #FFFFFF 清除图层左右浮动文本居中对齐字体大小 16px 行高 40px (4) 保存并查看网页设计完成后通过浏览器观看页面效果, 如图所示 (5) 首页漂动窗口设计 69 参照 3. 实训所需知识点中 (7) 首面漂动窗口设计的步骤完成漂动窗口的添实加, 然后重新保存文件, 并通过浏览器查看页面效果, 如图所示训 5 科 DIV+CSS 布局规划

Web 前端开发技术实验与实践 HTML CSS JavaScript( 第 2 版 ) 70 图 1-5-8 仿真设计 2015 年 CERNET

14 Web 前端开发技术实验与实践 HTML CSS JavaScript( 第 2 版 ) 70 图仿真设计 2015 年 CERNET 华东北地区年会网站首页课外拓展训练 5 1. 采用 DIV+CSS 设计页面布局, 效果如图所示设计要求 : 图简易 W3School 教程网页面

15 (1) 采用内部样式表, 分别定义不同的 div 样式 1 定义全局样式为字体标粗大小 16px 填充和边界上下均为 0 左右为自动 2 #container 样式为宽度 100% 填充上下 0 左右自动边界为上下 0 左右自动 3 #header 样式为宽度 100% 高度 70px 背景颜色#99FF66 背景图像为 w3school.png, 不重复位居左上角 4 #nav 样式为宽度 100% 高度 32px 背景颜色#FBFBFB 导航中无序列表无符号水平居中显示, 列表项为行内元素填充上下 5px 左右 15px 5 #mainbody 样式为宽度 100% 高度 300px 填充上下 0 左右自动边界为上下 0 左右自动 6 #left 样式为图层向左浮动背景颜色 #EFEFEF 宽度 15% 高度 300px 其中无序列表为无符号的列表, 边界为 20px 7 #middle 样式为边界上下 0 左右 15% 高度 300px 首行缩进 2 个字符 8 #right 样式为图层向右浮动背景颜色 #EFEFEF 宽度 15% 高度 300px 9 #footer 样式为宽度 100% 高度 50px 背景颜色# B6B6B6 内容水平居中显示填充为 10px 10 #clearfloat 样式为清除图层左右浮动 (2) 程序名称为 project_5_1.html 附 : 文字内容如下 : 导航菜单 :HTML /CSS JavaScript Server Side ASP.NET XML Web Services Web 左侧导航菜单 :HTML XHTML HTML 5 CSS CSS3 TCP/IP 左侧导航菜单 : 参考手册 HTML/HTML5 标签 CSS 1,2,3 HTML 颜色 HTML ASCII HTML Latin-1 HTML 符号中间图层内容 : HTML 系列教程从左侧的菜单选择你需要的教程! HTML HTML 指超文本标签语言 HTML 是通向 Web 技术世界的钥匙在 W3School 的 HTML 教程中, 您将学习如何使用 HTML 来创建站点 HTML 非常容易学习! 你会喜欢它的! 现在开始学习 HTML! HTML 5 HTML 5 是下一代的 HTML HTML 5 仍处于完善之中然而, 大部分现代浏览器已经具备了某些 HTML 5 支持在 W3School 的 HTML 5 教程中, 您将了解 HTML 5 中的新特性现在就开始学习 HTML 5! 2. 设计 HTML5 简介页面, 效果如图所示要求如下 : (1) 页面标题为 HTML5 简介 (2) 网页内容标题 :2 标题字标记分别显示 HTML5 是如何起步的? 为 HTML5 科 DIV+CSS 布局规划 71 实训 5

16 Web 前端开发技术实验与实践 HTML CSS JavaScript( 第 2 版 ) 建立的一些规则 : h2 标记样式为字体加粗颜色白色背景 # 填充 10px 72 图 HTML5 简介 (3) 第 1 个标题下, 每行 1 个段落, 默认大小和字体 ; 但编者注 : 的样式为加粗斜体 ; 所有段落向右缩进 2 个字符行高 1.5 倍 (4) 第 2 个标题下, 是 1 个无序列表, 采用默认格式显示, 但无序列表也向右缩进 2 个字符行高 1.5 倍 (5) 所有内容放在 div 中, 图层 div 的样式为上下填充 20px 左右填充 10px (6) 程序名称为 project_5_2.html 附 : 文字内容如下 : HTML5 是如何起步的? HTML5 是 W3C 与 WHATWG 合作的结果编者注 :W3C 指 World Wide Web Consortium, 万维网联盟编者注 :WHATWG 指 Web Hypertext Application Technology Working Group WHATWG 致力于 Web 表单和应用程序, 而 W3C 专注于 XHTML 2.0 在 2006 年, 双方决定进行合作, 来创建一个新版本的 HTML 为 HTML5 建立的一些规则 : 新特性应该基于 HTML CSS DOM 以及 JavaScript 减少对外部插件的需求 ( 比如 Flash) 更优秀的错误处理更多取代脚本的标记 HTML5 应该独立于设备开发进程应对公众透明

Chapter V.S. PC

Chapter V.S. PC Chapter 14 14-1 V.S. PC 14-2 14-3 14-4 14-1 V.S. PC PC PC Yahoo! PC (https://tw.yahoo.com/) Yahoo! (https:// tw.mobi.yahoo.com/) Yahoo! a b a PC b PC PC Flash HTML5 CSS3 PC 14-2 14-3 PC PC Yahoo! PC https://tw.yahoo.com/