Day05-HTML5 CSS3

已于 2023-12-02 15:21:00 修改
阅读量37 收藏
点赞数
文章标签： html5 css3 前端
于 2023-12-02 13:50:46 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Spirs/article/details/134749585
版权

一.多重背景

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 800px;
            height: 800px;
            border: 1px solid red;
            /* 多重背景 */
            background-image: url(https://ns-strategy.cdn.bcebos.com/ns-strategy/upload/fc_big_pic/part-00626-2070.jpg),url(https://img2.baidu.com/it/u=3780486306,4144668544&fm=253&fmt=auto&app=138&f=JPEG?w=822&h=500);
            background-repeat: no-repeat;
            background-size: 200px 200px;
            background-position: 0 0, 50% 50%, right bottom;
        }
    </style>
</head>

<body>

    <div class="box"></div>

</body>

</html>

二.线性渐变

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .content1 {
            /* 线性渐变 */
            width: 200px;
            height: 200px;
            /* border-radius: 50%; */
            /* 方向 ，颜色值1，颜色值2，。。。。 */
            /* background-image: linear-gradient(direction, color-stop1, color-stop2, ); */
            /* background-image: linear-gradient(to right, pink, skyblue, springgreen); */
            /* background-image: linear-gradient(to left, pink, skyblue, springgreen); */
            /* background-image: linear-gradient(to top, pink, skyblue, springgreen); */
            /* background-image: linear-gradient(to bottom, pink, skyblue, springgreen); */
            /* background-image: linear-gradient(to right bottom, pink, skyblue, springgreen); */
            background-image: linear-gradient(to left bottom, pink, skyblue, springgreen);
            /* background-image: linear-gradient(to right, white, black); */
            /* background-image: linear-gradient(to right, #FF6347, #FFD700); */
            /* background-image: linear-gradient(to right, red,green); */
            box-shadow: 0 0 80px 3px #FF8C00;
        }
    </style>
</head>

<body>

    <div class="content1"></div>

</body>

</html>

三.径向渐变

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .content {
            /* 径向渐变 */
            width: 200px;
            height: 200px;
            /* border-radius: 50%; */
            /* circle圆形 */
            /* background-image: radial-gradient(circle, red, yellow, green); */
            /* background-image: radial-gradient(black,white); */
            /* background-image: radial-gradient(circle, black, white); */
            background-image: radial-gradient(#00FFFF, #00FA9A, #000000);
        }
    </style>
</head>

<body>

    <div class="content"></div>

</body>

</html>

四.transition过渡

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 300px;
            height: 300px;
            background-color: pink;
            /* 过渡:给用户呈现 由一种样式到另一种样式的过程 */
            /* 指定当前box具有过渡效果 */
            /* 过渡的属性名称 */
            /* transition-property: width height; */
            /* 过渡花费的时间 */
            /* transition-duration: 1s; */
            /* 过渡的曲线 */
            /* 匀速 */
            /* transition-timing-function: linear; */
            /* 缓慢 */
            /* transition-timing-function: ease; */
            /* 加速 由慢到快 */
            /* transition-timing-function: ease-in; */
            /* 快慢快 */
            /* transition-timing-function: ease-in-out; */
            /* 过渡何时开始 */
            /* transition-delay: ; */
            /* 过渡的简写形式 */
            transition: all 1s ease;
        }
        
        .box:hover {
            width: 600px;
            height: 600px;
            background-color: purple;
        }
    </style>
</head>

<body>

    <div class="box"></div>

</body>

</html>

五.平移

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .content {
            width: 300px;
            height: 300px;
            background-color: red;
            margin: 100px auto 0px;
            /* 过渡 */
            transition: all 1s;
        }
        
        .content:hover {
            /* transform  变形 */
            /* translate  平移 */
            /* transform: translate(x,y); */
            transform: translate(0px, 100px);
        }
    </style>
</head>

<body>

    <div class="content"></div>
    <h1>1234567890</h1>

</body>

