• 前端之一阶段[HTML、CSS]问题记录

    目录

    一、HTML

    1、video 标签如何去掉 画中画 功能

    二、CSS

    1、去掉标签自带的默认样式

    2、利用奇偶数进行样式定义

    3、获取同类元素的最后一个元素

    4、背景色如何实现渐变效果

    5、利用 flex 布局实现横向滚动

    记录一下自己在日常开发项目的过程中遇到的各种各样关于

    HTML、CSS 相关方面的问题 ， 方便后期快速解决类似问题

    一、HTML

    1、video 标签如何去掉 画中画 功能

    disablePictureInPicture

    2、

    二、CSS

    1、去掉标签自带的默认样式

    1. CSS 去掉i、b等标签默认样式
    2. font-style: normal;

    2、利用奇偶数进行样式定义

    在 CSS 中，可以使用 nth-child 选择器对奇数与偶数的位置进行样式定义

    在 CSS 样式表内 ，使用 nth-child 选择器 对 偶数（ even ）位置 的 数字进行样式定义

    使用 nth-child 选择器 对 奇数（odd） 位置的数字进行样式定义

    3、获取同类元素的最后一个元素

    1

    反正吧 ， 不确定用哪个就挨个试试看 ， 总有一个能满足你 ， 

    博主就是试了  :last-child  没有生效后 ， 就切换了  :last-of-type  就好了

    4、背景色如何实现渐变效果

    设置方法 ：

    1、使用 “ background: linear-gradient ( to 渐变方向, 颜色1, 颜色2, .. ) ; ” 语句；

    2、使用 “ background: radial-gradient ( shape 大小 位置, 开始颜色, .. , 终止颜色 ) ; ” 语句。 

    重复渐变

    重复多次渐变图案直到足够填满指定元素。

    由 repeating-linear-gradient() 和 repeating-radial-gradient() 函数产生。

    重复函数的参数同上，不同的是它会基于渐变长度（最后一个色标和第一个之间的距离）倍数重复。

    1. html>
    2. <html>
    3.     <head>
    4.         <meta charset="UTF-8">
    5.         <title>css背景渐变--重复渐变title>
    6.         <style>
    7.             .demo{
    8.                 width:500px ;
    9.                 height:200px;
    10.                 margin: 50px auto;
    11.             }
    12.             .demo *{
    13.                 width:200px ;
    14.                 height:200px;
    15.                 margin: 50px 15px;
    16.                 float: left;
    17.             }
    18.             .demo1{
    19.                     background: repeating-linear-gradient(
    20.                     to top left,
    21.                     lightpink,
    22.                     lightpink 5px,
    23.                     white 5px,
    24.                     white 10px
    25.                   );
    26.             }
    27.             .demo2{
    28.                    background: repeating-radial-gradient(
    29.                     powderblue,
    30.                     powderblue 8px,
    31.                     white 8px,
    32.                     white 16px
    33.                   );
    34.             }
    35.         style>
    36.     head>
    37.     <body>
    38.         <div class="demo">
    39.             <div class="demo1">div>
    40.             <div class="demo2">div>
    41.         div>
    42.     body>
    43. html>

    5、利用 flex 布局实现横向滚动

    默认小于4条信息左右两端对齐 超出添加滚动

    以下是图例：

    wxss 代码 ：

    1. .padding-style{
    2.   padding: 0 28rpx;
    3. }
    4. .overflow-company-second{
    5.   overflow: hidden;
    6.   height: 88rpx;
    7.   border-bottom: 1px solid #ccc;
    8. }
    9. .special-list{
    10.     line-height: 88rpx;
    11.     font-size: 30rpx;
    12.     display: flex;
    13.     overflow-x: auto;
    14.     justify-content: space-between;
    15.     padding-bottom: 40rpx;
    16. }
    17. .special-list>view{
    18.   text-align: center;
    19.   font-size: 30rpx;
    20.   color: #283B42;
    21.   font-weight: bold;
    22.   flex-basis: 172rpx;
    23.   flex-shrink: 0;
    24.   white-space: nowrap;
    25. }
    26. .special-list>view.active {
    27.   position: relative;
    28. }
    29. .special-list>view.active::before {
    30.   content: "";
    31.   display: block;
    32.   clear: both;
    33.   width: 120rpx;
    34.   height: 6rpx;
    35.   background-image: linear-gradient(90deg, #ea6f5a 58%, #eebeb6 100%);
    36.   border-radius: 40rpx;
    37.   position: absolute;
    38.   left: 50%;
    39.   bottom: 0;
    40.   transform: translateX(-50%);
    41. }

    1. 父级
    2. .special-list{
    3.     line-height: 88rpx;
    4.     font-size: 30rpx;
    5.     display: flex;
    6.     overflow-x: auto;
    7.     justify-content: space-between;
    8.     padding-bottom: 40rpx;
    9. }
    10. 子
    11. .special-list>view{
    12.   text-align: center;
    13.   font-size: 30rpx;
    14.   color: #283B42;
    15.   font-weight: bold;
    16.   flex-basis: 172rpx;
    17.   flex-shrink: 0;
    18.   white-space: nowrap;
    19. }

    时不时更新 ， 未完待续 ing 。。。

  • 相关阅读:
    四路定时控制器设计原理
    深度学习入门（十八）深度学习计算——参数管理
    Prometheus之node_exporter服务器采集信息泛释
    Open3D Ransac拟合空间直线（python详细过程版）
    2311d更好C析构类
    c# 实现gif转化,视频合成,提取视频帧等
    【Linux】第十四站：进程优先级
    查看进程与对应的线程
    Kubernetes 工作中常见命令总结
    解决Ubuntu无法安装pycairo和PyGObject
  • 原文地址：https://blog.csdn.net/weixin_58099903/article/details/126826869