css样式问题合集

最新推荐文章于 2023-10-29 11:41:22 发布
最新推荐文章于 2023-10-29 11:41:22 发布
阅读量1.1k 收藏 5
点赞数 1
分类专栏： CSS 文章标签： css html5 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/rfalcon/article/details/109462301
版权

文章目录


之前有人评论css居中问题，今天就把我平时遇到的样式问题，通过查资料等得到的一份总结。。欢迎留言补充和订正

css实现下拉三角形

第一种实现形式

<!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 type="text/css">
    .icon_arrow1:before {
        content: '';
        display: inline-block;
        border: 6px solid transparent;
        border-bottom-color: #333;
        margin-top: 10px;
        margin-left: 10px;
    }

    .icon_arrow2:before {
        content: '';
        display: inline-block;
        border: 6px solid transparent;
        border-left-color: #333;
        margin-top: 10px;
        margin-left: 20px;
    }

    .icon_arrow3:before {
        content: '';
        display: inline-block;
        border: 6px solid transparent;
        border-top-color: #333;
        margin-top: 10px;
        margin-left: 20px;
    }

    .icon_arrow4:before {
        content: '';
        display: inline-block;
        border: 6px solid transparent;
        border-right-color: #333;
        margin-top: 10px;
        margin-left: 20px;
    }
    </style>
  </head>
  <body>
    <span class="icon_arrow1"></span>
    <span class="icon_arrow2"></span>
    <span class="icon_arrow3"></span>
    <span class="icon_arrow4"></span>
  </body>
</html>

在这里插入图片描述
第二种实现形式

<!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>
    .box{
      width: 100px;
      height: 30px;
      background-color: #000;
      margin-top: 20px;
      margin-left: 50px;
      display: flex;
    }

    .select{
      color: #fff;
      font-size: 10px;
      line-height: 30px;
      margin-left: 10px;
    }

    /* 向下的箭头 */
    /* .arrow_down{
      width: 0;
      height: 0;
      border-left: 8px solid transparent;
      border-right: 8px solid transparent;
      border-top: 14px solid hotpink;
      margin-top: 8px;
      margin-left: 5px;
    } */

     /* 向上的箭头 */
     /* .arrow_down{
      width: 0;
      height: 0;
      border-left: 8px solid transparent;
      border-right: 8px solid transparent;
      border-bottom: 14px solid hotpink;
      margin-top: 8px;
      margin-left: 5px;
    } */

    /* 向左的箭头 */
    /* .arrow_down{
      width: 0;
      height: 0;
      border-top: 8px solid transparent;
      border-bottom: 8px solid transparent;
      border-right: 14px solid hotpink;
      margin-top: 8px;
      margin-left: 5px;
    } */

    /* 向右的箭头 */
    .arrow_down{
      width: 0;
      height: 0;
      border-top: 8px solid transparent;
      border-bottom: 8px solid transparent;
      border-left: 14px solid hotpink;
      margin-top: 8px;
      margin-left: 5px;
    }
  </style>
</head>
<body>
  <div class="box">
    <div class="select">请选择</div>
    <div class="arrow_down"></div>
  </div>
</body>
</html>

在这里插入图片描述

清除浮动的几种方式

四种方式: 链接.

背景图片平铺问题

<!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{
      width: 300px;
      height: 300px;
      border: 1px solid #000;
      background: url('./timg.jpg') no-repeat;
      /* background-size: contain; */
      /* background-size: cover; */
    }
  </style>
</head>
<body>
  <div></div>
</body>
</html>

在这里插入图片描述
在这里插入图片描述

让两个块级元素显示在同一行

<!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>
    .father{
      width: 80px;
      height: 40px;
      border: 1px solid #000;
      /* 弹性布局1 */
      display: flex; 
    }

    .son1{
      /* inline-block 2 */
      /* display: inline-block; */
      width: 20px;
      height: 20px;
      background-color: hotpink;
    }

    .son2{
      /* 设置其间距1 */
      margin-left: 5px; 
      /* inline-block 2 */
      /* display: inline-block; */
      width: 40px;
      height: 30px;
      background-color: indianred;
    }
  </style>
</head>
<body>
  <div class="father">
    <div class="son1"></div>
    <div class="son2"></div>
  </div>
</body>
</html>

在这里插入图片描述
在这里插入图片描述

css水平居中

