泰牛程序员 韩顺平 PHP 大牛班 Div Css课程.doc

《泰牛程序员 韩顺平 PHP 大牛班 Div Css课程.doc》由会员分享，可在线阅读，更多相关《泰牛程序员 韩顺平 PHP 大牛班 Div Css课程.doc（76页珍藏版）》请在三一办公上搜索。

1、轻松搞定Div+Css第 1 章DIV+CSS的开山篇11.1什么是div+css11.2div+css的快速入门案例1第 2 章DIV+CSS的必要性32.1css可以统一我们的网站风格32.2css可以通过滤镜来控制图片的显示风格3第 3 章CSS的选择器53.1选择器的分类53.2类选择器53.3id选择器63.4html标签选择器73.5伪类选择器113.6通配符选择器153.7组合选择器163.7.1多元素选择器163.7.2后代选择器183.7.3子元素选择器19第 4 章CSS选择器的深入讨论214.1后代选择器再说明214.2id选择器的优先级高于类选择器224.3多个类选择器

2、修饰同一个html元素224.4所有选择器的优先级大比武23第 5 章CSS的使用方式255.1内联样式表255.2嵌入样式表255.3外部样式表265.4引入样式表27第 6 章CSS的属性详解296.1css字体的属性296.2css文本属性296.3css背景属性296.4边框属性306.5列表属性316.6table属性的讲解326.7浏览器的兼容性处理建议34第 7 章行内元素和块元素367.1介绍367.2行内元素和块元素的区别377.3行内元素和块元素相互转换377.4标准流和非标准流38第 8 章盒子模型398.1盒子模型的基本概念398.2快速入门案例398.3盒子的模型的经

3、典案例418.4在看一个非常经典实用案例 div - ul -li42第 9 章浮动459.1快速入门459.2深入理解浮动469.3右浮动489.4浮动的理解补充509.5清除浮动52第 1 章 div+css的开山篇1.1 什么是div+cssdiv是区块，在网页开发中，用来存放内容(文字，图片，表格等等)css 是层叠样式表，它的作用是用来规定div和div中的内容的位置和样式（颜色，大小，背景，列表的样式）div+css 结合就可以做到把内容和样式分离，好处是1. 代码简洁，便于维护 2. 理由seo搜索引擎优化1.2 div+css的快速入门案例代码:第 2 章 div+css的必要

4、性2.1 css可以统一我们的网站风格代码:2.2 css可以通过滤镜来控制图片的显示风格把网站的图片全部变成黑白的，或者模糊的.代码:第 3 章 css的选择器3.1 选择器的分类类选择器(class选择器)id选择器html元素选择器(标签选择器)通配符选择器伪类选择器组合选择器(多元素选择器，子元素选择器，后代选择器)3.2 类选择器基本语法:.类选择器名称css属性:属性值；css属性:属性值；案例:补充：1. 选择器的名称命名规范 .小写字母-小写字母2. 一般说，类选择器是提供给多个html元素来使用3.3 id选择器基本语法:#id选择器名称css属性:属性值；css属性:属性值

5、；案例:细节:1. 一般来说id选择器是提供给某一个html元素来使用2. 当我们不确定，有多个html元素来使用该样式时，请使用类选择器3.4 html标签选择器基本用法:html标签名称属性名:属性值;属性名:属性值;案例:代码:细节:1. 类选择器的优先级标签选择器2. 父元素的样式，会被子元素继承l 提出一个问题，如何分别指定同一个标签(p)的不同样式l 代码:3.5 伪类选择器伪类选择器，主要是用来控制超链接的相关样式.案例:代码:案例2:代码:相关的css指定:作业题 ：代码:3.6 通配符选择器案例:代码:3.7 组合选择器3.7.1 多元素选择器案例:代码:3.7.2 后代选择

6、器案例:代码:结论:1. 如果我们的后代选择器的某个元素需要特别的样式，则可以 以下面形式来完2. 标签选择器优先级 选择器案例:代码:第 4 章 css选择器的深入讨论4.1 后代选择器再说明代码:小结: 我们使用后代选择器，尽量使用标签选择器 ， 或者 类选择器 和 标签选择器组合.4.2 id选择器的优先级高于类选择器4.3 多个类选择器修饰同一个html元素代码:细节:1. 当优先级相同的情况下，在发生冲突时，以写在style内容中的后面那个为准2. 当一个元素被多个类选择器修饰时，它们用空格隔开.4.4 所有选择器的优先级大比武案例:代码:小结:1. !important 行内样式

