发布于：2023-08-21更新于：2023-08-21

网站设计效果实现与代码

[使用伪元素]

root 是颜色变量
:root {
    --theme-accent-color: rgb(142, 212, 149);
    --theme-accent-color--rgb: 142, 212, 149;
    --theme-secondary-color: rgb(24, 127, 245);
    --theme-secondary-color--rgb: 24, 127, 245;
    --theme-text-color: rgb(44, 62, 80);
    --theme-text-color--rgb: 44, 62, 80;
    --theme-success-color: rgb(35, 165, 94);
    --theme-info-color: rgb(122, 157, 255);
    --theme-warn-color: rgb(255, 180, 4);
    --theme-danger-color: rgb(255, 114, 114);
    --theme-empty-color: rgb(185, 185, 185);
    --theme-link-color: rgb(63, 81, 181);
    --theme-accent-link-color: rgb(255, 255, 255);
    --theme-background-color: rgb(248, 248, 248);
    --theme-border-color: rgb(218, 218, 218);
    --theme-button-color: rgb(37, 180, 73);
    --theme-button-color--hover: #2bd155;
    --theme-button-color--active: #219e40;
    --theme-card-background-color: rgba(255, 255, 255);
    --theme-card-background-color--rgb: 255, 255, 255;
    --theme-card-box-shadow: 0 0 .5rem rgba(0, 0, 0, .1);
    --theme-card-box-shadow--hover: 0 0 .85rem rgba(0, 0, 0, .2);
    --theme-card-border-color: rgb(230, 230, 238);
    --theme-header-background-color: rgb(255, 255, 255);
    --theme-header-box-shadow-color: rgb(238, 239, 241);
    --theme-footer-top-color: rgb(251, 251, 252);
    --theme-footer-bottom-color: #e7e7ed;
    --theme-input-background-color: rgb(245, 245, 245);
    --theme-input-border-color: rgb(222, 222, 222);
    --theme-input-border-color--hover: #e1e1e1
}
h2:before {
    width: .25em;
    height: 70%;
    background-color: rgb(142, 212, 149);
}
h3:before {
    width: .2em;
    height: 60%;
    background-color: rgba(var(--theme-accent-color--rgb),.85);
}
h1:before,h2:before,h3:before,h4:before,h5:before,h6:before {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    border-radius: 1em;
}
h2,h3{
    font-weight: 700;
    padding: .2rem;
    color: var(--theme-text-color);
    position: relative;/* 重要元素 */
}
h2 {
    border: 0;
    font: inherit;
    font-size: 1.6em;
    margin: 1rem 0;
    padding-left: 1rem;
    vertical-align: baseline;
}
h3 {
    font-size: 1.3rem;
    margin: .5em 0;
    padding-left: .8rem;
}

<h2>标题</h2>

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

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

<style type="text/css">
  .heimu {
    transition: color 0.13s linear;
    color: #252525;
    text-shadow: none;
    background-color: #252525;
  }
  span.heimu:hover, span.heimu:active {
    color: white;
}
</style>

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

1
2

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

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

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

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

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

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

More info: 页面书签

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

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

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

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

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

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

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

参考文章

data-*属性

1
2

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

mdn data-*

copy button


<style type="text/css">
.developer-code-block {
    position: relative; /* 重要 */
    }
.developer-code-block .copy {
    color: #fff;
    background-color: #697191;
    font-size: .8em;
    padding: 0 0.5em;
    border-radius: 0.5em;
    z-index: 10;
    top: 0.3em;
    right: 0.2em;
    transition: opacity 0.3s ease-in-out;
    opacity: 0;
    position: absolute;/*重要*/
}
button {
    cursor: pointer;
    border: none;
    outline: 0;
}

</style>

<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
<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre><button class="copy">复制</button></div>

	<style type ="text/css">
	.prettyprint {
    margin: 0 0 24px;
    padding: 8px 16px 6px 56px;
    background-color: #f6f8fa;
    border: none;
	position: relative;
    overflow-y: hidden;
    overflow-x: auto;
}
	pre {
    position: relative;
	font-family: Consolas,Inconsolata,Courier,monospace;
    font-size: 14px;
    line-height: 22px;
    color: #000;
}	
.prettyprint .pre-numbering {
    position: absolute;
    width: 48px;
    background-color: #eef0f4;
    top: 0;
    left: 0;
    margin: 0;
    padding: 8px 0;
    list-style: none;
    text-align: center;
}
	</style>

<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>
        <span class="hljs-keyword">for</span> item <span class="hljs-keyword">in</span> response.css(<span class="hljs-string">'.con_list_item *'</span>):
            jobMessage = item.css(<span class="hljs-string">'::text'</span>).extract()
            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>
</pre>

字体上方标注

<style type="text/css">
rb[data-id="template-ruby"]::before,.template-ruby-hidden  {
    content: "";
    display: inline-block;
    width: 0;
    font-size: 0;
}
</style>
<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>
</p>

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

未知作用的JS脚本

<script>
"use strict";
window.RLQ = window.RLQ || [];
window.RLQ.push(() => {
    $(() => {
        $(".navbox.largeNavbox:not(.largeNavboxExeced)").each((_, ele) => {
            const self = $(ele);
            self.addClass("largeNavboxExeced").find(".navbox-title").first().prepend(`<${'span'} class="largeNavbox-toggle"></${'span'}>`);
            const button = self.find(".largeNavbox-toggle");
            button.append(`[<${'a'}>全隐/全显</${'a'}>]`);
            button.find("a").on("click", () => {
                const buttons = self.find(".navbox-list .mw-collapsible-toggle");
                if (buttons.filter(".mw-collapsible-toggle-collapsed").length * 2 > buttons.length) {
                    buttons.filter(".mw-collapsible-toggle-collapsed").click();
                } else {
                    buttons.filter(":not(.mw-collapsible-toggle-collapsed)").click();
                }
            });
        });
        $(".largeNavbox-toggle").css({
            position: "absolute",
            "user-select": "none",
        }).find("a").css("cursor", "pointer");
    });
});
</script><style>
.largeNavbox-toggle {
    right: 6em
}
.skin-moeskin .largeNavbox-toggle {
    right: 4.5em
}

设置超链接后的图标icon

a {
  color: var(--text-link);

  &.external:after {
    background-color: #696969;
    content: "";
    display: inline-flex;
    height: 10px;
    margin-left: 4px;
    mask-image: url("https://developer.mozilla.org/static/media/external.ad7e40a95bc765963433.svg");
    mask-size: cover;
    width: 10px;
  }
}

cndjs
Codrops 前端效果网站

本文采用 CC BY-NC-SA 4.0 许可协议，转载请注明出处。

网站设计 效果实现与代码

网站设计效果实现与代码