当前位置：文档之家 › 第7章 网页设计与制作-CSS样式使用

第7章 网页设计与制作-CSS样式使用

  • 格式：pptx
  • 大小：1.43 MB
  • 文档页数：40

下载文档原格式

  / 40

合集下载

HTML5网页设计与制作教学课件第七章使用表格

HTML5网页设计与制作教学课件第七章使用表格
第7章
使用表格
第7章 使用表格
在生活中表格随处可见，如账表、明细表、成绩表 、数据表等，在网页中也是一样。制作网页的时候， <table>表格标签是最常用的，也是最必不可少的工具 。表格拥有特殊的结构和布局模型，能够比较醒目地 描述数据间的关系，如果借助 CSS设计表格样式，可 以帮助用户在阅读数据时更便捷、更轻松。
【拓展练习】
使用border-spacing属性分离单元格时，应该注意三个问题。
第一，早期版本的IE浏 览器不支持该属性，要定义 相同效果的样式，就需要同 时结合 HTML的cellspacing属性来设置。
第二，当使用border-spacing
属性时，应确保数据单元格之间的相
互独立性，不能再使用border-
【拓展练习】
利用CSS的padding属性可以更灵活地定制单元格补白区域的大小，也可以根据需要定义不同边 上的补白。使用padding属性还可以为表格定义补白，此时可以增加表格外框与单元格的距离。以上 面的示例为基础，重新定义内部样式表，在<head>标签内的<style type="text/css">标签中清除 其他表格样式，添加如下样式。
新建一个网页，保存为 test.html，在 <body>内使用 <table>、<tr>、<th>和<td>标签
设计一个简单的表格，然后使用HTML的colspan、rowspan属性合并相邻单元格中的相同项目，
代码如下所示。
7.1 设计表格结构
7.1.2 设计表格附加结构
【随堂练习 】
在IE浏览器中预览演示效果，如图7-4所示。

《网页设计与制作》习题及答案

《网页设计与制作》习题及答案

第1章网页设计基础1.网页文件不包括 ( D )A HTML文件 B多媒体文件 C图像文件 D Dos文件2.网页构成元素按照元素划分为（ABCD ）A 文本B 图像 C超链接 D音频和视频3. HTML文档结构中表示头部信息的（ B）A < body > < /body > B<head></head> c <html></html> D<title></title>4.在HTML文档中，使文本内容强制换行的标签是（B）A<hr> B<br> C<pre> D<hn>5.以下哪个标签语言符合HTML的语法规范（D）A<img src=pic.jpg width=150 height=200/>B<p><div>文字加粗</p></div>C<p align=center>D<hr width=”400” color=”#000000”>6．不属于HTML标记的是（ C ）A.<html>B.<head>C.<color>D.<body>7．为了标记一个HTML文件，应该使用的HTML标记是（ C ）A.<p></p>B.<body></body>C.<html></html >D.<title></ title>二填空1.网页分为（静态网页）和（动态网页）两种类型。

2.HTML中的所有标签都是有一对（<>）围住。

3.HTML网页的标题是通过（<title></title>）标签显示的。

4.（<hr>）是水平线标签，可以在页面生成一条水平线。

网页设计与制作教程(第4版)电子教案

