前端学习day05--定位

已于 2024-01-20 08:30:07 修改
阅读量41 收藏
点赞数
分类专栏： 前端 文章标签： 前端 html5 css3 css html
于 2023-07-04 10:45:10 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_50833617/article/details/131529232
版权

1.绝对定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 绝对定位   子绝对定位父级相对定位 */
        /* 1.脱离标准流，不占位 
        2.参照物：先找最近的已经定位的祖先元素；如果所有祖先元素都没有定位参照浏览器可视区改位置
        3.显示模式特点改变：宽高生效（有行内块特点）*/
        *{
            padding: 0;
            margin: 0;
        }
        .new{
            position: relative;

            margin: 100px auto;
            width: 400px;
            height: 350px;
            background-color: #f8f8f8;
        }
        img{
            width: 400px;
        }
        .new span{
            position: absolute;
            top: 0;
            right: 0;
            

            /* display: block; */
            width: 92px;
            height: 32px;
            background-color: rgba(0, 0, 0, 0.6);
            text-align: center;
            line-height: 32px;
            color:#fff;
        }

    </style>
</head>
<body>
    <div class="new">
        <img src="./素材/news.jpg" alt="">
        <span>展会活动</span>
        <h4>2222世界移动大会</h4>
    </div>
</body>
</html>

 2.相对定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>相对定位</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        /* 相对定位 相对原来的位置，不脱离标准流，标签显示模式特点不变 */
        div{
            position: relative;
            top: 100px;
            left: 200px;
        }

    </style>
</head>
<body>
    <p>
        Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。
        Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。 
    </p>
    <div>
        <img src="./素材/1.webp" alt="1">
    </div>
    <p>Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。
    Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。</p>
</body>
</html>

 3.定位居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>绝对定位居中</title>
    <style>
        /* 1.绝对定位
        2.设置水平、垂直边偏移50%
        3. transform: translate(-50%,-50%);*/
        img{
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
            /* margin-top: -127px;
            margin-left: -265px; */
        }
    </style>
</head>
<body>
    <img src="./素材/login.webp" alt="">
</body>
</html>

4.固定定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>固定定位</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        /* 固定定位  1.脱离标准流
                    2.参照物：浏览器窗口
                    3.显示模式特点具备行内块的特点*/
        div{
            position: fixed;
            top: 0;
            right: 0;
            
        }

    </style>
</head>
<body>
    <p>
        Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。
        Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。 
    </p>
    <div>
        <img src="./素材/1.webp" alt="1">
    </div>
    <p>Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。
    Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。</p>
    <p>Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。
    Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。</p>
    <p>Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。
     Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。</p>
     <p>Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。
     Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。</p>
    <p>Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。
     Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。</p>
     <p>Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。
     Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。</p>
     <p>Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。
     Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。</p>
     <p>Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。
    Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。</p>
    <p>Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。
     Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。</p>
</body>
</html>

 5.堆叠层级

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>堆叠层级</title>
    <style>
        /*  */
        div{
            position: absolute;
            width: 200px;
            height: 200px;
        }
        .box1{
            background-color: #cf2222;
            z-index: 1;

        }
        .box2{
            background-color: #4a16bc;
            left: 100px;
            top: 100px;
            z-index: 2;

        }
    </style>
</head>
<body>
    <div class="box1">1</div>
    <div class="box2">2</div>
</body>
</html>

 6.CSS精灵

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 112px;
            height: 110px;
            background-image: url(./素材/abcd.jpg);
            background-position: -256px -276px;
        }
    </style>
</head>
<body>
    <!-- 减少服务器被请求次数，减轻服务器压力，提高页面加载速度 -->
    <!-- 1.创建盒子，盒子尺寸与小图尺寸相同
    2.设置盒子背景图为精灵图
    3.添加 background-position属性值
         3.1使用PxCook测量小图片左上角坐标
         3.2取负数坐标为background-position属性值（向左上移动图片位置） -->
    <div></div>
