HTML5 CSS3

最新推荐文章于 2022-10-29 09:40:56 发布

刘刘哒

最新推荐文章于 2022-10-29 09:40:56 发布

阅读量142

点赞数

分类专栏：基础学习+常复习文章标签： html html5 css3 css

本文链接：https://blog.csdn.net/weixin_55371434/article/details/115023502

版权

基础学习+常复习专栏收录该内容

9 篇文章 0 订阅

订阅专栏

HTML新增了哪些?

语义化标签

导航栏div 头部标签div 受够了吗? 看看下面这些新标签是不是一目了然
在这里插入图片描述

video

在这里插入图片描述

audio

在这里插入图片描述

input

在这里插入图片描述

表单

在这里插入图片描述

CSS3新特性

属性选择器：元素[属性 = 值]

在这里插入图片描述
举例:选中input的text属性

结构伪类选择器元素 :nth-child

在这里插入图片描述

结构伪类例题:nth-child实现隔行变色

add奇数0,1，3,5 even偶数2,4，6,7
在这里插入图片描述
nth-child(n)利用算法实现偶数奇数隔行变色
由于n是从0,1,2,3,4,5…递增的方式计算
此时(2n) 就可以求得 20, 21 ,22 ,23 ,2*4…也就是说0,2,4,6,8偶数
奇数也一样(2n-1)即可

在这里插入图片描述

结构伪类选择器小结

伪元素选择器 ::before ::after

在这里插入图片描述

清楚浮动总结

由于一个大的div没有设置高度里面的内容浮动
在这里插入图片描述

这是一个div浮动 span行内元素不浮动的代码

浮动的元素脱离了普通流，这样使得包含它的父元素并不会因为这个浮动元素的存在而自动撑高，这样就会造成高度塌陷。

css3弹性盒模型(解决设置宽高后内外边距撑大盒子的问题)

在这里插入图片描述

模糊

在这里插入图片描述

计算calc

.father{
height:300px;
wdith:300px;
}
.son{
width:calc(100%-30px) 这样子盒子就一直会比父盒子小30px的像素了
height:200px

过渡动画 transition

谁做动画给谁加过度
在这里插入图片描述

匀速变大盒子

案例小米官网LOGO

<style>
        * {
            margin: 0;
            padding: 0;

        }

        /* 给LOGO的盒子 */
        .logo {
            position: relative;
            height: 49px;
            width: 49px;
            margin-top: 25px;
            margin-left: 100px;
            /* background-color: pink; */
            overflow: hidden;
        }

        /* 给logo左侧设置 */
        .logo:before,
        .logo:after {
            position: absolute;
            content: '';
            width: 49px;
            height: 49px;
            display: block;
            background: red;
        }

        .logo:before {
            left: 0px;
            background: url(mi.jpg) no-repeat red;
            transition: all 0.3s;

        }

        .logo:after {
            left: 49px;
            background: url(mi2.jpg) no-repeat red;
            transition: all 0.3s;
        }

        .logo:hover:before {
            left: -49px;
        }

        .logo:hover:after {
            left: 0px;
        }
    </style>
</body>
<div class="logo"> </div>
</div>

transfrom转换

移动translate

在这里插入图片描述
p块元素盒子水平垂直居中

旋转rotate

在这里插入图片描述
旋转中心点
transform-origin

缩放

鼠标返到盒子上 x y都放大1倍
在这里插入图片描述

CSS3动画

在这里插入图片描述

CSS3D

在这里插入图片描述

rotate3dY轴方向

在这里插入图片描述

案例立体盒子

    ul li {
        margin: 100px;
        list-style: none;
        height: 30px;
        width: 100px;
        给父盒子加上透视
        perspective: 500px;
        text-align: center;
        line-height: 30px;

    }

    .box {
        position: relative;
        height: 100%;
        width: 100%;
        transition: all .3s;
        /* 保留3D效果 */
        transform-style: preserve-3d;
    }

    .box:hover {
        transform: rotateX(90deg);
    }

    .front,
    .bottom {
        position: absolute;
        height: 100%;
        width: 100%;
        left: 0;
        top: 0;
    }

    .front {
        background: purple;
        /* z-index: 1; */
        /* 往前走粉色盒子高度的一一半 */
        transform: translateZ(15px);
    }

    .bottom {
        background: pink;
        先线下移动到底部 在旋转90度成为平面
        transform: translateY(15px) rotateX(-90deg);
    }
</style>

<body>
    <ul>
        <li>
            <div class="box">
                <div class="front">上面</div>
                <div class="bottom">下面</div>
            </div>
        </li>
    </ul>
</body>

私有前缀兼容老版本写法

在这里插入图片描述

刘刘哒

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
HTML5 CSS3

HTML新增了哪些?语义化标签导航栏div 头部标签div 受够了吗? 看看下面这些新标签是不是一目了然videoaudioinput表单CSS3新特性属性选择器结构伪类选择器nth-child实现隔行变色 addnth-child(n)利用算法实现偶数奇数隔行变色由于n是从0,1,2,3,4,5…递增的方式计算此时(2n) 就可以求得 20, 21 ,22 ,23 ,2*4…也就是说0,2,4,6,8偶数奇数也一样(2n-1)即可结构伪类选择器
复制链接

扫一扫