网页设计与制作教程(第4版)电子教案
动态网页技术根据程序运行的区域不同，分为客户端动 态技术与服务器端动态技术。
客户端动态技术不需要与服务器进行交互，实现动态功 能的代码往往采用脚本语言形式直接嵌入到网页中。服务器 发送给浏览者后，网页在客户端浏览器上直接响应用户的动 作。常见的客户端动态技术包括JavaScript、ActiveX和 Flash等。
让浏览者访问。上传工具选择合适与否将影响对网站更新维 护的效率。 1．CuteFTP 2．FlashFXP 3．LeapFTP 4．其他上传工具 （1）UploadNow!上传工具 （2）WS-FTP上传工具 Dreamweaver软件自身也具有上传网页的功能。
1.6 常用网页制作软件
1.6.5 网页设计工具的发展动向
从平面设计的角度来看，每个虚拟界面就是一个版面， 可以利用平面设计理念对其进行设计。但是，网页毕竟是计 算机技术和多媒体技术的产物，具有某些一般版面所没有的 特点和性质。为了对虚拟版面进行设计，就必须拓展设计的 范围，丰富设计的手段，如对于版面各种媒介的设计与制作， 要应用一些新的技术。
2.1 基本概念
如果在浏览器的地址栏中输入网站地址，浏览器会自动 连接到这个网址所指向的网络服务器，并出现一个默认的网 页（一般为index.html或default.html），这个最先打开 的默认页面就被称为“主页”或“首页”。
1.1 网页、网站的概念
1.1.2 静态网页和动态网页
静态网页指客户端的浏览器发送URL请求给WWW服务 器，服务器查找需要的超文本文件，不加处理直接下载到客 户端，运行在客户端的页面是已经事先做好并存放在服务器 中的网页。其页面的内容使用的仅仅是标准的HTML代码， 静态网页通常由纯粹的HTML/CSS语言编写。
版面编排的首要任务就是根据网页传达内容的需要，将 不同的文字和图片按照一定的次序用最合理的编排和布局组 成一个有机的整体并展现出来。版面编排应注意以下几点。

《网页设计与制作》习题参考答案

《网页设计与制作》习题参考答案

《网页设计与制作》习题参考答案第一章网页设计与制作概述1、填空题（1）静态网页、动态网页（2）HyperText Mark-up Language、超文本标记语言或超文本链接标示语言（3）文字、图形图像、动画、视频（4）Microsoft Frontpage（或SharePoint Designer）、Adobe Dreamweaver2、问答题(1)www的特点有哪些？答：1）万维网是无数个网络站点和网页的集合，它们在一起构成了因特网最主要的部分。

2）WWW是建立在客户机／服务器模型之上的。

3）WWW是以超文本标注语言HTML(Hyper Markup Language)与超文本传输协议HTTP(Hyper Text Transfer Protocol)为基础。

4）WWW能够提供面向Internet服务的、一致的用户界面的信息浏览系统。

5）WWW浏览提供界面友好的信息查询接口。

(2)网页的基本元素有哪些？答：组成网页的元素主要有文字、图像、声音、动画、视频、超链接以及交互式处理等。

它们的特点如下：文字：网页中的大多数信息主要以文本方式显示，文字是网页的主体，负责传达信息的功能。

图像：图片给网页添加了色彩，使网页做到了图文并茂，形象生动。

动画：动画是动态的图形，添加动画可以使网页更加生动。

常用的动画格式包括动态GIF图片和Flash动画声音和视频：声音是多媒体网页中的重要组成部分，支持网络的声音文件格式很多，主要有MIDI、WA V、MP3和AIF等。

网页中支持的视频文件格式主要有Realplay、Mpeg、A VI和DivX等。

表格：在网页中使用表格可以控制网页中信息的结构布局。

超链接：超链接是网页与其他网络资源联系的纽带，是网页区别于传统媒体的重要特点导航栏：导航栏的作用是引导浏览者游历所有站点。

表单：表单类似于Windows程序的窗体，用来将浏览者提供的信息，提交给服务器端程序进行处理。

其他常见元素：包括悬停按钮、Java特效和ActiveX等各种特效。

《网页设计与制作案例实战教程》-教案

《网页设计与制作案例实战教程》-教案

网页设计与制作案例实战教程教案第1章网页设计基础1.收集不同汽车网页并分析其特点,如图为比亚迪官方网站首页。

2.收集不同手机网页并分析其特点,如图为华为官方网站首页。

第2章 Dreamweaver入门操作件。

小结熟悉Dreamweaver 的工作界面掌握站点的创建与管理掌握文档的基础操作课后练习1.酷乐冰屋根据所学内容制作酷乐冰屋网页。

