zoukankan      html  css  js  c++  java
  • 0031 CSS用户界面样式:鼠标样式cursor、轮廓线 outline、防止拖拽文本域resize

    • 所谓的界面样式, 就是更改一些用户操作样式,以便提高更好的用户体验。
      • 更改用户的鼠标样式 (滚动条因为兼容性非常差,我们不研究)
      • 表单轮廓等。
      • 防止表单域拖拽

    2.1 鼠标样式cursor

    设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。

    属性值 描述
    default 小白 默认
    pointer 小手
    move 移动
    text 文本
    not-allowed 禁止

    鼠标放我身上查看效果哦:

    <ul>
      <li style="cursor:default">我是小白</li>
      <li style="cursor:pointer">我是小手</li>
      <li style="cursor:move">我是移动</li>
      <li style="cursor:text">我是文本</li>
      <li style="cursor:not-allowed">我是文本</li>
    </ul>
    

    2.2 轮廓线 outline

    在这里插入图片描述
    是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。

     outline : outline-color ||outline-style || outline-width 
    

    但是我们都不关心可以设置多少,我们平时都是去掉的。 li

    最直接的写法是 : outline: 0; 或者 outline: none;

     <input  type="text"  style="outline: 0;"/>
    

    2.3 防止拖拽文本域resize

    在这里插入图片描述

    实际开发中,我们文本域右下角是不可以拖拽:

    <textarea  style="resize: none;"></textarea>
    

    2.4 用户界面样式总结

    属性 用途 用途
    鼠标样式 更改鼠标样式cursor 样式很多,重点记住 pointer
    轮廓线 表单默认outline outline 轮廓线,我们一般直接去掉,border是边框,我们会经常用
    防止拖拽 主要针对文本域resize 防止用户随意拖拽文本域,造成页面布局混乱,我们resize:none

  • 相关阅读:
    最大流——poj3308 (模板)
    混合边的欧拉路径——poj1637 最大流
    JBPM FAQ
    spring 读取资源文件方法
    JBPM使用assignHandler进行用户分派思路
    直接修改jpbm xml流程定义字段的方法
    转 java 读取文件的字符集
    JAVA实现AD验证
    找到一篇jbpm session closed解决办法的文章
    dwr 读取cookie
  • 原文地址:https://www.cnblogs.com/jianjie/p/12126485.html
Copyright © 2011-2022 走看看