设为首页收藏本站
切换到窄版

爬行的蜗牛

 找回密码
 立即注册

QQ登录

只需一步，快速开始

搜索
热搜: golang Linux PHP
爬行的蜗牛»论坛 › 爬行的蜗牛 › 其他相关知识 › HTML+CSS › 让你大跌眼镜的疯狂 HTML 和 CSS 技巧
返回列表 发新帖
查看: 57|回复: 0

让你大跌眼镜的疯狂 HTML 和 CSS 技巧

[复制链接]
yycvip

168

主题

47

回帖

1474

积分

管理员

积分
1474
发表于 2025-9-26 11:40:44 | 显示全部楼层 |阅读模式

今天，分享一个让你大开眼界的技巧。通过使用这个技巧，你可以将整个网页变成一个CSS编辑器。没错，你从未见过这种方法。当我第一次尝试时，我完全被震惊到了。

现在，让我们开始吧！

步骤 1

首先，创建一个基础的HTML骨架，并在<body>标签内嵌入一个<style>标签。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>HTML Tricks</title>
  7. </head>
  8. <body>
  9.     <style>
  10.         html{
  11.             font-size: 15px;
  12.         }
  13.     </style>
  14. </body>
  15. </html>
复制代码
步骤 2

接下来，我们进入技巧的核心。为<style>标签添加一个内联CSS样式。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>HTML Tricks</title>
  7. </head>
  8. <body>
  9.     <style style="display: block;">
  10.         html{
  11.             font-size: 15px;
  12.         }
  13.     </style>
  14. </body>
  15. </html>
复制代码

启动你的实时服务器。

步骤 3

在<style>标签中加入contenteditable属性。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>HTML Tricks</title>
  7. </head>
  8. <body>
  9.     <style contenteditable style="display: block;">
  10.         html{
  11.             font-size: 15px;
  12.         }
  13.     </style>
  14. </body>
  15. </html>
复制代码
640 (1).gif


现在，你可以直接在网页上编写任何CSS样式，而所有的CSS属性都会立即生效。

亲自试试这个技巧吧，如果你喜欢的话，别忘了点赞并留言评论哦！


回复

举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复 返回顶部 返回列表