zoukankan      html  css  js  c++  java
  • web前端

     
    readonly="true"  不能写入字
    maxlength="10" 最多输入10个字
    ist-style:none 去掉padding值
    overflow: scroll; 出现滚动条
    background-origin:content-box; 定位背景图片的位置

    在 body 元素中设置两个背景图像:

    body { background-image:url(img_flwr.gif),url(img_tree.gif); }
    
    
    设置透明:
    filter: alpha(opacity=70);
    opacity: 0.7;
    设置文字与文字之间的间隙
    letter-spacing: 5px;
    设置单词与单词之间的间隙
    word-spacing:5px ;
    设置去掉button按钮在ios上的默认样式
    -webkit-appearance: none;
    可以使用 transition-duration 属性来设置 "hover" 效果的速度:
    transition-duration: 0.1s;
    鼠标放上去变为小手:
    cursor:pointer;
    把点击button按钮时显示的阴影去掉
    -webkit-tap-highlight-color:rgba(255,255,255,0);
    禁止textarea缩放

    resize:none;

    select标签属性:
    1 multiple 设置多选选择框
    2 size 设置多选选择框显示的行数
    3 options获取所有的option元素
    4 selectedIndex 获取选中项的索引
    5 selected 设置选中项
    HTML <textarea> 标签的 wrap 属性
    wrap 属性

    通常情况下,当用户在输入文本区域中键入文本后,浏览器会将它们按照键入时的状态发送给服务器。只有用户按下 Enter 键的地方生成换行。

    如果您希望启动自动换行功能(word wrapping),请将 wrap 属性设置为 virtual 或 physical。当用户键入的一行文本长于文本区的宽度时,浏览器会自动将多余的文字挪到下一行,在文字中最近的那一点换行。

    wrap="virtual" 将实现文本区内的自动换行,以改善对用户的显示,但在传输给服务器时,文本只在用户按下 Enter 键的地方进行换行,其他地方没有换行的效果。

    wrap="physical" 将实现文本区内的自动换行,并以这种形式传送给服务器,就像用户真的那样键入的。因为文本要以用户在文本区内看到的效果传输给服务器,因为使用自动换行是非常有用的方法。

    如果把 wrap 设置为 off,将得到默认的动作。

    适应手机端:
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     
    做手机端页面body必须设置
    不允许用户执行选中的操作
    -webkit-user-select: none;
    旋转屏幕的时候禁止调整文字大小
    -webkit-text-size-adjust: none;
    -webkit-tap-highlight-color:rgba(0,0,0,0);
     
    用来跳转到指定页面或者是获取当前页面的地址
    location.href;
    设置或者是获取锚点链接(以#开头)
    location.hash;
    给当前地址栏设置参数或者是获取当前地址栏的参数(以?号开头)
    location.search;
    html5
    弹性盒:(谷歌)
    display: -webkit-box;
    -webkit-box-orient: vertical;垂直
    display: -webkit-box;
    -webkit-box-orient: horizontal;水平(默认)
    -webkit-box-flex: 1;自动占满剩余的空间
    overflow: scroll;加滚动条
    弹性盒水平垂直都居中
    -webkit-box-pack:center;
    -webkit-box-align:center;
     
    iscroll4默认情况下阻止浏览器的默认行为,在iscroll滚动的区域a标签input标签等会失效,需要我们重写方法来判断一下
    iscroll5已经修正了浏览器的的默认行为,如果不是a标签input标签等它才会阻止浏览器的默认行为
     
    flex-direction 顺序指定了弹性子元素在父容器中的位置。
    flex-direction的值有:
    row:横向从左到右排列(左对齐),默认的排列方式。
    row-reverse:反转横向排列(右对齐,从后往前排,最后一项排在最前面。
    column:纵向排列。
    column-reverse:反转纵向排列,从后往前排,最后一项排在最上面。
     
    justify-content 属性
    内容对齐(justify-content)属性应用在弹性容器上,把弹性项沿着弹性容器的主轴线(main axis)对齐。
    justify-content 语法如下:
    justify-content: flex-start | flex-end | center | space-between | space-around
    各个值解析:
    flex-start:
    弹性项目向行头紧挨着填充。这个是默认值。第一个弹性项的main-start外边距边线被放置在该行的main-start边线,而后续弹性项依次平齐摆放。
    flex-end:
    弹性项目向行尾紧挨着填充。第一个弹性项的main-end外边距边线被放置在该行的main-end边线,而后续弹性项依次平齐摆放。
    center:
    弹性项目居中紧挨着填充。(如果剩余的自由空间是负的,则弹性项目将在两个方向上同时溢出)。
    space-between:
    弹性项目平均分布在该行上。如果剩余空间为负或者只有一个弹性项,则该值等同于flex-start。否则,第1个弹性项的外边距和行的main-start边线对齐,而最后1个弹性项的外边距和行的main-end边线对齐,然后剩余的弹性项分布在该行上,相邻项目的间隔相等。
    space-around:
    弹性项目平均分布在该行上,两边留有一半的间隔空间。如果剩余空间为负或者只有一个弹性项,则该值等同于center。否则,弹性项目沿该行分布,且彼此间隔相等(比如是20px),同时首尾两边和弹性容器之间留有一半的间隔(1/2*20px=10px)。
     
    在css文件中引入公共样式:
    @import url("reset.css");
     
    调整背景图大小:
    background-size:宽 高
    自动换算padding和margin值:
    -webkit-box-sizing: border-box;
    调整背景图片位置
    background-position: 左右 上下;
     
    border-radius可以同时设置1到4个值。如果设置1个值,表示4个圆角都使用这个值。如果设置两个值,表示左上角和右下角使用第一个值,右上角和左下角使用第二个值。如果设置三个值,表示左上角使用第一个值,右上角和左下角使用第二个值,右下角使用第三个值。如果设置四个值,则依次对应左上角、右上角、右下角、左下角(顺时针顺序)。
     
    文字超出隐藏并显示省略号
    overflow: hidden; /*自动隐藏文字*/
    text-overflow: ellipsis;/*文字隐藏后添加省略号*/
    white-space: nowrap;/*强制不换行*/
    20rem;/*不允许出现半汉字截断*/
     
    滚动条进行隐藏:
    overflow-y:auto;
    &::-webkit-scrollbar{
    0px;
    }
     
     
     

    placeholder是css3中表单元素input的一个占位符,适用于高级浏览器或者手机端的输入框的默认提示内容,通过下面几行代码就可以设置一个兼容的placeholder文字颜色。

    修改所有的input

    ::-webkit-input-placeholder {
      color: red;
    }
    :-moz-placeholder {/* Firefox 18- */
      color: red;
    }
    ::-moz-placeholder{/* Firefox 19+ */
     color: red;
    }
    :-ms-input-placeholder {
      color: red;
    }

    修改某个标签

    #myInput::-webkit-input-placeholder {
      color: red;
    }
    #myInput:-moz-placeholder {
      color: red;
    }
    #myInput:-ms-input-placeholder {
      color: red;
    }
    css旋转动画:
    @-webkit-keyframes mycss{
    0%{
    background: #b7d2ff;
    -webkit-transform:rotate(0deg)
    }
    25%{
    background: blue;
    -webkit-transform:rotate(72deg)
    }
    }
    @keyframes(关键帧)作为CSS3动画的一部分,其该紧跟一个标识符(由开发者自定),此标识符将在其他CSS代码中引用。在@keyframes和标识符之后,就是一系列的动画规则(就像普通的CSS代码中声明的style规则)了。这一系列动画规则用大括号括起来隔开,然后再嵌在@keyframes之后的大括号里,类似其他@语法规则。
    webkit表示这个动画效果只适用于webkit内核的浏览器,labelON就是这个动画里面关键帧的名字。
     
    transform:rotate(45deg)(旋转45度,deg是degree的缩写,意为角度;当然这只是一个单位,还有别的单位,但不常用;你也可以直接采用数字而不用单位,这个数字会被自动转换为角度)
     
    参考网址:http://www.cnblogs.com/happyPawpaw/archive/2012/09/12/2681348.html
     
     
     
     
  • 相关阅读:
    计算JensenShannon Divergence距离的方法
    perl 取出正则表达式的匹配位置
    QQ客服左右提示
    JS获取DropDownList的value值与text值
    一个大文件上传组件RadUpLoad(带进度条时间显示)
    asp.net不同后辍名的文件
    RowDataBound事件 .
    当sql2000和sql2005同时装时,因为都用了1433的端口号,可能会导致连接失败,这里讲asp.net 的连接方法 .
    CSS圆角
    ASP.NET把图片存入数据库和使用文件流读取显示(转)
  • 原文地址:https://www.cnblogs.com/smallning/p/6008185.html
Copyright © 2011-2022 走看看