zoukankan      html  css  js  c++  java
  • 项目

    经过俩周的学习,开始做网站了,尽管很多东西还不熟练,但是能够做项目了,还是很开心的

    * translate定义变换

    * 常用变换:translate 平移
    * scale 缩放
    * rotate定义旋转
    * transform可同时进行多种变换,多种变换之间空格分割;
    * 例如:transform:scale(1.8,3.0) translatey(0px) rotate();
    * transform-origin:定义变换起点。
    * 可选值:left/center/right top/center/bottom
    * 或者,直接写X,Y轴坐标点。
    * 例如:transform:rotate(180deg);
    * transform-origin:right bottom;
    * 表示,绕左下角,旋转180。
    */
    /*transition属性:定义过度
    1.参与过度的属性,可以指定某个CSS属性,也可以all/none
    2.过渡开始到过渡完成时间,0.3s
    3.过渡的样式函数常选ease
    4.过度开始前的延迟时间,可以省略

    transition属性可以同时定义多个过渡效果,用逗号分隔
    例如:transition: color .3s ease,border .5s linear
    */
    /*
    CSS3动画的使用
    1.声明一个动画(关键帧)
    @keyframes name{
    form{}
    to{}

    }
    阶段:
    每个阶段用百分比表示,从0%到100%
    起止必须设置即0%和100%或者form或to
    *
    * 2.在CSS选择器中,使用Animation动画属性,调用声明好的关键帧*/
    @-webkit-keyframes myframe{
    from
    {
    background-color: red;
    }
    25%{
    background-color: green;
    }
    50%{
    background-color: yellow;
    }
    75%{
    background-color: d\;
    }
    to{background-color: darkmagenta;}
    }
    .div2{
    100px;
    height: 100px;
    background-color: red;
    -webkit-animation: myframe 3s ease .25s Infinite ;

    H5新增标签属性

    <!-- 【HTML5 新增结构标签】
    section:表示页面中的一个内容区块,文档的主体部分,用于将网页或文章划分章节、区块。
    article:表示页面中的一块与上下文不相关的独立内容,例如博客中的一篇文章。
    aside:表示article元素内容之外的,与article元素内容相关的辅助信息。(常用于相关推荐啊等)
    header:网页或文章的头部。
    footer:网页或文章的底部。
    nav:表示页面中导航链接的部分
    hgroup:用于整个页面或页面中一个内容区块的标题进行组合。
    -->

    <!--【HTML5表单属性】
    Form:指向特定表单id,实现input无需放于form中,即可通过form提交;

    Formaction/Formmethod:设置某个submit按钮,提交到指定的action地址,使用指定的method方法。 会覆盖form中的action和method属性

    Placeholder:自动提示
    Autofocus:自动获得焦点
    Autocomplete:自动完成功能

    详见 05_表单form.html 第8部分

    List:指向指定的datalist的ID,为input绑定一组指定的datalist提示信息(datalist具有和Autocomplete类似的自动筛选完成功能)
    >>>写法:<input type="text" list="data1"/>
    <datalist id="data1">
    <option>1234</option>
    <option>2234</option>
    <option>3234</option>
    </datalist>

    定位

    [绝对定位]
    * 使用position;设置元素为绝对定位元素
    * 2.定位机制:
    * 相对于第一个非static的祖先元素(即使用了relative;absolute/fixed定位的祖先元素)进行定位
    * 如果所有祖先元素均未定位,则相对于浏览器左上角定位
    * 3.使用absolute的元素,会从文档流中完全删除,原有空间释放不在占有
    * [固定定位]
    * 1.position:fixed;是一种特殊的绝对定位,父容器无法使用relative锁住
    * 2.定位机制:永远相对于浏览器定位
    *
    * [z-index 属性]
    * 1.作用:设置定位元素的z轴层叠顺序
    * 2.使用要求:必须是定位元素才能使用。relative/absolute/fixed
    * 使用z-inde需要考虑父容器约束,如果父容器为z-index:auto,则子容器的z-index可以不受父容器约束;如果父容器z-index进行了设置,则子容器的层叠将以父容器的z-index为准(在同一父容器的不同子元素,仍可以通过自己的z-index调整层叠关系
    * 3.z-index:auto&z-index:0的异同:
    * z-index:auto为默认值,与z-index:0处于同一平面
    * z-index:auto不会约束子元素的z-index的层次,z-index:,会约束子元素必须与父元素处于同一平面
    * 4.z-index相同(处于同一平面的定位元素)的层叠关系:后来者居上*/
    .div1{ 100px;
    height: 100px;
    background-color: red;
    margin: 0 auto;
    position: relative;
    top: ;
    /*
    绝对定位元素水平居中的方式:
    1.left:50%
    2.设置margin-left为-width/2:magin-left:-50px;*/
    }

  • 相关阅读:
    java+opencv实现图像灰度化
    java实现高斯平滑
    hdu 3415 单调队列
    POJ 3368 Frequent values 线段树区间合并
    UVA 11795 Mega Man's Mission 状态DP
    UVA 11552 Fewest Flops DP
    UVA 10534 Wavio Sequence DP LIS
    UVA 1424 uvalive 4256 Salesmen 简单DP
    UVA 1099 uvalive 4794 Sharing Chocolate 状态DP
    UVA 1169uvalive 3983 Robotruck 单调队列优化DP
  • 原文地址:https://www.cnblogs.com/dsmf/p/6581992.html
Copyright © 2011-2022 走看看