</html>

六.小米商城案例

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            background-color: #f5f5f5;
        }

        .content {
            width: 234px;
            height: 300px;
            text-align: center;
            background-color: #fff;
            margin: 100px auto;

            /* /过渡 */
            transition: all 1s;
        }

        .content:hover {
            transform: translate(0px, -5px);
            box-shadow: 3px 10px 16px 0px #ccc;

        }

        .content img {
            width: 160px;
            height: 160px;
        }
    </style>
</head>

<body>

    <div class="content">
        <img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202308081914_12255c6dc58e78e32afe9665b13fbaaa.png?thumb=1&w=200&h=200&f=webp&q=90"
            alt="">
    </div>

</body>

</html>

七.盒子居中

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .content {
            width: 800px;
            height: 800px;
            border: 1px solid red;
            margin: 100px auto;
            position: relative;
        }

        .content .son {
            width: 200px;
            height: 200px;
            background-color: pink;
            position: absolute;
            top: 50%;
            left: 50%;
            /* margin-left: -100px;
            margin-top: -100px; */
            transform: translate(-50%, -50%);
        }
    </style>
</head>

<body>

    <div class="content">
        <div class="son"></div>
    </div>

</body>

</html>

八.缩放

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 300px;
            height: 180px;
            background-color: red;
            margin: 100px auto 0px;
            /* 过渡 */
            transition: all 1s;
        }

        .box:hover {
            /* 缩放 */
            /* transform: scale(x,y); */
            /* transform: scale(0.5, 0.5); */
            /* transform: scale(0.5, 1); */
            /* transform: scale(2, 2); */
            transform: scale(0.2, 0.2);
        }

        .content {
            width: 1200px;
            height: 134px;
            margin: 100px auto 0px;
        }

        .content div {
            width: 291px;
            height: 134px;
            float: left;
            margin-right: 12px;
            overflow: hidden;
        }

        .content div:last-child {
            margin-right: 0px;
        }

        .content div img {
            width: 100%;
            height: 100%;
            transition: all .4s;
        }

        .content div:hover img {
            transform: scale(1.1, 1.1);
        }
    </style>
</head>

<body>

    <div class="box"></div>

    <div class="content">
        <div>
            <img src="../images/99840406078279.jpg" alt="">
        </div>
        <div>
            <img src="../images/99840406078279.jpg" alt="">
        </div>
        <div>
            <img src="../images/99840406078279.jpg" alt="">
        </div>
        <div>
            <img src="../images/99840406078279.jpg" alt="">
        </div>
    </div>

</body>

</html>

九.旋转

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 300px;
            height: 180px;
            background-color: red;
            margin: 100px auto 0px;
            /* 过渡 */
            transition: all 1s;
        }

        .box:hover {
            /* 旋转 */
            /* transform: rotate(deg); */
            /* transform: rotate(30deg); */
            /* transform: rotate(-30deg); */
            /* transform: rotate(360deg); */
            transform: rotateX(90deg);
        }
    </style>
</head>

<body>

    <div class="box"></div>

</body>

</html>

