HTML 全局属性_02

New : HTML5 新属性。

属性描述
accesskey设置访问元素的键盘快捷键。
class规定元素的类名(classname)
contenteditableNew规定是否可编辑元素的内容。
contextmenuNew指定一个元素的上下文菜单。当用户右击该元素,出现上下文菜单
data-*New用于存储页面的自定义数据
dir设置元素中内容的文本方向。
draggableNew指定某个元素是否可以拖动
dropzoneNew指定是否将数据复制,移动,或链接,或删除
hiddenNewhidden 属性规定对元素进行隐藏。
id规定元素的唯一 id
lang设置元素中内容的语言代码。
spellcheckNew检测元素是否拼写错误
style规定元素的行内样式(inline style)
tabindex设置元素的 Tab 键控制次序。
title规定元素的额外信息(可在工具提示中显示)
translateNew指定是否一个元素的值在页面载入时是否需要翻译

转载于:https://www.cnblogs.com/csj007523/p/4533949.html

以下是一个符合中华传统文化的html背景设计的示例代码,使用了CSS3的动画效果和字体库: ```html<!DOCTYPE html> <html> <head> <title>符合中华传统化的html背景设计</title> <style> /* 全局样式 */ body { margin: 0; padding: 0; font-family: 'STKaiti', 'Kaiti SC', 'SimKai', '楷体'; } /* 容器样式 */ .container { position: relative; width: 100%; height: 100vh; overflow: hidden; } /* 背景图样式 */ .bg-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url('https://cdn.pixabay.com/photo/2016/02/07/16/49/chinese-painting-1187648_960_720.jpg'); background-size: cover; filter: grayscale(100%) blur(3px); } /* 动画元素样式 */ .animate { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 5rem; color: #fff; opacity: 0; animation: move 10s ease-in-out infinite alternate; } /* 动画效果 */ @keyframes move { 0% { transform: translate(-50%, -50%) rotate(0deg); opacity: 0; } 50% { transform: translate(-50%, -50%) rotate(180deg); opacity: 1; } 100% { transform: translate(-50%, -50%) rotate(360deg); opacity: 0; } } </style> </head> <body> <div class="container"> <div class="bg-image"></div> <div class="animate">传统文化</div> </div> </body> </html> ``` 解释: 1. 在head标签中设置全局样式和容器样式,容器样式需要设置绝对定位和相对定位; 2. 在head标签中引入中文字体库; 3. 在body标签中添加一个容器div和一个背景图div; 4. 在容器div中添加一个动画元素div,使用CSS3的动画效果使其旋转,并设置透明度; 5. 使用CSS3的filter属性将背景图变成灰色模糊效果。 注:本示例代码仅作为参考,具体实现方式可以根据实际需求进行调整。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值