6.4HTML5与CSS3笔记

最新推荐文章于 2024-02-23 12:02:20 发布

Shelysure

最新推荐文章于 2024-02-23 12:02:20 发布

阅读量176

点赞数

文章标签： css

本文链接：https://blog.csdn.net/Shelysure/article/details/106556140

版权

1.video属性

video 标签定义视频，比如电影片段或其他视频流。
在这里插入图片描述

在这里插入图片描述

2.datatransfer

在这里插入图片描述

2.effectAllowed属性
dataTransfer.effectAllowed ：设置或返回被拖动元素允许发生的拖动行为。
该属性值可设为none、copy、copyLink、copyMove、link、linkMove、move、all、uninitialized。

none : 此项表示不允许放下(禁止任何操作)
copy : 允许复制
copyLink : 允许 copy 或者 link 操作
copyMove : 允许 copy 或者 move 操作
link : 允许在新地方建立与源的链接
linkMove : 允许 link 或者 move 操作
move : 允许移动到新的位置
all : 允许所有操作
uninitialized: 缺省值（默认值）, 相当于 all

样例代码

    <script>
        function allowDrop(ev) {
            ev.preventDefault();
            //不执行默认处理（拒绝被拖放）

            ev.dataTransfer.dropEffect='copy';
        }

        function drag(ev) {
            //使用setDate（数据类型，携带的数据）
            //方法将要拖放的数据存入datatransfer对象
            //ev.clearDate();
            ev.dataTransfer.setData("Text",ev.target.id);
            ev.effectAllowed='all';
        }
        function drop(ev) {
            ev.preventDefault();
            //不执行默认处理（拒绝被拖放）
            //使用getDate()获取数据然后赋值给data
            var data=ev.dataTransfer.getData("Text");
            //使用appendchild方法把拖动的节点放到元素节点当中成为他的子节点
            ev.target.appendChild(document.getElementById(data));
        }
    </script>

3. CSS3选择器

在这里插入图片描述

小案例1：尾字符的选择

 <style>
        a[href$=html]:after{
            content: "wangye";
        }
        a[href$=jjj]:after{
            content: '图片文件';
            color: green;
        }
    </style>

<body>
<a href="anli.html">网页首页</a>
<a href="jjjjj">网页图片</a>
</body>

小案例2：target选择器

URL 带有后面跟有锚名称 #，指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element)。

:target 选择器可用于选取当前活动的目标元素。

<!DOCTYPE html>
<html>
<head>
<style>
:target
{
border: 2px solid #D4D4D4;
background-color: #e5eecc;
}
</style>
</head>
<body>

<h1>这是标题</h1>

<p><a href="#news1">跳转至内容 1</a></p>
<p><a href="#news2">跳转至内容 2</a></p>

<p>请点击上面的链接，:target 选择器会突出显示当前活动的 HTML 锚。</p>

<p id="news1"><b>内容 1...</b></p>
<p id="news2"><b>内容 2...</b></p>

<p><b>注释：</b> Internet Explorer 8 以及更早的版本不支持 :target 选择器。</p>

</body>
</html>

4.ui元素状态下伪类选择器

所谓UI选择器：就是指定的样式只有当元素处于某种状态下时，才起作用，在默认状态下不起作用！

浏览器兼容性：

E:hover 支持firefox、safari、Opera、ie8、chrome ------------
E:active 支持firefox、safari、Opera、chrome 不支持ie8
E:focus 支持firefox、safari、Opera、ie8、chrome -------------
E:enabled 支持firefox、safari、Opera、chrome 不支持ie8
E:disabled 支持firefox、safari、Opera、chrome 不支持ie8
E:read-only 支持firefox、Opera 不支持ie8、safari、chrome
E:read-write 支持firefox、Opera 不支持ie8、safari、chrome
E:checked 支持firefox、safari、Opera、chrome 不支持ie8
E::selection 支持firefox、safari、Opera、chrome 不支持ie8
E:default 只支持firefox ------------
E:indeterminate 只支持chrome ------------
E:invalid 支持firefox、safari、Opera、chrome 不支持ie8
E:valid 支持firefox、safari、Opera、chrome 不支持ie8
E:required 支持firefox、safari、Opera、chrome 不支持ie8
E:optional 支持firefox、safari、Opera、chrome 不支持ie8
E:in-range 支持firefox、safari、Opera、chrome 不支持ie8
E:out-of-rang 支持firefox、safari、Opera、chrome 不支持ie8
下面就其使用做详细的说明;

1、选择器E:hover、E:active和E:focus
1)、E:hover选择器被用来指定当鼠标指针移动到元素上时元素所使用的样式
使用方法：
<元素>:hover{
CSS样式
}
我们可以在“<元素>”中添加元素的type属性。
例：
input[type=“text”]:hover{
CSS样式
}
2)、E:active选择器被用来指定元素被激活时使用的样式
3)、E:focus选择器被用来指定元素获得光标聚焦点使用的样式，主要是在文本框控件获得聚焦点并进行文字输入时使用。

Shelysure

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
6.4HTML5与CSS3笔记

1.video属性video 标签定义视频，比如电影片段或其他视频流。2.datatransfer2.effectAllowed属性dataTransfer.effectAllowed ：设置或返回被拖动元素允许发生的拖动行为。该属性值可设为none、copy、copyLink、copyMove、link、linkMove、move、all、uninitialized。none : 此项表示不允许放下(禁止任何操作)copy : 允许复制copyLink : 允许 copy
复制链接

扫一扫