</body>
</html>

 7.字体图标

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 1.引入字体样式表iconfont.css -->
    <link rel="stylesheet" href="./素材/iconfont/iconfont.css">
    <style>
        .iconfont{
            /* 调整大小，选择器的优先级要高于iconfont类 */
            font-size: 200px;
            color: #cb1b1b;
        }
    </style>
</head>
<body>
    <!-- 灵活性，轻量级，兼容性，使用方便 -->
    <!-- 2.标签使用字体图标类名iconfont icon-xxx -->
    <span class="iconfont icon-yanchu"></span>
</body>
</html>
<!-- 字体图标上传在iconfont网站 -->

 8.垂直对齐

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            border: 1px solid #000;
        }
        img{
            /* vertical-align: middle;
            vertical-align: top;
            vertical-align: bottom; */
            /* 浏览器把行内块、行内标签当文字处理，默认按基线对齐
             图片下面会有空白*/
            display: block;
        }
    </style>
</head>
<body>
    <div>
        <img src="./素材/1.webp" alt="">
        <!-- hhhhhhhhhh你好 -->

    </div>
</body>
</html>

 9.过渡属性

QQ录屏20230704103132

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img{
            width: 200px;
            height: 150px;
            /* 加给标签本身 */
            transition: all 1s;
        }
        img:hover{
            width: 500px;
            height: 400px;
        }
    </style>
</head>
<body>
    <img src="./素材/huawei.jpg" alt="">
</body>
</html>

10.透明属性

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>透明度</title>
  <style>
    div {
      width: 500px;
      height: 500px;
      background-color: orange;
      /* 调节背景和内容透明度 */

      opacity: 0;

      opacity: 1;

      opacity: 0.5;
    }
  </style>
</head>
<body>
  <div>
    <img src="./素材/phone.png" alt="">
  </div>
</body>
</html>

 11.光标类型

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>光标类型</title>
  <style>
    div {
      width: 200px;
      height: 200px;
      background-color: pink;

      cursor: pointer;    
      cursor: text;  
      cursor: move;
    }
  </style>
</head>
<body>
  <div></div>
</body>
</html>

12.案例_京东服务

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>京东服务</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    li {
      list-style: none;
    }

    .service {
      margin: 100px auto;
      width: 1190px;
      height: 42px;
      /* background-color: pink; */
    }

    .service ul {
      display: flex;
    }

    .service li {
      display: flex;
      padding-left: 40px;
      width: 297px;
      height: 42px;
      /* background-color: skyblue; */
    }

    .service li h5 {
      margin-right: 10px;
      width: 36px;
      height: 42px;
      /* background-color: pink; */
      background: url(./素材/sprite.png) 0 -192px;
    }

    .service li:nth-child(2) h5 {
      background-position: -41px -192px;
    }

    .service li:nth-child(3) h5 {
      background-position: -82px -192px;
    }

    .service li:nth-child(4) h5 {
      background-position: -123px -192px;
    }

    .service li p {
      font-size: 18px;
      color: #444;
      font-weight: 700;
      line-height: 42px;
    }
  </style>
</head>
<body>
  <div class="service">
    <ul>
      <li>
        <h5></h5>
        <p>品类齐全，轻松购物</p>
      </li>
      <li>
        <h5></h5>
        <p>多仓直发，极速配送</p>
      </li>
      <li>
        <h5></h5>
        <p>正品行货，精致服务</p>
      </li>
      <li>
        <h5></h5>
        <p>天天低价，畅选无忧</p>
      </li>
      
    </ul>
  </div>
</body>
</html>

