WEB基础知识技术分析.pptVIP

* * 第四部分 网页布局排版 表格 table trtd/td/tr /table 表格的属性 width=900 height=20 border=1 align=center cellpadding=0 cellspacing=1” bordercolor=#0000FF bgcolor=#FFFF00 * * 第四部分 网页布局排版 表格 table trtd/td/tr /table 单元格的属性 align=center valign=middle border=1 bgcolor=#FF00FF“ bordercolor=blue align: left|right|center valign: top|middle|bottom * * 第四部分 网页布局排版 单元格合并 colspan=“n“ 横向后合并 n 个单元格 rowspan=“n“ 纵向下合并n个单元格 * * 第四部分 修饰网页布局 Css层叠样式表(cascading style sheets) 作用可以帮助用户对网页的布局，字体，颜色，背景和图片做修饰及精确的定位 * * 样式表 行内样式表 div style=border:1px; border-color:#0000FF; border-style:dotted;width:500px;height:500px;background:url(bj.JPG); background-repeat:no-repeat; background-position:center;东奔西走 基本原理基本原理英雄模范/div 内嵌样式表 写在 head与/head之间用style/style定义 外部样式表 扩展名：.css link rel=“stylesheet” type=“text/css” href=“ysb.css” 外部引用样式表 * * 文本的定义 背景的定义 边框的定义 位置的定义 * * 文本的定义 大小 font-size 例：font-size:12px 颜色 color 例： color:#0000FF 单词间距 word-spacing 字母间距 letter-spacing 加粗 font-weight 例： font-weight:bold 线条 text-decoration 样式： Underline 下划线 Overline 上划线 line-through 删除线 None 没有任何线 行高：line-height:20px; 首行缩进： text-indent:20px; 文本居中 text-align 例：text-align:center Left Right Center text-transform:uppercase * * 背景的定义 背景颜色 background-color:#CC3300 背景图片 background-image:url(bj.jpg) 背景图片平铺样式background-repeat no-repeat 不平铺 repeat-x x轴平铺 repeat-y y轴平铺 repeat 平铺 默认 背景位置background-position Top 上 Bottom 下 Left 左 Right 右 缩写：background 背景图片绑定 background-attachment Fixed 解除绑定 Scroll 绑定 * * 边框的定义 边框的颜色：border-color:red border-top-color Border-bottom-color Border-left-color Border-right-color 边框粗细： border-width:3px; border-top-width Border-bottom-width Border-left-width Border-right-width * * 边框的定义 边框的线型：border-style Solid 实线 Double 双实线 Dotted 虚线1 dashed虚线2 Groove 立体1 Outset立体2 Ridge立体3 Border-top-style Border-bottom-style Border-left-style Border:1px solid red; * * 位置的定义 Position 相对 relative 例： position: relative 绝对 absolute