高效前端---HTML/CSS优化

最新推荐文章于 2023-04-12 21:00:00 发布

maidu_xbd

最新推荐文章于 2023-04-12 21:00:00 发布

阅读量146

点赞数

分类专栏：高效前端

本文链接：https://blog.csdn.net/maidu_xbd/article/details/111290890

版权

高效前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1、能用html/css解决的问题就不要用js

因为html/css简单，意味着更快的开发速度，更小的维护成本，更好的体验。

（1）导航高亮

如导航栏高亮选择使用css中的hover选择器，而不用js中的mouseover

  /* 1.导航栏高亮选择使用css中的hover选择器 */
      .user:hover {
        color: red;
      }

（2）鼠标悬浮时显示

如鼠标悬浮于某菜单A时，其子菜单显示。技巧：把隐藏的子菜单作为菜单A的子元素或者相邻元素，方便用css控制

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>html/css优化</title>
    <style>
      .list {
        background-color: #ccc;
      }
      /* 1.导航栏高亮选择使用css中的hover选择器 */
      .user:hover {
        color: red;
      }
      /* prev + next 匹配所有紧接在prev元素后的next元素 */
      .user:hover + .menu {
        display: list-item;
      }
      .menu {
        display: none;
        list-style: none;
        border: 1px solid #ddd;
        width: 150px;
        background-color: rgb(145, 233, 204);
        /* position: relative; */
      }
      .menu:hover {
        display: list-item;
      }
      .menu li:hover {
        color: red;
      }
    </style>
  </head>
  <body>
    <h1>鼠标悬浮时显示</h1>
    <ul class="list">
      <li class="user">用户</li>
      <li class="menu">
        <ul>
          <li>账户设置</li>
          <li>登出</li>
        </ul>
      </li>
    </ul>
  </body>
</html>

（3）自定义radio/checkbox样式

借助css伪类：checked ，只要radio/checkbox是选中状态，该伪类就会生效。

<!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>
      input[type="checkbox"] {
        display: none;
      }
      .checkbox {
        color: #000;
      }
      input[type="checkbox"]:checked + .checkbox {
        color: blue;
      }
    </style>
  </head>
  <body>
    <label>
      <input type="checkbox" />

      <span class="checkbox">======click me======</span>
    </label>
  </body>
</html>

可以添加自定义的选中/未选中图标样式

2、优化HTML标签

选择合适的标签，如一段文字，用p标签，标题就用h1~h6标签，这样写更易读，并且有利于SEO

使用语义化标签，如header、main、section、footer、article、nav、aside

3、用CSS画一个三角形

可以用border画三角形，调整border-right,border-left,border-top,border-bottom的width来调整三角形的形状。

<!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>
      .triangle {
        border-right: 50px solid transparent;
        border-left: 50px solid transparent;
        /* border-top: 50px solid yellow; */
        border-bottom: 50px solid red;
        width: 0px;
        height: 0px;
        /* transform: rotate(180deg); */
        filter: drop-shadow(0 0 2px #999);
      }
    </style>
  </head>
  <body>
    <div class="triangle"></div>
  </body>
</html>

设置阴影【.triangle{filter:drop-shadow(0 0 2px #999)}】

4、尽可能地使用伪元素

伪元素是一个元素的子元素，是行内元素。

伪元素：before、after等

使用伪元素的好处：伪元素是伪的，意思是说无法用JS获取到伪元素，也不能增、删、改一个伪元素，用伪元素制作视觉上的效果，但是不会增加JS查DOM的负担。即使给页面添加了很多伪元素，也不会影响DOM效率。使用伪元素可以简化页面的html标签，使用方便。善于使用伪元素可以让页面更加简洁优雅，可以加快浏览器加载html文件，对SEO也是有帮助的。

使用伪元素画分割线

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>伪元素</title>
    <style>
      .drop-down {
        text-align: center;
        width: 500px;
        position: relative;
      }
      .drop-down::before,
      .drop-down::after {
        content: "";
        position: absolute;
        top: 12px;
        height: 1px;
        background-color: #ccc;
        width: 200px;
      }
      .drop-down::before {
        left: 0;
      }
      .drop-down::after {
        right: 0;
      }
    </style>
  </head>
  <body>
    <p class="drop-down">分割线</p>
  </body>
</html>

注意：把一个元素absolute定位后会强制把它变成块级元素【display:block】。

使用伪元素清楚浮动

浮动元素没有脱离正常的文档流，仍然占据正常文档流的空间。父元素添加【class="clearfix"】

.clearfix::after {
        content: "";
        display: table;
        clear: both;
      }

使用伪元素做特殊效果

结合css计数器

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>伪元素</title>
    <style>
      .choose {
        /* 创建或重置一个或多个计数器 ,通常是和counter-increment属性，content属性一起使用*/
        counter-reset: food;
      }
      .choose input:checked {
        counter-increment: food;
      }
      .count::before {
        content: counter(food);
      }
    </style>
  </head>
  <body>
    <div class="choose">
      <label><input type="checkbox" />苹果</label>
      <label><input type="checkbox" />栗子</label>
      <label><input type="checkbox" />香蕉</label>
      <label><input type="checkbox" />西红柿</label>
      <label><input type="checkbox" />西瓜</label>
    </div>
    <p>你选择了<span class="count"></span>种食物</p>
  </body>
</html>