2.哎呀宠物根据所学内容制作哎呀宠物网页。

第3章 HTML知识准备1.微著齿轮根据所学内容制作微著齿轮网页。

2.闪电速运根据所学内容制作闪电速运网页。

第4章页面与文本第5章图像与多媒体元素1.美相图片根据所学内容制作美相图片网页。

2.赛克音乐根据所学内容制作赛克音乐网页。

第6章超链接的应用第7章使用表格布局网页1.倏尔鲜花根据所学内容制作倏尔鲜花网页。

2.卓越办公根据所学内容制作卓越办公登录页。

第8章 CSS网页美化技术根据所学内容美化瑞成文具网页，前后对比效果如图。

根据所学内容美化玩偶之家网页，前后对比效果如图。

第9章 Div+CSS网页布局技术掌握CSS与Div布局基础小结掌握CSS布局方法1.湖江船业根据所学内容制作湖江船业网页，效果如图。

2.安居养老根据所学内容制作安居养老网页，效果如图。

第10章表单的应用1.倏尔鲜花根据所学内容制作倏尔鲜花网页。

2.卓越办公根据所学内容制作卓越办公登录页。

第11章模板和库根据所学内容制作格纹帽业网页。

第12章行为的应用根据所学知识为动物保护协会网页添加行为。

《网页设计与制作》课程标准

《网页设计与制作》课程标准

《网页设计与制作》课程标准学时数：48学时________________ 课程性质：专业必修课—适用专业：计算机应用专业—一、本课程的性质、地位、作用以及与其它相关课程内容的联系《网页设计与制作》是计算机应用专业的一门专业必修课，是计算机类专业的一门实践环节课程，也可以作为其他相关专业的实践课程或选修课，它是一门操作性和实践性很强的职业技术课程。

本课程的主要内容为系统介绍网页编辑与制作软件Dreamweaver,通过这种有代表性的网页制作软件的使用，掌握网站设计的全过程，并能熟练地制作出有专业水准的网站。

二、课程教学目标本门课程在专业教学计划中起着十分重要的作用，通过这门课程，学生可以掌握以下技能和知识：*掌握网站的开发流程，如建站规划、效果图制作、建立站点等相关知识。

*掌握各种网页元素在DreamWeaVer中的使用。

例如表格、文本、图像、超级链接、层和表单等。

*掌握测试和发布网站的方法。

包括网站测试的内容和方法。

*能够解决一些网页设计中的常见问题。

三、本课程学时安排四、课程教学内容和基本要求（按章节详细阐述）第一章：网页设计概述（一）教学重点和难点重点：Dreamweavercs5的参数设置、Dreamweaver的站点设置。

难点：DreamWeaVer的站点设置。

（二）教学内容和基本要求教学内容：基础知识，初识DreamWeaver,DreamWeaVerCS5的参数设置，设置站点。

基本要求：了解网页设计基本知识；掌握DreanlweaVerCS5的参数设置；熟练掌握Dreamweaver的站点设置。

第二章：表格布局（一）教学重点和难点重点：表格基本操作、表格布局。

难点：表格布局。

（二）教学内容和基本要求教学内容：表格基本操作，表格高级应用，表格布局，网页设计基础。

基本要求：了解表格基本操作、表格高级应用及网页设计基础；掌握表格基本操作；熟练掌握表格布局。

第三章：CSS样式表（一）教学重点和难点重点：CSS样式表应用。

第7章 网页制作-浮动与定位_教学设计(教案)

《网页设计与制作(HTML+CSS)》教学设计(教案)课程名称：网页设计与制作(HTML+CSS) 授课年级：XX年级授课学期：XX学年第一学期教师姓名：某某老师XX年XX月XX日课题名称第7章浮动与定位计划学时6 课时内容分析默认情况下，网页中的元素会在浏览器窗口中从上到下或从左到右一一罗列。

如果仅仅按照这种默认的方式进行排版，网页将会单调、混乱。

