超有意思的 html 頁面

2020-10-19 22:13:27 +08:00
 honk

https://secretgeek.github.io/html_wysiwyg/html.html

4192 次点击
所在节点    分享发现
17 条回复
ashine
2020-10-19 22:21:56 +08:00
没发现哪里特别的,不就是几个 css 的特性吗
wanacry
2020-10-19 22:23:04 +08:00
有意思的点在哪?
opengps
2020-10-19 22:26:32 +08:00
谁解读下用法,html 代码可见但是却不影响只选中文本,我是第一次见
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
2020-10-19 22:31:06 +08:00
@opengps #3 套娃用法,仔细查看一个标签的样式就能发现,比如:
```h1::before {content:'<h1>'}
h1::after {content:'</h1>'}```
finian
2020-10-19 22:31:43 +08:00
有意思的地方就是源码和展示的内容是一样的
yuzo555
2020-10-19 22:33:31 +08:00
用 CSS 的 content 属性实现在常见元素的 before 和 after 加上文字开关;
(@opengps 而 content 属性显示内容是无法被选中的)

然后给 * 所有元素加上 display:block,这样就实现了 <body> 内部的 <style> 内部内容也能显示出来。
des
2020-10-19 22:34:29 +08:00
这不算有意思吧,来看看这个? sojo.im
honk
2020-10-19 22:43:56 +08:00
@des 闪瞎了我的眼
martinsu
2020-10-20 00:17:00 +08:00
@des Edge 提示风险
kaiki
2020-10-20 00:29:46 +08:00
可惜 link 用的 attr,实际上是在 css 里面把这个 link 重写了一遍
sinv
2020-10-20 01:50:17 +08:00
@des Hacked by RR
Mutoo
2020-10-20 05:05:25 +08:00
我的主页也是类似的效果,只不过是 javascript 实现: https://mutoo.im
abcdabcd987
2020-10-20 06:29:03 +08:00
Ritter
2020-10-20 09:39:10 +08:00
菜狗有个问题 这样每个标签前后都加 before after 不累吗 还是有工具可以批量生成
honk
2020-10-20 13:01:14 +08:00
@Ritter 只是 CSS 特性的取巧式利用。
真实项目不可能这样用的
gxgxxn
2020-10-20 19:28:34 +08:00

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/716508

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX