网站设计效果实现与代码

1
root 是颜色变量
2
:root {
3
    --theme-accent-color: rgb(142, 212, 149);
4
    --theme-accent-color--rgb: 142, 212, 149;
5
    --theme-secondary-color: rgb(24, 127, 245);
6
    --theme-secondary-color--rgb: 24, 127, 245;
7
    --theme-text-color: rgb(44, 62, 80);
8
    --theme-text-color--rgb: 44, 62, 80;
9
    --theme-success-color: rgb(35, 165, 94);
10
    --theme-info-color: rgb(122, 157, 255);
11
    --theme-warn-color: rgb(255, 180, 4);
12
    --theme-danger-color: rgb(255, 114, 114);
13
    --theme-empty-color: rgb(185, 185, 185);
14
    --theme-link-color: rgb(63, 81, 181);
15
    --theme-accent-link-color: rgb(255, 255, 255);
16
    --theme-background-color: rgb(248, 248, 248);
17
    --theme-border-color: rgb(218, 218, 218);
18
    --theme-button-color: rgb(37, 180, 73);
19
    --theme-button-color--hover: #2bd155;
20
    --theme-button-color--active: #219e40;
21
    --theme-card-background-color: rgba(255, 255, 255);
22
    --theme-card-background-color--rgb: 255, 255, 255;
23
    --theme-card-box-shadow: 0 0 .5rem rgba(0, 0, 0, .1);
24
    --theme-card-box-shadow--hover: 0 0 .85rem rgba(0, 0, 0, .2);
25
    --theme-card-border-color: rgb(230, 230, 238);
26
    --theme-header-background-color: rgb(255, 255, 255);
27
    --theme-header-box-shadow-color: rgb(238, 239, 241);
28
    --theme-footer-top-color: rgb(251, 251, 252);
29
    --theme-footer-bottom-color: #e7e7ed;
30
    --theme-input-background-color: rgb(245, 245, 245);
31
    --theme-input-border-color: rgb(222, 222, 222);
32
    --theme-input-border-color--hover: #e1e1e1
33
}
34
h2:before {
35
    width: .25em;
36
    height: 70%;
37
    background-color: rgb(142, 212, 149);
38
}
39
h3:before {
40
    width: .2em;
41
    height: 60%;
42
    background-color: rgba(var(--theme-accent-color--rgb),.85);
43
}
44
h1:before,h2:before,h3:before,h4:before,h5:before,h6:before {
45
    content: "";
46
    display: block;
47
    position: absolute;
48
    top: 50%;
49
    left: 0;
50
    transform: translateY(-50%);
51
    border-radius: 1em;
52
}
53
h2,h3{
54
    font-weight: 700;
55
    padding: .2rem;
56
    color: var(--theme-text-color);
57
    position: relative;/* 重要元素 */
58
}
59
h2 {
60
    border: 0;
61
    font: inherit;
62
    font-size: 1.6em;
63
    margin: 1rem 0;
64
    padding-left: 1rem;
65
    vertical-align: baseline;
66
}
67
h3 {
68
    font-size: 1.3rem;
69
    margin: .5em 0;
70
    padding-left: .8rem;
71
}
72

73
<h2>标题</h2>

1
一：文字前面用一个标签，将标签设置成小方块
2
二、使用边框属性
3
三、使用伪元素:before
4
四、border-left: 2px solid red;

CSS如何在文字面前设置一个小方块？

1
<style type="text/css">
2
  .heimu {
3
    transition: color 0.13s linear;
4
    color: #252525;
5
    text-shadow: none;
6
    background-color: #252525;
7
  }
8
  span.heimu:hover, span.heimu:active {
9
    color: white;
10
}
11
</style>
12

13
<span title="你知道的太多了" class="heimu">黑幕</span>

