YouTube前端页面模仿总结

菜得很ovo

已于 2023-07-24 15:53:29 修改

阅读量324

点赞数

文章标签：前端

于 2023-07-23 17:20:25 首次发布

本文链接：https://blog.csdn.net/weixin_61291587/article/details/131881326

版权

本文介绍了网页开发中的两种技术：固定定位用于创建如导航栏这样的始终可见元素，即使页面滚动也不会移动；Tooltip则是一种显示额外信息的组件，通过CSS实现不同方向的提示效果。此外，还讲解了如何自定义滚动条样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

开发语言

效果预览

图片

运行效果图

在线链接

1024code空间地址：https://1024code.com/ide/v5yysic
打开后，点击运行按钮即可查看效果

布局 - 固定定位

作用：页面滚动时元素的位置不发生变化
使用场景：导航栏、工具栏、广告、模态框等
特点：

相对于浏览器视口进行定位（不会随着页面滚动发生位移）
固定定位的元素不占有原本位置

语法：
position:fixed 设置定位方式为固定定位（fixed positioning）
项目代码：

/* top banner */
.top-banner {
  position: fixed; /* 固定定位 */
  top: 0;	/* 通过偏移量来设置在视口中的位置 */
  width: 100%;	/* 设置top-banner的宽度为页面宽度*/
  height: 56px;	/* 设置top-banner的高度 */
  padding: 0 4px;
}

/* 注意 */
/* 因为固定定位的元素不占据原本的位置 */
/* 所以项目中top-banner下面的元素要设置一个margin-top:56px */
/* 即设置上边距高度为固定定位元素的高度 */
/* 防止其他元素使用了top-banner的位置 */

组件 - Tooltip

作用：显示提示信息
使用场景：鼠标触发无字图标的:hover效果时，显示提示信息进行补充说明
实现：使用了现成方案 AndyLaw

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Tooltip</title>
    <style>
    [tooltip]{
        position: relative;
        display:inline-block;
        margin: 20px;
        border: 1px solid #ccc;
        padding: 4px 6px;
    }

    /* 创建三角形指向箭头 */
    [tooltip]::before {
        /* 设置伪元素内容为空 */
        content: "";
        position: absolute;
        border-width: 4px 6px 0 6px;
        border-style: solid;
        /* 边框颜色设置为透明 */
        border-color: transparent;
        border-top-color: black;
        z-index: 99;
        /* 设置透明度为 0 元素不可见 */
        opacity:0;

        top:-5px;
        left:50%;
        transform: translateX(-50%);
    }
    /* 提示文字样式 */
    [tooltip]::after {
        /* attr 用于获取对应属性的值 */
        /* 获取tooltip属性的值(即获取传递过来的tooltip文字内容)*/
        content: attr(tooltip);
        position: absolute;
        background: black;
        text-align: center;
        color: #fff;        
        border-radius: 5px;
        padding:4px 2px;
        min-width: 80px;
        pointer-events: none;
        z-index:99;
        opacity:0;

        left:50%;
        top:-5px;
        transform: translateX(-50%)   translateY(-100%);
    }

    [tooltip]:hover::after,[tooltip]:hover::before{
        opacity: 1;
    }
    /* 右侧 */
    [tooltip][position='right']::before{
        top: 50%;
        left:100%;
        margin-left: -3px;
        transform: translateY(-50%) rotate(90deg);
    }
    [tooltip][position='right']::after{
        top: 50%;
        left: 100%;
        margin-left: 5px;
        transform: translateY(-50%);
    }
    /* 左侧 */
    [tooltip][position='left']::before{
        top: 50%;
        left:0;
        margin-left: -9px;
        transform: translateY(-50%) rotate(-90deg);
    }
    [tooltip][position='left']::after{
        top: 50%;
        left: 0;
        margin-left: -5px;
        transform: translateY(-50%) translateX(-100%);
    }
    /* 底侧 */
    [tooltip][position='bottom']::before{
        top: 100%;
        left:50%;
        margin-top: 1px;
        transform: translatex(-50%) rotate(180deg);
    }
    [tooltip][position='bottom']::after{
        top: 100%;
        left: 50%;
        margin-top: 5px;
        transform: translatex(-50%) ;
    }
    </style>
</head>
<body>
    <div style="margin:60px;">
        <div tooltip="love you">hover</div>
        <br>
        <div tooltip="love you" position="left">hover left</div>
        <br>
        <div tooltip="love you" position="right">hover right</div>
        <br>
        <div tooltip="love you" position="bottom">hover bottom</div>
    </div>
</body>
</html>

启发：

通过自定义属性tooltip和position实现了tooltip的文字传递和样式选择
通过使用opacity改变透明度来实现显示和隐藏效果

布局 - 区域滚动

作用：在一个固定大小的容器中，内容超出容器大小时自动添加滚动条，以便用户可以通过滚动条来查看容器中超出部分的内容
语法：

.container{
  width:300px;
  height:200px;
/* auto */
/* 当内容高度超过容易高度时 */
/* 就会显示滚动条 */
  overflow:auto;

/*  还可以设置 横向 或 纵向 滚动条 */
  overflow-x:hidden
}

滚动条相关自定义设置：
滚动条的设置都是通过添加-webkit 伪类实现的

::-webkit-scrollbar 用于设置滚动条基本样式支持width、height、border、background属性

.container::-webkit-scrolller{
  /* 设置滚动条宽度 */
  width:20px;
  /* 高度可以不用设置   */
  /* 默认会根据元素的宽度自动设置高度 */
  /* height:40px; */
  /* 设置滚动条背景颜色 */
  background-color: black;
}

🚨需要注意的是，元素滚动条的宽度也会计算进元素总宽度，需要用过给元素设置负margin-left 消除影响

.container{
  width:1200px;
  height:100vw;
  /* margin-left：-滚动条宽度 */
  margin-left: -12px;
}