1、css+div网页样式与布局,css+div网页样式与布局,css基本语法 css设置图片格式 css设置网页中的背景 css设置表格与表单的样式 css设置页面和浏览器的元素 用css制作实用的菜单,css基本语法,css（cascading style sheet），中文名为层叠样式表，用于控制网页样式并允许将样式信息与网页内容分离的一种标志性语言。 引入它是为了使html语言能够更好的适应页面的美工设计。,css文件是纯文本文件。 使用文字处理软件均可编辑。推荐dreamweaver软件。,如何编辑css,使用css控制页面,行内样式 内嵌式 链接式 导入式,行内式,所有样式中最直接的一
2、种，它直接对html的标记使用style属性，然后将css代码直接写在其中。 如：正文内容 行内样式是最为简单的css使用方法，但后期维护不容易，不推荐使用。,内嵌式,将css写在之间，并且用标记声明。 如：,链接式,链接式css样式表是使用频率最高的样式。 如：,导入式,与链接式功能相似，只是语法和运作方式不同。 采用import方式导入的样式表，在html文件初始化时，会被导入到html文件内，作为文件的一部分，类似内嵌式的效果。而链接式样式表则是在html标记需要格式时才以链接形式引入。,导入式,语法：,css标记选择器,css标记选择器是声明哪些html标记采用哪种css样式。,cla
3、ss选择器class选择器1class选择器2class选择器3h3同样适用,补充,可以在标记声明后接类别名称没来区别标记。,标记选择器.class标记选择器.class1标记选择器.class3使用于别的标记,ID选择器,使用方法与class选择器基本相同，不同在于ID选择器只能在html页面中使用一次。 #one color:red;.,ID选择器ID选择器1ID选择器2,Css设置文字效果,Css文字样式 首字放大效果,Css设置图片效果,图片样式 图片的对齐 图文混排 图文实例,图片样式,图片边框 (border-color,border-sytle,border-width) 图片缩
4、放：width与height实现 图片对齐：横向对齐：分左中右，text-align:left纵向对齐：主要体现在与文字搭配的情况。Vertical-align:middle,图文混排,文字环绕：float:left 设置图片与文字间距：为img标记添加margin 属性 如 margin-right，margin-bottom,Css设置网页中的背景,背景颜色:background-color 背景图片:background-img:url( )重复：background-repeat:repeat-y;位置：background-position:bottom right固定背景图片：ba
5、ckground-attachment:fixed,用css设置表格与表单的样式,控制表格 css与表单,设置表格的格式,表格的颜色文字颜色：color背景颜色：background表格的边框border:1px solid #007eff;border-collapse:collapse;,实例一：隔行变色（为偶数行进行格式设置） 实例二：鼠标经过时变色（用javascript读取鼠标的状态） 实例三：日历,设置表格的格式,css与表单,表单中的标记：form,input,textarea,select等。 可以为表单标记设置格式，如边框、背景色、宽度和高度等。,实例,直接输入的Excel表
6、格 模仿新浪网民调查问卷,Css设置页面和浏览器的元素,鼠标特效 页面滚动条,鼠标特效,通过cursor属性来设置各种各样的鼠标指针。 这个属性可以在任何标记中使用。常见的属性值：auto、default、no-drop。如：bodycursor:pointer;,页面滚动条,滚动条由3dlight, highlight, face, arrow, shadow, darkshadow等组成 例子：,用css制作菜单,项目列表 实例,项目列表,项目列表的编号是通过属性list-style-type来修改，无论是在标记还是标记中都可以。 ullist-style-type:decimal; 可用
7、的属性值：disc,circle,square,upper-alpha,Css还提供了属性list-style-image，可以将项目符号显示为任意的图片。 如下例,项目列表,设置list-style-type为none的效果（无项目符号） display属性：display:block; li标记的float属性：float:left(水平显示各个项目),项目列表几个重要属性,菜单实例,百度导航条 流行的Tab菜单,css+div布局技术,div标记与span标记 盒子模型 元素的定位,div标记与span标记,div（division）是一个区块容器标记，可以容纳段落、标题、表格等网页元素
8、。可以把中的内容看作一个独立的对象，用于css的控制。,span标记,span标记也是作为网页中的容器。 区别：span是一个行内元素，在它的前后不会换行。 Span标记可以包括在div标记中，反之不成立。,盒子模型,所有页面中的元素都可以看成是一个盒子，占据着一定的页面空间。 可以通过调整盒子的边框和距离等参数来调节盒子的位置。,一个盒子模型由content（内容）,border（边框）,padding（间隙）,margin（间隔）4个部分构成。 盒子的实际宽度是由：content+padding+border+margin构成。在css中width和height是指width+paddin
9、g。,盒子模型,content,border,border一般用于分离元素，border的外围是元素的最外围，因此在计算元素实际的高度和宽时要将bordre计算入内。 border的属性：color,width,style style可取值：none,hidden,dotted,dashed,solid,double,insert等。,例子：,padding,padding用于控制content与border之间的距离。 可以设置4个方向上的值 也可以合并为一个语句,方向为从上方开始顺时针。,margin,用于表示元素之间的距离。 如果是行内元素紧邻时，之间的距离是第一个元素的margin-r
10、ight+第二个元素的margin-left 如果不是行内元素：则取margin-bottom和margin-top两个中的大者,元素的定位,Float定位 Position定位 实例,Float定位,可以设置为left,right或者none。,Position定位,分别取static,absolute,relative,fixed; 取absolute时，子块不属于父块，左边框相对于body左边的距离，四个边上的值可以为绝对的像素，也可以为百分数.,当值取relative时，子块是相对于父块定位。 例子,给图片签名 文字阴影效果,Css+div布局方法剖析,Css排版观念 固定宽度且居中的
11、版式 左中右版式,Css排版观念,将页面首先在整体上进行标记的分块，然后对各个块进行css定位，最后再在各个块中添加相应的内容。 通过css排版的页面，维护更新非常容易。,将页面用div分块,要求设计者先对页面有一个整体的框架规划，包括整个页面分为哪些模块、各个模块之间的父子关系。 以最简单的框架为例，页面由Banner、主体内容、菜单导航和版权所有组成，各个部分分别由自己的id来标识.,#container,#banner,#content,#links,#footer,页面中每一个色块都是一个div，直接用css的id表示方法来表示各个块,对于每个div还可以加入各种块元素或者行内元素。,
12、例,设计各块的位置,当页面的内容确定以后，则需要根据内容本身考虑整体的页面版型，如单栏、双栏或左中右等。,#container,#banner,#content,#links,#footer,用css进行定位,首先对body标记和#container父块进行设置： bodymargin:0px;font-size:13px;font-family:Arial; #containerposition:relative;width:100%; ,用css进行定位,以上设置了页面文字的字号、字体，以及父块的宽度，让其撑满整个浏览器。接下来设置#banner块： #bannerheight:80px;
13、border:1px solid #000000;text-align:center;background-color:#a2d9ff;padding:10px;margin-bottom:2px; ,用css进行定位,#contentfloat:left; #linksfloat:right;width:200px;text-align:center; ,#container,#banner,#content,#footer,#links,#container,代码修改,#linksfloat:right;width:200px;border:1px solid #000000;margin
14、-left:-200px;text-align:center; ,#container,#content,#footer,#links,#banner,代码修改,#contentfloat:left;text-align:center;padding-right:200px; #footerclear:both;height:30px;border:1px solid #000000;text-align:center; ,固定宽度且居中的版式,页面部分：页面具体内容,方法一,body,htmlmargin:0px;text-aligh:center; #containerposition:r
15、elative;margin:0px auto;width:700px;text-aligh:left;background:url(bg.jpg) repeate-y; ,ex,方法二,body,htmlmargin:0px; #containerposition:relative;left:50%;width:700px;margin-left:-350px; ,例 11-3,左中右版式,left正文内容right ,左中右版式,设置标记的样式 bodymargin:0px;padding:0px;font-family:arial;color:#060;background-color:#ccc; ,左中右版式,#leftposition:absolute;top:0px;left:0px;margin:0px;background-color:#fff;width:190px; ,左中右版式,#middlepadding:10px;background:#fff;margin:0px 190px 0px 190px;margin-top:0px; ,左中右版式,#rightposition:absolute;top:0px;right:0px;margin:0px;background-color:#fff;width:190px; ,