十.风车案例

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        .content {
            width: 405px;
            height: 400px;
            margin: 100px auto;

            transition: all 30s;
        }

        .rod {
            position: absolute;
            width: 20px;
            height: 465px;
            border-radius: 10px;
            background-image: linear-gradient(to right bottom, #FF7F50, #FFD700);
            left: 50%;
            transform: translate(-63%, 193px);
            z-index: -1;
        }

        .content .top div,
        .content .bottom div {
            float: left;
        }

        .content .top {
            width: 100%;
            height: 200px;
        }

        .content .bottom .right,
        .content .top .left {
            width: 200px;
            height: 200px;
            /* 渐变色 */
            background-image: linear-gradient(to right bottom, skyblue, pink);
            /* border-radius: 左上角  右上角 右下角 左下角; */
            border-radius: 0px 200px 0px 200px;
        }



        .content .bottom .left,
        .content .top .right {
            width: 200px;
            height: 200px;
            /* 渐变色 */
            background-image: linear-gradient(to right top, skyblue, pink);
            /* border-radius: 左上角  右上角 右下角 左下角; */
            border-radius: 200px 0px 200px 0px;
        }

        .content .top .right {
            background-image: linear-gradient(to right bottom, #A0522D, #F0E68C);
        }

        .content .bottom .left {
            background-image: linear-gradient(to right top, aqua, springgreen);
        }

        .content .bottom .right {
            background-image: linear-gradient(to right top, #FF4500, #C71585);
        }

        .content:hover {
            transform: rotate(3600deg);
        }
    </style>
</head>

<body>

    <div class="rod"></div>
    <div class="content">
        <div class="top">
            <div class="left"></div>
            <div class="right"></div>
        </div>
        <div class="bottom">
            <div class="left"></div>
            <div class="right"></div>
        </div>
    </div>

</body>

</html>

十一.转换原点

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 300px;
            height: 200px;
            background-color: red;
            margin: 100px auto;
            transition: all 1s;
            /* 改变变形的原点 */
            /* transform-origin: left top; */
            transform-origin: right top;
            /* transform-origin: right bottom; */
            /* transform-origin: left top; */
        }
        
        .box:hover {
            transform: rotate(360deg);
        }
    </style>
</head>

<body>

    <div class="box"></div>

</body>

</html>

十二.倾斜

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 300px;
            height: 200px;
            background-color:red;
            margin: 100px auto;

            transition: all 1s;
             
        }

        .box:hover{
            /* skew(deg, deg)  */
            /* transform: skew(xdeg,ydeg); */
            /* transform: skew(30deg,0); */
            /* transform: skew(0deg,30deg); */
            transform: skew(30deg,30deg);
        }
    </style>
</head>

<body>

    <div class="box"></div>

</body>

</html>

十三.3d的旋转

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            /* 透视 */
            perspective: 1000px;
        }

        .box {
            width: 400px;
            height: 600px;
            /* background-color: red; */
            margin: 100px auto;
            background-image: url(../images/liu.jpg);
            background-size: cover;
            background-repeat: no-repeat;
            transition: all 3s;

            /* 背部可见性 */
            backface-visibility: hidden;
        }

        .box:hover {
            /* transform: rotateX(180deg); */
            transform: rotateY(180deg);
            /* transform: rotateZ(180deg); */
        }
    </style>
</head>

<body>

    <div class="box"></div>

</body>

</html>

十四.保留子元素的3d位置

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            perspective: 1000px;
        }
        .content{
            width: 400px;
            height: 400px;
            border: 1px solid red;
            margin: 100px auto 0px;

            /* 透视 */
            perspective: 1000px;

            transform: rotateX(-60deg);

            /* 保留子元素的3d位置 */
            transform-style: preserve-3d;
        }
        .content div{
            width: 200px;
            height: 100%;
            float: left;
        }
        .content .left {
            background-color: pink;
            transform: rotateY(40deg) translateX(100px);
        }
        .content .right {
            background-color: skyblue;
            transform: rotateY(-40deg) translateX(-100px);
        }
    </style>
</head>

<body>

    <div class="content">
        <div class="left"></div>
        <div class="right"></div>
    </div>

</body>

</html>

