制作列表,表格及表单-笔记
制作列表,表格及表单
- 使用CSS设置各种样式
- 使用有序列表,无序列表,定义列表实现数据展示
- 使用表格实现数据展示
- 制作语义化表单
- 使用CSS3高级选择器为网页元素添加CSS样式
使用CSS设置各种样式
CSS 的意义
有效的传递页面信息
使页面漂亮,美观,更加吸引用户
可以更好的突出页面的主题内容,使用户可以第一眼看到页面的主要内容
具有良好的用户体验
< span>标签添加文字样式
font-family 设置字体样式
font-size 设置字体大小
font-style 设置字体风格
font-weight 设置字体的粗细
font 在一个声明中设置所有的字体属性
例 font :italic bold 36px "宋体";
font-family属性设置
font-family:"楷体"; 可以设置中文或者英文的字体类型
font-size属性设置
可以设置属性值的单位:in,cm,mm,pt,pc,px
一般常用的是px
font-size:20px;
font-style 属性设置
normal标准字体,
italic斜体字体,
oblique倾斜字体
font -weight属性设置
normal 默认值,定义标准的字体
bold 粗体字体
bolder 更粗的字体
lighter 更细的字体
100~900 每次增加一百 由细到粗 400等同于normal 700等同于bold
排版网页属性
color 设置文本颜色
text-align 设置文本水平对齐方式
text-indent 设置首行文本的缩进
line-height 设置文本的行高
text-decoration 设置文本的装饰
vertical-align 这只文本垂直对齐方式
text-shadow 设置文本阴影
color属性设置
RGB格式:#FFFFFF
RGBA格式:rgba(0,0,255,0.5);0.5设置透明度
text-align属性设置
left 把文本排列到左边,默认值,由浏览器决定
right 把文本排列到右边
center 把文本排列到中间
justify 实现两端对齐文本效果
text-indent和line-height属性设置
单位为em和px
一般em用的比较多 比如 text-height:2em;
text-decoration属性设置
none默认值,定义的标准本文
underline 设置文本的下划线
overline 设置文本的上划线
line-through 设置文本的删除线
vertical-align属性设置
middle 文本居中对齐
text-shadow属性设置
text-shadow:color 颜色RGB x-offset:(x轴偏移) y-offset:(y轴偏移)
blur-radius:模糊半径
设置伪类和列表样式
语法:伪类{ 语法 }
设置的顺序a:link -> a:visited -> a:hover -> a:active
a:link 未单机访问时超链接样式
a:link{color:#9ef5f9;}
a:visited 单机访问后超链接样式
a:visited{color:#333;}
a:hover鼠标悬浮其上的超链接样式
a:hover{color:#ff7300;}
a:active 鼠标单机未释放的超链接样式
a:active{color:#999;}
背景样式
< div>标签可以吧HTML文档分割成独立的 ,不同的部分
background-color 设置背景颜色
background-image 设置背景图像
repeat 沿水平和垂直两个方向平铺
no-repeat不平铺,背景图片只显示一次
repeat-x只沿水平方向平铺
repeat-y只沿垂直方向平铺
background-position 背景定位
(x,y) (x20%,y30%) (left right top bottom)
background-size 背景尺寸
auto 默认值
1px,2px
使用有序列表,无序列表,定义列表实现数据展示
列表分为三种:有序列表 ,无序列表 ,自定义列表
无序列表由< ul>标签和< li>标签组成
- 内容
- 内容
- 内容
有序列表由< ol>标签和< li>标签组成
- 内容
- 内容
- 内容
自定义列表由标签,- 标签和
- 标签组成
- 标题
- 内容
列表样式
list-style-type
none 无标记符号
disc 实心圆,默认类型
circle 空心圆
square 实心正方形
decimal 数字
使用表格实现数据展示
为什么使用表格,表格简单通用 结构稳定
表格的基本语法
< table>
< table border="2">
< tr>
< td>1行1列的标题
< td>1行2列的标题
< td>1行3列的标题
< /tr>
< tr>
< td>2行1列的标题
< td>2行2列的标题
< td>2行3列的标题
表格的基本结构
行(tr)
单元格(td)
td属性:colspan="2"跨两列
rowspan="2"跨行数
制作语义化表单
表单元素的语法
method
告诉浏览器如何将数据发送给服务器,它指定向服务器发送数据的方法,语法为
method = (get|post)
action
指示服务器上处理表输出的程序.一般来说,当用户单击表单上的"提交"按钮后,信息
发送到web服务器上,由action属性指定的程序处理.语法为action="URL"
属性
type指定表单元素的类型,可用的类型有
text ,password ,radio ,checkbox ,submit , reset ,
file , email ,url ,number ,hidden ,image ,button
表单语法
method:get 默认选择 在地址栏显示信息
post 隐藏地址栏中的信息
action:"test9.html"表示向何处发送表单数据
在实际网页开发中通常采用post方式提交表单数据
input表单元素格式
input type="test input元素类型" name="fname input元素名称"value="text input元素的值"
type:指定元素的类型.
Q 本框
使用方法:
属性
name="userName"文本框名称
maxlength="20"文本框可输入的最多字符
size="30"文本框长度
value="用户名"文本框初始值
type="text"文本框
password密码框
email邮箱框
邮箱:
自动验证邮箱格式
数字
请输入数字
type="number"数字
min="0"允许最小值
max="10"允许的最大值
step="10"合法的数字间隔
滑块
请输入数字
type="range"滑块
min="0"允许最小值
max="10"允许的最大值
step="2"合法的数字间隔
搜索框
请输入搜索的关键字:
search搜索
checkbox复选框
radio单选框
男
女
属性:
checked默认选中状态
name值必须相同的才能被分为一组
submit提交按钮
reset重置按钮
file文件域
button普通的按钮
属性
onclick="alert(this.value)"点击普通按钮弹出一个对话框对话的内容是this.value这个value
image按钮图片
文本域
默认为text
name:指定元素的名称
value:元素的初始值.type为radio时必须指定一个值
size:指定表单元素的初始宽度.当type为text或password时,
表单元素的大小以字符为单位.对于其他类型,宽度以像素为单位
maxlength:type为text或者password时,输入的最大字符数
checked:type为radio或checkbox时,指定按钮是否是被选中
select列表框
selected默认选中项
option选项
列表框
隐藏域主要目的为了后台提交数据
只读
禁用
表单元素的标注
增强鼠标的可用性
自动将焦点转移到与该标注相关的表单元素上
for="id"表单元素的id
id="male"
使用CSS3高级选择器为网页元素添加CSS样式
层次选择器
E F 后代选择器
选择匹配的F元素,且匹配的F元素被包含在匹配的E元素内
E>F 子代选择器
选择匹配的F元素,且匹配的F元素是匹配的E元素的子元素
E+F 相邻兄弟选择器
选择匹配的F元素,且匹配的F元素仅位于匹配的E元素后面
E~F 通用兄弟选择器
选择匹配的F元素,且位于匹配的E元素后的所有匹配的F元素
结构伪类选择器
E:first-child
作为父元素的第一个子元素的元素E
E:last-child
作为父元素的最后一个子元素的元素E
E F:nth-child(n)
选择父级元素的E的第n个子元素F,(n可以是1,2,3)关键字为even
(偶数),odd(奇数)
E:first-of-type
选择父元素内具有指定类型的第一个E元素
E:last-of-type
选择父元素具有指定类型的最后一个E元素
E F:nth-of-type(n)
选择父元素内具有指定类型的第n个元素
使用 E F:nth-child(n)和E F:nth-of-type(n)的关键点
E F:nth-child(n)在父级里从第一个元素开始找,不分类型
E F:nth-of-type(n)在父级里先看类型,再看位置