轻松搞定网页设计divcss.pptx

主讲韩顺平主讲：韩顺平email：轻松搞定网页设计(html+css+javasript)

主讲韩顺平div+css轻松搞定网页设计(html+css+javasript)

主讲韩顺平内容介绍1.初识css2.块级元素和行内元素3.css核心内容 3.1标准流 3.2盒子模型 3.3浮动 3.4定位4.css综合案例 4.1盒子模型经典案例 4.2仿sohu首页面布局轻松搞定网页设计(html+css+javasript)

主讲韩顺平学习目标掌握css的基本用法掌握css的三种选择器用法轻松搞定网页设计(html+css+javasript)

主讲韩顺平初始css–使用css的必要性■请看一个问题 案例[HtmlPage1.htm] 这是一个栏目风格不同的页面,如果,我希望统一设置它们的样式该怎么办?轻松搞定网页设计(html+css+javasript)

主讲韩顺平初始css–使用css的必要性■解决之道-css 对案例[HtmlPage1.htm]，进行改造，使用css来统一设置所有栏目的样式。 轻松搞定网页设计(html+css+javasript)

主讲韩顺平初始css–使用css的必要性■请再思考一个问题汶川大地震时,所有的网站的图片,都变成黑白的了,这个是怎么实现的呢?案例[HTMLPage2.htm]这里用到了滤镜技术. 轻松搞定网页设计(html+css+javasript)

主讲韩顺平css的三种选择器■选择器轻松搞定网页设计(html+css+javasript)选择器是css中非常重要的概念.css中有三种不同的选择器①类选择器，又叫class选择器②id选择器③html元素选择器④通配符选择器简单的说,选择器就是在css中创建，而在网页页面(html,jsp,php)中使用。

主讲韩顺平css的三种选择器■类选择器轻松搞定网页设计(html+css+javasript).类选择器名{属性名:属性值;…}我们在HtmlPage1.html就使用到了类选择器,这里再给大家举一个例子:[HTMLPage.htm]

主讲韩顺平css的三种选择器■id选择器我们在[HTMLPage.htm]中给大家演示id选择器的用法:如图:轻松搞定网页设计(html+css+javasript)#id选择器名{属性名:属性值;}

主讲韩顺平css的三种选择器■html选择器我们在[HTMLPage.htm]中给大家演示html选择器的用法:如图:如果我们希望网页中默认字体是橙色，我们应当怎么处理。轻松搞定网页设计(html+css+javasript)html元素名称{属性名:属性值;}再比如，我们希望所有的超链接(1)默认样式是黑色，24px,没有下划线(2)当鼠标移动到超链接时，自动出现下划线(3)点击后,超链接变成红色。这又该怎么实现呢?[test.html]

主讲韩顺平css的三种选择器■通配符选择器如果希望所有的元素都符合某一种样式，可以使用通配符选择器。*{margin:0;padding:0}可以让所有html元素的外边距和内边距都默认为0，有时特别有用。轻松搞定网页设计(html+css+javasript)

主讲韩顺平css的三种选择器■选择器深入探讨我前面讲的都非常简单,实际上css的选择器使用还有很多您需要注意的地方，如果不注意根本就不能驾驭css①父子选择器请大家看一个图:[HTMLPage.htm] 如果希望特别强调非常两个字,该 如何处理?方案: a.id选择器 b.class选择器 c.父子选择器轻松搞定网页设计(html+css+javasript)

主讲韩顺平css的三种选择器■选择器深入探讨①父子选择器 类选择器和id选择器都可以有父子选择器.轻松搞定网页设计(html+css+javasript)

主讲韩顺平css的三种选择器■选择器深入探讨②一个元素可以同时有id选择器和类选择器请看一个案例: 要实现新闻1和其它的新闻 样式不一样,这怎么实现?轻松搞定网页设计(html+css+javasript)

主讲韩顺平css的三种选择器■选择器深入探讨③一个元素可以同时有id选择器和类选择器当id选择器和类选择器发生冲突时,id选择器优先级高于类选择器. 优先级:id选择器类选择器比如:id选择器指定字体