十五.3d魔方案例

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            /* 透视 */
            perspective: 1000px;
        }

        .content {
            width: 300px;
            height: 300px;
            /* border: 1px solid red; */
            margin: 280px auto 0px;
            transform: rotateX(-30deg) rotateY(30deg);

            /* 保留3d效果 */
            transform-style: preserve-3d;
            transition: all 50s;
        }

        .content:hover {
            transform: rotateX(-3000deg) rotateY(3000deg);
        }

        .content .view {
            width: 300px;
            height: 300px;
            position: relative;

            /* 保留3d效果 */
            transform-style: preserve-3d;

        }


        .content .view div {
            width: 300px;
            height: 300px;
            position: absolute;
            text-align: center;
            line-height: 300px;
            color: white;
            font-size: 28px;
            transition: all 1s;
        }

        .content .view div:nth-child(1) {
            background-color: pink;
            transform: translateZ(150px);
        }

        .content .view div:nth-child(2) {
            background-color: skyblue;
            transform: rotateX(90deg) translateZ(150px);
        }

        .content .view div:nth-child(3) {
            background-color: purple;
            transform: rotateY(-90deg) translateZ(150px);
        }

        .content .view div:nth-child(4) {
            background-color: orange;
            transform: rotateY(90deg) translateZ(150px);
        }

        .content .view div:nth-child(5) {
            background-color: aqua;
            transform: rotateY(180deg) translateZ(150px);
        }

        .content .view div:nth-child(6) {
            background-color: springgreen;
            transform: rotateX(-90deg) translateZ(150px);
        }


        .content .view:hover div:nth-child(1) {
            transform: translateZ(200px);
        }

        .content .view:hover div:nth-child(2) {
            transform: rotateX(90deg) translateZ(200px);
        }

        .content .view:hover div:nth-child(3) {
            transform: rotateY(-90deg) translateZ(200px);
        }

        .content .view:hover div:nth-child(4) {
            transform: rotateY(90deg) translateZ(200px);
        }

        .content .view:hover div:nth-child(5) {
            transform: rotateY(180deg) translateZ(200px);
        }

        .content .view:hover div:nth-child(6) {
            transform: rotateX(-90deg) translateZ(200px);
        }
    </style>
</head>

<body>

    <div class="content">
        <div class="view">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
        </div>
    </div>

</body>

</html>

十六.animation动画

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .content {
            width: 800px;
            height: 800px;
            border: 1px solid red;
            margin: 100px auto 0px;
        }

        .content .box {
            width: 100px;
            height: 100px;
            background-color: pink;
            /* 应用到目标元素上 */
            /* 动画名称 */
            animation-name: move;
            /* 动画时间 */
            animation-duration: 1s;
            /* 动画曲线 */
            animation-timing-function: ease;
            /* 动画何时开始 */
            /* animation-delay: 2s; */
            /* 动画次数 */
            animation-iteration-count: infinite;
            /* 动画是否暂停 */
            animation-play-state: running;
            /* 动画是否逆向 */
            /* reverse 颠倒 */
            /* alternate 交替 */
            /* alternate-reverse 颠倒交替 */
            animation-direction: alternate;
            /* 动画之外的状态 */
            /* animation-fill-mode: ; */
        }

        /* 创建一个自定义动画 */
        /* @keyframes 动画名称{
            两个动画帧
            from{}
            to{}
        } */
        @keyframes move {
            form {
                transform: translateX(0px);
            }

            to {
                transform: translateX(700px);
            }
        }
    </style>
</head>

<body>

    <div class="content">
        <div class="box"></div>
    </div>

</body>

</html>

十七.多个动画帧 简写形式

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .content {
            width: 800px;
            height: 800px;
            border: 1px solid red;
            margin: 100px auto 0px;
        }

        .content .box {
            width: 100px;
            height: 100px;
            background-color: pink;
            /* 应用到目标元素上 */
            /* animation:动画名称 动画时间 运动曲线  何时开始  播放次数  是否反方向; */
            animation: move 4s ease infinite;
        }

        .box2 {
            width: 100px;
            height: 100px;
            background-color: skyblue;
            margin: 100px auto;
            animation: box2move .5s ease infinite alternate;
        }

        @keyframes box2move {
            form {
                transform: translateY(0px);
            }

            to {
                transform: translateY(-20px);
            }
        }

        /* 创建一个自定义动画 */
        /* @keyframes 动画名称{
            两个动画帧
            from{}
            to{}
        } */
        @keyframes move {
            0% {
                transform: translateX(0px) translateY(0px);
            }

            25% {
                transform: translateX(700px) translateY(0px);
            }

            50% {
                transform: translateX(700px) translateY(700px);
            }

            75% {
                transform: translateX(0px) translateY(700px);
            }

            100% {
                transform: translateX(0px) translateY(0px);
            }
        }
    </style>
