html5的拖拽元素与css3字体文本属性

最新推荐文章于 2024-09-29 16:00:34 发布

克里维斯的明天.

最新推荐文章于 2024-09-29 16:00:34 发布

阅读量253

点赞数 8

文章标签：笔记前端 html

本文链接：https://blog.csdn.net/2301_81325634/article/details/142471026

版权

1.拖拽元素 draggable

(1)可以拖拽一个logo开启新页面
(2)draggable="true" 举例：

    <style>
        .box{
            width:200px;
            height:200px;
            background-color:pink;
        }
    </style>
    <body>
        <!-- 给box添加拖拽属性 -->
         <div class="box" draggable="true"></div>
    </body>

(3)拖拽元素的事件监听
① ondragstart 当拖拽开始时调用
② ondragleave 当鼠标离开拖拽元素时调用
③ ondragend 当拖拽结束时调用
④ ondrag 整个拖拽过程中都会调用
代码演示：

      <style>
        .box{
            width:200px;
            height:200px;
            background-color:pink;
        }
    </style>
    <body>
        <!-- 给box添加拖拽属性 -->
         <div class="box" draggable="true"></div>

    <script>
        let box = document.querySelector('.box');
        //绑定拖拽事件

        //拖拽开始
        box.ondragstart = function(){\
            console.log('拖拽开始');
        }

        //拖拽离开：鼠标拖拽时离开被拖拽的元素时触发
        box.ondragleave = function(){
            console.log('拖拽离开');
        }

            //  拖拽结束
        box.ondragend = function () {
            console.log('拖拽结束...');
            console.log("---------------");
        }

        box.ondrag = function () {
            console.log('拖拽');
        }
    </script>

    </body>

2.历史

界面上的所有JS操作不会被浏览器记住，就无法回到之前的状态。

在HTML5中可以通过 window.history 操作访问历史状态，让一个页面可以有多个历史状态

window.history对象可以让我们管理历史记录，可用于单页面应用，Single Page Application，可以无刷新改变网页内容。

window.history.forward(); // 前进
window.history.back(); // 后退
window.history.go(); // 刷新
window.history.go(n); //n=1 表示前进；n=-1 后退；n=0s 刷新。如果移动的位置超出了访问历史的边界，会静默失败，但不会报错。
通过JS可以加入一个访问状态
history.pushState; //放入历史中的状态数据, 设置title(现在浏览器不支持改变历史状态)

3. css:字体属性和文本属性

绝对单位

in  cm  mm  pt  pc

相对单位

px  mm  %

font 字体属性

    p{
    /* 字体大小 */
    font-size：50px;
    /* 行高 */
    line-height：30px;
    /* 字体类型：如果没有幼圆就显示黑体，没有黑体就默认 */
    font-family：幼圆,黑体;
    /* italic表示斜体，normal表示不倾斜 */
    font-style：italic;
    /* 粗体 */
    font-weight:bold;
    /* 小写变大写 */
    font-variant：small-caps;
    }