冬夜读书（html+css），HTML/Vue代码在线实时编辑、预览

HTML

格式化

支持Emmet，输入 p 后按 Tab键试试吧！

<head> <title>冬夜读书示子聿</title><!...

展开

</head>

<body>

            
                1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

            
              <header><!--HTML5新引入的语义化标签，用于定义页面的头部内容。-->
    <h1>冬夜读书示子聿</h1>
    <p>朝代:宋朝 | 作者:陆游</p>
  </header>
  <main><!--页面的主要内容区域-->
    <p>古人学问无遗力，少壮工夫老始成。</p>
    <p>纸上得来终觉浅，绝知此事要躬行。</p>
    <p><i><b>[注釋]: </b></i>训示、指示。子聿（yù）</p>
  </main>
  <footer><!--页面的底部区域，通常包含版权信息、联系信息等。-->
    <p><img src="https://ts1.cn.mm.bing.net/th/id/R-C.7d68502dbb8bee2649a7e391acbdf817?rik=FxA2JFBmzMkovQ&amp;riu=http%3a%2f%2fimg.mp.itc.cn%2fupload%2f20161208%2ff8674927d0ba42f2892a682b1ea62b57_th.jpg&amp;ehk=S716it50WNn%2b0fukqu%2bDvCcmitkLNJfm4Nh2m6r74wQ%3d&amp;risl=&amp;pid=ImgRaw&amp;r=0"></p>
  </footer>
<!--通过以上可以定义网页的结构和内容-->

  <table><!--创建表格-->
  <tr><!--创建行-->
    <th>标题1</th><!--创建表头单元格-->
    <th>标题2</th>
    <th>标题3</th>
  </tr>
  <tr>
    <td>单元格1</td><!--创建列-->
    <td>单元格2</td>
    <td>单元格3</td>
  </tr>
  <tr>
    <td>单元格4</td>
    <td>单元格5</td>
    <td>单元格6</td>
  </tr>
</table>

<!--创建超链接-->
<a href="https://www.chinavid.com/chinese-color.html#google_vignette"
  target="_blank">中国传统色彩大全</a>

<ul><!--创建无序列表-->
  <li>周一</li><!--创建列表项-->
  <li>周二</li>
  <li>周三</li>
</ul>
<ol><!--创建有序列表-->
  <li>项目A</li>
  <li>项目B</li>
  <li>项目C</li>
</ol>

</body>

CSS

格式化

            
                1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74

            
            /*12文本图片设计*/
body {
  font-family: 方正楷体_GBK,楷体;/*设置整个页面的字体*/
  text-align: center;/*使得页面文本居中对齐*/
}

header, footer {
  background-color: #f4f4f4;/*背景颜色设置*/
  padding: 10px;/*为内容提供了10像素的内边距，增加了内容和边框之间的空间。*/
}

header h1 {
  color: #333;
}

footer img {
  max-width: 100%;/*确保图片最大宽度为100%，即图片宽度不会超过其父元素的宽度*/
  height: auto;
}

/*3表格设计*/
table, th, td {
  border: 1px solid black;/*添加一个1像素宽的实线边框，颜色为黑色*/
}
table {
  width:90%;/*表格的宽度为父元素的100%，即表格会填充其容器的全部宽度。*/
  border-collapse: collapse;/*合并表格的边框，使得相邻单元格共享一个边框*/
}

th, td {
  padding: 8px;/*添加内边距，使单元格内容与其边界之间有8像素的空间。*/
  text-align: left;/*单元格中的文本内容左对齐*/
}

th {
  background-color: #a1afc9;
}

/*4超链接设计*/
a {
  color: red;/*文本颜色设置为红色*/
  text-decoration: none;/*移除了超链接的默认下划线。*/
}

/*选择鼠标悬停在超链接上时的状态。*/
a:hover {
  color: black;
  text-decoration: underline;/*鼠标悬停时为超链接添加下划线*/
}

/*5列表设计*/
ul {
  list-style-type: square; /* 改变项目符号为方块 */
  padding: 20; /* 移除默认的内边距 */
  margin: 10px; /* 添加外边距 */
  background-color: #e3f9fd; /* 添加背景色 */
}

ul li {
  color: #000000; /* 改变列表项文本颜色 */
  padding: 5px; /* 添加内边距 */
  margin-bottom: 10px; /* 添加列表项之间的垂直间距 */
}

ol {
  margin: 50px; /* 添加外边距 */
  background-color:#e4c6d0; /* 改变背景色 */
}

ol li {
  color: #000000; /* 改变列表项文本颜色 */
  padding: 7px; /* 添加内边距 */
  margin-bottom: 5px; /* 添加列表项之间的垂直间距 */
}

格式化

            
                1
2

            
            // 示例代码
console.log("Hello 笔.COOL 控制台")