</head>

<body>

    <div class="box2"></div>
    <div class="content">
        <div class="box"></div>
    </div>

</body>

</html>

十八.自行车案例

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img{
            width: 120px;
            height: 158px;
            /* 动画简写 */
            animation: carMove 5s linear 1;
        }

        @keyframes carMove{
            0%{
                transform: translateX(0px);
            }
            25%{
                transform: translateX(800px);
            }
            50%{
                transform: translateX(800px) rotateY(180deg);
            }
            75%{
                transform: translateX(0px) rotateY(180deg);
            }
            100%{
                transform: translateX(0px) rotateY(0deg);
            }
        }
    </style>
</head>

<body>

    <img src="../images/car.jpg" alt="">

</body>

</html>

十九.充电小球

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            background-color: #8B4513;
        }

        .circle {
            width: 150px;
            height: 150px;
            border-radius: 50%;
            background-color: #00FA9A;
            margin: 200px auto;
            box-shadow: 0px 0px 20px 5px #00FA9A;
            overflow: hidden;
            text-align: center;
            position: relative;
        }

        .circle span {

            z-index: 2;
            position: absolute;
            top: 34%;
            left: 9px;
        }

        .circle::after {
            content: "";
            display: block;
            width: 300px;
            height: 300px;
            border-radius: 120px;
            background-color: white;
            position: absolute;
            top: -142px;
            left: -100px;
            /* 应用动画 */
            animation: circleMove 10s linear 1 forwards;
        }

        @keyframes circleMove {
            from {
                transform: translateY(0px) rotate(0deg);
            }

            to {
                transform: translateY(-168px) rotate(1000deg);
            }
        }
    </style>
</head>

<body>

    <div class="circle">
        <span class="txt">当前电量: 0%</span>
    </div>

    <script>

        var txt = document.querySelector(".txt");
        var num = 0;
        var timerid = setInterval(function () {
            num += 0.1
            if (num >= 100) {
                clearInterval(timerid)
            } else {
                txt.innerHTML = "当前电量:" + num.toFixed(2) + "%";
            }
        }, 10)

    </script>

</body>

</html>

