完善clearfix、表单、框架集

2019-06-03  本文已影响0人  张明越

完善clearfix

content:' '

display:table作为属性进行设置

父子元素可以合并编写

例如:

clearfix:before;

clearfix:after;

display:table;

clear:both;


表单

提交给服务器

form标签

<form action='后台地址'>添加表单项</form>

用input制作一个文本框

<input type="">

<input type="sumbit"> 默认提交

<input type="sumbit"  value=' '>

placeholder提示信息

password

单选框(例子)

性别<input type="radio">男

<input type="radio">女

<input type="radio” name='gender'>不男不女

多选框(例子)

爱好<input type=""checkbox'  name="hobby"value=' basketball'>篮球

<input type=""checkbox'  name="hobby"value='girl '>

<input type=""checkbox'  name="hobby"value=' song'>

<input type=""checkbox'  name="hobby"value='dance '>

你喜欢的明星

<select>

<option value=''></option></select>

默认设置:checked

默认为selected

multiple=“multiple”多选

optgroup分组 label属性

<textarea name='info'>可以写多行的文本

reset 重置

button 按钮 无任何功能

<fieldset></fieldset>给分组

legend设计分类名称

框架集

框架集能带入多个

内联框架只能带入一个

frameset和body不能出现同一个框架

frame 属性rows 上下分为两部分 cols 左右两部分


ie6png

想页面引入JS

<script type='text/javascript' src='js/DD_belatedPNG_0.0.8a-min.js'></script>

<script type='text/javascript'>js/DD_belatedPNG.fix("div,img");</script>


CSS过度动画

transition: width 500ms(动画运动的时间) ease,height 500ms ease 500ms,background-color 500ms ease 1s,border-radius 500ms ease 1.5s;

border-radius:50px;圆角的图片

transition:all 500ms ease


运动曲线

div;nth-child(1){

transition:all 1s linear  匀速

}

div;nth-child(2){

transition:all 1s ease  开始和结束慢速

}

div;nth-child(3){

transition:all 1s ease-in  开始是慢速

}

div;nth-child(4){

transition:all 1s ease-out 结束时慢速

}div;nth-child(5){

transition:all 1s ease-in-out 开始和结束时慢速

}div;nth-child(6){

transition:all 1s cubic-bezier(n,n,n,n);

}

反冲回弹的效果

上一篇下一篇

猜你喜欢

热点阅读