CSS类名支持中文命名的示例


Posted in HTML / CSS onApril 04, 2014

HTML 和 CSS

在HTML里使用CSS类名的方式大家应该都知道,自然是这样:

复制代码
代码如下:

<-- 把这个放在html的头信息里 -->
<meta charset="UTF-8" /></p> <p><-- 错误信息 -->
<div class="ಠ_ಠ lazy ">你不允许查看这个页面。</div></p> <p><-- 成功信息 -->
<div class="❤ lazy ">你的变更信息已经成功的保持!</div></p> <p><-- 感谢信息 -->
<div class="感谢 lazy ">感谢你关注WebHek.com!</div>

…下面是声明CSS样式规则:
复制代码
代码如下:

.ಠ_ಠ {
border: 1px solid #f00;
background: pink;
}</p> <p>.❤ {
background: lightgreen;
border: 1px solid green;
}</p> <p>.感谢 {
background: yellow;
border: 1px solid green;
}

效果演示:

CSS类名支持中文命名的示例

大家也可以把以上代码放入HTML文件时,查看效果~

用中文名做类名是不是很新鲜?当然,我并不推荐这样做,但如果你喜欢,那又何妨!

HTML / CSS 相关文章推荐
通过css3动画和opacity透明度实现呼吸灯效果
Aug 09 HTML / CSS
css背景图片的背景裁切、背景透明度、背景变换等效果运用
Dec 24 HTML / CSS
CSS3正方体旋转示例代码
Aug 08 HTML / CSS
纯CSS3实现滚动的齿轮动画效果
Jun 05 HTML / CSS
纯HTML5+CSS3制作图片旋转
Jan 12 HTML / CSS
CSS3 二级导航菜单的制作的示例
Apr 02 HTML / CSS
免费获得微软MCSD证书赶快行动吧!
Nov 13 HTML / CSS
HTML5之SVG 2D入门3—文本与图像及渲染文本介绍
Jan 30 HTML / CSS
html5的websockets全双工通信详解学习示例
Feb 26 HTML / CSS
使用phonegap播放音频的实现方法
Mar 31 HTML / CSS
canvas实现扭蛋机动画效果的示例代码
Oct 17 HTML / CSS
html中两种获取标签内的值的方法
Jun 10 HTML / CSS
多重CSS背景动画实现方法示例
Apr 04 #HTML / CSS
CSS图片翻转动画技术详解(IE也实现了)
Apr 03 #HTML / CSS
使用CSS媒体查询(Media Queries)和JavaScript判断浏览器设备类型的方法
Apr 03 #HTML / CSS
css3实现input输入框颜色渐变发光效果代码
Apr 02 #HTML / CSS
CSS去掉A标签(链接)虚线框的方法
Apr 01 #HTML / CSS
使用css3背景渐变中的透明度来设置不同颜色的背景渐变
Mar 31 #HTML / CSS
你应该知道的30个css选择器
Mar 19 #HTML / CSS
You might like
一步一步学习PHP(6) 面向对象
2010/02/16 PHP
PHP编程风格规范分享
2014/01/15 PHP
解析WordPress中函数钩子hook的作用及基本用法
2015/12/22 PHP
全面解析PHP操作Memcache基本函数
2016/07/14 PHP
PHP读取文件,解决中文乱码UTF-8的方法分析
2020/01/22 PHP
解决AJAX中跨域访问出现'没有权限'的错误
2008/08/20 Javascript
jQuery toggle()设置CSS样式
2009/11/05 Javascript
jQuery 通过事件委派一次绑定多种事件,以减少事件冗余
2010/06/30 Javascript
js运动框架_包括图片的淡入淡出效果
2013/05/11 Javascript
Adapter适配器模式在JavaScript设计模式编程中的运用分析
2016/05/18 Javascript
BootStrap的Datepicker控件使用心得分享
2016/05/25 Javascript
Angular.JS判断复选框checkbox是否选中并实时显示
2016/11/30 Javascript
Javascript for in的缺陷总结
2017/02/03 Javascript
Webpack打包慢问题的完美解决方法
2017/03/16 Javascript
webpack中CommonsChunkPlugin详细教程(小结)
2017/11/09 Javascript
Vue slot用法(小结)
2018/10/22 Javascript
教你使用vue-cli快速构建的小说阅读器
2019/05/13 Javascript
微信小程序 数据缓存实现方法详解
2019/08/26 Javascript
15 分钟掌握vue-next响应式原理
2019/10/13 Javascript
Python学习笔记之For循环用法详解
2019/08/14 Python
python中hasattr()、getattr()、setattr()函数的使用
2019/08/16 Python
用Python批量把文件复制到另一个文件夹的实现方法
2019/08/16 Python
win10下python2和python3共存问题解决方法
2019/12/23 Python
flask 实现上传图片并缩放作为头像的例子
2020/01/09 Python
thinkphp5 路由分发原理
2021/03/18 PHP
如何在Canvas上的图形/图像绑定事件监听的实现
2020/09/16 HTML / CSS
百丽国际旗下购物网站:优购
2017/02/28 全球购物
美国知名保健品网站:LuckyVitamin(支持中文)
2017/08/09 全球购物
FC-Moto瑞典:欧洲最大的摩托车服装和头盔商店之一
2018/11/27 全球购物
日本高岛屋百货购物网站:TAKASHIMAYA
2019/03/24 全球购物
Under Armour安德玛意大利官网:美国高端运动科技品牌
2020/01/16 全球购物
学期自我鉴定范文
2013/10/01 职场文书
冰淇淋开店创业计划书
2014/02/01 职场文书
医生学习党的群众路线教育实践活动心得体会
2014/11/03 职场文书
利用Pycharm连接服务器的全过程记录
2021/07/01 Python
详解Redis的三种常用的缓存读写策略步骤
2022/05/06 Redis