网页制作的文本标记完整版.docx

1、网页制作的文本标记完整版的距离)=0.(表头) (表格标题)(行).(列ttr)/table表格table标签的属性：1、width属性：指定表格或某一个表格单元格的宽度。单位可以是%或者象素。2、height属性：指定表格或某一个表格单元格的高度。单位可以是%或者象素。3、border属性：表格边线粗细4、bordercolor属性：指定表格或某一个单元格的边框颜色。5、bordercolorlight属性：亮边框的颜色6、bordercolordark属性：暗边框的颜色c7、bgcolor属性：指定表格或某一个单元格的背景颜色。8、background属性：指定表格或某一个单元格的背景图片

2、。其属性值为一个URL地址。 表格tr标签的属性：1、valign属性：指定某一个单元格里的内容（文本、图片等）的垂直对齐方式。垂直对齐方式的属性值包括： top：顶端对齐； middle：居中对齐； bottom：底端对齐。 Baseline：相对于基线对齐。2、align属性：指定表格或某一个单元格里的内容（文本、图片等）的对齐方式3、height属性：指定表格或某一个表格单元格的高度。单位可以是%或者象素表格td标签的属性：1、valign属性：指定某一个单元格里的内容（文本、图片等）的垂直对齐方式。垂直对齐方式的属性值包括： top：顶端对齐； middle：居中对齐； bottom：

3、底端对齐。 Baseline：相对于基线对齐。2、Colspan：属性值表示当前单元格跨越几列(合并行内单元格)3、Rowspan：属性值表示当前单元格跨越几行（合并列单元格）跑马灯：. 超链接：1) 用文本做超链接： 首页2) 用图像做超链接：3) 文本图像混合做链接：格力空调1型 该方法在商品展示 的网站上较常用。4) 热区链接：使用map在图像上定义一幅地图，地图上可包含多个热区，每个热区用area单标记定义，area的shape属性定义了热区的形状，coords定义了热区的坐标点，href定义了热区链接的文件。同时img标记用usemap指明用了哪幅地图 5) 链接到其他网页或文件（j

4、pg, rar等）内部链接返回首页外部链接 网易网站 下载链接点击下载6) 电子邮件链接给我留言演示：mail.htmltarget属性的取值：-self（在本窗口打开）、-blank（空白窗口）、_parent（将链接的文件载入到父框架）、_top（将链接的文件载入到整个浏览器窗口中，并删除所有框架）title的属性：title属性在很多标记里都有，其作用是在鼠标停留在该元素上时显示设置的说明文字制作超链接的规则：1) 可以使用相对链接尽量不要使用绝对链接，如./index.htm而不是2) 链接目标尽可能简单如，而不是css内联样式，具有最高优先级(写在标记里面)内部样式表，优先级低于内联

5、样式（head添加style标记）外部样式表，优先级最低（新建css）css基本写法选择符属性：属性值；p属性：属性值；（1）类型选择符(整体效果一致)p属性：属性值； 我的样式表 第二段落 第三段落（2）类选择符(在整体上实现不一致的效果).div1属性：属性值； .div2属性：属性值； .left属性：属性值； .right属性：属性值； 我的样式表 第二段文字 第三段文字 文字居左显示 文字居右显示（3）id选择符（具有最高优先级）#footer属性：属性值 联系我们: demo（4）伪类：a:link 超链接的初始状态a:visited 已经访问后的链接状态a:hover 鼠标滑过链

6、接时的状态a:active 点击状态时 a:hover color: #ff00ff; text-decoration:none; XX （5）子选择类:语法格式：选择符1 选择符2选择符1和2直接使用空格分隔，其含义是第一个选择符中的第二个选择符。注意：选择符1必须和选择符2有嵌套关系，否则无法正常使用div pwidth:500px; height:150px; background:#009900; 包含在div里面的p元素 独立的div元素 独立的p元素(6)选择符分组（群选择符）语法格式：选择符1，选择符2，.每个选择符之间用“,”分隔div, p, h1width:500px; h

7、eight:150px; background:#009900; color:white; div元素 p元素 h1元素div的嵌套网页头部 网页左边 网页右边 网页底部边界（margin）属性 补白（padding）属性 CSS设置填充属性 div width:400px; height:300px; background:red; padding: 50px 20px 30px 40px; 我的样式表边框样式border分为上、右、下、左四个子属性和一个border-style 综合属性。顶部边框样式border-top-styleBorder-top-style：none | hidde

8、n | dotted | dashed | solid | double | groove | ridge | inset | outset;None：没有边框Hidden：隐藏边框Dotted：点线边框Dashed：虚线边框Solid：实线边框Double：双线边框Groove：3D凹槽边框Ridge：菱形边框Inset：3d凹边Outset：3d凸边边框的综合属性border : border-width | border-style | border-color CSS设置边框属性 .dashedborder-top-style: dashed; 我的样式表浮动定位：float/none

9、、right、left浮动元素使得div块可以左右并排清除浮动属性：clear/none、right、left、both相对定位：position：relative(相对于其原来位置不同方向的偏移)属性值：top(从上向下位移)、left(从左向右)、right、bottomdivposition:relative;top:50px;left:50px;11111绝对定位：position：absolute(以距离它最近的设置了定位属性的父级元素为定位基准，若它所有的父级元素都没有设置定位属性，则以浏览器窗口为定位基准)属性值：top、left、right、bottom制作三角形#navfon

10、t-size:14px; #nav adisplay:block; /*将行内元素a设置为块级元素，从而具有块级元素的特点*/ color:#ff0000; background-color:#99ccff; text-align:center; text-decoration:none; padding:6px 16px ; margin:0 2px; border:1px solid #3399ff; float:left; /* 将每个块设置为左浮动 */ position:relative; /* 让b元素以a元素为定位基准 */ #nav a:hover color:#ffffff;

11、 background-color:#993300; #nav a:hover bborder:8px solid #ffffff; border-top-color:red; /*以上两条形成红色下三角形*/ overflow:hidden; height:0px; width:0px; position:absolute; top:30px; left:35px; /*以上3条相对于a元素边框的右下边*/ 中心简介 政策法规 常用下载 为您服务 技术支持规 常用下载 为您服务背景图片：background其属性：background-colorbackground-imagebackgro

12、und-repeat（背景的平铺方式）：repeat | no-repeat | repeat-x | repeat-y | round(两端对齐平铺，多出空间通过自身拉伸填充) | space(两端对齐平铺，多出来的空间使用空白代替);background-position: 垂直方向：top、center、bottom 水平方向:left、center、rightbackground-attachment(滚动方式)：scroll：背景图像滚动 | fixed: 背景图像固定背景综合属性：background用来设置背景的所有控制选项。背景颜色、背景图片、平铺方式、定位、滚动(css)等高#boxoverflow:hidden;padding:0; /*对父级元素设置如果内容超过指定高度则隐藏，填充为零。*/#leftheight:auto;margin-bottom:-32767px;padding-bottom:32767px; /*此三句用于实现等高效果*/#rightheight:auto;margin-bottom:-32767px;padding-bottom:32767px; /*此三句用于实现等高效果*/