《html与css+div》由会员分享，可在线阅读，更多相关《html与css+div（28页珍藏版）》请在金锄头文库上搜索。
1、HTML的基本语法,字符格式标记 文本区段格式标记 列表标记 表格标记 链接标记 表单标记 层标记（定位标记）,列表标记,. 无编号列表 . 有编号列表（type） . 列表项目 . 定义式列表 . 定义项目 . 定义项目,表格标记,. 定义表格区段 . 表格标题 . 表头 . 表格行 . 表格单元格 横跨两列colspan=“2” 横跨两行rowspan=“2”,链接标记（超级链接和锚）,创建超级链接：本文本 是一个指向本网站中的一个页面的链接。本文本 是一个指向百度上的页面的链接。 图像作为链接：您也可以使用图像来作链接： ,在新的浏览器窗口打开链接（ target 属性）： 最后一页 如
2、果把链接的 target 属性设置为 “_blank“，该链接会在新窗口中打开。 链接到同一个页面的不同位置（锚标签）： 查看第十八章 第十八章,表单标记,. 表单区段的开始与结束 产生单行文本框、单选按钮、复选框等 .产生多行输入文本框 .表明下拉列表的开始与结束 .下拉列表中产生一个选择项目,举例, 用户： 密码： Volvo Saab Fiat Audi , 健康信息： 身高： 体重： ,带有输入框和确认按钮的表单 First name: Last name: 带有复选框的表单,I have a bike: I have a car: I have an airplane: , 定义注释
3、 这是一段普通的段落。 定义文档类型 声明位于文档中的最前面的位置，处于 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。,CSS的知识,Css的语法结构由3部分组成：选择符、属性、值。 selector property：value；,选择符,类型选择符：以网页中已有的标签类型作为名称的选择符。例如：body、div、span等。 ID选择符-“#” Class选择符-“.” 群组选择符 eg：h1，h2，p，span h1，h2，p，span具有相同的样式定义 包含选择符 eg：#main li表示对main中的li子对象进行了样 式定义,组合选择符 p .fon
4、t1表示p标签下的所有class为font1的标签。 #main p表示id为main的标签下的所有p标签。 标签指定选择符 p .font1表示针对所有class为font的p标签。 伪类及伪对象 a:link、 a:hover、 a:active、 a:visited 通配选择符 *包含所有不同id、不同class的html的所有标签，针对页面中所有对象。,应用CSS到网页中,内嵌样式表 内部样式表 外部样式表 ,CSS网页布局,一列固定宽度 #prh border: 2px solid #A9C9E2; background-color: #E8F5FE; height: 200px;
5、width: 300px; ,一列自适应宽度,一列自适应宽度 #prh border: 2px solid #A9C9E2; background-color: #E8F5FE; height: 200px; width: 80%; ,一列固定宽度居中,一列固定宽度居中 #prh border: 2px solid #cccccc; background-color: #000000; height: 200px; width: 300px; margin:0px auto; ,二列固定宽度,左侧 右侧 #left background-color: #E8F5FE; border: 1px
6、solid #A9C9E2; float: left; height: 300px;width: 200px; #right background-color: #F2FDDB; border: 1px solid #A5CF3D; float: left; height: 300px;width: 200px; ,二列宽度自适应,左侧 右侧 #left background-color: #E8F5FE; border: 1px solid #A9C9E2; float: left; height: 300px;width: 20%; #right background-color: #F2
7、FDDB; border: 1px solid #A5CF3D; float: left; height: 300px;width: 70%; ,左列固定，右列宽度自适应,左侧 右侧 #left background-color: #E8F5FE; border: 1px solid #A9C9E2; float: left; height: 300px;width: 200px; #right background-color: #F2FDDB; border: 1px solid #A5CF3D; float: left; height: 300px; ,两列固定宽度居中, 左侧 右侧 #
8、prh width: 404px; margin: 0px auto; #left #right,三列浮动中间列宽度自适应,左侧 中侧 右侧 #left background-color: #E8F5FE; border: 1px solid #A9C9E2; height: 400px; width: 200px; position: absolute; top: 0px; left: 0px; ,#right background-color: #FFE7F4; border: 1px solid #F9B3D5; height: 400px;width: 200px; position:
9、 absolute; top: 0px;right: 0px; #center background-color: #F2FDDB; border: 1px solid #A5CF3D; height: 400px; margin-right: 202px; margin-left: 202px; ,横向导航, #prh width:860px; margin:0 auto;background:#ccc #prh li float:left; #prh li a color:#000000; text-decoration:none; padding-top:4px; display:blo
10、ck; width:120px; height:22px; text-align:center; background-color:#ececec; margin-left:2px; #prh li a:hover background-color:#bbbbbb; color:#ffffff; , 主页 日志 音乐盒 留言板 相册 说说 个人档 ,纵向导航, #prh width:200px; border-right:1px solid #00FF33; border-bottom:1px solid #00FF33; border-left:1px solid #00FF33; #prh h1 margin:0px; padding:4px; font-size:14px; font-weight:bold; border-top:1px solid #00FF33; background-color:#006666; #prh h2 margin:0px; padding:4px; font-size:12px; background-color:#009966 , 主页 日志 音乐盒 个人档 留言板 相册 说说 好友 ,