13.案例_轮播图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./素材/iconfont/iconfont.css">
    <style>
        *{
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        li{
            list-style: none;
        }
        .banner{
            position: relative;
            margin: 100px auto;
            width: 564px;
            height: 315px;
            overflow: hidden;
        }
        .banner img{
            width: 564px;
            border-radius: 12px;
            vertical-align: middle;
        }
        .banner ul{
            display: flex;
        }
        .banner .next,
        .banner .prev{
            display: none;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 20px;
            height: 30px;
            background-color: rgba(0, 0, 0, 0.5);
            text-decoration: none;
            color: white;
            text-align: center;
            line-height: 30px;
        }
        .prev{
            left: 0;
            border-radius: 0 15px 15px 0;
        }
        .next{
            right: 0;
            border-radius: 15px 0 0 15px;
        }
        .banner:hover .prev,
        .banner:hover .next{
            display: block;
        }
        .banner ol{
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            height: 13px;
            background-color: rgba(255, 255, 255, 0.3);
            display: flex;
            border-radius: 10px;
        }
        .banner ol li{
            margin: 3px;
            width: 8px;
            height: 8px;
            background-color: #fff;
            border-radius: 50%;
            cursor: pointer;

        }
        .banner ol .active{
            background-color: #ee5118;
        }

    </style>
</head>
<body>
    <div class="banner">
        <ul>
            <li><a href=""><img src="./素材/banner1.jpg" alt=""></a></li>
            <li><a href=""><img src="./素材/banner2.jpg" alt=""></a></li>
            <li><a href=""><img src="./素材/banner3.jpg" alt=""></a></li>
            <a href="" class="prev ">
                <span class="iconfont icon-icon-test1"></span>
            </a>
            <a href="" class="next ">
                <span class="iconfont icon-icon-test2"></span>
            </a>
            <ol>
                <li></li>
                <li class="active"></li>
                <li></li>
            </ol>
        </ul>
    </div>
</body>
</html>

王壮_
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端学习day08-CSS-结构伪类-图形-字体-字体图标-元素定位
qq_39416206的博客
02-07 161
CSS结构伪类-图形-字体-字体图标-元素定位
Web前端学习-day03-JavaScript
Javaw1212的博客
08-26 3921
交互性强: 由于JS语言是嵌入到HTML页面中undefined最终执行在客户端的浏览器中的语言undefined和用户是直接接触undefined Java语言是运行在服务器的语言undefined 用户需要进行交互的话必须通过网络才可以undefined所以JS语言的交互性会更强.==和===区别: ==先统一等号两边变量的类型 再比较值undefined ===先比较两个变量的类型undefined类型一致后再比较值. "666"==666 true "666"===666 false。...
前端学习---DAY1
qq_62452899的博客
05-21 53
之间的为一段，把文档分为不同段落(alt+z可以在复制后调整格式)；段落标签： 第一个页面 第一个页面
前端学习---DAY3
qq_62452899的博客
05-22 46
文本或图像
前端学习day01--html
W_Chelsea的博客
03-14 115
咸鱼达人要开始学前端了= = 想学很久了，但是因为种种原因（没错就是我的拖延症+懒癌晚期）迟迟没有开始学。身边的同学都开始投简历实习了，而我刚刚考完试还在努力投入编程学习的状态中。。。 这次学习是跟着B站上的pink老师，笔记也是根据他的讲课来做的。 学习路线: html5基础–CSS3基础–H5C3提高–项目实战 Web基本知识 什么是网页 网站：网业的集合。 网页：由图片，声音，文字，链接组成，文件后缀名：.html/.htm。网页是网站的基本元素，通过浏览器来阅读。 HTML 超文本标记语言（Hype
前端学习-day08
qyk666的博客
05-23 334
01-相对定位 02-绝对定位 03-绝对定位居中 04-固定定位 05-堆叠顺序 06-CSS精灵-基本使用 07-案例-京东服务 08-字体图标 10.垂直对齐方式 11-过度 12-透明度 13-光标类型 14-轮播图
前端学习DAY-2
m0_56017821的博客
07-20 54
简单知识
CSS学习-DAY03-定位
qq_63014909的博客
07-14 1017
定位学习。
前端学习-day10
最新发布
qyk666的博客
06-17 421
01-体验平面转换 02-平移效果 03-绝对定位元素居中 04-案例-双开门 06-转换旋转中心点 07-案例-时钟-转换原点 08-平面转换-多重转换 09-缩放效果 10-案例-按钮缩放 11-倾斜效果 12-渐变-线性 13-案例-产品展示 14-渐变-径向 15-综合案例-喜马拉雅
系统学习前端之CSS---day01
weixin_63522291的博客
12-24 1312
和
前端学习day01-HTML标签01
06-21
端学习day01--HTML标签01源码
day05-店铺营业状态设置
11-03
"day05-店铺营业状态设置" 本节课程主要介绍了Redis的基本概念、安装、启动和停止服务、数据类型、常用命令等知识点。 Redis简介 Redis是一个基于内存的key-value结构数据库，具有高性能的读写能力，适合存储热点...
day05-Elasticsearch01
12-13
day05-Elasticsearch01
day05-Elasticsearch01day05-Elasticsearch01
10-25
day05-Elasticsearch01day05-Elasticsearch01
前端（day03-精灵图）
06-17
PICKPICK
Web前端网站设计案例：深入剖析创意与技术的完美融合
liyrbtqe_66w的博客
06-12 474
在性能优化方面，设计师通过压缩代码、减少HTTP请求、使用CDN等技术手段，提升了网站的加载速度和响应性能，为用户提供了更加流畅的访问体验。综上所述，本Web前端网站设计案例通过视觉设计、用户体验、技术实现、性能优化、创意表达、响应式设计和跨平台兼容等方面的综合考量，成功打造了一款既美观又实用的网站。这个案例充分展示了Web前端设计的魅力和潜力，为未来的网站设计提供了有益的借鉴和启示。设计师通过独特的视觉元素和创意构思，将品牌理念和文化内涵融入其中，使得整个网站在传达信息的同时，也展现出品牌的独特魅力。
HTML入门教程：深度解析HTML，开启你的前端技术之旅
zhangwenok的博客
06-14 1468
HTML（HyperText Markup Language，超文本标记语言）是前端开发的基础，它负责构建网页的结构和内容。作为前端技术栈的基石，HTML的掌握程度直接影响到网页的开发效率和用户体验。本教程将带你从零开始，逐步深入了解HTML的各个方面，帮助你打下坚实的前端技术基础。HTML是一种用于创建网页的标准标记语言，它通过一系列的元素（elements）和标签（tags）来定义网页的结构和内容。HTML文档由一系列的元素组成，这些元素通过标签来标识。
Web前端设计大赛：创意与技术的碰撞
huejiaqwerty888的博客
06-12 580
在这场竞赛中，参赛者们不仅需要展现出独特的创意，还需要运用精湛的技术将创意转化为实际作品。本文将从四个方面、五个方面、六个方面和七个方面，深入剖析Web前端设计大赛的魅力和挑战。交互设计是Web前端设计的核心环节。参赛者需要关注页面的加载速度、响应速度以及操作的便捷性等方面，确保用户在使用过程中能够获得良好的体验。参赛者需要敢于突破传统的设计理念和技术限制，尝试新的设计手法和技术应用。参赛者需要在创意构思、视觉呈现、交互设计、用户体验、技术实现、性能优化以及创新性和可实践性等方面进行全面考虑和精心打造。
快速压缩前端项目
lyd的博客
06-15 428
作为前端开发工程师难免会遇到需要把项目压缩成压缩文件来传送的情况，这时候需要压缩软件进行压缩文件处理
day--和--day区别
04-18
"day--"和"day"是两种不同的操作符，它们在编程中有着不同的含义和用法。 1. "day--"是一个后缀自减操作符，用于将变量的值减1，并返回减1之前的值。例如，如果有一个变量day的值为5，执行day--操作后，day的值将...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值