传智播客-韩顺平轻松搞定网页设计-div+css

—高级软件人才实作培训专家!北京传智播客教育讲师：韩顺平email:[e-mail]:2317702760—高级软件人才实作培训专家!主讲:韩顺平内容介绍1.初识css2.块级元素和行内元素3.css核心内容3.1标准流3.2盒子模型3.3浮动3.4定位4.css综合案例4.1盒子模型经典案例4.2仿sohu首页面布局4.3可爱屋网站首页面—高级软件人才实作培训专家!主讲:韩顺平学习目标①掌握css的基本用法②掌握css的四种选择器用法—高级软件人才实作培训专家!主讲:韩顺平初始css–使用css的必要性■请看一个问题案例[HtmlPage1.htm]这是一个栏目风格不同的页面,如果,我希望统一设置它们的样式该怎么办?—高级软件人才实作培训专家!主讲:韩顺平初始css–使用css的必要性■解决之道-css对案例[HtmlPage1.htm]，进行改造，使用css来统一设置所有栏目的样式。—高级软件人才实作培训专家!主讲:韩顺平初始css–使用css的必要性■请再思考一个问题汶川大地震时,所有的网站的图片,都变成黑白的了,这个是怎么实现的呢?案例[HTMLPage2.htm]这里用到了滤镜技术.—高级软件人才实作培训专家!主讲:韩顺平css的三种选择器■选择器选择器是css中非常重要的概念.css中有四种不同的选择器①类选择器，又叫class选择器②id选择器③html元素选择器④通配符选择器简单的说,选择器就是在css中创建，而在网页页面(html,jsp,php,asp.net)中使用。—高级软件人才实作培训专家!主讲:韩顺平css的三种选择器■类选择器.类选择器名{属性名:属性值;…}我们在HtmlPage1.html就使用到了类选择器,这里再给大家举一个例子:[HTMLPage.htm]—高级软件人才实作培训专家!主讲:韩顺平css的三种选择器■id选择器我们在[HTMLPage.htm]中给大家演示id选择器的用法:如图:#id选择器名{属性名:属性值;}—高级软件人才实作培训专家!主讲:韩顺平css的三种选择器■html选择器我们在[HTMLPage.htm]中给大家演示html选择器的用法:如图:如果我们希望网页中默认字体是橙色，我们应当怎么处理。html元素名称{属性名:属性值;}再比如，我们希望所有的超链接(1)默认样式是黑色，24px,没有下划线(2)当鼠标移动到超链接时，自动出现下划线(3)点击后,超链接变成红色。这又该怎么实现呢?[test.html]—高级软件人才实作培训专家!主讲:韩顺平css的三种选择器■通配符选择器如果希望所有的元素都符合某一种样式，可以使用通配符选择器。*{margin:0;padding:0}可以让所有html元素的外边距和内边距都默认为0，有时特别有用。—高级软件人才实作培训专家!主讲:韩顺平css的三种选择器■选择器深入探讨我前面讲的都非常简单,实际上css的选择器使用还有很多您需要注意的地方，如果不注意根本就不能驾驭css①父子选择器请大家看一个图:[HTMLPage.htm]如果希望特别强调非常两个字,该如何处理?方案:a.id选择器b.class选择器c.父子选择器—高级软件人才实作培训专家!主讲:韩顺平css的三种选择器■选择器深入探讨①父子选择器类选择器和id选择器都可以有父子选择器.*父子选择器可以扩展的....—高级软件人才实作培训专家!主讲:韩顺平css的三种选择器■选择器深入探讨②一个元素可以同时有id选择器和类选择器请看一个案例:要实现新闻1和其它的新闻样式不一样,这怎么实现?—高级软件人才实作培训专家!主讲:韩顺平css的三种选择器■选择器深入探讨③一个元素可以同时有id选择器和类选择器当id选择器和类选择器发生冲突时,id选择器优先级高于类选择器.优先级:id选择器类选择器比如:id选择器指定字体为红色,而类选择器指定字体和蓝色，则页面显示红色.—高级软件人才实作培训专家!主讲:韩顺平css的三种选择器■选择器深入探讨④一个元素最多有一个id选择器,但是可以有多个类选择器请看一个案例:要实现新闻3有下划线并是斜体该怎么实现?方案:a.id选择器b.类选择器☞当一个元素被多个类选择器修饰时，它们用空格隔开..—高级软件人才实作培训专家!主讲:韩顺平css的三种选择器■选择器深入探讨⑤一个元素最多有一个id选择器,但是可以有多个类选择器，当类选择器发生冲突的时候，又以哪个为准呢?我们用一个案例来说明.—高级软件人才实作培训专家!主讲:韩顺平css的三种选择器■选择器深入探讨⑥当一个元素被id选择器,类选择器,html选择器同时限定时，优先级是:id选择器类选择器html选择器通配符选择器.—高级软件人才实作培训专家!主讲:韩顺平css的三种选择器■选择器深入探讨⑦在css文件中，如果有多个类/id选择器它们都有相同的部分，我们可以把相同的css样式放在一起,见案例。案例:my.css/*招生广告*/.ad_stu{width:136px;height:196px;background-color:#FC7E8C;margin:5px005px;float:left;}/*广告2*/.ad_2{background:#7CF574;height:196px;width:457px;float:left;margin:5px006px;}/*房地产广告*/.ad_house{background:#7CF574;height:196px;width:152px;float:left;margin:5px006px;}案例:my.css/*招生广告*/.ad_stu{width:136px;background-color:#FC7E8C;margin:5px005px;}/*广告2*/.ad_2{background:#7CF574;width:457px;margin:5px006px;}/*房地产广告*/.ad_house{background:#7CF574;width:152px;margin:5px006px;}.ad_stu,.ad_2,.ad_house{height:196px;float:left;}—高级软件人才实作培训专家!主讲:韩顺平css的三种选择器■选择器—课堂小练习选择器练习,请使用适当的css选择器，完成下面的页面.练习2.网页所有的超链接,要求这样的格式:(1)默认样式是红色，24px,华文新魏字体没有下划线(2)当鼠标移动到超链接时，自动出现下划线,字体大小变成40px,字体变成宋体.green色.(3)点击后,超链接变成灰色。—高级软件人才实作培训专家!主讲:韩顺平块元素和行内元素■块元素和行内元素-概念行内元素(inlineelement),又叫内联元素:内联元素只能容纳文本或者其他内联元素,常见内联元素spana块元素(blockelement):块元素一般都从新行开,可以容纳文本,其它内联元素和其它块元素，即使内容不能占满一行，块元素也要把整行占满。常见块元素divp举例说明:[HTMLPage3.htm]—高级软件人才实作培训专家!主讲:韩顺平块元素和行内元素■块元素和行内元素-区别①行内元素只占内容的宽度,块元素内容不管内容多少要占全行。②行内元素只能容纳文本和其它行内元素，块元素可以容纳文本，行内元素和块元素.(与浏览器类版本和类型有关)③一些css属性对行内元素不生效，比如margin,left,right,width,height.建议尽可能使用块元素定位。(与浏览器类版本和类型有关)—高级软件人才实作培训专家!主讲:韩顺平块元素和行内元素■块元素和行内元素-相互转换请注意:行内元素和块元素可以相互转换display:inline-转为行内元素(比如div)display:block-转为块元素(比如a)案例[HTMLPage3.htm]—高级软件人才实作培训专家!主讲:韩顺平css文件的相互引用a.cssb.cssc.css如果希望在a.css中使用到b.cssc.css的选择器，可以通过@import指令来完成@importurl(“被引用的css文件”);如果希望在html或者php文件中引用某个xxx.css也可以再style标签中style@importurl(“某个css文件”);/style—高级软件人才实作培训专家!主讲:韩顺平css核心内容—流■标准流/非标准流流:在现实生活中就是流水,在网页设计中就是指元素(标签)的排列方式。标准流:元素在网页中就象流水，排在前面的元素(标签)内容前面出现，排后面的元素(标签)内容后面出现。案例[Sfloat.htm]非标准流:当某个元素(标签)脱离了标准流[比如因为相对定位]排列，我们统称为非标准流排列。关于非标准流，我们在定位小节讲解。—高级软件人才实作培训专家!主讲:韩顺平css核心内容—盒子模型■盒子模型-概念要搞清盒子模型，就必须先明白下面几个概念:在网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)，CSS盒子模式都具备这些属性。—高级软件人才实作培训专家!主讲:韩顺平css核心内容—盒子模型■盒子模型-案例我们看一个案例，帮助大家理解盒子模型:[box1.htm]考虑如何实现网页布局—高级软件人才实作培训专家!主讲:韩顺平css核心内容—盒子模型■盒子模型-理解我们可以把盒子模型转移到我们日常生活中的盒子(箱子)上来理解，日常生活中所见的盒子也具有这些属性，所以叫它盒子模式。那么内容就是盒子里装的东西；而填充就是怕盒子里装的东西（贵重的）损坏而添加的泡沫或者其它抗震的辅料；边框就是盒子本身了；至于边界则说明盒子摆放的时候的不能全部堆在一起，要留一定空隙保持通风，同时也为了方便取出嘛。与现实生活中盒子不同的是，现实生活中的东西一般不能大于盒子,否则盒子会被撑坏的，而CSS盒子具有弹性，里面的东西大过盒子本身最多把它撑大,但它不会损坏的。—高级软件人才实作培训专家!主讲:韩顺平css核心内容—盒子模型■盒子模型-进一步理解—高级软件人才实作培训专家!主讲:韩顺平css核心内容—盒子模型■盒子模型-课堂小练习请用css的盒子模型，完成上面的网页.—高级软件人才实作培训专家!主讲:韩顺平css核心内容—盒子模型■盒子模型-进一步理解盒子模型远没有我讲的这么简单，比如大家再看一个案例:这种布局在很多大型网站上都有使用，我们可以把它看做是一个模式来套用,它的各个边距都可调节,从而达到你想要的布局,非常实用。但是要做成这种效果，需要用到css另外一个核心知识-浮动，所以我们回头再做这个案例。—高级软件人才实作培训专家!主讲:韩顺平css核心内容—浮动■浮动浮动是css中很重要的概念，必须掌握。浮动涉及到左浮动、右浮动、清除浮动例子:请在页面中放置三个div,背景是粉红，宽度150px,高100px，边框1px,蓝色,实线。[myFloat.htm]—高级软件人才实作培训专家!主讲:韩顺平css核心内容—浮动■浮动如果我们要实现如下图形，就可以使用右浮动,当把div1向右浮动时,它脱离标准流并且向右移动，直到它的右边缘碰到包含框的右边缘.—高级软件人才实作培训专家!主讲:韩顺平css核心内容—浮动■浮动如果我们要实现如下图形，就可以使用左浮动,如果把所有三个框都向左移动，那么框1向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。—高级软件人才实作培训专家!主讲:韩顺平css核心内容—浮动■浮动如果我们的div框很多,外面的框无法容纳水平排列的浮动div元素，那么其它浮动块向下移动，直到有足够的空间。—高级软件人才实作培训专家!主讲:韩顺平css核心内容—浮动■浮动如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