《html表单布局及CSS样式.docx》由会员分享，可在线阅读，更多相关《html表单布局及CSS样式.docx（10页珍藏版）》请在三一办公上搜索。
1、html表单布局及CSS样式 HTML 一、HTML中的特殊符号 1.常用的特殊符号： 特殊符号 字符实体 示例 空格 A B 大于号 a b 小于号 html 引号 "姓名" 版权符号 © Copyright© All Reserved 2.表单 2.1、表单的基本语法： action：规定到表单提交之后，由谁处理，默认为当前页面 method：有两种取值get和post 表单内部由大量表单元素构成 2.2、表单元素的基本格式 2.3、表单元素的逐一介绍 1、文本框 2、密码框 3、重置、提交和普
2、通按钮 4、单选按钮 男 女 5、复选框 运动 游泳 玩游戏 6、文件域 7、下拉列表框 一月 二月 三月 四月 五月 六月 七月 八月 九月 十月 十一月 十二月 月 8、多行文本域 欢迎阅读服务协议 9、隐藏域 10、只读和禁用属性 a、 只读 欢迎阅读服务协议 b、禁用 同意以上协议 3.HTML的注释 要避免在注释内容中使用(不规范) 可以用= =或者#代替- 4、表格布局 4.1、基本语法 /行 百度/单元格 猫扑 4.2、跨列 学生成绩/跨两列 4.3、跨行 李四 4.4、
3、跨行跨列 学生成绩 5、表格的高级标签 表格数据的分组标签, 6、表格布局 采用form-table-tr-td进行页面布局 7、CSS样式表 CSS是Cascading Style Sheets 的缩写，层叠样式表，把网页的内容和外观的美化分开。 优点： a、实现内容和样式的分离，利于团队开发 b、实现样式复用，提高开发效率。 c、实现页面的精确控制 d、利于搜索引擎的搜索 7.1、CSS基本语法 样式表主要是由样式规则组成。 基本语法包括三个部分：选择器、属性和属性值 a、样式表一般用标签来声明样式规则，基本结构： 选择器 对象属性1：属性值1； 对象属性2：属性值2； b、选择器的分类
4、1、标签选择器 li color:#f00; font-family:黑体; font-size:36px; 。 2、类选择器 使用步骤分两步： a、定义样式: 类名 属性名1：属性1； 属性名2：属性2； 。 b、应用样式，使用标签的class属性引用类样式 标签内容 3、ID选择器 a、 首先使用ID属性标识被修饰的页面元素。 b、定义相应的ID选择器的样式。 #ID标识名 属性名1：属性值1； 属性名2：属性值2； 优先级：类选择器标签选择器ID选择器 8、常用的样式修饰 样式分为文本及字体、背景、列表几个方面。 1、文本和字体属性 a、文本属性用于定义文本的外观，包括颜色、行高、对齐方
5、式、字符间距等。 属性名 含义 举例 应用场景 line-height 设置行高 line-height=25px 布局多行文本 text-align 设置对齐方式( 常用的取值为：left、right、center) text-align=center 适应于各种元素对齐 letter-spacing 字符间距 letter-spacing=5px 加大字符间距 text-decoration 文本修饰 text-decoration=none 下划线的加或者去 white-space 规定如何处理空白(nowrap不换行) white-space=nowrap 不换行 b、字体属性，用来定
6、义字体类型，字号的大小，字体是否加粗等。 属性名 含义 举例 应用场景 font 在一个声明中设置字体的所有属性 font:bold 12px 宋体 ； 常用于字体样式缩写 font-familu 字体类型 font-family:黑体 ； 设置字体类型 font-size 字体大小 font-size：12px; font-weight 字体 的粗细 font-weight:bold;(粗体) c、背景属性 用来定义网页的背景色或者背景图片，精确的控制背景出现的位置和平铺的方向 属性名 含义 举例 应用场景 background 声明所有的背景属性 background:#ccc url(i
7、mages/bg.png)repeat-x 20px -100px background-color 背景颜色 background-color:#RGB; background-image 背景图片 background-image:url(images/bg.png); background-repeat 背景平铺方式 background-repeat:no-repeat;(背景不平铺) bcakground-position 背景出现的初始位置 background-position:20px-100px; 位置分别代表X，Y轴方向的坐标 针对于background-repeat属性我们又可以细分为： 平铺方式 含义 应用场景 repeat 纵横向都平铺 用小图片来构建整个背景 repeat-x 横向平铺 repeat-y 纵向平铺 norepeat 背景图不重复平铺 针对于 bcakground-position 属性我们又可以细分为： a、 Xpos Ypos 代表设置的背景图片出现的初始位置，可以为负值 b、 使用百分比表示背景出现的初始位置 c、方向、方向的关键词 水平的：left,center,right 纵向：top,center,bottom 例：right top 在右上角出现 left bottom在左下方出现
