V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
honk
V2EX  ›  分享发现

超有意思的 html 頁面

  •  2
     
  •   honk · 2020-10-19 22:13:27 +08:00 · 4191 次点击
    这是一个创建于 1496 天前的主题,其中的信息可能已经有所发展或是发生改变。
    17 条回复    2020-10-20 19:28:34 +08:00
    ashine
        1
    ashine  
       2020-10-19 22:21:56 +08:00
    没发现哪里特别的,不就是几个 css 的特性吗
    wanacry
        2
    wanacry  
       2020-10-19 22:23:04 +08:00 via iPhone
    有意思的点在哪?
    opengps
        3
    opengps  
       2020-10-19 22:26:32 +08:00   ❤️ 1
    谁解读下用法,html 代码可见但是却不影响只选中文本,我是第一次见
    JmmBite
        4
    JmmBite  
       2020-10-19 22:30:40 +08:00
    ```css
    html::before {content:'<html>'}
    html::after {content:'</html>'}
    head::before {content:'<head>'}
    head::after {content:'</head>'}
    title::before {content:'<title>'}
    title::after {content:'</title>'}
    body::before {content:'<body>'}
    body::after {content:'</body>'}
    h1::before {content:'<h1>'}
    h1::after {content:'</h1>'}
    h2::before {content:'<h2>'}
    h2::after {content:'</h2>'}
    p::before {content:'<p>'}
    p::after {content:'</p>'}
    pre::before {content:'<pre>'}
    pre::after {content:'</pre>'}
    code::before {content:'<code>'}
    code::after {content:'</code>'}
    a::before {content:'<a>'}
    a::after {content:'</a>'}
    aside::before {content:'<aside>'}
    aside::after {content:'</aside>'}
    blockquote::before {content:'<blockquote>'}
    blockquote::after {content:'</blockquote>'}
    em::before {content:'<em>'}
    em::after {content:'</em>'}
    strong::before {content:'<strong>'}
    strong::after {content:'</strong>'}
    ```
    xycool
        5
    xycool  
       2020-10-19 22:31:06 +08:00
    @opengps #3 套娃用法,仔细查看一个标签的样式就能发现,比如:
    ```h1::before {content:'<h1>'}
    h1::after {content:'</h1>'}```
    finian
        6
    finian  
       2020-10-19 22:31:43 +08:00
    有意思的地方就是源码和展示的内容是一样的
    yuzo555
        7
    yuzo555  
       2020-10-19 22:33:31 +08:00   ❤️ 2
    用 CSS 的 content 属性实现在常见元素的 before 和 after 加上文字开关;
    (@opengps 而 content 属性显示内容是无法被选中的)

    然后给 * 所有元素加上 display:block,这样就实现了 <body> 内部的 <style> 内部内容也能显示出来。
    des
        8
    des  
       2020-10-19 22:34:29 +08:00
    这不算有意思吧,来看看这个? sojo.im
    honk
        9
    honk  
    OP
       2020-10-19 22:43:56 +08:00 via Android
    @des 闪瞎了我的眼
    martinsu
        10
    martinsu  
       2020-10-20 00:17:00 +08:00
    @des Edge 提示风险
    kaiki
        11
    kaiki  
       2020-10-20 00:29:46 +08:00
    可惜 link 用的 attr,实际上是在 css 里面把这个 link 重写了一遍
    sinv
        12
    sinv  
       2020-10-20 01:50:17 +08:00 via Android
    @des Hacked by RR
    Mutoo
        13
    Mutoo  
       2020-10-20 05:05:25 +08:00 via iPhone
    我的主页也是类似的效果,只不过是 javascript 实现: https://mutoo.im
    abcdabcd987
        14
    abcdabcd987  
       2020-10-20 06:29:03 +08:00
    Ritter
        15
    Ritter  
       2020-10-20 09:39:10 +08:00
    菜狗有个问题 这样每个标签前后都加 before after 不累吗 还是有工具可以批量生成
    honk
        16
    honk  
    OP
       2020-10-20 13:01:14 +08:00 via Android
    @Ritter 只是 CSS 特性的取巧式利用。
    真实项目不可能这样用的
    gxgxxn
        17
    gxgxxn  
       2020-10-20 19:28:34 +08:00
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2656 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 22ms · UTC 15:20 · PVG 23:20 · LAX 07:20 · JFK 10:20
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.