web前端开发学习教程，CSS HTML - ul li列表原点如何相连，Web前端开发教程，如何连接HTML ul li列表中的原点？
HTML部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">Web Frontend Development with CSS and HTML</title>
<style>
* {
margin: 0;
padding: 0;
}
ul {
margin: 100px;
padding: 0;
list-style: none;
}
ul li {
position: relative;
padding-left: 30px; /* 为原点留出空间 */
padding-bottom: 20px; /* 为列表项底部留出空间 */
border-left: 2px solid #999; /* 创建左边框 */
}
ul li em {
position: absolute; /* 使用定位将原点定位到边框线上 */
left: -5px; /* 调整原点的位置 */
top: 0; /* 确保原点在垂直方向上居中 */
width: 8px; /* 原点的大小 */
height: 8px; /* 原点的大小 */
border-radius: 8px; /* 使原点呈现圆形 */
background: #999; /* 原点的颜色 */
}
ul li.active em {
background: red; /* 当列表项被激活时，原点的颜色变为红色 */
}
ul li p {
margin: 0; /* 移除段落的上边距和下边距 */
}
ul li time {
color: #999; /* 时间字体颜色 */
font-size: 12px; /* 时间字体大小 */
}
</style>
</head>
<body>
<ul>
<li class="active">
<em>The original point of the list item is centered within the list.</em>
<p>This list item has three parts:</p>
<ul>
<li>Text content:</li>
<li>Label text (the main text in the list):</li>
<li>Date/time information:</li>
</ul>
<p style="color: red;">When this list item is active, the point of the label text changes to red.</p>
</li>
<!-- Add other list items here -->
</ul>
</body>
</html>
CSS部分
* {
margin: 0;
padding: 0;
}
ul {
margin: 100px;
padding: 0;
list-style: none;
}
ul li {
position: relative;
padding-left: 30px; /* 为原点留出空间 */
padding-bottom: 20px; /* 为列表项底部留出空间 */
border-left: 2px solid #999; /* 创建左边框 */
position: absolute;
left: -5px; /* Adjusting the location of the left side border for visibility */
top: 0; /* Ensuring the vertical center alignment of the left side border */
white-space: nowrap; /* Prevents wrapping by adding an empty space on either side */
display: flex;
align-items: center;
justify-content: space-between; /* Combining horizontal and vertical space between elements */
}
ul li em {
position: absolute;
left: -5px; /* Adjusting the location of the left side border for visibility */
top: 0; /* Ensuring the vertical center alignment of the left side border */
width: 8px; /* Calculating the size of the circle element */
height: 8px; /* Calculating the size of the circle element */
border-radius: 8px;
background-color: #999; /* Creating the default circle element color */
line-height: 8px; /* Ensuring correct line height for the text and box shadow */
}
ul li.active em {
background-color: red; /* Changing the color when the list item is active */
}
ul li p {
margin: 0; /* Removing the default paragraph margin */
}
ul li.time {
color: #999; /* Creating a color for the time section of the list */
font-size: 12px; /* Font size for the time section */
}
实现原理：
-
我们在HTML中定义了一个
<ul>元素，并为其设置了合适的样式，主要包含以下组件：-
<ul>元素用于放置子级列表，包括激活的列表项。 -
<li>元素用于定义单个列表项，其基本样式包括位置（position: relative;）、宽度（padding-left: 30px;）和高度（padding-bottom: 20px;），为了保持列表项在底部留有适当的空间，我们设置了border-left属性为2像素的实线。 -
对于文本内容、标签文本以及日期或时间信息，分别在
<ul>内部嵌套了相应的<li>元素。<li>元素采用绝对定位，以确保其相对于其父级元素<ul>定位在左上角，并且left: -5px属性可调整原点的位置，由于我们需要保持文本内容水平居中，因此设置display: flex和align-items: center;属性以实现对齐效果，我们还使用了justify-content: space-between;属性结合了垂直和水平空间，使得列表项之间的间隔均匀分布。
-
-
在CSS中,我们将子级列表元素分为两个部分：列表项的文本内容（
<p>）和标签文本（<em>）。<p>元素的默认样式包括上下文清除（white-space: nowrap;），以防止文本溢出；line-height: 8px和font-size: 12px设置文本及行高和字体大小，便于阅读和排版。<em>元素同样保持了原始的圆形边框，但是因其内部内容更强调文本中心化，所以我们将其背景色设为红色。 -
当单个列表项被激活时,通过调整
background-color属性来更新原点的样式为红色，使其更加醒目。
通过以上CSS和HTML代码,我们成功实现了ul li列表原点的联动样式，实现了预期的效果，这适用于在HTML网页中创建简洁且具有动态交互性的列表布局，让用户能够轻松操作和查看列表项的状态变化。