美文网首页
完善clearfix、表单、框架集

完善clearfix、表单、框架集

作者: 张明越 | 来源:发表于2019-06-03 16:30 被阅读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);

    }

    反冲回弹的效果

    相关文章

      网友评论

          本文标题:完善clearfix、表单、框架集

          本文链接:https://www.haomeiwen.com/subject/mzocxctx.html