传智播客韩顺平轻松搞定网页设计divcss.ppt

《传智播客韩顺平轻松搞定网页设计divcss.ppt》由会员分享，可在线阅读，更多相关《传智播客韩顺平轻松搞定网页设计divcss.ppt（94页珍藏版）》请在三一办公上搜索。

1、北京传智播客教育,轻松搞定网页设计之div+css,讲师：韩顺平qq:2317702760,内容介绍,1.初识css2.块级元素和行内元素3.css核心内容3.1 标准流3.2 盒子模型3.3 浮动3.4 定位4.css综合案例4.1 盒子模型经典案例4.2 仿sohu首页面布局,学习目标,掌握css的基本用法掌握css的四种选择器用法,初始css 使用css的必要性,请看一个问题案例HtmlPage1.htm这是一个栏目风格不同的页面,如果,我希望统一设置它们的样式该怎么办?,初始css 使用css的必要性,解决之道-css对案例HtmlPage1.htm，进行改造，使用css来统一设置所有

2、栏目的样式。,初始css 使用css的必要性,请再思考一个问题 汶川大地震时,所有的网站的图片,都变成黑白的了,这个是怎么实现的呢?案例HTMLPage2.htm这里用到了滤镜技术.,css的三种选择器,选择器,选择器是css中非常重要的概念.css中有四种不同的选择器 类选择器，又叫class选择器 id选择器 html元素选择器 通配符选择器 简单的说,选择器就是在css中创建，而在网页页面(html,jsp,php,)中使用。,css的三种选择器,类选择器,.类选择器名 属性名:属性值;,我们在HtmlPage1.html就使用到了类选择器,这里再给大家举一个例子:HTMLPage.ht

3、m,css的三种选择器,id选择器 我们在HTMLPage.htm中给大家演示id选择器的用法:如图:,#id选择器名 属性名:属性值;,css的三种选择器,html选择器 我们在HTMLPage.htm中给大家演示html选择器的用法:如图:如果我们希望网页中默认字体是 橙色，我们应当怎么处理。,html元素名称 属性名:属性值;,再比如，我们希望所有的超链接(1)默认样式是 黑色，24px,没有下划线(2)当鼠标移动到超链接时，自动出现下划线(3)点击后,超链接变成 红色。这又该怎么实现呢?test.html,css的三种选择器,通配符选择器 如果希望所有的元素都符合某一种样式，可以使用通

4、配符选择器。,*margin:0;padding:0 可以让所有html元素的外边距和内边距都默认为0，有时特别有用。,css的三种选择器,选择器深入探讨 我前面讲的都非常简单,实际上css的选择器使用还有很多您需要注意的地方，如果不注意根本就不能驾驭css 父子选择器 请大家看一个图:HTMLPage.htm如果希望特别强调非常两个字,该如何处理?方案:a.id选择器 b.class选择器c.父子选择器,css的三种选择器,选择器深入探讨 父子选择器 类选择器和id选择器都可以有父子选择器.,*父子选择器可以扩展的.,css的三种选择器,选择器深入探讨 一个元素可以同时有id选择器和类选择器

5、 请看一个案例:要实现新闻1 和其它的新闻 样式不 一样,这怎么实现?,css的三种选择器,选择器深入探讨 一个元素可以同时有id选择器和类选择器 当id选择器和类选择器发生冲突时,id选择器优先级 高于 类选择器.优先级:id选择器 类选择器 比如:id选择器指定字体为红色,而类选择器指定字体和蓝色，则页面显示红色.,css的三种选择器,选择器深入探讨 一个元素最多有一个id选择器,但是可以有多个类选择器 请看一个案例:要实现新闻3 有下划线并是斜体该 怎么实现?方案:a.id选择器 b.类选择器,当一个元素被多个类选择器修饰时，它们用空格隔开.,css的三种选择器,选择器深入探讨 一个元素

6、最多有一个id选择器,但是可以有多个类选择器，当类选择器发生冲突的时候，又以哪个为准呢?我们用一个案例来说明.,css的三种选择器,选择器深入探讨 当一个元素被id选择器,类选择器,html选择器同时限定时，优先级是:id选择器类选择器html选择器通配符选择器.,css的三种选择器,选择器深入探讨 在css文件中，如果有多个类/id选择器它们都有相同的部分，我们可以把相同的css样式放在一起,见案例。,案例:my.css/*招生广告*/.ad_stu width:136px;height:196px;background-color:#FC7E8C;margin:5px 0 0 5px;fl

7、oat:left;/*广告2*/.ad_2 background:#7CF574;height:196px;width:457px;float:left;margin:5px 0 0 6px;/*房地产广告*/.ad_house background:#7CF574;height:196px;width:152px;float:left;margin:5px 0 0 6px;,案例:my.css/*招生广告*/.ad_stu width:136px;background-color:#FC7E8C;margin:5px 0 0 5px;/*广告2*/.ad_2 background:#7CF5

