易语言 JavaScript 对象取类信息

转载

mob64ca13fc5fb6 2025-01-07 16:51:20

文章标签 css html5 html ico 文章分类 JavaScript 前端开发

文章目录

css实现下拉三角形
清除浮动的几种方式
背景图片平铺问题
让两个块级元素显示在同一行
css水平居中
css垂直居中
css实现水平垂直居中
css去除重叠边框
实现文字绕图片环绕排列，折行后对齐
项目中实现奇偶项不同的样式
消除display设置为inline-block产生的间距
css设置样式截取字符串并添加省略号
用css样式设计图片的模糊效果
css绝对定位脱离文档流实现特殊布局
css样式通过调节z-index值来调整元素显示层级
mode属性
flex生效问题
利用css属性设置一个hover遮罩
jquery实现hover不相干
利用swiper实现无缝隙+动效
swiper实现无限循环+无动效
css控制文字图片一行居中显示
设置一个hover下拉菜单并实现动态效果
两栏布局（flex）
footer在可视底部+跟在content最后
处理文本超长问题（单行+多行）
处理动态内容（保护边界）
flex弹性布局
grid网格布局
解决图片5px间距
元素高度跟随窗口
修改input placeholder的样式
巧用not选择器
使用flex布局实现自动固定底部
使用caret-color改变光标颜色
移除type="number"尾部的箭头
画三角形
画箭头
图片尺寸自适应
隐藏滚动条
设置文本选中样式+禁止文本被选中
哀悼模式

之前有人评论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>

易语言 JavaScript 对象取类信息_html5

第二种实现形式

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

易语言 JavaScript 对象取类信息_html5_02

清除浮动的几种方式

四种方式: 链接.

背景图片平铺问题

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

易语言 JavaScript 对象取类信息_html_03

易语言 JavaScript 对象取类信息_html5_04

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

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

易语言 JavaScript 对象取类信息_css_05

易语言 JavaScript 对象取类信息_ico_06

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>

易语言 JavaScript 对象取类信息_html_07

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>

易语言 JavaScript 对象取类信息_ico_08

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>

易语言 JavaScript 对象取类信息_css_09

易语言 JavaScript 对象取类信息_html_10

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

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

易语言 JavaScript 对象取类信息_html5_11

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

<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>
  <!-- 
    资料地址：
    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>

效果图：

易语言 JavaScript 对象取类信息_html5_12

用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>

效果图：

易语言 JavaScript 对象取类信息_html5_13

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>

效果图：让一个图片固定在另一个图片的某个部分

易语言 JavaScript 对象取类信息_ico_14

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>

效果图：

易语言 JavaScript 对象取类信息_html_15

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遮罩

易语言 JavaScript 对象取类信息_ico_16

易语言 JavaScript 对象取类信息_css_17

<!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不相干

易语言 JavaScript 对象取类信息_html5_18

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

易语言 JavaScript 对象取类信息_html5_19

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

易语言 JavaScript 对象取类信息_ico_20

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

易语言 JavaScript 对象取类信息_ico_21

设置一个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>

效果图：

易语言 JavaScript 对象取类信息_ico_22

两栏布局（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>

易语言 JavaScript 对象取类信息_ico_23

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

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

易语言 JavaScript 对象取类信息_ico_24

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>

易语言 JavaScript 对象取类信息_css_25

元素高度跟随窗口

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

易语言 JavaScript 对象取类信息_css_26

巧用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>

易语言 JavaScript 对象取类信息_html5_27

使用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>

易语言 JavaScript 对象取类信息_css_28

画三角形

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

易语言 JavaScript 对象取类信息_css_29

画箭头

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

易语言 JavaScript 对象取类信息_html5_30

图片尺寸自适应

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

易语言 JavaScript 对象取类信息_ico_31

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

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

易语言 JavaScript 对象取类信息_css_32

哀悼模式

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

易语言 JavaScript 对象取类信息_html_33

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。

上一篇：freemarker获取map中某个key对应的对象

下一篇：pycharm 镜像源

提问和评论都可以，用心的回复会被更多人看到评论

发布评论

相关文章

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