Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

前端冷知识 #1

Open
ruanshr opened this issue Nov 28, 2017 · 0 comments
Open

前端冷知识 #1

ruanshr opened this issue Nov 28, 2017 · 0 comments

Comments

@ruanshr
Copy link
Owner

ruanshr commented Nov 28, 2017 •
edited
Loading

1、HTML 标签
<base> 标签为页面上的所有链接规定默认地址或默认目标，通常放在head标签里面。
<base target="_blank" />

2、设置/获取网站title部分的icon图标
<link rel="shortcut icon" type="image/x-icon" href="ico图片位置" />

3、浏览器地址栏运行HTML代码
比如在地址栏输入以下代码然后回车运行，会出现指定的页面内容
data:text/html,<h1>Hello, world!</h1>

4、把浏览器当编辑器
还是浏览器地址栏上做文章，将以下代码贴到地址栏运行后浏览器变成了一个原始而简单的编辑器，与Windows自带的notepad一样。
data:text/html,,<html contenteditable>

5、实时编辑CSS
通过设置style标签的display:block样式可以让页面的style标签显示出来，并且加上contentEditable属性后可以让样式成为可编辑状态，更改后的样式效果也是实时更新呈现的
<style style="display:block" contentEditable>
body { color: blue }
</style>

6、多重边框
利用重复指定box-shadow来达到多个边框的效果
box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.2), 0 0 0 12px rgba(0, 0, 0, 0.2), 0 0 0 18px rgba(0, 0, 0, 0.2), 0 0 0 24px rgba(0, 0, 0, 0.2);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@ruanshr