CSS一些样式应用

列表

ul：有序列表 ol：无序列表（oreder list） 
以上两个列表的子元素，只能是li（块级元素） 
dl>dt , dd (自动缩进)

<dl>

<dt> </dt>

<dd> </dd>

</dl>

表格 
table>tr（行）>td（列） 
colspan合并列 
rowspan合并行 
列表语义化 
table>caption>(thead>th)+(tbody>tr>tr)+(tfooter>tr>td)

表单 
form

<form action=" " method=" ">

<input type=" " name=" " >

</form>

action表示提交地址

method表示提交方式：get会在提示地址后显示输入内容 post：不会在提交地址后显示输入的内容

input：输入框（form的子元素） 
type取值： text(文本) 密码框

单选框 
1.type取值为radio 2.name取值一致 3.给定value属性值（2和3一般是后台数据库管理员(DBA)给的） 
例：

<p>

<input type="radio" name="gender" value="male">男

<input type="radio" name="gender" value="male">女

</p>

多选框 
type取值为checkbox 
name的取值要一致，才会提交正确的内容 
checked为布尔类型（值和属性一致） 
例：

<p>

<input type="checkbox" name="gender" checked(默认选中)> .........

</p>

select下拉列表（下拉菜单） 
option表示可选项，name属性是对后面的储存关键词(一般由DBA提供) value的值是会提交到后台选中的数据 
例：

<p>省份

<select name="province" >

<option value="sichuan">四川省</option>

<option value="sichuan">四川省</option>

<option value="sichuan">四川省</option>

<option value="sichuan">四川省</option>

</select>

</p>

多行文本框

<texttarea cd="" row="">

<input type="buttom" value="..."> type取值buttom表示普通按钮，即只有按钮的样式，没有其他功能（用于JS）

提交按钮<input type="submit">默认中文的 提交

<input type="submit" valiue="submit">英文的提交 sunmit

buttom作为元素名称，则表示该元素是具有提交功能的按钮<buttom>提交</buttom>

type取值reset表示重置按钮

input的required属性是表示该输入框是必填项，如果没有添加任何内容，则会提示"请填写该字段"(不同浏览器显示不同)

email输入邮箱

请输入你的邮箱<input tupe="email">

设置输入内容的个数 maxlength

<p>请输入手机号

<input type="text" name="tdl" maxlength="11">

</p>

文字和输入框关联 
lable 
1.在input中设置 id 2.lable中 for 属性值与input中的id值一致 
例：

<p>

<lable for="user">请输入用户名</lable>

<input type="text" name="username" id="user">

</p>

在输入框中的默认值和提示信息（加在input标签栏里） 
默认值value属性 
提示信息使用placeholder属性 
为了实现注册表单的对齐方式 
可以把lable标签display设置为inline-block； 
给固定宽度，再设置文本对齐方式（text-algin:left / center / right）

输入框出生年月

<lable for="bir">出生年月日</lable>

<input type=:date id="bir">

输入框颜色

<input type="color">

选择上传文件

<input type="file">

输入框内提示信息颜色变化

input::-webkit-input-placeholder{

color:red;

}

输入框，焦点框 去除，通常用于搜索框

outline:none;

<p>search</p>

<input type="search">

transform变形 
transform:scale( ); 可两个参数，可一个，一个时xy同比例，两个数，第一个x轴，第二个y轴 
scale函数来设置缩放的；取值0~正无穷（默认值1） 
transform-orign设置缩放点 transfor-orign:__px, __px; 
第一个值水平方向，第二个值垂直方向 
transform-rotate 设置旋转度 
transform-rotate(45deg); 
transform-rotatez：中心点（默认值） 
transform-rotatex：x轴方向 
transform-rotatey：y轴方向 
transform:skew( ) 设置倾斜角度 
45deg表示顺时针旋转45度 
-45deg表示逆时针旋转45度

设置区块移动的偏移量 
第一个参数是x轴的方向，第二个参数是y轴方向 （像素正负均可）

transform:translate(__px,__px);

transform缩写每个函数之间的分隔符为空格

transform: rotate( ) scale( ) skew( );

transition是一个属性的一个值变化到另外一个值的过程

transition: all linear __s;

边框从中心向两边进行过渡撑满整个包含块 
1.设置子元素的位置，父级元素水平居中位置，即 nav{ left:50%} 
2.在父元素被hover的时候，子元素位置要与父元素左边框对齐 
即footer:hover>nav{left:0}; 
（注：1和2主要实现边框从水平中心点开始向左侧进行过渡） 
3.设置子元素的宽为0；即 nav{width:0}; 
4.在父级元素被hover的时候子元素的宽为100% 
即：footer:hover>nav{width:100%}; 
（3和4主要实现的是边框从水平中心点开始向右侧进行过渡的效果）