在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伪类选择器详细介绍
Dec 24 HTML / CSS
CSS3的一个简单导航栏实现
Aug 03 HTML / CSS
CSS3 box-shadow属性实例详解
Jun 19 HTML / CSS
HTML5离线缓存Manifest是什么
Mar 09 HTML / CSS
使用HTML5原生对话框元素并轻松创建模态框组件
Mar 06 HTML / CSS
详解通过变换矩阵实现canvas的缩放功能
Jan 14 HTML / CSS
html5+css3实现一款注册表单实例
Apr 17 HTML / CSS
HTML5使用drawImage()方法绘制图像
Jun 23 HTML / CSS
关于HTML5语义标签的实践(blog页面)
Jul 12 HTML / CSS
AmazeUI的JS表单验证框架实战示例分享
Aug 21 HTML / CSS
教你做个可爱的css滑动导航条
Jun 15 HTML / CSS
HTML实现仿Windows桌面主题特效的实现
Jun 28 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的header和asp中的redirect比较
2006/10/09 PHP
php统计时间和内存使用情况示例分享
2014/03/13 PHP
ThinkPHP3.1新特性之内容解析输出详解
2014/06/19 PHP
php中switch与ifelse的效率区别及适用情况分析
2015/02/12 PHP
php操作路径的经典方法(必看篇)
2016/10/04 PHP
浅析JQuery UI Dialog的样式设置问题
2013/12/18 Javascript
select多选 multiple的使用示例
2014/06/16 Javascript
jQuery实现视频作为全屏幕背景
2014/12/18 Javascript
javascript实现验证身份证号的有效性并提示
2015/04/30 Javascript
Vue 固定头 固定列 点击表头可排序的表格组件
2016/11/25 Javascript
微信小程序 tabs选项卡效果的实现
2017/01/05 Javascript
JS三目运算(三元运算)方法详解
2017/03/01 Javascript
简单谈谈axios中的get,post方法
2017/06/25 Javascript
JS实现websocket长轮询实时消息提示的效果
2017/10/10 Javascript
微信小程序上传图片到服务器实例代码
2017/11/07 Javascript
微信小程序实现复选框效果
2018/12/28 Javascript
jquery检测上传文件大小示例
2020/04/26 jQuery
vant-ui组件调用Dialog弹窗异步关闭操作
2020/11/04 Javascript
python爬虫入门教程之糗百图片爬虫代码分享
2014/09/02 Python
C#返回当前系统所有可用驱动器符号的方法
2015/04/18 Python
利用 python 对目录下的文件进行过滤删除
2017/12/27 Python
python tkinter界面居中显示的方法
2018/10/11 Python
Python错误的处理方法
2020/06/23 Python
美国猫狗药物和用品网站:PetCareRx
2017/01/05 全球购物
Coach澳大利亚官方网站:美国著名时尚奢侈品牌
2017/05/24 全球购物
城野医生官方海外旗舰店:风靡亚洲毛孔收敛水
2018/04/26 全球购物
Myprotein瑞士官方网站:运动营养和健身网上商店
2019/09/25 全球购物
一名毕业生的自我鉴定
2013/12/04 职场文书
销售副总经理岗位职责
2013/12/11 职场文书
《独坐敬亭山》教学反思
2014/04/08 职场文书
副科级后备干部考察材料
2014/05/15 职场文书
安全生产年活动总结
2014/08/29 职场文书
2014年人力资源部工作总结
2014/11/19 职场文书
杜甫草堂导游词
2015/02/03 职场文书
2019通用版导游词范本!
2019/08/07 职场文书
简单聊一聊SQL注入及防止SQL注入
2022/03/23 MySQL