在HTML5中如何使用CSS建立不可选的文字


Posted in HTML / CSS onOctober 17, 2014

下面的例子展示了在HTML5中你如何使用CSS建立不可选的文字。 

复制代码
代码如下:

<!DOCTYPE HTML>
<html>
<head>
<title>Creating non-selectable text using CSS</title>
<style type="text/css">
div {
margin-bottom: 20px;
padding: 10px;
background: rgba(10%, 10%, 10%, 0.3);
-moz-border-radius: 15px;
border-radius: 15px;
}
div#d2 {
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;
font-style: italic;
}
</style>
</head>
<body>
<div id="d1">[selectable] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ornare, urna placerat condimentum vehicula, magna est suscipit leo, auctor laoreet erat massa eget tellus. Etiam pharetra, orci eu gravida tempus, enim est venenatis diam, id facilisis justo ante ut arcu. Sed nibh eros, porta ac porta ac, fermentum ut ante. Etiam pulvinar consectetur urna sit amet fermentum. Aliquam quis pellentesque tortor. In ut lobortis enim. Pellentesque luctus orci nec massa lacinia consectetur. Etiam cursus, leo et pellentesque tempus, diam elit interdum ipsum, sed pulvinar nibh justo vel urna. Phasellus ligula elit, sodales eget aliquet et, ullamcorper ut lorem. Praesent eget quam id ligula iaculis tincidunt eu et nulla. Ut dui dui, dictum sed lobortis eu, porta nec urna. In adipiscing, massa sed scelerisque elementum, tortor massa cursus velit, ut tincidunt mi lacus id magna. Morbi vestibulum venenatis massa sit amet convallis. Aliquam erat volutpat.</div>
<div id="d2">[non selectable] Nam a lacus ante, a tincidunt dolor. Sed felis dolor, ullamcorper vitae luctus at, iaculis eu dui. Mauris ullamcorper nisl id tortor elementum mattis. Aenean ut ligula ac ipsum pharetra dapibus. Praesent convallis tincidunt ligula sit amet adipiscing. Morbi massa mauris, mollis ornare mollis ut, imperdiet nec nibh. Praesent sollicitudin tellus at nisl sodales lobortis euismod purus laoreet. Vivamus nec urna vel nibh volutpat rhoncus quis eget justo. Donec mi lacus, dapibus nec tristique eu, fringilla id mi. Maecenas vitae odio a tortor cursus fermentum eu eget eros. Vestibulum sit amet metus purus. Integer vestibulum sem nec justo facilisis tempor non sit amet justo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eget mattis metus.</div>
<div id="d3">[selectable] Proin lacinia sem fringilla est lacinia facilisis. Praesent turpis massa, bibendum eu ultrices ut, viverra vitae quam. Morbi a lorem mi, eget congue arcu. Sed dapibus molestie neque, eget tempus nibh viverra at. Praesent sit amet vestibulum ipsum. Donec in lectus ac urna accumsan feugiat. Sed at nunc felis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis nec ipsum justo. Nullam laoreet enim vel quam tincidunt imperdiet. Maecenas sollicitudin nulla a metus ornare tempus. Nullam rhoncus fermentum lorem id pellentesque.</div>
</body>
</html>
HTML / CSS 相关文章推荐
CSS3+font字体文件实现圆形半透明菜单具体步骤(图解)
Jun 03 HTML / CSS
使用CSS3配合IE滤镜实现渐变和投影的效果
Sep 06 HTML / CSS
详解CSS3的opacity属性设置透明效果的用法
May 09 HTML / CSS
HTML+CSS3模拟心的跳动实例代码
Sep 05 HTML / CSS
利用CSS3动画实现圆圈由小变大向外扩散的效果实例
Sep 10 HTML / CSS
一张图片能隐含千言万语之隐藏你的程序代码
Dec 13 HTML / CSS
HTML5新增元素如何兼容旧浏览器有哪些方法
May 09 HTML / CSS
html5 canvas移动浏览器上实现图片压缩上传
Mar 11 HTML / CSS
Canvas实现保存图片到本地的示例代码
Jun 28 HTML / CSS
使用layui实现左侧菜单栏及动态操作tab项的方法
Nov 10 HTML / CSS
CSS布局之浮动(float)和定位(position)属性的区别
Sep 25 HTML / CSS
前端使用svg图片改色实现示例
Jul 23 HTML / CSS
布局和排版教程 纯css3实现图片三角形排列
Oct 17 #HTML / CSS
IE浏览器单独写CSS样式的几种方法
Oct 14 #HTML / CSS
CSS3 重置iphone浏览器按钮input,select等表单元素的默认样式
Oct 11 #HTML / CSS
css3 图片圆形显示 如何CSS将正方形图片显示为圆形图片布局
Oct 10 #HTML / CSS
css3弹性盒模型(Flexbox)详细介绍
Oct 08 #HTML / CSS
一款纯css3实现的动画加载导航
Oct 08 #HTML / CSS
css3 transform属性详解
Sep 30 #HTML / CSS
You might like
关于php操作mysql执行数据库查询的一些常用操作汇总
2013/06/24 PHP
php多功能图片处理类分享(php图片缩放类)
2014/03/14 PHP
PHP中遇到的时区问题解决方法
2015/07/23 PHP
PHP读书笔记_运算符详解
2016/07/01 PHP
PHP CURL采集百度搜寻结果图片不显示问题的解决方法
2017/02/03 PHP
PHP实现的折半查询算法示例
2017/10/09 PHP
解决laravel上传图片之后,目录有图片,但是访问不到(404)的问题
2019/10/14 PHP
php+js实现的拖动滑块验证码验证表单操作示例【附源码下载】
2020/05/27 PHP
window.open的功能全解析
2006/10/10 Javascript
js 提交和设置表单的值
2008/12/19 Javascript
改进版通过Json对象实现深复制的方法
2012/10/24 Javascript
jQuery和AngularJS的区别浅析
2015/01/29 Javascript
jQuery制作简洁的图片轮播效果
2015/04/03 Javascript
jquery实现拖动效果
2016/08/10 Javascript
解析ajaxFileUpload 异步上传文件简单使用
2016/12/30 Javascript
jQuery 插件实现随机自由弹跳气泡样式
2017/01/12 Javascript
jQuery ajax动态生成table功能示例
2017/06/14 jQuery
JavaScript之排序函数_动力节点Java学院整理
2017/06/30 Javascript
vue组件发布到npm简单步骤
2017/11/30 Javascript
vue实现滑动超出指定距离回顶部功能
2019/07/31 Javascript
JavaScript实现复选框全选和取消全选
2020/11/20 Javascript
JavaScript中arguments的使用方法详解
2020/12/20 Javascript
Python中用Ctrl+C终止多线程程序的问题解决
2013/03/30 Python
Python下的subprocess模块的入门指引
2015/04/16 Python
Python实现网络端口转发和重定向的方法
2016/09/19 Python
python计算二维矩形IOU实例
2020/01/18 Python
pyqt5 QlistView列表显示的实现示例
2020/03/24 Python
html5组织文档结构_动力节点Java学院整理
2017/07/11 HTML / CSS
html5教你做炫酷的碎片式图片切换 (canvas)
2017/07/28 HTML / CSS
平面设计的岗位职责
2013/11/08 职场文书
工伤赔偿协议书范本
2014/04/15 职场文书
献爱心标语
2014/06/21 职场文书
检讨书1000字
2014/10/11 职场文书
实验室安全管理制度
2015/08/05 职场文书
Win11查看设备管理器
2022/04/19 数码科技
Windows Server 2012配置DNS服务器的方法
2022/04/29 Servers