html和css（二）

最新推荐文章于 2024-07-10 10:34:29 发布

haiyangfsg

最新推荐文章于 2024-07-10 10:34:29 发布

阅读量105

点赞数

分类专栏：面试文章标签：面试

本文链接：https://blog.csdn.net/haiyangfsg/article/details/115044426

版权

面试专栏收录该内容

7 篇文章 0 订阅

订阅专栏

HTML的三大基本元素是html、head、body也可说是html文档、头部、身体。

VScode的优势

轻量级编辑器
VScode是一款轻量级的编辑器，安装包非常小，而且启动速度非常快。虽然这对实际的项目没什么大的帮助，但是可以在无形间提高我们的用户体验。
丰富的插件系统
VScode有着非常丰富的插件系统，无论你是编辑HTML、CSS、JS、TS、Vue、React等前端代码，还是JAVA、Python等后端代码。我们都可以找到相对应的插件，让我们如虎添翼，更快速地完成项目。
代码跟踪功能
我们是一个团队，项目中往往都是协作开发，绝大多数情况下要使用Git来管理我们的代码，这个时候VScode会跟踪我们的代码，非常明显地为我们标注：你更改了那些文件，文件中你修改可第几行的代码，让我们对自己编写的代码一目了然。

网页如何实现自适应

移动端，在网页代码的头部，加入一行viewport元标签。

<meta name="viewport" content="width=device-width, initial-scale=1" />

CSS3 媒体查询 media queries，通过匹配不同屏幕设备的特征,让不同特征下的CSS代码生效。
flex+rem布局，flex弹性布局，用来为盒状模型提供最大的灵活性，可以简便、完整、响应式地实现各种页面布局

前端html+css+js弹窗的实现

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>弹窗</title>

    <style>
      body {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 17px;
        text-align: 1.5;
      }

      #open_btn {
        background: #009900;
      }

      #background {
        display: none;
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
      }

      #div1 {
        background: #eeeeee;
        width: 70%;
        z-index: 1;
        margin: 12% auto;
        overflow: auto;
      }

      span {
        color: white;
        padding-top: 12px;
        cursor: pointer;
        padding-right: 15px;
      }

      #div2 {
        background: #eeeeee;
        margin: auto;
        height: 300px;
        padding: 0 20px;
      }

      #close {
        padding: 5px;
        background: #5cd31b;
      }

      #close-button {
        float: right;
        font-size: 30px;
      }

      #foot {
        padding: 5px 0;
        text-align: center;
        background: #5cd31b;
        color: white;
      }

      h2 {
        margin: 10px 0;
        color: white;
        padding-left: 15px;
      }

      h3 {
        margin: 0 0px;
        padding-top: 15px;
      }
    </style>
  </head>
  <body>
    <button id="open_btn" class="btn">弹窗</button>
    <!-- 弹窗内容开始 -->
    <div id="background" class="back">
      <div id="div1" class="content">
        <div id="close">
          <span id="close-button">×</span>
          <h2>弹窗头部</h2>
        </div>
        <div id="div2">
          <h3>弹窗标题</h3>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste,
            ullam, nisi, enim laboriosam ea cum necessitatibus ipsum cupiditate
            neque soluta qui autem odit eligendi blanditiis voluptatem repellat
            suscipit quia perspiciatis.
          </p>
        </div>
        <h3 id="foot">底部内容</h3>
      </div>
    </div>

  </body>

  <script>
    var btn = document.getElementById("open_btn");
    var div = document.getElementById("background");
    var close = document.getElementById("close-button");

    btn.onclick = function show() {
      div.style.display = "block";
    };

    close.onclick = function close() {
      div.style.display = "none";
    };

    window.onclick = function close(e) {
      if (e.target == div) {
        div.style.display = "none";
      }
    };
  </script>
</html>

效果图
在这里插入图片描述
css性能优化

异步加载CSS

CSS会阻塞渲染，在CSS文件请求、下载、解析完成之前，浏览器将不会渲染任何已处理的内容。有时，这种阻塞是必须的，因为我们并不希望在所需的CSS加载之前，浏览器就开始渲染页面。那么将首屏关键CSS内联后，剩余的CSS内容的阻塞渲染就不是必需的了，可以使用外部CSS，并且异步加载。

<link rel="preload" href="mystyles.css" as="style" onload="this.rel='stylesheet'">

文件压缩

如webpack、gulp/grunt、rollup等也都支持CSS压缩功能。压缩后的文件能够明显减小，可以大大降低了浏览器的加载时间。

减少重排

避免这些js操作
改变font-size和font-family
改变元素的内外边距
通过JS改变CSS类
通过JS获取DOM元素的位置相关属性（如width/height/left等）
CSS伪类激活

不要使用@import

首先，使用@import引入CSS会影响浏览器的并行下载。使用@import引用的CSS文件只有在引用它的那个css文件被下载、解析之后，浏览器才会知道还有另外一个css需要下载，这时才去下载，然后下载后开始解析、构建render tree等一系列操作。这就导致浏览器无法并行下载所需的样式文件。

css选择器

选择器用法
id选择器 #myid
类选择器 .myclassname
标签选择器 div,h1,p
相邻选择器 h1+p
子选择器 ul > li
后代选择器 li a
通配符选择器 *
属性选择器 a[rel=“external”]
伪类选择器 a:hover, li:nth-child

haiyangfsg

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html和css（二）

HTML的三大基本元素是html、head、body也可说是html文档、头部、身体。VScode的优势轻量级编辑器VScode是一款轻量级的编辑器，安装包非常小，而且启动速度非常快。虽然这对实际的项目没什么大的帮助，但是可以在无形间提高我们的用户体验。丰富的插件系统VScode有着非常丰富的插件系统，无论你是编辑HTML、CSS、JS、TS、Vue、React等前端代码，还是JAVA、Python等后端代码。我们都可以找到相对应的插件，让我们如虎添翼，更快速地完成项目。代码跟踪功能
复制链接

扫一扫