<!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>
    .parent1{
      width: 200px;
      height: 30px;
      border: 1px solid #ccc;
      text-align: center;
    }

    .parent2{
      width: 200px;
      height: 100px;
      border: 1px solid #ccc;
      /* 图片为行内元素 */
      text-align: center;
    }
    /* 图片作为块级元素 */
    /* .parent2 img{
      display: block;
      margin:auto;
    } */

    .parent3{
      width: 200px;
      height: 100px;
      border: 1px solid #ccc;
    }

    .son1{
      margin: 0 auto;
      width: 80px;
      height: 80px;
      background-color: indianred;
    }

    ul{
      width: 200px;
      width: fit-content;
      /* margin: 0 auto; */
      list-style: none;
      overflow: hidden;
    }
    li{
      float: left;
      margin:0 5px;
    }

    .container{
      width: 200px;
      display: flex;
      flex-direction: row;
      justify-content: center;
      overflow: hidden;
    }
    .demo{
      width: 100px;
      height: 50px;
      background-color: red;
    }

    .container1{
      margin-top: 5px;
      width: 200px;
      height: 100px;
      border: 1px solid #ccc;
      position: relative;
    }
    .demo1{
      width: 100px;
      height: 50px;
      background-color: blueviolet;
      position: absolute;
      left: 50%;
      transform: translate(-50%);
    }

    .parent4{
      position: relative;
      width: 200px;
      height: 100px;
      border: 1px solid #ccc;
    }
    .son2{
      position: absolute;
      width: 100px;
      height: 50px;
      background-color: blue;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <!-- 行内元素：自身不具备宽度、高度，由自由内容撑大(a,b,strong,i,span,img,input,select)  给父元素设置text-align:center -->
  <div class="parent1">
    <span>试试这个行内居中</span>
  </div>
  <div class="parent2">
    <img src="./angel.gif" alt="">
  </div>

  <!-- 块级元素:独自占一行，支持宽和高(div,p,ul,ol,h1-h6,dl,dt,dd,address,article,figure,video,audio,section,table,canvas,header,foot,etc..) 给块级设置margin:0 auto -->
  <div class="parent3">
    <div class="son1"></div>
  </div>

  <!-- 子元素有浮动，为了让子元素水平居中，设置父元素宽度为 fit-content,并配合 margin:0 auto; -->
  <ul>
    <li>提子</li>
    <li>柚子</li>
    <li>橙子</li>
  </ul>

  <!-- 利用flex弹性：父元素 -->
  <div class="container">
    <div class="demo"></div>
  </div>

  <!-- 使用css3中新增的transform属性 -->
  <div class="container1">
    <div class="demo1"></div>
  </div>

  <!-- 使用子元素定位的方式 [注]如果知道要居中元素的尺寸，利用top，left具体值定位更加简单 -->
  <div class="parent4">
    <div class="son2"></div>
  </div>
</body>
</html>

在这里插入图片描述

css垂直居中

<!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>
    .box{
      width: 200px;
      height: 80px;
      border: 1px solid #ccc;
      line-height: 80px; /* 垂直居中 */
    }

    .container{
      width: 200px;
      height: 100px;
      border: 1px solid #ccc;
      display: flex;
      align-items: center;
      flex-direction: row;
    }
    .demo{
      width: 100px;
      height: 50px;
      background-color: blueviolet;
    }

    .container1{
      position: relative;
      width: 200px;
      height: 100px;
      border: 1px solid #ccc;
    }
    .demo1{
      position: absolute;
      width: 100px;
      height: 50px;
      background-color: chocolate;
      top: 50%;
      transform: translateY(-50%);
    }
  </style>
</head>
<body>
  <!-- 若是单文本内容，可以设置line-height等于父元素高度 -->
  <div class="box">
    <span>文字居中效果</span>
  </div>

  <!-- 使用flex弹性布局,display:flex align-items:center flex-direction:column(设置主轴方向为垂直方向) -->
  <div class="container">
    <div class="demo"></div>
  </div>

  <!-- 使用css3中新增的transform属性 -->
  <div class="container1">
    <div class="demo1"></div>
  </div>
</body>
</html>

在这里插入图片描述

css实现水平垂直居中

<!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>
    *{
      margin: 0;
      padding: 0;
    }

    .container{
      position: relative;
      width: 200px;
      height: 100px;
      border: 1px solid #ccc;
    }
    .box{
      position: absolute;
      width: 100px;
      height: 50px;
      background-color: coral;
      left: 50px;
      top: 25px;
    }

    .container1{
      width: 100px;
      height: 50px;
      background-color: cornflowerblue;
      position: absolute;
      top: 50%;
      left: 50%;
      /* 高度的一半 */
      margin-top: 25px; 
      /* 宽度的一半 */
      margin-left: 50px; 
    }

    .container2{
      width: 100px;
      height: 50px;
      position: absolute;
      background-color: crimson;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
    }

    .container3{
      width: 100px;
      height: 50px;
      background-color: cyan;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
    }

    .container4{
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }
    .box4{
      width: 100px;
      height: 50px;
      background-color: darkgoldenrod;
    }

    .container5{
      width: 100px;
      height: 100px;
      background-color: darkorchid;
      margin: 0 auto;
      position: relative;
      top: 50%;
      transform: translateY(-50%);
    }
  </style>
</head>
<body>
  <!-- 绝对定位实现元素居中(需要知道居中元素的具体尺寸，可以通过js方法获取) -->
  <div class="container">
    <div class="box"></div>
  </div>

  <!-- 绝对定位，原始(需要知道居中元素的具体尺寸，可以通过js方法获取) -->
  <div class="container1"></div>
  <!-- css3.0兴起后的替代方案 -->
  <div class="container2"></div>

  <!-- margin:auto 实现水平垂直 -->
  <div class="container3"></div>

  <!-- 父元素 100vh 就是适口高度；100%，即占满整个屏幕 -->
  <div class="container4">
    <div class="box4"></div>
  </div>

  <!-- 相对定位实现水平垂直 -->
  <div class="container5"></div>
</body>
</html>

css去除重叠边框

<!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>
    table{
      margin: 20px auto;
      border-top: 1px solid #000;
      border-left: 1px solid #000;
      border-collapse: collapse; /*去除重叠边框，设置单元格的边框合并为1*/
    }
    td{
      border-bottom: 1px solid #000;
      border-right: 1px solid #000;
    }

    .box1{
      width: 100px;
      height: 100px;
      border: 1px solid #ccc;
    }
    .box2{
      width: 100px;
      height: 100px;
      border: 1px solid #ccc;
      margin-top: -1px;
    }
  </style>
</head>
<body>
  <!-- 如果是table标签，用border-collapse:collapse -->
  <table border="1" cellapacing="0">
    <tr>
      <th>姓名</th>
      <th>年龄</th>
    </tr>
    <tr>
      <td>falcon</td>
      <td>20</td>
    </tr>
    <tr>
      <td>lily</td>
      <td>18</td>
    </tr>
    <tr>
      <td>alice</td>
      <td>19</td>
    </tr>
  </table>

  <!-- 非table标签，上面的设置失效，用设置边框的相反数解决 -->
  <div class="box1"></div>
  <div class="box2"></div>
</body>
</html>

在这里插入图片描述
在这里插入图片描述

实现文字绕图片环绕排列，折行后对齐

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>实现文字绕图片排列</title>
  <style>
    .cross,
    .cross1,
    .cross2 {
      margin: 100px auto;
      width: 300px;
      color: #333;
      font-size: 18px;
    }

    .cross2 {
      overflow: hidden;
      /* display: flex; */
    }

    .cross img,
    .cross1 img,
    .cross2 img {
      width: 60px;
      height: 20px;
    }

    .cross2 img {
      float: left;
    }

    .cross2 p {
      display: contents;
    }
  </style>
</head>
<body>
  <div class="cross">
    <img src="./imgs/db11.jpg" alt="">
    这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字
  </div>

  <div class="cross1">
    <img src="./imgs/db11.jpg" alt="">
    <span>
      这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字
    </span>
  </div>

  <div class="cross2">
    <img src="./imgs/db11.jpg" alt="">
    <p>
      这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字
    </p>
  </div>
</body>
</html>

在这里插入图片描述

项目中实现奇偶项不同的样式

<swiper class="single_box" :autoplay="true" interval="2000">
				<swiper-item class="single_swiper">
					<view class="single_show" v-for="(item,index) in singleList2" :key="index">
						<view class="single_item" :class="[index%2 == 0 ? 'smallBox min1' : 'bigBox big2']">
							<image :src="item.url" mode=""></image>
							<text>{{item.title}}</text>
						</view>
					</view>
				</swiper-item>
			</swiper>

消除display设置为inline-block产生的间距

<!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>
    a {
      text-decoration: none;
    }

    .sub {
      display: inline-block;
      /* 第一种消除方式，使用margin等于负值 */
      margin-left: -10px;
    }

    .space a {
      margin-top: 20px;
      display: inline-block;
      width: 100px;
      height: 60px;
      background-color: greenyellow;
    }

    .demo a {
      margin-top: 20px;
      display: inline-block;
      width: 100px;
      height: 60px;
      background-color: dimgrey;
    }

    .box {
      font-size: 0;
    }

    .box a {
      font-size: 12px;
      width: 60px;
      height: 15px;
      background-color: dodgerblue;
    }

    .box1 {
      letter-spacing: -3px;
    }

    .box1 a {
      letter-spacing: 0;
      width: 60px;
      height: 15px;
    }

    .box2 {
      word-spacing: -6px;
    }

    .box2 a {
      word-spacing: 0;
    }
  </style>
</head>
<body>
  <!-- 
    资料地址：https://www.cnblogs.com/gavinzzh-firstday/p/5710712.html
    1.移除空格
    2.使用margin负值
    3.让闭合标签吃胶囊
    4.使用font-size:0
    5.使用letter-spacing
    6.使用word-spacing
   -->

  <!-- 1.移除空格 -->
  <!-- <div class="demo">
      <a href="#">
        天时</a><a href="#">
        地利</a><a href="#">
        人和</a>
    </div> -->

  <!-- 或者 -->
  <!-- <div class="demo">
      <a href="#">天时</a
      ><a href="#">地利</a
      ><a href="#">人和</a>
    </div> -->

  <!-- 2.使用margin负值 -->
  <input type="text" class="con">
  <input type="submit" value="提交" class="sub">

  <!-- 3.让闭合标签吃胶囊 -->
  <div class="space">
    <a href="#">天时
      <a href="#">地利
        <a href="#">人和
  </div>

  <!-- 4.使用font-size:0 -->
  <div class="box">
    <a href="#">天时</a>
    <a href="#">地利</a>
    <a href="#">人和</a>
  </div>

  <!-- 5.使用letter-spacing -->
  <div class="box1">
    <a href="#">天时</a>
    <a href="#">地利</a>
    <a href="#">人和</a>
  </div>

  <!-- 6.使用word-spacing -->
  <div class="box2">
    <a href="#">天时</a>
    <a href="#">地利</a>
    <a href="#">人和</a>
  </div>
</body>
</html>

css设置样式截取字符串并添加省略号

<!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 {
      width: 200px;
      height: 40px;
      border: 1px #333 solid;
      color: #999;
      font-size: 18px;
      line-height: 40px;
      /* 下面这四句很重要，是实现该样式的代码 */
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      word-break: break-all;
    }
  </style>
</head>
<body>
  <div>
    今天对我来说收获很多，真是非常的开心和难忘的日子
  </div>
</body>
</html>

效果图：
在这里插入图片描述

用css样式设计图片的模糊效果

<!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 {
      width: 250px;
      height: 150px;
    }

    img {
      width: 100%;
      height: 100%;
      /* 下面这一句代码实现模糊效果 */
      -webkit-filter: blur(20px);
    }
  </style>
</head>

<body>
  <div>
    <img src="./bv1.jpg" alt="">
  </div>
</body>
</html>

效果图：
在这里插入图片描述

css绝对定位脱离文档流实现特殊布局

<!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>
    .container {
      width: 250px;
      height: 150px;
    }

    .head_img {
      width: 100%;
      height: 100%;
      /* 下面这一句代码实现模糊效果 */
      -webkit-filter: blur(20px);
    }

    .show_img {
      width: 100px;
      height: 60px;
      /* 下面css是实现效果的关键，绝对定位脱离文档流，在通过top/left/bottom/right的值调节位置 */
      position: absolute;
      top: 20px;
      left: 50px;
    }
  </style>
</head>
<body>
  <div class="container">
    <img class="head_img" src="./bv1.jpg" alt="">
    <img class="show_img" src="./bv1.jpg" alt="">
  </div>
</body>
</html>

效果图：让一个图片固定在另一个图片的某个部分
在这里插入图片描述

css样式通过调节z-index值来调整元素显示层级

<!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>
    .container {
      width: 250px;
      height: 150px;
    }

    .show_img {
      width: 100px;
      height: 60px;
      /* 下面css是实现效果的关键，绝对定位脱离文档流，在通过top/left/bottom/right的值调节位置 */
      position: absolute;
      top: 20px;
      left: 50px;
    }

    .split_line {
      width: 200px;
      height: 2px;
      background-color: #000;
      position: absolute;
      top: 40px;
      /* 这一句是实现效果的关键 */
      z-index: -99;
    }
  </style>
</head>
<body>
  <div class="container">
    <img class="show_img" src="./bv1.jpg" alt="">
    <div class="split_line"></div>
  </div>
</body>
</html>

效果图：
在这里插入图片描述

mode属性

h5或小程序开发时设计image的mode属性来改变图片的展示形式
相关小程序链接：image的mode属性

flex生效问题

h5或小程序页面中使用了flex布局，后来使用view-scroll标签实现滚动的时候，还行让原来的flex生效
更多信息链接地址：flex和滚动使用时生效

// 让flex布局生效，只需要设置enable-flex属性为true即可
 <scroll-view enable-flex="{{true}}" scroll-x="{{true}}" class="casts-container">
      <block wx:for="{{movie.castsInfo}}" wx:key="index">
        <view class="cast-container">
          <image class="cast-img" src="{{item.img}}"></image>
          <text>{{item.name}}</text>
        </view>

        <view class="cast-container">
          <image class="cast-img" src="{{item.img}}"></image>
          <text>{{item.name}}</text>
        </view>
      </block>
    </scroll-view>

利用css属性设置一个hover遮罩

在这里插入图片描述
在这里插入图片描述

<!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>
    * {
      margin: 0;
      padding: 0;
    }

    .box {
      width: 220px;
      height: 160px;
      border: 1px solid #ccc;
      background: #441a09;
      /* 1.相对定位隐藏多余 */
      position: relative;
      overflow: hidden;
    }

    .box img {
      width: 200px;
      height: 150px;
      margin: 5px 10px;
    }

    .box .desc {
      width: 200px;
      height: 150px;
      background-color: #080807;
      opacity: 0.7;
      /* 2.绝对定位 完成遮罩设置 */
      position: absolute;
      top: 200px;
      left: 10px;
      -webkit-line-clamp: 11;
      -webkit-box-orient: vertical;
      text-overflow: ellipsis;
      overflow: hidden;
      display: -webkit-box;
    }

    .box:hover .desc {
      /* 3.hover时 改变绝对值 */
      top: 5px;
    }

    .box .desc p {
      font-size: 12px;
      line-height: 20px;
      text-indent: 24px;
      letter-spacing: 1px;
      text-align: justify !important;
      color: #fff;
      padding: 40px 10px 5px 10px;
    }
  </style>
</head>
<body>
  <div class="box">
    <img src="./imgs/2020/news-imgs/news_01.jpg" alt="">
    <div class="desc">
      <p>北京时间2020年10月12日，在世界相关组织一个重要会议。</p>
    </div>
  </div>
</body>
</html>

jquery实现hover不相干

在这里插入图片描述

<!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>
    * {
      margin: 0;
      padding: 0;
    }

    .btns_box {
      margin: 100px auto;
      width: 1000px;
      height: 100px;
      border: 1px solid #ccc;
    }

    ul {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      align-items: center;
    }

    ul li {
      list-style: none;
      width: 100px;
      height: 80px;
      background: #333;
      text-align: center;
    }

    ul li.cur {
      background: #ccc;
    }

    ul li a {
      line-height: 80px;
      color: #fff;
      font-size: 16px;
      text-decoration: none;
    }
  </style>
</head>
<body>
  <div class="btns_box">
    <ul>
      <li><a href="">1</a></li>
      <li><a href="">2</a></li>
      <li><a href="">3</a></li>
      <li><a href="">4</a></li>
      <li><a href="">5</a></li>
      <li><a href="">6</a></li>
    </ul>
  </div>

  <!-- 引入jquery -->
  <script src="./js/jquery-3.5.1.min.js"></script>

  <script>
    $(function () {
      $('ul li').mouseover(function () {
        var current = $(this).index()
        console.log(current);
        if ($(this).hasClass('cur')) return
        $(this).addClass('cur').siblings().removeClass()
      })
    })
  </script>
</body>
</html>

利用swiper实现无缝隙+动效

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Swiper demo</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

  <!-- Link Swiper's CSS -->
  <link rel="stylesheet" href="./css/swiper-bundle.min.css">

  <!-- Demo styles -->
  <style>
    .box {
      width: 1200px;
      height: 300px;
      border: 1px solid #ccc;
      margin: 100px auto;
      background: #eee;
    }

    .swiper-container {
      width: 100%;
      height: 100%;
    }

    .swiper-slide {
      text-align: center;
      background: #fff;

      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
      transition: 50ms;
      transform: scale(0.8);
    }

    .swiper-slide img {
      width: 400px;
      height: 300px;
    }

    .swiper-slide-active,
    .swiper-slide-duplicate-active {
      transform: scale(1);
    }
  </style>
</head>

<body>
  <!-- Swiper -->
  <div class="box">
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <img src="./imgs/2020/news-imgs/news_01.jpg" alt="">
        </div>
        <div class="swiper-slide">
          <img src="./imgs/2020/news-imgs/news_02.jpg" alt="">
        </div>
        <div class="swiper-slide">
          <img src="./imgs/2020/news-imgs/news_03.jpg" alt="">
        </div>
        <div class="swiper-slide">
          <img src="./imgs/2020/news-imgs/news_04.jpg" alt="">
        </div>
        <div class="swiper-slide">
          <img src="./imgs/2020/news-imgs/news_05.jpg" alt="">
        </div>
        <div class="swiper-slide">
          <img src="./imgs/2020/news-imgs/news_06.jpg" alt="">
        </div>
      </div>
    </div>
  </div>

  <!-- Swiper JS -->
  <script src="./js/swiper-bundle.min.js"></script>

  <!-- Initialize Swiper -->
  <script>
    var swiper = new Swiper('.swiper-container', {
      slidesPerView: 3,
      spaceBetween: 30,
      centeredSlides: true,
      loop: true,
      autoplay: true
    });
  </script>
</body>
</html>

swiper实现无限循环+无动效

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Swiper demo</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

  <!-- Link Swiper's CSS -->
  <link rel="stylesheet" href="./css/swiper-bundle.min.css">

  <!-- Demo styles -->
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .box {
      width: 1200px;
      height: 300px;
      border: 1px solid #ccc;
      margin: 100px auto;
      background: #eee;
    }

    .swiper-container {
      width: 100%;
      height: 100%;
      --swiper-navigation-color: #000;
      --swiper-navigation-size: 30px;
    }

    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;
      position: relative;
      overflow: hidden;


      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
    }

    .swiper-slide img {
      width: 400px;
      height: 300px;
    }

    .swiper-slide .desc {
      width: 400px;
      height: 300px;
      background-color: #080807;
      opacity: 0.7;
      position: absolute;
      top: 400px;
      -webkit-line-clamp: 11;
      -webkit-box-orient: vertical;
      text-overflow: ellipsis;
      overflow: hidden;
      display: -webkit-box;
    }

    .swiper-slide:hover .desc {
      top: 0;
    }

    .swiper-slide .desc p {
      font-size: 12px;
      line-height: 20px;
      text-indent: 24px;
      letter-spacing: 1px;
      text-align: justify !important;
      color: #fff;
      padding: 40px 10px 5px 10px;
    }
  </style>