7、id选择器 类选择器 html标签选择器 通配符选择器 html属性的指定 继承的样式属性(层叠 css, 层叠的样式时文本,字体属性)2. 后代元素，会继承他的上级元素的各文本和字体相关的属性第 5 章 css的使用方式说明:css的使用方式有四种: 内联样式表，嵌入样式表, 外部样式表，引入样式表5.1 内联样式表基本语法:内容举例:5.2 嵌入样式表基本语法:CSS选择器 属性名:属性值;属性名:属性值;举例:5.3 外部样式表基本语法是：在需要使用css的文件中引入1. 先单独的编写一个css文件2. 在需要使用该css 文件的地方引入举例说明：5.4 引入样式表基本原理示意图:案例:

8、第 6 章 css的属性详解6.1 css字体的属性概述：这里主要就是指定字体相关的样式.案例 ：6.2 css文本属性6.3 css背景属性小结:1. 背景的属性有5个，这5个可以直接放在 background 这个属性中2. backgroud 的五个值顺序不是固定，但是，我们要求安装 颜色 ， 背景图，是否延伸, 位置，是否固定3. 在默认情况下，背景图的参考的原点是包含它的父元素的左上角，但是如果我们设置 background-attachment: fixed 则我们的原点改成了浏览器视窗左上角6.4 边框属性举例说明:6.5 列表属性案例:代码:总结:1. 在默认情况下 li 和

9、ul 有一个默认的左边距, 我们可以通过 在 li 元素中增加margin-left 来解决这个问题.2. 如果我们希望把图标放在li元素内，则可以在li元素中增加一个样式 list-style-postion:inside;3. 我们可以把三个属性放到一起写 list-style:none outside url(sanjiao-1.jpg);6.6 table属性的讲解说明：table的属性有:案例 ：代码:小结:1. 如果你是对表格整体样式的设置，在table元素设置，如果是针对每行每列的设置，则到tr td th 去修改6.7 浏览器的兼容性处理建议1. 主要搞定ie和ff,其它都比较

10、好解决2. 安装ietester 和 firebug ， ie自带一个开发人员工具有助于我们解决兼容性问题.3. 尽量使用通用的css属性4. 通常使用div 或者 span 这些没有实际意义的标签来指定某段html的样式.div用于大段html,而span则一般为小段文本第 7 章 行内元素和块元素7.1 介绍: 快速体验案例:行内元素和块元素:代码:7.2 行内元素和块元素的区别7.3 行内元素和块元素相互转换7.4 标准流和非标准流第 8 章 盒子模型8.1 盒子模型的基本概念8.2 快速入门案例代码:对应的盒子的大概样子:8.3 盒子的模型的经典案例代码:8.4 在看一个非常经典实用案

11、例 div - ul -li 案例示意图:代码:第 9 章 浮动概念: 浮(漂浮)动分为左浮动，右浮动，清除浮动。9.1 快速入门代码:浮动特点:1. 向你指定的方向移动，并且让出空间2. 如果后面的元素，也是浮动的，那么后面的元素就会在碰到前面的浮动的元素或者边框时，就定位在那里.3. 如果后面的元素没有浮动，则该元素就会在浮动的元素的下面，但是内容会尽量的显示出来，而且后面的元素是块元素。4. 行元素也可以浮动，浮动后就具有块元素的特点.9.2 深入理解浮动代码:再举一个案例:说明：当一个大的div把其它的div包括了，大的div的高度，如果是他所有的div都浮动，则大的div高度为09.

