Links的HTML渲染

发表于 更新于 本文字数： 858

为了写出一个看得下去的Links,借助Poe的帮助写了一些css和HTML

  • 在内联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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Friend Links</title>
<style>
    /* css代码 */
</style>
</head>

<body>
<div class="section-box gemini box-shadow-wrapper">
  <section class="friends-section bg-color slide-down-in">
    <div class="firends-box">
      <div class="firends-item">
        <a href="https://www.zhihu.com/people/L.M.Sherlock" target="_blank">
          <img src="https://pica.zhimg.com/v2-41f893b0cd84fb6a8c8f6d1bd29c9554_xll.jpg?source=32738c0c">
          <div class="right">
            <div class="top">
              Thoughts Memo
            </div>
            <div class="bottom">    
            </div>
          </div>
        </a>
      </div>
      <div class="firends-item">
            <!-- 新的链接 -->
      </div>
    </div>
  </section>
</div>
</body>

</html>
<head>：包含了文档的元信息和引用，不会直接显示在页面上。
  • <meta charset="UTF-8">：设置文档的字符编码为UTF-8，以支持各种语言的文字显示。
  • <meta name="viewport" content="width=device-width, initial-scale=1.0">：设置页面视口的宽度等于设备宽度，并且初始缩放比例为1.0，有助于使页面在移动设备上更好地显示。
  • <title>Friend Links</title>：设置页面的标题为"Friend Links"，显示在浏览器标签页上。
<style>：在这个标签中包含了CSS样式。
  • CSS样式用于控制页面元素的外观和布局。
  • 在这段代码中，CSS样式定义了一些属性，如布局、尺寸、边距、圆角、动画效果等，用于美化和布局友情链接展示的元素。
  • 这段样式会应用到页面中具有对应类名的元素上，例如.firends-box、.firends-item、.firends-item img等。
  • 通过CSS样式，可以实现友情链接的排列、样式、交互效果等。
<div class="firends-item">
  • 类用于指定该<div>元素在页面中的某个特定样式或布局
  • 在 HTML 中，<section> 通常用于表示文档或应用程序中的一个独立的部分或区块，用于组织内容
自己更改css的类
1
<div class="section-box" style="width: 100%; max-width: 100%; margin: 0 auto; padding: 10px;">

或者

1
2
3
4
5
6
.firends-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}
html表格

This is an additional line of text.

Favorite Links:

Header 1 Header 2 Header 3
Row 1, Cell 1 Row 1, Cell 2 Row 1, Cell 3
Row 2, Cell 1 Row 2, Cell 2 Row 2, Cell 3
  • <p>ee</p> 段落元素，用来定义文本的段落
  • <ul></ul>：用来创建无序列表，列表项使用 <li></li> 标签来表示。
  • <li></li>：用来定义列表中的每一个项目。
  • <tr></tr>：用于创建表格中的行，表格中的每一行使用 <tr></tr> 标签来定义。
  • <table></table>：用来创建表格，包含表格的整体结构。
  • <th> <th>用来定义表格中的表头单元格，<td> 用来定义表格中的数据单元格。
  • <h2>：是HTML中的标题标签，表示”二级标题”。通常用来表示比一级标题更小的标题级别。