</head>

<body>
  <div class="box">
    <!-- Swiper -->
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <img src="./imgs/2020/news-imgs/news_01.jpg" alt="">
          <div class="desc">
            <p>北京时间2020年10月12日，在世界相关组织一个重要会议。北京时间2020年10月12日，在世界相关组织一个重要会议。</p>
          </div>
        </div>
        <div class="swiper-slide">
          <img src="./imgs/2020/news-imgs/news_02.jpg" alt="">
          <div class="desc">
            <p>北京时间2020年10月12日，在世界相关组织一个重要会议。北京时间2020年10月12日，在世界相关组织一个重要会议。</p>
          </div>
        </div>
        <div class="swiper-slide">
          <img src="./imgs/2020/news-imgs/news_03.jpg" alt="">
          <div class="desc">
            <p>北京时间2020年10月12日，在世界相关组织一个重要会议。北京时间2020年10月12日，在世界相关组织一个重要会议。</p>
          </div>
        </div>
        <div class="swiper-slide">
          <img src="./imgs/2020/news-imgs/news_04.jpg" alt="">
          <div class="desc">
            <p>北京时间2020年10月12日，在世界相关组织一个重要会议。北京时间2020年10月12日，在世界相关组织一个重要会议。</p>
          </div>
        </div>
        <div class="swiper-slide">
          <img src="./imgs/2020/news-imgs/news_05.jpg" alt="">
          <div class="desc">
            <p>北京时间2020年10月12日，在世界相关组织一个重要会议。北京时间2020年10月12日，在世界相关组织一个重要会议。</p>
          </div>
        </div>
        <div class="swiper-slide">
          <img src="./imgs/2020/news-imgs/news_06.jpg" alt="">
          <div class="desc">
            <p>北京时间2020年10月12日，在世界相关组织一个重要会议。北京时间2020年10月12日，在世界相关组织一个重要会议。</p>
          </div>
        </div>
      </div>

      <!-- 前进后退 -->
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>
    </div>
  </div>

  <!-- Swiper JS -->
  <script src="./js/swiper-bundle.min.js"></script>

  <!-- Initialize Swiper -->
  <script>
    var swiper = new Swiper('.swiper-container', {
      slidesPerView: 3,
      spaceBetween: 30,
      loop: true,
      // 设置前进后退按钮或者自动循环
      // autoplay: {
      //   delay: 1000,
      // },
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    });
  </script>
