ctrl+shift+p，调出configure display language，选择en或zh，若没有则选择安装使用其它语言，则直接呼出扩展程序搜索界面，选择，然后安装，重启即可。

shift+alt+向下箭头，快速复制一行

背景图设置：

一张清晰漂亮的背景图片能给网页加分不少，设计师也经常会给页面的背景使用大图，我们既不想图片因为不同分辨率图片变形，也不希望当在大屏的情况下，背景有一块露白，简而言之，就是实现能自适应屏幕大小又不会变形的背景大图，而且背景图片不会随着滚动条滚动而滚动。

用CSS实现真的很简单很简单，下面我们来看一下第一种方法具体的代码：

HTML代码：

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="content-type" content="text/html;charset=utf-8"/>

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<title>title</title>

</head>

<body>

<div class="wrapper">

<!--背景图片-->

<div id="web_bg" style="background-image: url(./img/bg.jpg);"></div>

<!--其他代码 ... -->

</div>

</body>

</html>

CSS代码：

#web_bg{

position:fixed;

top: 0;

left: 0;

width:100%;

height:100%;

min-width: 1000px;

z-index:-10;

zoom: 1;

background-color: #fff;

background-repeat: no-repeat;

background-size: cover;

-webkit-background-size: cover;

-o-background-size: cover;

background-position: center 0;

}

你看，代码就是这么简单。

下面，我们来分析一下，css中每句代码的作用是什么：

position:fixed;

top: 0;

left: 0;

这三句是让整个div固定在屏幕的最上方和最左方

width:100%;

height:100%;

min-width: 1000px;

上面前两句是让整个div跟屏幕实现一模一样的大小，从而达到全屏效果，而min-width是为了实现让屏幕宽度在1000px以内时，div的大小保持不变，也就是说在这种情况下，缩放屏幕宽度时，图片不要缩放（只有在1000px以内才有效）。

z-index:-10;

这个的目的是让整个div在HTML页面中各个层级的下方，正常情况下，第一个创建的层级z-index的值是0，所以如果我们这里写成-1也可以实现，不过这里写-10是确保整个div在最下面，因为如果页面中层级太多了，有的时候用-1不一定在最下面，但如果写成-100这样大数字的也没有什么意义。用index:-10 以此能达到看上去像背景图片，其实是一个最普通的div，只是层级关系变了，才让人看上去看是背景图片。

zoom: 1;

这个的目的是为了兼容IE浏览器

background-repeat: no-repeat;

上面这个是背景不要重复

background-size: cover;

-webkit-background-size: cover;

-o-background-size: cover;

上面三句是一个意思，就是让图片随屏幕大小同步缩放，但是有部分可能会被裁切，不过不至于会露白，下面两句是为chrome和opera浏览器作兼容。

background-position: center 0;

上面这句的意思就是图片的位置，居中，靠左对齐

第二种方法的代码

HTML代码如下：

<div class="about-me">

![](./images/about-me.jpg)

<a href="http://iheima.com" class="introduction">

<h3>About me</h3>

</a>

</div>

scss代码如下：

.about-me {

position: relative;

min-width: 1480px;

width: 100%;

height: 520px;

overflow: hidden;

img.me {

position: absolute;

bottom: 0;

left: 0;

width: 100%;

height: auto;

min-height: 520px;

z-index: 0;

}

.introduction {

display: block;

position: absolute;

left: 0;

bottom: 0;

right: 0;

top: 0;

width: 100%;

height: 100%;

color: #fff;

background: rgba(0, 0, 0, .6);

z-index: 2;

cursor: pointer;

h3 {

margin: 100px auto 140px;

width: 170px;

height: 90px;

line-height: 90px;

font-size: 36px;

border-bottom: 2px solid #0b6d99;

}

}

}

dl~dt~dd标签使用：

<dl>
<dt>列表标题</dt>
<dd>列表内容</dd>
<dd>列表内容</dd>
...
</dl>

语法解释：
首先dt和dd是放于dl标签内，标签dt与dd处于dl下相同级。也就是dt不能放入dd内，dd不能放入dt内。在dl下，dt与dd处于同级标签。DD标签可以若干。同时不能不加dl地单独使用dt标签或dd标签。

