并不简单的翻页时钟（三）：学到的知识

最新推荐文章于 2023-01-05 09:27:04 发布

云梦影

最新推荐文章于 2023-01-05 09:27:04 发布

阅读量1k

点赞数 2

分类专栏：从实践学知识文章标签： html css javascript flex

本文链接：https://blog.csdn.net/yunmengying/article/details/105755211

版权

本文深入探讨了HTML5的data-set属性，介绍了如何使用JavaScript操作它。在CSS方面，重点讲解了flex布局的语法和应用场景，包括:before和:after伪元素的用法，以及line-height、transform旋转和animation的相关知识。在JavaScript部分，讨论了function作为构造函数的使用，Date()方法获取时间，以及如何利用classList管理元素的类名以实现动态效果。

摘要由CSDN通过智能技术生成

transform：rotate（ndeg）

rotateX（ndeg）

rotateY（ndeg）

transform-origin:x y z

Date()方法获取日期、月份、年份、时间

添加/删除类名 classList.add() & classList.remove()

语法：

HTML

data-set

data-set是HTML5的一个新特性，其作为元素的attribute用于存放获取数据

语法：

set ：

 <div id="my-div" data-yourname="value">

get ：

CSS : （常用于给伪元素:before :after 的 content 赋值）

 #my-div:after{
    attr(data-yourname)   
}

JavaScript :

var value=document.getElementById("my-div").dataset.yourname

CSS

flex布局

flex的出现一定程度上解决了自适应布局和垂直居中的难题。

语法：

定义在父元素上的属性（用于规定子元素的排列方式）

#flex-parent{
    /*使用flex布局*/
    display:flex/*行内元素使用inline-flex*/;
 
    /*设置主轴方向（子元素排列方向）*/
    flex-direction:row/*水平方向从左到右（默认）*/
                   row-reverse /*水平方向从右到左*/
                   column /*垂直方向由上到下*/
                   column-reverse /*垂直方向由下到上*/;
    
    /*换行行为*/
    flex-wrap:nowrap/*不换行*/ wrap /*换行*/ wrap-reverse /*下一行出现在上边*/;

    /*简写*/
    flex-flow:<flex-direction><flex-wrap>;

    /*主轴的对齐方式*/
    justify-content:flex-start /*左对齐（默认）*/
                    flex-end /*右对齐*/
                    center /*居中*/
                    spac