码迷,mamicode.com
首页 > Web开发 > 详细

CSS一些样式应用

时间:2018-08-26 23:39:30      阅读:300      评论:0      收藏:0      [点我收藏+]

标签:布尔类型   缩进   search   用户   input   效果   居中   enter   方向   

列表

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主要实现的是边框从水平中心点开始向右侧进行过渡的效果)

 

CSS一些样式应用

标签:布尔类型   缩进   search   用户   input   效果   居中   enter   方向   

原文地址:https://www.cnblogs.com/ss-live/p/9539342.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!