前端学习笔记系列一：15vscode汉化、快速复制行、网页背景图有效设置、 dl~dt~dd标签使用的更多相关文章

  1. 前端学习笔记系列一：11@vue/cli3.x中实现跨域的问题

    由于浏览器的同源访问策略,vue开发时前端服务器通常与后端api服务器并非是相同的服务器,因此需要使用一个代理服务器实现跨域访问.在@vue/cli3.x根目录下创建一个vue.config.js文件 ...

  2. 前端学习笔记系列一：5 在项目中引入阿里图标icon

    进入到阿里的图标库网站,里面有上百万种icon,https://www.iconfont.cn,需要注册一个帐号,然后进入到这个页面,在这里点击右下角的带加号的图标,创建一个新的项目,名称与你要使用图 ...

  3. 前端学习笔记系列一：14 vue3.X中alias的配置

    第一步: 第二步: // vue.config.js module.exports = { configureWebpack: { resolve: { alias: { 'assets': '@/a ...

  4. 前端学习笔记系列一：13new Date()的参数

    前两天发现手机页面的倒计时在Android上正常显示,在iPhone却不能显示. 后来又发现在ff和ie里也不显示.(以前只在chrome里看过,显示正常). 后来同事改了new Date()里字符串 ...

  5. 前端学习笔记系列一：12 js中获取时间new date()的用法

    获取时间: 1  var myDate = new Date();//获取系统当前时间 获取特定格式的时间: 1 myDate.getYear(); //获取当前年份(2位) 2 myDate.get ...

  6. 前端学习笔记系列一：9 js中数组的拷贝

    拷贝分为浅拷贝和深拷贝,在JavaScript中能够实现这两种拷贝的方式也是多种多样.以下是一维数组实现深拷贝和浅拷贝的各种方式. 一.浅拷贝 1.赋值 赋值是最直接的一种浅拷贝. let arr3 ...

  7. 前端学习笔记系列一：10整体移动vscode代码块、VSCode 使用 stylus，配置格式化设置、在vue项目中引入bootstrap

    1.整体移动vscode代码块 凭借操作的经验我们能够轻松地知道将代码整体往右移只需选中代码按Tab键即可.其实往左移也很简单: 选中之后按下 shift+Tab键 即可. 2.VSCode 使用 s ...

  8. 前端学习笔记系列一：8 <noscript>…</noscript>，网站路径，vscode跳出右括号

    1.<noscript>…</noscript> 在body中使用此段代码,可识别 <script> 标签但无法支持其中的脚本的浏览器. 此段代码意思为如果浏览器不 ...

  9. 前端学习笔记系列一：7 在vscode中根据vue等模板生成代码

    目标:希望每次新建.vue文件后,VSCODE能够根据配置,自动生成我们想要的内容. 方法:打开VSCODE编辑器,依次选择“文件 -> 首选项 -> 用户代码片段”,此时,会弹出一个搜索 ...

随机推荐

  1. spark sql 访问mysql数据库

    pom.xml <dependency> <groupId>mysql</groupId> <artifactId>mysql-connector-ja ...

  2. linux--网络管理-ifconfig,route,netstat,ip,ss,dns,主机名网卡名修改bond

    cat /etc/services 查看常见端口对应的服务 查一查某个端口号,是哪个进程在用  lsof  -i :6010 49152-65535:动态端口或私有端口,客户端程序随机使用的端口  其 ...

  3. linux和windows系统的区别

    在21世纪的今天,互联网可以说是当代发展最为迅速的行业,举个很简单的例子,现在的我们不论什么年龄阶层,几乎人手都有一部手机,上面的某博,某音,末手等软件,更是受到多数人的热爱,并且人们不仅仅用其来消遣 ...

  4. 【PAT甲级】1061 Dating (20 分)

    题意: 给出四组字符串,前两串中第一个位置相同且大小相等的大写字母(A~G)代表了周几,前两串中第二个位置相同且大小相等的大写字母或者数字(0~9,A~N)代表了几点,后两串中第一个位置相同且大小相等 ...

  5. php海量架构

    架构 Varnish+nginx+php(FastCGI)+MYSQL5+MenCache+MenCachedb 说明:我在设计系统架构时,进行了大胆的尝试,只用6台Web服务器,达到了可承受4000 ...

  6. 记数问题(0)<P2013_1>

    记数问题 (count.cpp/c/pas) [问题描述]  试计算在区间1到n的所有整数中,数字x(0≤x≤9)共出现了多少次?例如,在1到11中,即在1.2.3.4.5.6.7.8.9.10.11 ...

  7. MVC 拦截器

    https://www.cnblogs.com/blosaa/archive/2011/06/02/2067632.html

  8. 计算机网络历史与基本概念&分层与参考模型（TCP/IP与OSI）&通信过程

    Definition: 计算机网络:使用单一技术相互连接的自主计算机的互联集合. 单台计算机独立自主(不受制于其他计算机),连接介质可以使光纤.铜线也可以是微波.红外.卫星. 互联网络(Interne ...

  9. Codeforces #617 (Div. 3)B. Food Buying

    Mishka wants to buy some food in the nearby shop. Initially, he has ss burles on his card. Mishka ca ...

  10. c++继承：公有、私有、保护（对应p12访问限制）

    公有继承(public).私有继承(private).保护继承(protected)是常用的三种继承方式. 1. 公有继承(public) 公有继承的特点是基类的公有成员和保护成员作为派生类的成员时, ...