前端拓海
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端学习笔记 - HTML+CSS
fengxm0309的博客
10-07 4635
基础认知 网页 什么是网页 网站是指在因特网上根据一定的规则，使用 HTML 等制作的用于展示特定内容相关的网页集合。 网页是网站中的一“页”，通常是 HTML 格式的文件，它要通过浏览器来阅读。 网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页，常见以 .htm 或 .html 后缀结尾的文件，因此将其俗称为 HTML 文件。 什么是 HTML HTML 指的是超文本标记语言 (Hyper Text Markup Lang
Web前端html5+css3前端开发入门学习笔记
m0_62516225的博客
10-16 1993
Web前端html5+css3前端开发入门学习笔记
20day-HTML&CSS-1~24
DaB210的博客
03-31 936
20day-HTML&CSS-1~24
前端Web开发HTML5+CSS3+移动web视频教程 Day3 CSS 第1天
chengkai730的博客
06-29 1514
Day3 CSS 第1天
100行Html5+CSS3+JS代码实现元旦倒计时界面
热门推荐
知心宝贝的博客
12-29 1万+
一、前言 二、圣诞树 效果展示： 三、步骤 如果之前看过我这篇文章的 1.下载VSCode 下载链接：VSCode 在Hbuilder、idea运行也是可以的，这里推荐使用VSCode 2.配置插件 三个插件对应的功能： 改写标签后自动完善 切换成中文页面 让代码在网页中打开，默认键Alt+B 3.构建三个文件 在桌面新建一个空的文件夹，用VSCode打开 在VSCode新建三个文件 index .html domtree....
HTML5+CSS3之快速入门 day6-day10布局，表单，css精灵，css hack，BFC规范
m0_47268176的博客
11-30 1万+
day06 布局核心： 盒模型（间距） 浮动 （并排） 定位 （覆盖+ 特殊位置） 定位类型position 静态定位 position:static; 默认值 静态定位不能使盒子位置变化 不适合布局 作用：解决低版本浏览器兼容问题 相对定位 position:relative; 能不能使盒子发生位置变化 yes ​ 2. 参考对象：自身初始位置 ​ 3. 脱离不脱离标准流 不脱离标准（保留原来位置 ） ​ 4. 是否适合布局：不适合
HTML5+CSS3实现鼠标悬停图文卡片动画切换特效
qq_36595761的博客
07-15 2526
HTML5+CSS3实现鼠标悬停图文卡片动画切换特效
2022黑马程序员-前端学习第一阶段（Day05-CSS布局-盒子模型）
sakura22123的博客
02-16 7851
CSS布局-盒子模型-Day05 学习笔记打卡CSS布局ＣＳＳ三大特征继承性（拓展）继承的应用（拓展）继承失效的特殊情况层叠性优先级 学习视频B站：黑马程序员-前端学习（第一阶段） CSS布局 ＣＳＳ三大特征 继承性 特性： 子元素有默认继承父元素样式的特点（子承父业） 可以继承的常见属性(文字控制属性都可以继承) 1. color 2. font-style、font-weight、font-size、font-family 3. text-indent、text-align 4. line-height
前端web入门-CSS-day06-标准流和flex布局
来自计科大一萌新的编程记录本
06-17 1470
学习目标：1. 了解标准流概念 2.学会使用flex布局
day3--css页面布局
ice-bear
07-01 3033
第三天--脑壳疼
day10-HTML5&CSS3提高.pdf
10-11
HTML5与CSS3是现代网页开发的基石，它们带来了许多增强功能和改进，使得网页设计更加丰富和动态。HTML5的新特性主要集中在增强网页的语义化、多媒体支持以及表单元素的扩展。 语义化标签是HTML5的一大亮点，它们...
day5-html-css-js
05-10
在"day5-html-css-js"的学习资源中，你可能会深入学习以下HTML知识点： 1. **HTML5新特性**：HTML5增加了许多新的标签，如`<header>`, `<footer>`, `<article>`, `<section>`等，使页面结构更加清晰，便于SEO和无...
Day05-CSS布局-盒子模型
07-06
本文将深入探讨“Day05-CSS布局-盒子模型”这一主题，详细介绍盒子模型的工作原理、相关属性以及在HTML元素中的应用。 首先，我们需要了解什么是盒子模型。在Web开发中，每个HTML元素都可以被视为一个矩形的“盒子...
高级软件人才培训专家-day01-HTML-CSS
03-10
高级软件人才培训专家-day01-HTML-CSS
day01-HTML-CSS.md
03-21
day01-HTML-CSS.md
HTML5新增的input元素属性：placeholder、required、autofocus、min、max等
pan_junbiao的博客
07-08 547
HTML5 大幅度地增加与改良了 input 元素的属性，可以简单地使用这些属性来实现 HTML5 之前需要使用 JavaScript 才能实现的许多功能。 placeholder 属性：当用户没有输入值时，输入型控件可以通过placeholder 属性向用户显示描述说明或者提示信息。使用placeholder 属性只需要将说明性文字作为该属性的值即可。除了普通的文本输入框，email、number、url 等其他类型的输入框也都支持placeholder 属性。
html5——列表、表格
jiuyuexixi的博客
07-10 726
html5——列表、表格
html5——表单
jiuyuexixi的博客
07-10 1109
html5——表单
html5——CSS基础选择器
最新发布
jiuyuexixi的博客
07-11 381
html5——CSS基础选择器
day06（CSS04-浮动）v1.0.pdf
02-17
day06（CSS04-浮动）v1.0.pdf

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值