为了使网页的排版更加丰富、合理，在CSS中可以对元素设置浮动和定位样式。

本课程将对元素的浮动和定位进行详细讲解。

教学目标及基本要求要求学生初学者能够熟练地运用浮动和定位进行网页布局，掌握清除浮动的几种常用方法，为后面学习网页布局打下良好的基础。

重点及措施教学重点：清除浮动的几种方法、overflow属性、相对定位和绝对定位的应用。

难点及措施教学难点：当浮动元素对周围其他元素产生影响时，如何选择恰当的方法清除浮动。

教学方式教学采用教师课堂讲授为主，使用教学PPT讲解教学过程第一课时（认识浮动、元素的浮动属性float）认识浮动初学者在设计一个页面时，通常会按照默认的排版方式，将页面中的元素从上到下一一罗列，如下图所示。

通过这样的布局制作出来的页面看起来呆板、不美观，然而大家在浏览网页时，会发现页面中的元素通常会按照左、中、右的结构进行排版，如下图所示。

通过这样的布局，页面会变得整齐、有节奏。

想要实现第二张图所示的效果，就需要为元素设置浮动。

所谓元素的浮动是指设置了浮动属性的元素会脱离标准文档流的控制，移动到其父元素中指定位置的过程。

元素的浮动属性float定义浮动在CSS中，通过float属性来定义浮动，其基本语法格式如下：选择器{float:属性值;}在上面的语法中，常用的float属性值有三个，分别表示不同的含义，具体如下：●left：元素向左浮动●right:元素向右浮动●none:元素不浮动（默认值）✧不设置浮动当对页面中的所有元素均不应用float属性，也就是说元素的float属性值都为其默认值none。

《网页设计与制作》课程标准

欢迎阅读广西玉林高级技工学校《网页制作与设计》课程标准一、课程基本信息3．理解HTML 页面框架的作用，能够针对需求进行框架的设计；4．掌握各类HTML 表单元素标签，能够进行表单设计；5．掌握各类HTML 多媒体元素标签，能够进行多媒体页面设计；6．掌握CSS 样式的基本使用方法，能够应用CSS 样式表美化页面；7．掌握CSS 网页布局的方法，能够结合DIV 标签进行页面布局；8．掌握JavaScript 的语法基础，能够编写简单的JavaScript 应用程序；9．掌握JavaScript 的函数、内置对象、事件等，能够实现表单的验证；10．掌握DOM 树形结构及其操作方法，能够控制DOM 对象。

2.职业技能目标1．能独立进行资料收集与整理、具备用户需求的理解能力；2．能根据项目需求，具备项目页面的设计与实现能力；3．能根据静态页面设计原则与CSS 技术规范，实现页面美化与布局；4．具有使用JavaScript 技术进行页面事件处理与表单验证的能力；5．能根据DOM 树形结构，进行页面DOM 的控制；12345注重理论与实践相结合、教材内容与行业标准要求相结合，强调理论在实践过程中的应用。

（二）教学建议从《网页设计与制作》的实际问题出发，精心准备各种典型案例，构建课程的宏观教学设计。

例如，公司网站、网上鲜花直销、个人网站精选、书籍专卖等。

以若干个案例为载体，形成循序渐进、种类多样的项目群，构建完整的教学设计布局。

1、教学采用“四阶段教学法”，将“教、学、练、做”融为一体。

教学体现“教师为主导，学生为主体，训练为主线”的原则，课堂上可以采用“四阶段教学法”：第1个阶段，案例引入，提出问题。

通过案例演示，提出问题，给出知识点，讲解案例应用背景，给学生一个切入点，建立感性认识。

目的是激发学生的学习兴趣、让学生感到学有所用，从而明确本次课的教学目标。

第2个阶段，学生自主学习，尝试解决问题。

充分利用我校以及互联网网络教学资源，引导学生自主学习，找到解决问题的方法和操作技能，培养学生的自主学习意识和学习方法。

