讓你大跌眼鏡的瘋狂 HTML 和 CSS 技巧
作者：dev
今天，分享一個讓你大開眼界的技巧。通過使用這個技巧，你可以將整個網頁變成一個CSS編輯器。沒錯，你從未見過這種方法。當我第一次嘗試時，我完全被震驚到了。
今天，分享一個讓你大開眼界的技巧。通過使用這個技巧，你可以將整個網頁變成一個CSS編輯器。沒錯，你從未見過這種方法。當我第一次嘗試時，我完全被震驚到了。
現在，讓我們開始吧！
步驟 1
首先，創建一個基礎的HTML骨架，并在<body>標簽內嵌入一個<style>標簽。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Tricks</title>
</head>
<body>
<style>
html{
font-size: 15px;
}
</style>
</body>
</html>步驟 2
接下來，我們進入技巧的核心。為<style>標簽添加一個內聯CSS樣式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Tricks</title>
</head>
<body>
<style style="display: block;">
html{
font-size: 15px;
}
</style>
</body>
</html>啟動你的實時服務器。
步驟 3
在<style>標簽中加入contenteditable屬性。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Tricks</title>
</head>
<body>
<style contenteditable style="display: block;">
html{
font-size: 15px;
}
</style>
</body>
</html>
圖片
現在，你可以直接在網頁上編寫任何CSS樣式，而所有的CSS屬性都會立即生效。
責任編輯：武曉燕
來源：
大遷世界
