CSS中往下拉菜单和表单和弹出层的简易笔记

2020-10-19 10:13 jianzhan

往下拉菜单

    display:block,盒子会由收拢包围着元素变成拓展填充父元素
    position:absolute是相对父元素的肯定部位,其座标全是相对父元素的,例如对齐往下拉菜单

CSS Code拷贝內容到剪贴板
  1. .mene li ul{   
  2.     display:block;   
  3.     position:absolute;   
  4.     left:0;   
  5.     top:100%;   
  6. }  

表单

    input的type:
    text:基础的单写作本框。
    password:文字显示信息为掩码。
    checkbox:复选框。
    radio:单选按钮。
    submit:递交表单的按钮。
    time、date、search:HTML5 文字框的变体。
    多写作本框 textarea
    select元素转化成往下拉目录,每个候选选项用option文字元素转化成
    运用float和span(等行内元素)能够做到水平排序的实际效果,但怎样挑选是个难题
    cursor:point会使电脑鼠标停在元素上光标变成小手
    transition加上过渡实际效果,有5个过渡特性:
     transition-property,过渡的 CSS 特性名,例如 color、width;
    transition-duration,过渡的不断時间,以秒或毫秒设置,例如 2s、500ms;
    transition-timing-function,过渡的调速涵数,决策动漫实际效果是不是光滑,是先慢后快还
    是先快后慢,例如 ease-in、ease-out、ease-in-out 或 linear(默认设置值);
    transition-delay,过渡刚开始前的延迟时间時间,以秒或毫秒设置,例如 1s、200ms;
    transition,过渡的简写特性,比如 transition:color 2s ease-in 1ms;。

CSS Code拷贝內容到剪贴板
  1. input {border-color:black; transition:border-color 2s;}   
  2. input:focus {border-color:green;}   
  3. //请留意,应用 transition 特性时要对于全部访问器加上厂商前缀。   
  4. //加上前缀版本号   
  5. border-radius:10px; -webkit-transition:2s width;  

弹出层

    CSS 中有1个 z-index 特性,用于操纵元素的在层叠左右文中的顺序。换句话说,根据它能够更改元素层叠时的默认设置顺序。z-index 值较大的元素,在层叠层级中坐落于z-index 值较小的元素上方。z-index 特性的值能够是 0 到随意大的标值;负值还可以,但在一些访问器中其实不靠谱。默认设置状况下,全部层叠元素的 z-index 的值为 auto,非常于 0。