8、74;width:457px;margin:5px 0 0 6px;/*房地产广告*/.ad_house background:#7CF574;width:152px;margin:5px 0 0 6px;.ad_stu,.ad_2,.ad_househeight:196px;float:left;,css的三种选择器,选择器课堂小练习,选择器练习,请使用适当的css选择器，完成下面的页面.,练习2.网页所有的超链接,要求这样的格式:(1)默认样式是 红色，24px,华文新魏字体没有下划线(2)当鼠标移动到超链接时，自动出现下划线,字体大小变成40px,字体变成宋体.green色.(3)点击后

9、,超链接变成 灰色。,块元素和行内元素,块元素和行内元素-概念 行内元素(inline element),又叫内联元素:内联元素只能容纳文本或者其他内联元素,常见内联元素 块元素(block element):块元素一般都从新行开,可以容纳文本,其它内联元素和其它块元素，即使内容不能占满一行，块元素也要把整行占满。常见块元素 举例说明:HTMLPage3.htm,块元素和行内元素,块元素和行内元素-区别 行内元素只占内容的宽度,块元素内容不管内容多少要占全行。行内元素只能容纳文本和其它行内元素，块元素可以容纳文本，行内元素和块元素.(与浏览器类版本和类型有关)一些css属性对行内元素不生效，比

10、如margin,left,right,width,height.建议尽可能使用块元素定位。(与浏览器类版本和类型有关),块元素和行内元素,块元素和行内元素-相互转换 请注意:行内元素和块元素可以相互转换 display:inline-转为行内元素(比如div)display:block-转为块元素(比如a)案例HTMLPage3.htm,css文件的相互引用,a.css b.css c.css 如果希望在a.css 中使用到b.css c.css 的选择器，可以通过import 指令来完成import url(“被引用的css文件”);,如果希望在html 或者 php文件中引用 某个 xxx

11、.css 也可以再 标签中import url(“某个css文件”);,css核心内容流,标准流/非标准流 流:在现实生活中就是流水,在网页设计中就是指元素(标签)的排列方式。标准流:元素在网页中就象流水，排在前面的元素(标签)内容前面出现，排后面的元素(标签)内容后面出现。案例Sfloat.htm 非标准流:当某个元素(标签)脱离了标准流比如因为相对定位排列，我们统称为非标准流排列。关于非标准流，我们在定位小节 讲解。,css核心内容盒子模型,盒子模型-概念 要搞清盒子模型，就必须先明白下面几个概念:在网页设计中常听的属性名：内容(content)、填充(padding)、边框(border

12、)、边界(margin)，CSS盒子模式都具备这些属性。,css核心内容盒子模型,盒子模型-案例 我们看一个案例，帮助大家理解盒子模型:box1.htm,考虑如何实现网页布局,css核心内容盒子模型,盒子模型-理解 我们可以把盒子模型转移到我们日常生活中的盒子(箱子)上来理解，日常生活中所见的盒子也具有这些属性，所以叫它盒子模式。那么内容就是盒子里装的东西；而填充就是怕盒子里装的东西（贵重的）损坏而添加的泡沫或者其它抗震的辅料；边框就是盒子本身了；至于边界则说明盒子摆放的时候的不能全部堆在一起，要留一定空隙保持通风，同时也为了方便取出嘛。与现实生活中盒子不同的是，现实生活中的东西一般不能大于盒

13、子,否则盒子会被撑坏的，而CSS盒子具有弹性，里面的东西大过盒子本身最多把它撑大,但它不会损坏的。,css核心内容盒子模型,盒子模型-进一步理解,css核心内容盒子模型,盒子模型-课堂小练习,请用css 的盒子模型，完成上面的网页.,css核心内容盒子模型,盒子模型-进一步理解 盒子模型远没有我讲的这么简单，比如大家再看一个案例:这种布局在很多大型网站上都有使用，我们可以把它看做是一个模式来套用,它的各个边距都可调节,从而达到你想要的布局,非常实用。但是要做成这种效果，需要用到css另外一个核心知识-浮动，所以我们回头再做这个案例。,css核心内容浮动,浮动 浮动是css中很重要的概念，必须掌

14、握。浮动涉及到左浮动、右浮动、清除浮动 例子:请在页面中放置三个div,背景是粉红，宽度150px,高100px，边框1px,蓝色,实线。myFloat.htm,css核心内容浮动,浮动 如果我们要实现如下图形，就可以使用右浮动,当把div1向右浮动时,它脱离标准流并且向右移动，直到它的右边缘碰到包含框的右边缘.,css核心内容浮动,浮动 如果我们要实现如下图形，就可以使用左浮动,如果把所有三个框都向左移动，那么框 1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。,css核心内容浮动,浮动 如果我们的div框很多,外面的框无法容纳水平排列的浮动div元素，那么其它浮动块向下