1
https://zditect.com/article/21283930.html#:~:text=%E2%80%9C%E6%AD%A3%E7%A1%AE%E2%80%9D%E7%9A%84%E9%93%BE%E6%8E%A5%E6%A0%BC%E5%BC%8F%E6%98%AF%20file%3A%2F%2F%2F%20%E5%90%8E%E8%B7%9F%E6%96%87%E4%BB%B6%E7%9A%84%E8%B7%AF%E5%BE%84%EF%BC%8C%E5%9C%A8%E6%95%B4%E4%B8%AA%E8%BF%87%E7%A8%8B%E4%B8%AD%E4%BD%BF%E7%94%A8%E6%AD%A3%E6%96%9C%E6%9D%A0%EF%BC%9A,%5B%20%5Bfile%3A%2F%2F%2Fhome%2Fuser%2Fsomefile%5D%5D%20%E3%80%82

1
加前缀 file:///
2
空格用 %20
3
斜杠用正斜杠/ 别用反斜杠\
4
例如： file:///E:/Thunder%20download/Thunder%20download

1
https://www.cnblogs.com/tqtsanshi/p/16631636.html
2
使用云链转换：https://easylink.cc/

1
同页面
2
示例：
3
首先，使用 id 属性创建书签：
4
<h2 id="C4">第 4 章</h2>
5

6
然后，在同一页中添加指向书签的链接跳到 ("Chapter 4"):
7
<a href="#C4">跳转到第 4 章</a>
8

9
不同页面：
10
<a href="html_demo.html#C4">跳转到第 4 章</a>

More info: 页面书签

More info: HTML+CSS制作如图所示的网页导航栏

1
什么是图片懒加载
2
当访问一个页面的时候，先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径（这样就只需请求一次），当图片出现在浏览器的可视区域内时，才设置图片真正的路径，让图片显示出来。这就是图片懒加载。
3

4
通俗一点：
5
1、就是创建一个自定义属性data-src存放真正需要显示的图片路径，而img自带的src放一张大小为1 * 1px的图片路径。
6
2、当页面滚动直至此图片出现在可视区域时，用js取到该图片的data-src的值赋给src。
7
ps：自定义属性可以取任何名字
8

9
需要了解的问题
10
1、如何加载图片？
11
2、如何判断一个元素出现在视野中？
12

13
solution1: 如何加载图片
14
**只需要把data-src中的地址放到src的里面就好了**
15
code:
16

17
function loadImg($img){
18
//.attr(值)
19
//.attr(属性名称,值)
20
$img.attr('src', $img.attr('data-src')) //把data-src的值 赋值给src
21
$img.attr('data-isLoaded', 1) //已加载过的图片做标记
22
}
23
solution2:如何判断一个元素出现在视野中？
24
**元素相对顶点的距离(文字) <= 窗口高度 + 滚动的距离**
25
代码：
26

27
function isShow($node){
28
return $node.offset().top <= $(window).height() + $(window).scrollTop()
29
}

参考文章

1
data-*
2
data-* 全局属性 是一类被称为自定义数据属性的属性，它赋予我们在所有 HTML 元素上嵌入自定义数据属性的能力，并可以通过脚本在 HTML 与 DOM 表现之间进行专有数据的交换。

mdn data-*

1
<style type="text/css">
2
.developer-code-block {
3
    position: relative; /* 重要 */
4
    }
5
.developer-code-block .copy {
6
    color: #fff;
7
    background-color: #697191;
8
    font-size: .8em;
9
    padding: 0 0.5em;
10
    border-radius: 0.5em;
11
    z-index: 10;
12
    top: 0.3em;
13
    right: 0.2em;
14
    transition: opacity 0.3s ease-in-out;
15
    opacity: 0;
16
    position: absolute;/*重要*/
17
}
18
button {
19
    cursor: pointer;
20
    border: none;
21
    outline: 0;
22
}
23

24
</style>
25

26
<div class="developer-code-block"><pre class="prism-token token line-numbers language-javascript" tabindex="0"><code class="language-javascript" style="margin-left: 0px;">hexo clean
27
<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre><button class="copy">复制</button></div>

1
  <style type ="text/css">