HTML5+CSS3网页设计与制作单元7 网页特效与制作商品详情页面

JavaScript 是一种脚本编程语言，它的基本语法与C 语言类似，但运行过程中不需要 单独编译，而是逐行解释执行，运行快。JavaScript 具有跨平台性，与操作环境无关，只 依赖于浏览器本身，对于支持JavaScript 的浏览器就能正确执行。
目录导航
渐进训练
任务 7-1 设计与制作电脑版商品详情页面0701.html
.l_column .product_contentbox { margin-bottom: 10px; }
#product_main .r_column { float: right; width: 230px; }
【任务7-1-1】规划与设计商品详情页面的布局结构
表7-2 商品详情页面0701.html 主体布局结构对应的CSS 样式代码
HTML5+CSS3网页设计与制作单元7 网页特效与制作商品详情页面
本章导读
The chapter’s introduction
将JavaScript 程序嵌入HTML 代码中，对网页元素进行控制，对用户操作进行响应， 从而实现网页动态交互的特殊效果，这种特殊效果通常称为网页特效。在网页中添加一些 恰当的特效，使页面具有一定的交互性和动态性，能吸引浏览者的眼球，提高页面的观赏 性和趣味性。
HTML代码
<div class="pages_nav"> </div> <div id="product_focus"> <div class="product_title"> </div> <div class="l_column"> <div class="slider"> <a> <div class="jqzoom"> </div> </a> <div id="sPicture"> </div> <div class="clear"> </div> <div class="btn"> </div> </div> <div class="info"> <div id="updatePanel4"> </div> <div class="support_payment_box"> </div>

简述css的定义与使用方法

简述css的定义与使用方法CSS（层叠样式表）是一种用于描述网页上的元素样式的语言。

它可以控制网页的布局、字体、颜色、背景等方面的外观。

本文将简述CSS的定义与使用方法。

一、CSS的定义CSS是一种样式表语言，用于描述网页上的元素样式。

它与HTML结合使用，通过为HTML元素添加样式，可以改变其外观和排版效果。

CSS的核心思想是将样式和内容分离，使得网页的结构和表现分开，提高了网页的可维护性和灵活性。

二、CSS的使用方法1. 内联样式：可以直接在HTML元素的标签中使用style属性来定义样式。

例如，可以通过设置font-size属性来改变文字的大小：`<p style="font-size: 16px;">这是一段文字</p>`。

2. 内部样式表：可以在HTML文档的<head>标签中使用<style>标签来定义样式。

在<style>标签中，可以使用选择器来选择要应用样式的HTML元素，并设置相应的样式。

例如，可以使用p选择器来选择所有的段落元素，并设置它们的字体颜色为红色：`<style> p {color: red;} </style>`。

3. 外部样式表：可以将样式代码写在一个独立的CSS文件中，然后在HTML文档中使用<link>标签将CSS文件链接到HTML文档中。

这样可以实现样式的复用和统一管理。

例如，可以在一个名为style.css的CSS文件中定义样式，然后在HTML文档中使用<link>标签将其链接：`<link rel="stylesheet" type="text/css" href="style.css">`。

4. 继承样式：HTML元素可以继承其父元素的样式。

例如，如果在一个<div>元素中设置了字体颜色为蓝色，那么该<div>元素内的所有子元素的字体颜色都会继承这个蓝色。

  1. 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