15、移动，直到有足够的空间。,css核心内容浮动,浮动 如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”：,css核心内容浮动,浮动你可以这么理解浮动:如果一个元素右/左浮动则:它本身会尽可能向右/左移动，直到碰到边框或者别的浮动元素,特别强调浮动对块元素和行内元素都生效!元素向右/左浮动，就相当于让出自己的左/右边,别的元素就会在它的左/右边排列。这里我们在看一个案例【myFloat2.htm】，来帮助大家理解上面的两句话。,css核心内容浮动,浮动-清除浮动 如果不希望别的元素在某个元素的左边或者右边，可以使用清除浮动的方法 clear:right;clear:left;

16、clear:both 这里我们在看一个案例 myFloat3.htm,来帮助大家理解上面的两句话。,css核心内容浮动,浮动-清除浮动 清除浮动是一个不太好理解的知识点，这个在后面的项目中我们再进一步讨论。,css核心内容定位,定位-基本概念 CSS定位(Positioning)属性允许你对元素进行定位.position 属性值：static(默认值)：元素框正常生成。块级元素生成一个矩形框，作为文档流/标准流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。relative：元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留,从这一角度看，好像该元素仍然在文档流/

17、标准流中一样。absolute：元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。fixed：元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。,css核心内容定位,定位-relative 大家是不是有点:我还是举例说明:HTMLPage6.htm,css核心内容定位,定位-absolute 大家是不是有点:再看一个例子:HTMLPage6.htm 这里我们可以使用绝对定位.,主讲

18、 韩顺平,css核心内容定位,定位-absolute 这里我们特别强调一点,absolute定位是对离自己最近的那个非标准流盒子而言的。通过一个例子说明:HTMLPage6.htm,轻松搞定网页设计(html+css+javasript),主讲 韩顺平,css核心内容定位,定位-static positioning默认值是static,对定位left,right不生效。案例HTMLPage6.htm.,轻松搞定网页设计(html+css+javasript),主讲 韩顺平,css综合案例,盒子模型经典案例 在学习完css核心内容后，我们现在就可以完成一些较为综合大案例,案例HTMLPage4.

19、htm这种布局在很多大型网站上都有使用，我们可以把它看做是一个模式来套用,它的各个边距都可调节,从而达到你想要的布局,非常实用。,轻松搞定网页设计(html+css+javasript),主讲 韩顺平,css综合案例,仿sohu网站首页布局 再看一个综合案例HTMLPage5.htm,当你掌握后，就具备编写较为复杂的页面的基本功。,轻松搞定网页设计(html+css+javasript),主讲 韩顺平,今天就到这里，谢谢大家,了解html的基本概念 理解html的运行基本原理 掌握html的一些基本用法 能写出简单的网页,学习目标,html是什么HTML（HyperText Mark-up L

20、anguage）即超文本标记语言或超文本链接标示语言，是目前网络上应用最为广泛的语言，也是构成网页文档的主要语言。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、动画、声音、表格、链接等。HTML的结构包括头部（Head）、主体（Body）两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。,html介绍,-html是什么,html可以做什么HTML可以编写静态网页.该静态网页可以包括文字、图形、动画、声音、表格、链接。从而构成一个个漂亮的网页。给大家看几个漂亮的网页吧!,html介绍,-html可以做什么,html发展历史,html介绍,-h

21、tml的发展历史,1993标记语言第一版,1995 html2.0,1996 html3.2w3c推荐标准,w3c推荐标准,2000 xhtml1.0w3c推荐标准,2001 xhtml1.1w3c推荐标准,2008 html5,蒂姆伯纳斯一李万维网之父html设计者w3c 创始人,w3c的介绍W3C是英文 World Wide Web Consortium 的缩写，中文意思是W3C理事会或万维网联盟。W3C于1994年10月在麻省理工学院计算机科学实验室成立。创建者是万维网的发明者Tim Berners-Lee。W3C组织是对网络标准制定的一个非赢利组织，像HTML、XHTML、CSS、XM

22、L的标准就是由W3C来定制。W3C会员（大约500名会员）包括生产技术产品及服务的厂商、内容供应商、团体用户、研究实验室、标准制定机构和政府部门，一起协同工作，致力在万维网发展方向上达成共识。,html介绍,-w3c介绍,蒂姆伯纳斯一李,html和xhtml区别 html-xhtml-xmlhtml语言本身有一些缺陷(比如内容和形式不能分离,标记单一,数据不能复用等),随着xml的兴起，xml越来越受到国际认可，所以人们希望xml来弥补html的不足,但是目前有成千上万的网页都是html编写的，所以完全使用xml来替代html还为时过早,于是w3c在2000推出xhtml1.0，建立XHTML