2
  .prettyprint {
3
    margin: 0 0 24px;
4
    padding: 8px 16px 6px 56px;
5
    background-color: #f6f8fa;
6
    border: none;
7
  position: relative;
8
    overflow-y: hidden;
9
    overflow-x: auto;
10
}
11
  pre {
12
    position: relative;
13
  font-family: Consolas,Inconsolata,Courier,monospace;
14
    font-size: 14px;
15
    line-height: 22px;
16
    color: #000;
17
}
18
.prettyprint .pre-numbering {
19
    position: absolute;
20
    width: 48px;
21
    background-color: #eef0f4;
22
    top: 0;
23
    left: 0;
24
    margin: 0;
25
    padding: 8px 0;
26
    list-style: none;
27
    text-align: center;
28
}
29
  </style>
30

31
<pre class="prettyprint" data-index="1" name="code"><code class="hljs python has-numbering" onclick="mdcp.copyCode(event)" style="position: unset;">    <span class="hljs-function"><span class="hljs-keyword">def</span> <span class="hljs-title">parse</span><span class="hljs-params">(self , response)</span>:</span>
32
        <span class="hljs-keyword">for</span> item <span class="hljs-keyword">in</span> response.css(<span class="hljs-string">'.con_list_item *'</span>):
33
            jobMessage = item.css(<span class="hljs-string">'::text'</span>).extract()
34
            print(jobMessage)<div class="hljs-button {2}" data-title="复制"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li></ul>
35
</pre>

1
<style type="text/css">
2
rb[data-id="template-ruby"]::before,.template-ruby-hidden  {
3
    content: "";
4
    display: inline-block;
5
    width: 0;
6
    font-size: 0;
7
}
8
</style>
9
<p><ruby><rb data-id="template-ruby">绅士<span class="template-ruby-hidden">（</span></rb><rt style="font-size:0.75em">hentai</rt><span class="template-ruby-hidden">）</span></ruby>
10
</p>

1
code {
2
    font-family: "Courier New",sans-serif;
3
    font-size: 12px;
4
    padding: 0 5px;
5
    line-height: 1.8;
6
    margin: 0 3px;
7
    display: inline-block;
8
    overflow-x: auto;
9
    vertical-align: middle;
10
    border-radius: 3px;
11
    background-color: #f6f6f6;
12
    color: #e83e8c;
13
}

1
<script>
2
"use strict";
3
window.RLQ = window.RLQ || [];
4
window.RLQ.push(() => {
5
    $(() => {
6
        $(".navbox.largeNavbox:not(.largeNavboxExeced)").each((_, ele) => {
7
            const self = $(ele);
8
            self.addClass("largeNavboxExeced").find(".navbox-title").first().prepend(`<${'span'} class="largeNavbox-toggle"></${'span'}>`);
9
            const button = self.find(".largeNavbox-toggle");
10
            button.append(`[<${'a'}>全隐/全显</${'a'}>]`);
11
            button.find("a").on("click", () => {
12
                const buttons = self.find(".navbox-list .mw-collapsible-toggle");
13
                if (buttons.filter(".mw-collapsible-toggle-collapsed").length * 2 > buttons.length) {
14
                    buttons.filter(".mw-collapsible-toggle-collapsed").click();
15
                } else {
16
                    buttons.filter(":not(.mw-collapsible-toggle-collapsed)").click();
17
                }
18
            });
19
        });
20
        $(".largeNavbox-toggle").css({
21
            position: "absolute",
22
            "user-select": "none",
23
        }).find("a").css("cursor", "pointer");
24
    });
25
});
26
</script><style>
27
.largeNavbox-toggle {
28
    right: 6em
29
}
30
.skin-moeskin .largeNavbox-toggle {
31
    right: 4.5em
32
}

1
a {
2
  color: var(--text-link);
3

4
  &.external:after {
5
    background-color: #696969;
6
    content: "";
7
    display: inline-flex;
8
    height: 10px;
9
    margin-left: 4px;
10
    mask-image: url("https://cnb.cool/h1s97x/Pixy/-/raw/main/images/web-design-01-20261014.svg");
11
    mask-size: cover;
12
    width: 10px;
13
  }
14
}

cndjs Codrops 前端效果网站