所谓的界面样式, 就是更改一些用户操作样式, 比如 更改用户的鼠标样式, 表单轮廓等。但是比如滚动条的样式改动受到了很多浏览器的抵制,因此我们就放弃了。 防止表单域拖拽

鼠标样式cursor

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

 cursor :  default  小白 | pointer  小手  | move  移动  |  text  文本

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

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

尽量不要用hand 因为 火狐不支持 pointer ie6以上都支持的尽量用

轮廓 outline

是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。

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

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

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

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

防止拖拽文本域resize

resize:none 这个单词可以防止 火狐 谷歌等浏览器随意的拖动 文本域。

默认右下角可以拖拽:

右下角不可以拖拽:

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

CSS——用户界面样式的更多相关文章

  1. CSS用户界面样式之cursor/outline/resize

    1. 鼠标样式cursor 检测鼠标指针在对象上移动的鼠标指针采用何种系统预定于的光标形状 常用属性: default 小白 hands小手 /pointer move移动 text文本 2. 轮廓 ...

  2. css学习_css用户界面样式

    1.css用户界面样式 a.鼠标样式(记住几个兼容性好的) cursor:default/pointer/move/text; b.轮廓 outline outline:2px solid red: ...

  3. 认识CSS中高级技巧之用户界面样式

    前端之HTML,CSS(九) CSS高级技巧 CSS用户界面样式 用户界面样式指更改用户操作样式,如更改用户的鼠标样式.表单轮廓等. 鼠标样式cursor cursor属性具有属性值有:default ...

  4. CSS之 元素显示隐藏,用户界面样式,文本溢出隐藏,精灵技术,三角形

    元素的显示与隐藏 display 显示 display 设置或检索对象是否及如何显示 display: none; 隐藏对象 display: block; 除了转换为块级元素, 同时还有显示元素的意 ...

  5. 精简的网站reset 和 css通用样式库

    参考链接:http://www.zhangxinxu.com/wordpress/2010/07/我是如何对网站css进行架构的/ reset.css body{ line-height:1.4; c ...

  6. css初始化样式代码

    为什么要初始化CSS? CSS初始化是指重设浏览器的样式.不同的浏览器默认的样式可能不尽相同,所以开发时的第一件事可能就是如何把它们统一.如果没对CSS初始化往往会出现浏览器之间的页面差异.每次新开发 ...

  7. 漂亮的CSS按钮样式集以及在线生成工具

    以前我们制作一样带带阴影.圆角或3D感的按钮都需要用图片来制作,但CSS3出来后就可以不用图片了,由于是代码写的按钮样式,在Retina上浏览依然清晰美观.虽然不错,但我们写一个阴影+质感的按钮还是挺 ...

  8. WEB前端开发CSS基础样式全面总结

    Web前端开发css基础样式全面总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-2 ...

  9. html / css打印样式

    最近做公司后台系统,需要打印贴箱标签,按照正常打印A4纸的标准,测试的效果不是自己想要的,文字排版布局都乱了,查了一些资料,需要设置的东西我总结了一下: 显示器(screen)和打印机(printer ...

随机推荐

  1. mongo数组修改器—$push、$ne、$addtoset、$pop、$pull

    这几个方法也很有意思 $push 像已有的数组末尾加入一个元素,要是元素不存在,就会创建一个新的元素,如果元素存在了,就会再添加一个一模一样的元素,会造成元素的重复,所以在使用的时候,要确保该元素不存 ...

  2. 微信小程序--学习的案例

    一.「程序秀」 「程序秀」这个小程序非常特别,因为它是一个可以帮助别人开发小程序的小程序.它以「即速应用」这个无需代码一键生成微信小程序的开发工具为基础,为广大开发爱好者提供小程序开发的最新资讯和培训 ...

  3. createBottomTabNavigator: 怎么在切换tab的时候让页面重新渲染

    1.import withNavigationFocus from react-navigation to your class . 2.hen export your like this : exp ...

  4. Mysql ibd恢复

    一,binlog恢复,这里就不说了. 二,ibd方式其实很简单, 生成数据结构(有的可以跳过) 1,创建一个新库 2,新库里新建一个表,名字和回复的表一样. 字段数量一样(字段类型和名字都无所谓) 3 ...

  5. vue+element 构建的后台管理系统项目(1)新建项目

    1.运行 vue init webpack demo   这里的demo是你项目的名字 2.npm run dev 查看项目启动效果 3.安装Element cd 项目 cmd  运行 npm i e ...

  6. js用正则判断身份证号码

    在用户注册或修改信息时会用到正则表达式判断身份证号,直接调用该函数即可 //判断身份证号码 function idCardFn(idCard){ }(||)?\d{}([-]|[])([-]|[]\d ...

  7. re.match与re.search的区别

    re.match与re.search的区别 re.match只匹配字符串的开始,如果字符串开始不符合正则表达式,则匹配失败,函数返回None:而re.search匹配整个字符串,直到找到一个匹配. 实 ...

  8. bzoj1059题解

    [解题思路] 因为只要验证可行性,所以考虑行和考虑列是等价的,故我们只考虑行的交换操作. 这样,拆一波点,把每一行拆成两个点,左边为原交换行,右边为目标交换行,原问题等价于能否对这个二分图进行完全匹配 ...

  9. NX二次开发-UFUN获取工程图详细信息UF_DRAW_ask_drawing_info

    NX9+VS2012 #include <uf.h> #include <uf_draw.h> #include <uf_part.h> UF_initialize ...

  10. NX二次开发-算法篇-冒泡排序(例子:遍历所有点并排序)

    NX9+VS2012 #include <uf.h> #include <uf_ui.h> #include <uf_curve.h> #include <u ...