</body>
</html>

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>
    * {
      margin: 0;
      padding: 0;
    }

    /* 1.利用flex布局 */
    .box {
      width: 300px;
      height: 30px;
      margin: 200px auto;
      border: 1px solid #ccc;
      text-align: center;
      line-height: 30px;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
    }

    .box p {
      font-size: 16px;
    }

    .box img {
      width: 10px;
      height: 10px;
    }
  </style>
</head>
<body>
  <div class="box">
    <p>这是一段文字。描述相关内容</p>
    <img src="./imgs/2020/hxrmd/click.png" alt="">
  </div>
</body>
</html>

在这里插入图片描述

<!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>
</head>
<body>
  <!-- 2.直接利用垂直居中 -->
  <div class="box">
    <img style="width: 10px;height: 10px;vertical-align: middle;" src="./imgs/2020/hxrmd/click.png" alt="">
    <a href="">这是一支团队</a>
  </div>
</body>
</html>

在这里插入图片描述

<!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>
    .box .img_box {
      display: inline-block;
      vertical-align: middle;
    }

    .box .img_box img {
      width: 16px;
      height: 16px;
    }

    .box .text_box {
      display: inline-block;
    }
  </style>
</head>
<body>
  <!-- 3.分别放入盒子 -->
  <div class="box">
    <div class="text_box">
      <a href="">点击查看获奖</a>
    </div>
    <div class="img_box">
      <img src="./imgs/2020/hxrmd/click.png" alt="">
    </div>
  </div>