23、的目的就是实现HTML向XML的过渡。,html介绍,html xhtml区别,html项目演示 高级邮箱,html项目演示,html项目演示 麦当劳导航,html项目演示,html项目演示(可爱屋),html项目演示,html项目演示(旅游岛),html项目演示,html项目演示(仿sohu首页面),html项目演示,html运行原理本地运行,html运行的基本原理,html运行原理远程访问运行,html运行的基本原理,你的电脑,浏览器,远程服务器,hello.html,你可能产生的疑问?ie是怎样访问到hello.html?(url)万维网是个什么东东?,可以使用apache来测试一下这个

24、运行的效果!,万维网(www)简略图:,html运行的基本原理,www,sohu,子网,万维网(www)-综合图,html运行的基本原理,html的开发工具记事本 editplus vimfrontpagedw zend studio其它的ide,html的开发工具,html的基本结构从下面test.html我们可以看出html的基本结构,这是我的第一个网页 这是我的第一个网页 你好！,元素内容,html的基本结构,html的标记/元素HTML标记是用来组成HTML元素的HTML标记用两个尖括号”括起来 HTML标记一般是双标记，如和 前一个标记是起始标记,后一个标记为结束标记 两个标记之间的

25、文本是html元素的内容 某些标记称为“单标记”,因为它只需单独使用就能完整地表达意思,如html标记和html元素可以看做是同一个概念，在我的课程中为统一说法，就叫html元素。html常用的元素参考 html语言教程(html版),html的标记/元素介绍,html的元素的属性 每个元素都有多个属性,每个属性有不同的属性值来修饰，从而达到不同的显示效果.举例:,html元素的属性,段落标记字体标记 size 取值 1到7标题字体#=1，2，3，4，5，6 字体加粗,html的元素的属性关于每个元素，所包含的各个属性以及各个属性对应的属性值，请各位同学参看：html语言教程(html版),h

26、tml元素的属性,HTML符号实体-介绍 在网页上显示一些特殊的符号,我们需要使用html的符号实体,有些人把它称为字符实体,比如我们看一个小小的案例(html1_1.html)。为在网页上显示版权符号,我们就需要使用html的符号实体 才能在网页上正确显示。,HTML符号实体-一览表,html超链接,a.htm代码：老鼠爱大米齐秦北方的狼,b.htm代码：我听见你的声音有种特别的感觉让我不断想不敢再忘记你我记得有一个人永远留在我心中返回,打开当前计算机系统中默认的电子邮件客户端软件，例如:OutLook Express,html常用标记/元素-超链接,html图像元素,html常用标记/元素

27、-image,html表格,html常用标记/元素-table,html表格-小练习,html常用标记/元素-table,请用html编写如下网页,上机练习题,html常用标记/元素-table,请用html编写如下网页,html列表-无序列表,的属性设定（常用）：例如：type=square 设定符号款式，其值有三种，如下，默认为 type=disc：type=disc 时的列项符号为实心圆点。type=circle 时的列项符号为空心圆。type=square 时的列项符号为空心正方形。,html常用标记/元素-ul/li,列表内容,html列表-有序列表,称为顺序列表标记。则用以标示列表

28、项目。所谓顺序列表就是每一项有顺序，又称编号列表。的属性设定（常用）：例如：type=i设定数目款式，其值有五种，请参考 右表，内定为 type=1。start=4设定开始数目，不论设定了哪一数目款式，其值只能是 1,2,3.等整数，默认为 start=1。i可以取以下值中的任意一个：1 阿拉伯数字 1,2,3,.a 小写字母 a,b,c,.A 大写字母 A,B,C,.i 小写罗马数字 i,ii,iii,.I 大写罗马数字 I,II,III,.。,html常用标记/元素-ol/li,列表内容,html列表-框架,html常用标记/元素-frameset,html框架-(frameset小练习)

29、,html常用标记/元素-frameset/frame,完成下面的网页,用户点击左侧的超链接，可以看到相应的歌词,iframe 浮动窗口,html常用标记/元素-iframe 浮动窗口,form(表单)元素介绍,html常用标记/元素-form,.星号*部分可以为GET,也可以是 POST,form(表单)元素,html常用标记/元素-form,form(表单)元素-小练习,html常用标记/元素-form,input元素,html常用标记/元素-input元素,select/option/textarea,html常用标记/元素-select/option/textarea.,html常用标记/元素-课堂练习,html其它一些标记,参考给出的html网页文档，把各个html常用的元素，都过 一遍.,html常用标记/元素-汇总,课堂测试,课堂测试,课堂测试,课堂测试,课堂测试,课堂测试,