行内样式
这种样式是直接添加在HTML的标签里，语法如下：
<标签名 style=”样式规则的集合”>网页内容< /标签名>
【例】：
<p style=”color: blue; font-size: 10pt”>CSS实例</p>
代码说明：
用蓝色显示字体大小为10pt的“CSS实例”。尽管使用简单、显 示直观，但是这种方法不怎么常用，因为这样添加无法完全发挥 样式表的优势“内容结构和格式控制分别保存”。
案例（文字滚动效果） <marquee direction="up" scrollamount="2" onMouseOver="stop()" onMouseOut="start()"> <div>文字内容</div></marquee>
div设置宽高 400*100 固定定位 top: 20% left: 25%;
复习
第7章 CSS样式使用
$ [知识目标]
了解CSS样式的概念 掌握CSS样式表的创建方法 掌握应用CSS样式表的方法
8 [能力目标]
了解CSS样式的概念 掌握CSS样式表的创建方法 掌握应用CSS样式表的方法
什么是CSS层叠样式表
• CSS（Cascading Stylesheets，层叠样式 表）是一种制作网页的新技术，也有的人称 之为层叠样式表（Cascading Stylesheet） ，现在已经为大多数的浏览器所支持，成为 网页设计必不可少的工具之一。
看看段落中的字体有什么变化？
语法规定
4．注释
你可以在CSS中插入注释来说明你代码的意思 ，注释有利于你或别人以后编辑和更改代码时 理解代码的含义。在浏览器中，注释是不显示 的。CSS注释以"/*" 开头，以"*/" 结尾。
CSS的分类
• 根据添加层叠样式表的方法，可以将 CSS分为以下三类：
– 行内样式（内联样式、直接样式） – 嵌入样式 – 外部样式
为了使你定义的样式表方便阅读，你可以采用分行的书写格式 【例】：
p{ text-align: center; color: black; font-family: arial }
（段落排列居中，段落中文字为黑色，字体是arial）
【例】： 注意：
“属性:值”又叫做样式规则，大括号内允许出现多条规则，规则与规 则之间必须用“;”将其隔开，最后一条规则的“;”可以不写。
优点：
上面的“color: blue; font-size: 10pt”这个样式表就可以修改本文 档中所有P标签的格式。
外部样式
这种样式是将样式表内容保存在一个以 “.css”为扩展名的外部文件里，然后再使 用链接或导入法将其引用到HTML文档里 来。
选择器
• 要使用css对HTML页面中的元素实现一 对一，一对多或者多对一的控制，这就需 要用到CSS选择器。
要用CSS就可以轻松实现，从而更快地下载页面 。
• 使页面的字体变得更漂亮，更容易编排，使页面 真正赏心悦目。
• 你可以轻松地控制页面的布局 。 • 你可以将许多网页的风格格式同时更新，不用再
一页一页地更新了。你可以将站点上所有的网页 风格都使用一个CSS文件进行控制，只要修改这 个CSS文件中相应的行，那么整个站点的所有页 面都会随之发生变动。
一个网页的基本结构由标题、标志、页眉、导 航栏、主要内容区和页脚等。
标题：用来提示该页面内容的，通常显示在IE的 标题栏。 标志：网站独特的形象标识。 页眉：多用于设置网站的宗旨、宣传口号和广告 语等。 导航栏：用于帮助访问者快速进入想要的页面， 通常放在页面的顶端和左边。 内容区：它是页面设计的主体元素。 页脚：多用于标注站点所属公司的名称、地址、 版权和联系方式等。
和p元素（段落）都归为“center”类，这使两个元素的样式都跟随 “.center”这个类选择器： – 这个标题是居中排列的 – 这个段落也是居中排列的
• 注意：
– 这种省略HTML标签的类选择器是我们经后最常用的CSS方法， 使用这种方法，我们可以很方便的在任意元素上套用预先定义好 的类样式。
课堂案例制作
【例】：
Table TR TD P{ font-size: 9pt } （“文字尺寸为9号字”这条规则只能对P标签有效， 前提是：这个P标签必须是出现在TD中，TD又必须是 出现在TR中，这个TR又必须是出现在TABLE中。其他 地方的P标签是不受到这条规则影响的）
课堂案例
使用列表制作导航栏。
• 复习：css层叠样式表 • css三个组成：
p { font-family: "sans serif"} （定义段落字体为sans
serif）
语法规定
3．如果需要对一个选择器指定多个属性时，我们使用分号将所有的 属性和值分开 【例】：
p { text-align: center; color: red} （段落居中排列；并且段落中的文字为红色）
嵌入样式举例
<head> <style type=”text/css”>
<!— P{color: blue; font-size: 10pt} -->
</style> </head> <body>
<p>CSS实例</p>
</body> 代码说明：
这样也可以将“CSS实例”修改成为蓝色显示字体大小为10pt 。
CSS的语法
• CSS的定义是由三个部分构成：
– 选择器（selector），属性（properties）和 属性的取值（value）。
• 基本格式如下：
– Selector { property:value} – 选择器 { 属性 :值 ；属性:值； }
语法规定
1．属性和值要用冒号隔开 2．如果属性的值是多个单词组成，必须在 值上加引号，比如字体的名称经常是几个 单词的组合： 【例】：
• W3C（The World Wide Web Consortium） 把动态HTML（Dynamic HTML）分为三个 部分来实现：脚本语言（包括JavaScript、 Vbscript等）、支持动态效果的浏览器和 CSS样式表。
CSS的用途
• 在几乎所有的浏览器上都可以使用。 • 以前一些非得通过图片转换实现的功能，现在只
ID选择器
定义ID选择器要在ID名称前加上一个“#”号。和 类选择器相同，定义ID选择器的属性也有两种方 法。下面这个例子，ID属性将匹配所有id="intro" 的元素：
【例】：
#intro {
font-size:110%; font-weight:bold; color:#0000ff; background-color:transparent
• 举例：要两个不同的段落，一个段落向右对齐，一个段落 居中，先定义两个类：
• 【例】：
p.right { text-align: right} p.center { text-align: center} – 然后用在不同的段落且只能用在段落里，只要在HTML标签后跟上
“class = 选择器名” – 这个段落就会向右对齐的 – 另外一个段落就会是居中排列的
一个网页的基本结构由标题、标志、页眉、导 航栏、主要内容区和页脚等。
标题：用来提示该页面内容的，通常显示在IE的 标题栏。 标志：网站独特的形象标识。 页眉：多用于设置网站的宗旨、宣传口号和广告 语等。 导航栏：用于帮助访问者快速进入想要的页面， 通常放在页面的顶端和左边。 内容区：它是页面设计的主体元素。 页脚：多用于标注站点所属公司的名称、地址、 版权和联系方式等。
行内样式 嵌入样式 外部样式 选择器：选择器名称{ 属性：属性值；} 标签选择器：p{属性：属性值； } 包含选择器：body ul li{ }
table tr td{ }
$ [知识目标]
掌握CSS中组选择器的使用方法 掌握CSS中ID选择器的使用方法 掌握简单的DIV布局
8 [能力目标] 可以使用ID选择器进行简单网页布局
• 注意：
– 类的名称可以是任意英文单词或以英文开头与数字的组合，一般 以其功能和效果简要命名。
class（类）选择器
• 类选择器还有一种用法，在选择器中省略HTML标签名， 这样可以把几个不同的元素定义成相同的样式
• 【例】：
.center { text-align: center} – （定义.center的类选择器为文字居中排列） – 这样的类可以被应用到任何元素上。下面我们使h1元素（标题1）
<!-- 样式表的具体内容 -->
</style>
</head>
type=”text/css”表示样式表采用MIME类型，帮助不 支持CSS的浏览器过滤掉CSS代码，避免在浏览器 面前直接以源代码的方式显示我们设置的样式表。 但为了保证上述情况一定不要发生，还是有必要在 样式表里加上注释标识符“< !--注释内容-->”。
重点难点： DIV布局时对定位的运用 DIV布局中对浮动的使用
组选择器
把相同元素的选择器组合起来书写，用逗号 将选择器分开，这样可以减少样式重复定义 ：
选择器1，选择器2，选择器3 {属性1：值1；属 性2：值2；属性3：值3}
【例】：
h1, h2, h3, h4, h5, h6 { color: green } （这个组里包括所有的标题元素，每个标题元素 的文字都为绿色）
注意：
这里就没有选择器了，p标签在这充当了选择器的用途。