</body>
</html>

在这里插入图片描述

设置一个hover下拉菜单并实现动态效果

<!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>
    * {
      margin: 0;
      padding: 0;
    }

    ul li {
      list-style: none;
    }

    a {
      text-decoration: none;
    }

    .navBox {
      width: 80%;
      margin: 100px auto;
    }

    .nav_list {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .nav_list .nav_name {
      width: 30%;
      height: 80px;
      text-align: center;
      background: #333;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .nav_list .nav_name a {
      color: #fff;
      width: 100%;
      height: 80px;
      line-height: 80px;
    }

    .nav_list .nav_name .list_box {
      display: none;
      width: 100%;
    }

    .nav_list .nav_name:hover .list_box {
      display: block;
    }

    .nav_list .list_box .list_item {
      width: 100%;
      height: 50px;
      border-bottom: 1px solid #fff;
      background: #ccc;
      opacity: 0.8;
    }

    .nav_list .list_box .list_item:hover {
      opacity: 1;
    }

    .nav_list .list_box .list_item a {
      font-size: 16px;
      line-height: 50px;
      color: #333;
    }

    .nav_list .list_box .list_item a:hover {
      font-size: 18px;
      color: #222;
    }
  </style>
</head>
<body>
  <div class="navBox">
    <ul class="nav_list">
      <li class="nav_name">
        <a href="">导航一</a>
        <ul class="list_box">
          <li class="list_item"><a href="">子菜单选项1</a></li>
          <li class="list_item"><a href="">子菜单选项2</a></li>
          <li class="list_item"><a href="">子菜单选项3</a></li>
        </ul>
      </li>
      <li class="nav_name">
        <a href="">导航二</a>
        <ul class="list_box">
          <li class="list_item"><a href="">子菜单选项1</a></li>
          <li class="list_item"><a href="">子菜单选项2</a></li>
          <li class="list_item"><a href="">子菜单选项3</a></li>
          <li class="list_item"><a href="">子菜单选项4</a></li>
        </ul>
      </li>
      <li class="nav_name">
        <a href="">导航三</a>
        <ul class="list_box">
          <li class="list_item"><a href="">子菜单选项1</a></li>
          <li class="list_item"><a href="">子菜单选项2</a></li>
          <li class="list_item"><a href="">子菜单选项3</a></li>
          <li class="list_item"><a href="">子菜单选项4</a></li>
          <li class="list_item"><a href="">子菜单选项5</a></li>
        </ul>
      </li>
    </ul>
  </div>
</body>
</html>

效果图：
在这里插入图片描述

两栏布局（flex）

<!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>
    * {
      margin: 0;
      padding: 0;
    }

    .container {
      display: flex;
      width: 1200px;
      margin: 0 auto;
    }

    .left {
      flex-basis: 300px;
      margin-right: 20px;
      height: 100vh;
      background: #ccc;
    }

    .rest {
      flex-grow: 1;
      height: 100vh;
      background: #f2f2f2;
    }
  </style>
</head>

<body>
  <!-- 左侧固定，右侧自适应 -->
  <div class="container">
    <div class="left"></div>
    <div class="rest"></div>
  </div>
</body>

</html>

footer在可视底部+跟在content最后

<!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>
    * {
      margin: 0;
      padding: 0;
    }

    .container {
      display: flex;
      width: 1200px;
      margin: 0 auto;
      height: 100vh;
      flex-direction: column;
    }

    .cont_box {
      width: 100%;
      height: 100px;
      background: #f2f2f2;
    }

    /* 高度不足可视高度，footer固定在可视底部；大于可视高度，footer布局在content最后 */
    .footer {
      margin-top: auto;
      flex-shrink: 0;
      height: 30px;
      background: #ccc;
    }
  </style>
</head>

<body>
  <!-- 左侧固定，右侧自适应 -->
  <div class="container">
    <div class="cont_box"></div>
    <div class="footer"></div>
  </div>
</body>

</html>

处理文本超长问题（单行+多行）

<!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;
    }

    .container {
      margin: 100px auto;
    }

    p {
      margin: 0 auto;
      width: 10%;
      height: 40px;
      border: 1px solid #222;
      line-height: 40px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .more {
      margin: 10px auto;
      width: 10%;
      height: 80px;
      border: 1px solid #222;
      line-height: 40px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
  </style>
</head>

<body>
  <div class="container">
    <!-- 单行文本 -->
    <p>这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本</p>
    <div class="more">这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本</div>
  </div>
</body>

</html>

在这里插入图片描述

处理动态内容（保护边界）

<!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>
    * {
      margin: 0;
      padding: 0;
    }

    .btn {
      min-width: 100px;
      height: 40px;
      color: #222;
      background: orangered;
      border: none;
      line-height: 40px;
      text-align: center;
      padding: 0 20px;
    }
  </style>
</head>

<body>
  <button class="btn">hello world vs love and peace</button>
</body>

</html>

在这里插入图片描述

flex弹性布局

推荐链接：阮一峰老师：flex布局教程

grid网格布局

推荐链接：阮一峰老师：grid网格布局教程

解决图片5px间距

 <!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>解决图片5px间距</title>

   <style>
     div {
        /* 给父元素设置font-size：0 */
       /* font-size: 0; */
       /* 给父元素设置line-height: 5px; */
       /* line-height: 5px; */
     }

     img {
      /* 给img设置display：block */
       /* display: block; */
       /* 给img设置vertical-align: bottom */
       /* vertical-align: bottom; */
       width: 100%;
     }

     p {
       margin: 0;
     }
   </style>
 </head>

 <body>
   <div>
     <img src="html.gif" alt="">
     <img src="html.gif" alt="">
   </div>
 </body>

 </html>

在这里插入图片描述

元素高度跟随窗口

<!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;
    }

    .container {
      width: 100%;
      /* 设置高度跟随窗口的代码 */
      height: 100vh;
      background-image: linear-gradient(180deg, #2af598 0%, #009efd 100%);
    }
  </style>
</head>

<body>
  <div class="app">
    <div class="container"></div>
  </div>
</body>

</html>

修改input placeholder的样式

<!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>
    input {
      width: 300px;
      height: 30px;
      border: none;
      outline: none;
      display: block;
      margin: 15px;
      border: solid 1px #dee0e9;
      padding: 0 15px;
      border-radius: 15px;
    }

    .placehoder-custom::-webkit-input-placeholder {
      color: #babbc1;
      font-size: 12px;
    }
  </style>
</head>

<body>
  <div>
    <input type="text" class="placehoder-custom" placeholder="请输入关键字搜索" />
    <input type="text" placeholder="请输入关键字搜索" />
  </div>
</body>

</html>

在这里插入图片描述

巧用not选择器

<!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>
    li {
      list-style: none;
    }

    li:not(:last-child) {
      border-bottom: 1px solid red;
    }
  </style>
</head>

<body>
  <div>
    <ul>
      <li>
        <span>单元格</span>
        <span>内容</span>
      </li>
      <li>
        <span>单元格</span>
        <span>内容</span>
      </li>
      <li>
        <span>单元格</span>
        <span>内容</span>
      </li>
      <li>
        <span>单元格</span>
        <span>内容</span>
      </li>
    </ul>
  </div>
</body>

</html>

在这里插入图片描述

使用flex布局实现自动固定底部

<!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>使用flex布局实现智能固定底部</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    .container {
      height: 100vh;
      /* 关键css处 */
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .main {
      /* 关键css处 */
      flex: 1;
      background-image: linear-gradient(45deg,
          #ff9a9e 0%,
          #fad0c4 99%,
          #fad0c4 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
    }

    .footer {
      padding: 15px 0;
      text-align: center;
      color: #ff9a9e;
      font-size: 14px;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="main">我是内容区域</div>
    <div class="footer">规则说明</div>
  </div>
</body>

</html>

使用caret-color改变光标颜色

<!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>
    .caret-color {
      /* 改变光标颜色 */
      caret-color: red;
    }
  </style>
</head>

<body>
  <div class="container">
    <input type="text" class="caret-color" />
  </div>
</body>

</html>

移除type="number"尾部的箭头

<!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>
    /* 移除type="number"尾部箭头 */
    .no-arrow::-webkit-inner-spin-button {
      -webkit-appearance: none;
    }

    /* outline:none移除状态线 */
    .no-outline {
      outline: none;
    }
  </style>
</head>

<body>
  <div class="container">
    <input type="number" class="no-outline" />
    <input type="number" class="no-arrow" />
  </div>
</body>

</html>

在这里插入图片描述

画三角形

<!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>
    .triangle {
      display: inline-block;
      margin-right: 10px;
      /* 基础样式 */
      /* border: solid 10px transparent; */
      border: 10px solid red;
    }

    /*下*/
    .triangle.bottom {
      border-top-color: #0097a7;
    }

    /*上*/
    .triangle.top {
      border-bottom-color: #b2ebf2;
    }

    /*左*/
    .triangle.left {
      border-right-color: #00bcd4;
    }

    /*右*/
    .triangle.right {
      border-left-color: #009688;
    }
  </style>
</head>

<body>
  <div class="box">
    <div class="box-inner">
      <div class="triangle bottom"></div>
      <div class="triangle right"></div>
      <div class="triangle top"></div>
      <div class="triangle left"></div>
    </div>
  </div>
</body>

</html>

在这里插入图片描述

画箭头

<!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>
    .arrow {
      display: inline-block;
      margin-right: 10px;
      /* 基础样式 */
      width: 0;
      height: 0;
      /* 基础样式 */
      border: 16px solid;
      /* border-color: transparent #CDDC39 transparent transparent; */
      border-color: red #CDDC39 red red;
      position: relative;
    }

    .arrow::after {
      content: "";
      position: absolute;
      /* 通过位移覆盖背景 */
      right: -20px;
      top: -16px;
      border: 16px solid;
      border-color: transparent #fff transparent transparent;
    }

    /*下*/
    .arrow.bottom {
      transform: rotate(270deg);
    }

    /*上*/
    .arrow.top {
      transform: rotate(90deg);
    }

    /*左*/
    .arrow.left {
      transform: rotate(180deg);
    }

    /*右*/
    .arrow.right {
      transform: rotate(0deg);
    }
  </style>
</head>

<body>
  <div class="box">
    <div class="box-inner">
      <div class="arrow bottom"></div>
      <div class="arrow top"></div>
      <div class="arrow right"></div>
      <div class="arrow left"></div>
    </div>
  </div>
</body>

</html>

在这里插入图片描述

图片尺寸自适应

<!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>
    .box,
    .box-vw {
      background-color: #f5f6f9;
      border-radius: 10px;
      overflow: hidden;
      margin-bottom: 15px;
    }

    .box:nth-of-type(2) {
      width: 260px;
    }

    /* vw方案 */
    .box-vw .img-container {
      width: 100vw;
      height: 66.620879vw;
      padding-bottom: inherit;
    }

    /* padding方案 */
    .img-container {
      width: 100%;
      height: 0;
      /* 图片的高宽比 */
      padding-bottom: 66.620879%;
    }

    img {
      width: 100%;
    }
  </style>
</head>

<body>
  <div class="box">
    <div class="img container"><img src="./html.gif" alt="" /></div>
  </div>
  <div class="box">
    <div class="img container"><img src="./html.gif" alt="" /></div>
  </div>
  <div class="box">
    <div class="img container"><img src="./html.gif" alt="" /></div>
  </div>
</body>

</html>

隐藏滚动条

<!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>
    .box {
      width: 375px;
      overflow: scroll;
    }

    .box-hide-scrollbar {
      margin-top: 50px;
    }

    /* 隐藏滚动条 */
    .box-hide-scrollbar::-webkit-scrollbar {
      display: none;
      /* Chrome Safari */
    }

    .box>div {
      margin-bottom: 15px;
      padding: 10px;
      background-color: #f5f6f9;
      border-radius: 6px;
      font-size: 12px;
      width: 750px;
    }
  </style>
</head>

<body>
  <div>
    <div class="box">
      <div>
        前端童鞋几乎每天都会和他们打交道，一起来总结我们的css幸福小片段吧！下次不用百度、不用谷歌，这里就是你的港湾。
      </div>
    </div>

    <div class="box box-hide-scrollbar">
      <div>
        你是否经常遇到图片底部莫名其妙多出来5px的间距，不急，这里有4种方式让它消失
      </div>
    </div>
  </div>
</body>

</html>

在这里插入图片描述

设置文本选中样式+禁止文本被选中

<!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>
    .choose::selection {
      color: #ffffff;
      background-color: #ff4c9f;
    }

    .chooseNo {
      user-select: none;
    }
  </style>
</head>

<body>
  <div>
    <div class="box">
      <p class="default">
        昨天遇见小学同学，没有想到他混的这么差--只放了一块钱到我的碗里
      </p>
      <p class="choose">
        今年情人节，不出意外的话，一个人过，出意外的话--去医院过
      </p>
      <p class="chooseNo">
        我自己搜索这样功能性的问题时，没有效果图基本上都是不想看的
      </p>
    </div>
  </div>
</body>

</html>

在这里插入图片描述

哀悼模式

<!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>
    body {
      filter: grayscale(1);
    }
  </style>
</head>

<body>
  <div class="container"></div>
</body>

</html>

在这里插入图片描述

rfalcon
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ffmpeg_libnvenc:这是FFmpeg的内部版本，支持NVIDIA的NVENC SIP块进行H.264硬件加速视频编码
05-06
FFmpeg自述文件 FFmpeg是用于处理多媒体内容（例如音频，视频，字幕和相关元数据）的库和工具的集合。 图书馆 libavcodec提供了更多编解码器的实现。 libavformat实现流协议，容器格式和基本的I / O访问。 libavutil包括散列器，解压缩器和其他实用程序函数。 libavfilter提供了一种通过一系列过滤器更改解码的音频和视频的方法。 libavdevice提供访问访问捕获和回放设备的抽象。 libswresample实现音频混合和重采样例程。 libswscale实现颜色转换和缩放例程。 工具 是一个命令行工具箱，用于处理，转换和流式传输多媒体内容。 是一种简约的多媒体播放器。 是一个简单的工具，用于检查多媒体内容。 其他小工具，例如aviocat ， ismindex和qt-faststart 。 文献资料 脱机文档可在doc /目录
【FFmpeg】做一个抖音/快手视频模板常用哪些功能
sayhelen的博客
07-27 1285
最近用ffmpeg做了一批视频模板供公司业务使用，结合shell脚本实现，简单说几个可以实现的和未解决的
Java加视频特效，实现伪原创
ak01_10的博客
11-28 1114
主要用ffmpeg，将视频拆分成一帧帧图片，然后分别修改图片，再重新合成视频 断断续续搞了几个月，先记录一下。 改天有空再整理工具类 public static void makeVideos(String videoPath,List<List<String>> txs, String srcmusic,String targetPath){ String tem="c:/temspace/"+FileUtil.getFileNameWithoutSuffix(vide
视频伪原创片头片尾 视频合并会改变md5
qq_38482776的博客
04-12 1465
视频伪原创片头片尾 视频合并会改变md5 曾经何时，芙蓉姐姐、凤姐是网红的代名词，而随着现在互联网的高速发展，越来越多的人也在互联网的世界里，找到了自己的位置，并做出了一番天地。 在短视频操作中，视频修改的作用显得尤为重要，这里介绍几款常见的工具 用户如果看到一些特别好的作品，会...
ffmpeg生成裸眼3D、伪3D视频
hailong29的博客
10-03 3256
2D视频转伪3D视频，可用平行眼直接观看
CSS学习之一 CSS样式的引入
12-12
2、type，总是设置为“text/css”，描述了使用link加载的数据类型；3、href，值为样式表的URL，可以是相对的也可以是绝对的；4、media，默认值是“all”，说明样式表要运用于表现的媒体，还有其他取值：aural（用于...
JS设置CSS样式的方式汇总
11-30
1. 直接设置style的属性 某些情况...2. 直接设置属性（只能用于某些属性，相关样式会自动识别） element.setAttribute('height', 100); element.setAttribute('height', '100px'); 3. 设置style的属性 element.setA
一些常用的css样式问题
07-14
一些常用的css样式问题
css样式冲突问题练习示例
09-25
css样式冲突的问题在使用过程中经常会遇到，那么你是怎么解决的呢？如果还不知道的话，那么可以参考下本
CSS样式重置代码
09-25
主要介绍了CSS样式重置代码，一般保存为reset.css修改了默认的css设置，方便布局与提高浏览器兼容性
OpenGL.Shader：志哥教你写一个滤镜直播客户端：仿3个抖音滤镜效果（4镜像/电击/灵魂出窍）
vx number：zzr_admin，拉入技术交流群。
11-23 1287
基于现有框架，深入浅出的解析抖音滤镜的实现过程。可能效果不如真·抖音，永远在学习的路上。
CSS绘制箭头
Supaopao的博客
07-28 676
实际需求中，很多时候都会有箭头的情况，只不过一开始总是喜欢找别人写好的，随着需求的增加，很难通过修改来满足需求，所以理解原理自己动手才是万难的根本解决办法。 一、绘制三角 容器： <div class="container"> </div> 样式： .container{ width: 0; height: 0; border: 50px solid; border-color: red yellow green blue; } 效
python视频转换字符动画_使用ffmpeg生成抖音中的像素视频(视频转字符动画)
weixin_39773158的博客
11-23 424
生成抖音中的像素视频(视频转字符动画)以下还需要需要ffmpeg视频处理工具合成音频 安装ffmpeg |ffmpeg基本用法引用类pip3.7 install numpy opencv-python Pillow代码实现# -*- coding:utf-8 -*-import os, cv2, subprocess, argparsefrom PIL import Image, ImageFon...
ffmpeg 开发代码
jxyb2012的博客
01-14 391
ffmpeg 开发代码说明ffmpeg日志系统ffmpeg文件与目录操作ffmpeg音视频操作音频提取视频提取 说明 vs2017 ffmpeg4.2.1 ffmpeg日志系统 #include <stdio.h> #include <libavutil/log.h> int main() { //日志级别：AV_LOG_ERROR / AV_LOG_WARNING / ...
ffmpeg模拟源
evsqiezi
02-27 363
测试源testsrc源滤镜生成一个测试视频源，包含有颜色模式，灰度值和时间戳。它在用于测试目的时很有用。下面的例子生成一个10秒的输出，30fps,共300帧，帧大小为 1280x720:# ./ffmpeg -f lavfi -itestsrc=duration=10:size=1280x720:rate=30 output.mpg使用 smptebars源滤镜的例子:# ./ffmpeg -f...
Python报错解决——‘ffmpeg‘ 不是内部或外部命令,也不是可运行的程序
m0_61787307的博客
04-03 2799
在调用ffmpeg包的时候发现这个乱码的报错：ffmpeg’ �����ڲ����ⲿ���Ҳ���ǿ����еij������������ļ���
python抖音涨粉代码_百万点赞怎么来？Python批量制作抖音的卡点视频原来这么简单！...
weixin_39942474的博客
11-24 1223
1目 标 场 景玩抖音的朋友都应该知道，最近「卡点视频」简直不要太火。抖音上很多大神也出了剪辑各种卡点视频的教程。实际上，利用很多手机 APP 或者 PR、FCPX 软件也可以制作卡点视频，但是剪辑效率都太慢。如果想实现一篮子剪辑素材，通过运行一段代码，得到一个卡点视频，这种感觉不要太爽。本篇文章的目的是利用 Python 从一篮子素材中快速地剪辑卡点小视频这一操作。2准 备 工 作首先，对视频的...
python ffmpeg推流报错
热门推荐
qq_44273666的博客
03-21 1万+
在pycharm里使用代码进行推流报错 报错如下： ‘ffmpeg’ �����ڲ����ⲿ���Ҳ���ǿ����еij������������ļ���Traceback (most recent call last): File “D:/GITHUB/EVM_LIGHT/video.py”, line 130, in p.stdin.write(frame.tostring())OS...
‘ffmped‘�����ڲ����ⲿ���Ҳ���ǿ����еij��� ���������ļ���
不起眼小菜菜的博客
10-29 2095
在使命令用行调用ffmped工具合成音视频时遇到输出问题
css样式xmind
最新发布
12-19
CSS 样式在 XMind 中非常重要，它可以帮助用户定制思维导图的外观和风格，让导图更加美观和易于阅读。 首先，用户可以通过 CSS 样式来调整节点的颜色、边框和字体样式，使得节点与整个导图的主题相呼应。这样可以让导图更加统一和美观。 其次，CSS 样式还可以调整连接线的样式和颜色，例如可以设置不同类型的连接线（直线、曲线、虚线等），或者改变连接线的颜色和粗细，从而更加清晰地显示不同节点之间的关联关系。 另外，通过 CSS 样式，用户还可以调整整个导图的背景颜色和图片，甚至可以自定义一些特殊效果，比如添加阴影、边框等，以增强导图的视觉吸引力。 最后，借助 CSS 样式，用户还可以在导图中添加动画效果，比如节点的渐变、缩放、旋转等，从而让导图更加生动、有趣。 总之，CSS 样式在 XMind 中发挥着非常重要的作用，它不仅可以帮助用户定制个性化的导图风格，还可以增强导图的表现力和吸引力，让人们更加愿意去阅读和理解导图中的内容。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值