12、3 右浮动如果我们要实现如下图形，就可以使用右浮动,当把div1向右浮动时,它脱离标准流并且向右移动，直到它的右边缘碰到包含框的右边缘.案例说明:9.4 浮动的理解补充代码 ：小结：当浮动的元素的高度不一致的时候，会出现卡的现象，直到调整的合适的高度值，就恢复到正常的左浮动.9.5 清除浮动基本语法是 clear:both;作用是两点:1. 让包住他的父元素的边框正常显示2. 让后面的元素，恢复到正常流,不再受到浮动的影响第 10 章 定位定位：position, 对我们的元素进行定位处理,即把元素放在我们希望放在位置，有static(静态定位，默认值)，relative（相对定位），绝对定位

13、(absolute),fixed（固定）,定位需要和四个值配合使用(top left right , bottom)10.1 静态定位前面我们讲的都是静态定位，默认值。10.2 相对定位(relative)案例:代码:小的结论1. 相对定位的left 和 top 是针对该元素原来的位置2. 当相对定位后，原来的空间是被保留.3. 当相对定位后，如果相对定位后的盒子(元素)和原来的盒子有重叠，则会覆盖。10.3 绝对定位position : absolute;案例: 代码:细节:1. 绝对定位参考的点，是上一级最近的那个非静态定位的盒子的左上角2. 如果他的上级元素，没有非静态定位的盒子，则以浏

14、览器的视窗（body）的左上角为原点.(body网页)3. 绝对定位后，他的空间会让给其它元素来使用.案例:代码:10.4 静态定位静态定位，对left和top, right,bottom都不生效.10.5 fixed定位特点: 元素框的表现类似于将 position 设置为 absolute，不过其包含块是窗口本身。举例说明:代码:10.6 关于left和top的值的问题.问题,请思考,如何把一个div 放在body的中间(左右和上下居中)？案例:10.7 z-index可以理解成事空间上下的定位代码:小结:1.z-index和position:absolute 配合使用2.z-index默

15、认是03.z-index的值越大，越在上层.第 11 章 css综合布局案例11.1 sohu首页的布局思路分析:代码: 搜狐首页布局 bodymargin:0px;padding:0px;font-size:12px;#boxwidth:950px;height:500px;/*background-color:pink;*/margin:0 auto;.topwidth:950px;height:23px;background-color:#FFF0F5;line-height:23px;.loginwidth:416px;height:23px;float:left;background

16、:#008000;.set-indexwidth:105px;height:23px;float:left;background:#808080;margin-left:80px;.img-logowidth:250px;height:23px;float:right;background:#B4B4B4;.user-name-styleheight:14px;.button-styleheight:23px;font-size:12px;.web-logowidth:136px;height:68px;margin-top:5px;float:left;.navwidth:807px;hei

17、ght:68px;background:#7CF574;float:right;margin-top:5px;.ad-boxwidth:948px;height:213px;border:1px solid silver;margin-top:5px;float:left;.ad-zsheight:195px;width:125px;background-color:#FC7E8C;float:left;margin:8px 0 0 5px;.ad-2height:195px;width:454px;background-color:#FC7E8C;float:left;margin:8px

18、0 0 13px;.ad-househeight:195px;width:150px;background-color:#7CF574;float:left;margin:8px 0 0 13px;.ad-imgborder-left:1px solid silver;float:right;height:213px;width:180px;text-align:center;.ad-img imgmargin-top:10px;.heroborder:1px solid red;width:140px;border-collapse:collapse;margin:0 auto;margin

19、-top:50px;.hero td,.hero tr, .hero thborder:1px solid red; 登录表单设置首页图片log招生广告广告2房地产广告招生广告广告2房地产广告招生广告广告2编号姓名外号001宋江及时雨001宋江及时雨001宋江及时雨 第 12 章 浏览器兼容性的处理12.1 ul和li的处理得出的一个结论:我们只需在 ul 这个地方加入 margin:0px; 和 padding-left:0px;12.2 关于如果把小图标放在li的上下居中在hello 的ul这一级给一个 line-height: 的css属性即可搞定, 比如:.student-question-list background: #ffffff; float:left; list-style-type: none; margin:0px; padding-left:15px; line-height:20px;12.3 如何把图片放在一个元素的上下居中:12.4 关于div的高度自适应的问题!12.5 关于边框的一个兼容处理width:48px !important; /*ff以important为准, 为什么不是19,是因为，border: 1px 左右两边都要占.*/width:50px;