燕十八_div css教学笔记.doc

自学it网 公益it培训 PHP ,Python ,java免费学 http:/www.zixue.it 第一天Html 三部分1：文档声明 文档声明很重要，直接影响浏览器的渲染效果。不属于html文档的一部分，不用闭合。2：head区域 网页的标题 3: body区域Body区域放各种标签和内容 而内容不能够直接写在body里面。这真的是标题？ Hello world 3.5:meta - head里面的meta 代表 元信息,用来说明网页自身的信息,一般是给浏览器,搜索引擎看的比如: -告诉浏览器,这是一篇utf-8编码的文档-这是告诉搜索引擎本页面的主要内容-这是告诉搜索引擎,本页面体现的关键字3.6:在网页源码里写的换行,在网页效果上不会体现出来3.7: html标记:分为双标签和单标签例: 加粗效果,文字会变粗接下来会换行共同点: 无论是单双标签,都要求 闭合单标签也要自身闭合 3.8: 标签可以嵌套,但是, 不能相互嵌套例如: 一岁一枯荣. 不合法页面布局当拿到一张图片或者准备做一个页面的时候,首先,不要去看文字,颜色等细节,而是总整体上,看页面该如何划分,划分成块按从上到下,从左到右,从大到小Div布局,Css控制显示效果标签体现语义Div块状元素的一个重要特点:无论宽度如何,在浏览上的显示效果都是-独占一行盒模型:一个div是一个矩形,为了方便控制div的效果,我们推荐把div理解成一个木头盒子分析现实中的情况:一个盒子: 有边框(边框有多厚? 用像素自定义)盒子内部的内容,离边框内部有多远的距离,还是说可以贴着内边框放置?内容离内边框的距离叫做-内边距盒子本身有一个大小 : 宽,和 ,高盒子与盒子之间可以保持距离: 外边距宽:Width高:height边框: border内边距:padding外边距:margin盒模型的深入探讨:1个盒子在页面上到底占多大的空间?答: width 和 height是指允许写内容的区域的大小 ,也就是说: padding往里的内容.允许写内容的区域第二天： 目标：掌握盒模型浏览器对于div,p,li标签等元素，可能会对他们设置一个默认的margin值，border，padding值，而且不同的浏览器之间设的默认可能不同。Css初始化，就是把所有的标签，margin,border,padding设为0，大家都在同一个起跑线上。盒模型border学习Border: 三要素，不可缺少。边框样式， 边框宽度， 边框颜色分别指定：Border-styleBorder-widthBorder-color例：border-style:solid; border-width:10px; border-color:blue;也可以通过 border属性一次性指定（注意：属性顺序为style width color）border:solid 10px blue;* 如果想单独指定某个边的边框效果(以右边框为例)Border-right-style: Border-right-width:Border-right-color:Padding:定义4个方向的padding ，方向与赋值 ，和margin一样。一个盒子本身有多大？水平:左边框+左内边距+内容宽度+右内边距+右边框竖直:上边框+上内边距+高度+下内边距+下边框一个盒子要占据多少空间？水平:左外边距+左边框+左内边距+内容宽度+右内边距+右边框+右外边距竖直:上外边距+上边框+上内边距+高度+下内边距+下边框+下外边距 作业通过div+css, 在页面上画一个盒子，要求：有外边距，有边框，有内边距。并且，要能通过盒子内部的子盒子对比看出内边距的效果来。为什么默认一个div,margin,padding全为0,但是呢,离浏览器的左侧,还有一点空隙.答: 因为浏览器对页面的部分元素(body,ul,li等),他们的padding,margin,border,可能会为他们预设一些值,而且,各个浏览器设的值不一样.解决方法: css初始化把所有的元素,margin,padding,border全设为0.* 在计算机里,往往代表所有的,是一个通配符,就要用通配符来初始化.Css里, *能够选中页面上的所有元素,因此,叫做通配选择器.* margin:0; Padding:0;Bordcer:0;是一种很常用,但是效率不是很高的初始化方法.但是,我们先掌握初始化的意义和方法.详解margin:Margin: 10px; 是设置4个方向上的margin值,都为10px;Margin:10px 20px 30px 40px ,则分别是设置 上,右,下左,方向上的margin值如果margin值只设置了2个,或3个,则按上,右,下,左的方向顺序来分配,没有被分配到值的边, 以对边的margin为准也可以用margin-top/right/bottom/left 来分别设置4个方向的值如何用margin来居中可以通过设置margin: 0 auto; 即,左右的外边距为自动,即可使左右居中注意: css只支持用auto来进行左右居中,竖直方向用auto无效.Margin 外边距有重叠效果就是在竖直方向,当两个元素的外边距连在一块时,两者的距离并不是两者margin之和,而是取最大margin为准对于漂浮(float)的元素,外边距不存在重叠效果,也就是说:上下边距为两者的margin之和内边距padding的探讨:1:4个方向上的padding定义和margin一样.2:padding是透明的, 也就是说, padding区域的颜色是盒子的背景色.或者说:盒子的背景色铺到 盒子的内边框处边框的写法:边框border 和margin,padding不一样,因为margin,padding仅仅需要一个数字的值就能表示.但是边框不仅需要指明像素宽度,还需要指明形状和颜色边框的指定方式: border: 形状 宽度 颜色,例: border: solid 20px red;不能像margin padding那样,把2,3,4个边框的值连着写.即: border: solid 20px red solid 30px green, -这样是不对的.所以如果要想指定4个边框为不同的效果,可以用:Border-top/right/bottom/left 来分别指定4：引入css文件1:直接在html文档的head区域里面，用包围起来。2: 把css写在专门的.css文件里，用Css 选择器的概念器:Css是页面上元素的档案,那么在管理这些元素的效果之前, 必须先找的到这些元素.如何找到某一个或某几个元素呢?这时就会用到选择器的概念选择器就是指css找到元素的方法举例: #header , 这种情况就是,以header为id的元素被选中,这种选择器叫做id选择器.3:Css文件引入的路径概念如果说href=xx.css ,浏览器就在网页的同一级目录下来找xx.css. (两个点) 代表上一级目录 . (一个点) 代表当前目录 4：css 选择器的概念Css要控制页面元素的显示形式，必须通过一定的方法，指定到该元素。比如，1:id选择器， 就是，给页面上的元素起一个不重复的id,然后css, 通过 #id ，就能控制该元素。这个概念称为css选择器。类选择器:用法: 页面里有来声明类Css里, 用点+类名来选择这一类的元素. 例: .className标签选择器:因为html有很多种标签,如h1,p,div ,img,这样标签在页面里构成很多元素.css可以通过标签名来选定页面内标签对应的元素.比如:P, 会对页面里所有的P标签生效Div,img ,则会对页面里所有的div,img生效.派生选择器通过元素的上下级关系来进行选择,(像地区由大到小的选择一样)比如:#header img#header ul 则意味着分别选中#header元素下面的所有img元素和ul元素.群选择器例如:#header, .intro 则意味着, 括号内的css 同时对 #header, .intro 生效.伪类选择器:伪类选择器,选择不是某一种元素,而是某种元素的某种状态对于链接,我们可以针对的4种状态来设置显示效果. 链接没被点击过 :link 链接被点击过 : visited 鼠标放在链接上 :hover 鼠标点击的瞬间 :active顺序: l v, h, a通配选择器: * , 通配页面上所有元素(效率低,用的较少)5：Css 基本写法选择器 属性:值; 今日作业及预习1 复习html三个基本部分2 思考html与css各自的功能3 复习两种引入css的方式4 写一个4行布局， 并用margin控制4行div的距离5 理解边距重叠的概念，并能写出一个边距重叠的效果。6 预习：盒模型的border,padding属性Div 布局之盒模型 （非常重要！）把一个块状元素看成一个盒子。以现实中的盒子为例：盒子有宽和高， width ,height盒子的边框有厚度，border （边框）盒子的内部要装的东西之间，有距离, padding（内边距）很多盒子摆在一块时，盒子之间有距离, margin （外边距）声明外边距示例：选择器 margin : 10px;14个参数指定margin:Margin:10px; / 指定了4个方向上的外边距 都为10px;Margin:10px 20px 30px 40px; /分别指定4个边为10 20 30 40 px， 记住！ 四个边距从上面的边开始按顺时针，顺序分配值。Margin:10px 20px; / 则上右下左4个方向上，各为10,20,10,20px;(对于没有分配margin的边，他的值从哪儿来？ 从对面的边来，和对面的边的值一致)Margin:10px 20px 30pxMargin按具体方向设定值Margin-left/right/top/bottom : 值当竖直方向两个元素的外边距相遇时，元素之间的距离并不是2个元素的margin之和，而是以较大外边距为准，这个问题 称为边距叠加，不是bug.如何让元素居中:Margin: 0 auto; /* auto是自动的意思 ，元素在水平方向居中显示 */-阶段小案例模仿lionhit首页布局模仿lionhit首页做到如下效果：1：容器宽1002px2:容器内部4个子divheader高：128brand高237main高:464footer高603:外边距要求header离brand 10pxbrand离main 13pxmain离footer 10px4:给容器及子元素加不同背景色方便居中。5：css先初始化。浮动：元素并排的挑战（注意：当元素浮动时，不会再发生外边距重叠的情况）默认状况下，2个块状元素，（如div）,是各自占一行，为了让2个块状元素能并排成列显示，我们需要使用浮动。如下图：想一想： 如果通过css命令这两个div都往左漂呢？对浮动应如何理解？当元素声明float:left时，立刻原地上升起一定的高度，并尽量靠左边。* 想一想，该浮动元素后面如果再过来一个普通元素，那么该元素跑哪儿去了呢？答：上一个元素浮起来了，后来的普通元素当然在该浮动元素下面了！如果又来一个浮动元素呢？两者都漂，当然挨到一块儿Div 标签的局限?Div, divistion, 块,区域的意思,在Html里,div是负责划分大块区域Div 是没有语义性的Div 和 h1 标签放在一块比较,最为典型hello worldhello world两者的显示效果不一样,h1里面的文字大原因就在于: div仅用来划区域, 至于里面的内容,是标题,还是段落,分析不出来.而且,对文字的颜色,粗细,大小等并没有影响,因此,.我们说: div 是没有语义性的, 无语义标签.但是对于搜索引擎来说, 如果全用div,不利用 seo的优化.以h1为例,h1里面的文字会被搜索引擎做为分析页面内容时的重要参考.因为h1代表 1号大标题, 有其意义,有语义性. P: 段落 H(1-6): 1-6号标题,文字越来越小 Pre: 保持源码的原样格式输出有一些内容类型,是div是表达不出来的比如 要求你在页面内引入超链接,引入一幅图片, 或者一个flash,或者一段视频A 超链接, 用法文字或图片Img 引入图片, 用法 FlashWmv, 这两个标签,目前各种浏览器的引入方式不一样,因此,相对来说,兼容性较好的引入代码如下:有一些内容形式,用div来实现非常麻烦,也不适合.例:u 中国u 美国u 日本姓名年龄身高张三16175李四19178如果只想对一行内,某几个文字发挥作用例: 打了句话,他是个好人,还是一句话, 打了句话,他是个好人,还是一句话, -用div是达不到效果的,因为div是块状元素,独占一行,把文字拆成了3行.内联元素:内联元素,又叫行内元素,w3c组织则称之为行内框,网友的经典比喻-行内元素就是橡皮筋.内联元素,只对每一行的文字起作用,或者说: 内联的作用范围,不能跳出行的区域.块状元素与内联元素的区别独占一行能设宽高竖直方向的margin,padding块状元素是是有,可以设置内联元素否否没有,也不可以设置相比于块状的盒子模型,如何方便的理解内联元素?答:可以把内联元素当成有弹性的橡皮筋来看.内联元素又被称为行内元素.内联元素与块状并不是完全无关的东西,可以相互转换.可以通过元素的 display 属性来设置.n Display:block; 强制声明某元素为块状元素n Display:inline; 强制声明为内联元素.Display:none; 压根不显示., 设置之后,该元素和该元素的子元素不再显示,等同于这段代码被删除的效果,在页面内一点空间都不占.内联元素下方的空白问题:在一大段,N行(N=2)文字中,文字的行与行之间,有行距.每行行距也相等,但是,在最后一行, 与后面的块状元素,则有一个明显的边距,这个边距,是我们用css控制不了的.图片是内联元素还是块状元素?目前我们所学的:Div,p,h*,pre ,form是块状元素.A, span, br ,是内联元素开发中,常碰到图片与下方的块状元素有空白的问题原因:因为图片是内联元素,所有内联元素结束后,与后面的块状元素有一段空白.解决: 通过display来转换Img为块状元素,然后再通过margin:0来解决.计算机里的坐标 (重要) 在数学中的坐标, x轴往右为正, y轴往上为正 而在计算机里,(原点)在计算机,原点在左上角,并且, x轴 往 右为正Y轴往下为正背景：Background: color imageColor: 代表纯颜色背景。 例：red,blue, #FFF,#3098E1Image ：url(图片路径)。注意：图片路径不加引号Repeat: 铺排效果。例：repeat-x ,repeat-y,repeat, no-repeatAttachment:滚动效果：例：scorll(默认)，随元素滚动,fixed相对屏幕不变位置，像被钉住(兼容性不好,用的不多)Postion:背景图片位置例：center top/ -20px -30px多个元素共用一个背景图!这种现象在大网站非常常见.作用:可以节省很多次的请求,把众多的背景图的请求压缩为1次.因为,大网站每天的访问量都可能上亿, 这时的性能提升就很明显.如果用一个比元素还要大的图做背景时,图片与元素是如何重合的,或者说,用图片的哪一部分做元素的背景呢?答: 默认是把 背景图的原点 与 元素的原点重合,元素有多大,自然截出多大的背景图.比如,一条床单铺在一小桌子上, 在css是这样铺,:把床单的左上角,和桌子的左上角对齐, 多余的部分,不要.就是计算: 背景的原点相对于元素的原点的坐标关系做网站时背景图片的一个小技巧：比如某个元素设置了以黑色为主的图片做背景图，那么，一般要为该元素设一个背景色，目的是，当背景图失效时，使网站的视觉效果不会反差太大。利用像素定位的关键：1:在计算机屏幕上，左上角是原点。轴往右为正，轴往下为正。：默认是背景图的原点和元素的原点重合。作业：如果布局没完成的，继续完成布局。：自己设一个场景，练习浮动的清除。：把背景的种属性分别练一遍。：再把布局完毕的页面的hader区域引入背景图。n Ul无序列表,ol有序列表有序列表与无序列表 (都是块状元素)这是列表项这是有序列表项通过css能控制列表的3个属性:List-style-type : 列表项的显示标志List-style-image: 用于替换显示标志的图片.List-style-postion:inside/outside ,显示标志与列表内容的位置关系注意:虽然列表有3种属性,可以方便设置,但是,我们实际使用中,往往把list-style-type 设为 none;原因是:不同浏览器对于列表的渲染差别很大,因此要通过css初始化,强制他们保持一致.作业-1:设计一个场景,测试块状元素和内联元素的区别.2:通过css,控制有序/无序列表的3种属性,分别来做实验.3:思考我们在实际开发中,对列表样式的处理,为什么?4:网页头部,引入logo,logo下方,通过ul列表, 增加导航.作业补充:1:知道内联元素与块状元素可以相互转换.2:能够利用第1点的知识,修正导航里,因图片竖直方向的边距带来的误差.3:今天讲到的css选择器,能自己设计代码进行测试.4:预习: 文本控制文本控制段落缩进:text-indent 作用:控制一段首行的缩进距离. 例: css选择器text-indent:20px;水平对齐:text-align 作用:控制文字在水平方向上的对齐方式 例: css选择器text-aligh:left; /可选值 left,right,center, 默认是left;文本装饰:text-decoration 作用:给文字加一些修饰线的效果. 例:css选择器text-decoration:underline; / none,underline,overline,line-through,blink 字母间距:letter-spacing 作用:控制单个字符之间的距离 例:css选择器letter-spacing:20px;词间距:word-spacing (对中文无效); 作用:控制单词与单词之间的距离 例: css选择器word-spacing:20px;大小写转换:text-transform 作用:按一定规则转换字母的大小写 例: css选择器text-transform:uppercase; / uppercase, lowercase,capitalize;Capitalize: 是把首字母大写,其他字母不受影响.字体控制:Font-style : 显示风格作用:控制文字的是否斜体显示或正常显示.例: css选择器font-style:italic; /normal,obliqueFont-weight: 字体粗细作用: 控制文字的粗细程度例:css选择器font-weight:bold; /normal/boldFont-size: 字体大小作用:控制字体的大小例:css选择器font-size:30px; /则每个字符以30像素的大小显示.Line-height: 行高作用:设置每行文字所占的高度,(特点:在一行内,文字总是相对于行居中显示,所以可以利用这个特性让文字相对于容器居中)例: css选择器line-height:30px;/ 则每一行占据30个像素高.Font-family: 设置字体作用:设置显示文字所用的字体.烟酒专卖hello烟酒专卖Hello有衬线字体 - 笔画拐弯的时候,有尖角的字体 无衬线 -笔画等宽,拐弯的时候也没有尖角要点:n 先英文字体,再中文中体n 先特殊字体,再安全字体n 先具体字体,再字体大类注意: 当声明多个字体,如果某个字体名称含多个单词,或者中文字体,则字体名用双引号包起来.把所有字体属性写在一行里:Font: style weight size/line-height family字的颜色如何控制:Color: red / #EEE;作业:1: 自己打2段文字,并针对文字使用所讲的所有所有控制属性, 及属性的可能值, 做一遍实验.2:完成后, 利用所学知识点+昨天内联与块状的转换,完善导航条.至如下效果:1:导航文字水平方向居中显示2:导航文字竖直方向居中显示3:导航文字链接的下线线去掉.表格学习基本语法:(以3行2列为例)      CSS属性控制:对于table:Border-collapse: 边框是否融合.可选值: separate(表格与表格相互独立的边框,默认值)Collapse,(表格之间的边框共用).Border-spacing: 边框间距用法: border-spaing: xpx ypx (给两个像素值,分别代表单元格在x,y轴的距离)Empty-cells: 空表格是否显示.可选值: hide, show ,默认是hide注意: 如果border-collapse值为 collapse时, border-spacing,和empty-cells 自动失效.想让空表格显示的处理方式:1:在空单元格里加一个空白符 2:让表格边框融合 collapse表格的适用范围:显示格式化数据不适用于页面布局符号实体:页面圆角:圆角技术是很多个网站上得到应用,目前有以下几种:1:div堆叠,在大div的四个角上,堆上很多小的div,然后小的div有颜色,看起来像圆角.如下(每一个黑块就是一个小的div).该方法实现起来麻烦,冗余代码也多2:4个div嵌套,各在一个角设背景图.这4个div 分别负责在左上角,右上角,左下角,右下角各放一个圆角背景,从而形成圆角效果.3:使用背景图:直接创建一张圆角图片做背景. 优点:简洁,无冗余代码.缺点:设立圆角的div必须是固定大小,且与背景图一样大.4:使用css 控制例:-moz-border-radius:5px 6px 7px 8px;-webkit-border-radius:5px 6px 7px 8px;则代表在元素的左上,右上,右下,左下4个角各画了半径为5px,6px,7px,8px的圆角.优点;代码最少,适应性也好.缺点:不支持IE,只能在firefox, chrome,safari等浏览器下使用.Bug调试1:doctype没声明,带来的IE浏览器盒模型解析bug解决: 进行xhtml 正确声明,如strict声明2:浏览器的初始值不同带来的.解决:进行css初始化.3:自身代码不规范带来的bug,解决:面壁4:浏览器的bug带来的.4.1 IE6, 有双倍margin bug是指:浮动方向上的margin值会加倍.例如: 某元素 float:left; margin-left的值是10px, 那么页面上会解析为20px;同时 ,float:right, margin-right也会加倍解决方案: 设置漂浮元素的_display:inline;4.2: 3像素bug,解决:规范float的用法4.3: IE关于a标签的4个伪类的兼容bug答:对于IE, 如果a:link方式声明了标签的样式可能会引来 visited伪类的解析异常解决: 去掉a:link,以 a 来代替. 表单:收集页面的信息,送到服务器.表单总结:1:任何的类型的表单项,必有2个最本质的东西:Namevalue, 即 :变量名变量值2: 表单的action ,methodAction 代表 表单要提交到的地址.Method 代表,表单提交的方法(即,表单数据如何发送.)3:method的两种方法比较Get与post,Get提交,表单的值直接体现在浏览器上Post提交,直接提交到action规则的url,url不变.GET 提交直接把数据体现在地址栏上,不够安全.而POST不改变地址栏,直接发送数据,因此注册这样的场合,适合用POST提交.Get提交,因为数据在地址栏上体现,因此,能够提交的数据大小受限.(一般来说,受浏览器和服务器的具体限制). 一般来说,能够提交2K以内的数据.,Post提交,理论上没有规定上限值.Get无法上传文件类型Post可以上传文件类型表单项:普通文本框: 密码框: 单选按钮:复选按钮: 提交: (一般不要加name)重置:下拉列表:提示信息提示信息.文本域:文件域:如何设置默认值:文件类型的表单项,不能设默认值对于文本框,密码框, 在表单项里加 value=默认值, 即 :加value属性.对于单选,复选框, 在表单项里加 checked=checked ,即,checked属性为选中状态.对于下拉列表, 在option选项里, 加 selected=selected,即selected属性为选中状态.对于文本域, 直接在之间,打上内容.-作业-1:写一个注册表单, 包含以上讲解的所有表单项,以及提交按钮,重置按钮.2:写一个修改个人的表单, 和注册表单选项一样,但选项要求有默认值.以及提交,重置按钮.3:分别把表单设为get提交,post提交,体会两者的不同.4:要求上述表单提交到 reg.html3种稍特殊一些的表单类型1:图片类型. 在一个表单中,可以用一个图片代替submit 来进行提交.例: 可以替换成 2:隐藏类型.隐藏类型往往储存一些不需要用户填写,也不希望用户直接看到的信息.例: 3:普通按钮普通按钮也很常用, 且更多的出现在非表单场合.比如 : 支持, 购买等 ,往往用来提示用户产生下一步的操作.如何给表单项加默认值?答:对于text 文本框,password密码框, 直接加value=xxx对于textarea 大块文本域, 默认值直接写在textarea标签之间对于单选radio,和多选的checkbox对于select 下拉框, Option选项加 selected=selected 就能默认选中对于文件类型: _ 不能设_默认值框架集:framset1:最外层的框架页面,doctype声明用 frameset 声明,不用strict2:frameset页面,不能有body标签.具体用法:拆成2行为例: 拆成2列为例: 拆成典型的后台管理样式,品字形,如下图.先拆成2行,再拆成2列 典型问题: 左侧的导航链接点击时,页面如何在右侧区域显示? 答: 给右侧的frame 加一个 name属性.然后,左侧的链接,加一个 target 属性,且值为右侧 frame的name;如何点击链接,页面如何跳出框架,直接在浏览器上显示,(如退出登陆效果).答: target属性值设为_top, 即链接效果直接跳到浏览器顶层.本节课作业:1:用frameset 完成一个后台管理页面.要求:点击左侧导航, 右侧页面变化,点击退出登陆,则页面跳出框架,显示在浏览器顶层. (X)html+css 复习 Html文件本质上是一种文档,一种按照某种语法要求来书写的文档,Html是一种标记语言, 不是编程语言,因为Html没有变量,逻辑,分支等特点.通过特定的标签,来告诉浏览器显示相应的特点.如中国,则中国 显示为粗体.Html是一种普通的文档,则,可以用任何文本编辑器来编辑.比如:editplus, UE,甚至记事本,当然也可以用专门的工具,如dw.html文档的3部分1:doctype 文档类型声明. 文档声明很重要,因为文档声明直接影响浏览器对页面的渲染效果.2:Head区域的信息一般是给浏览器和搜索引擎