13Blogger网页架构设计之Float--浮动无序列表呈单行排列 （九）

本篇文章，我们应用浮动和无序列表来实现各个列表项由竖向排列转为水平排列，像一个导航菜单似的。

本文索引

• 第 1 步 - 没有 CSS 格式的无序列表项目
• 第 2 步 - 删除列表项前面的符号
• 第 3 步 - 删除列表项的内外边距
• 第 4 步 - 第 4 步 - 让各列表项水平排列
• 第 5 步 - 让各列表项左浮动，并设置宽度
• 第 6 步 - 给各“a”元素添加背景色，文字颜色
• 第 7 步 - 给各“a”元素添加内边距
• 第 8 步 - 给各“a”元素添加下划线
• 第 9 步 - 给各“a”元素添加边框以分开各个列表项
• 第 10 步 - 给各“a”元素添加悬停效果
• 第 11 步 - 让UL左浮动且宽度为满屏，以便着色
• 第 12 步 - 给 UL 添加背景色

None

第 1 步 - 没有 CSS 格式的无序列表项目

None

• 菜单 1
• 菜单 2
• 菜单 3

None CSS CODE
None

HTML CODE

<ul>
<li><a href="#">菜单 1</a></li>
<li><a href="#">菜单 2</a></li>
<li><a href="#">菜单 3</a></li>
</ul>
None

第 2 步 - 删除列表项前面的符号

None None

• 菜单 1
• 菜单 2
• 菜单 3

None CSS CODE
ul#navlist { list-style-type: none; }

HTML CODE

<ul id="navlist">
<li><a href="#">菜单 1</a></li>
<li><a href="#">菜单 2</a></li>
<li><a href="#">菜单 3</a></li>
</ul>
None

第 3 步 - 删除列表项的内外边距

None None

• 菜单 1
• 菜单 2
• 菜单 3

None CSS CODE
ul#navlist {
padding: 0;
margin: 0;
list-style-type: none;
}

HTML CODE

<ul id="navlist">
<li><a href="#">菜单 1</a></li>
<li><a href="#">菜单 2</a></li>
<li><a href="#">菜单 3</a></li>
</ul>
None

第 4 步 - 让各列表项水平排列

None None

• 菜单 1
• 菜单 2
• 菜单 3

None CSS CODE
ul#navlist {
padding: 0;
margin: 0;
list-style-type: none;
}
ul#navlist li { display: inline; }
None
HTML CODE

<ul id="navlist">
<li><a href="#">菜单 1</a></li>
<li><a href="#">菜单 2</a></li>
<li><a href="#">菜单 3</a></li>
</ul>
None

第 5 步 - 让各列表项左浮动，并设置宽度

None None

• 菜单 1
• 菜单 2
• 菜单 3

None CSS CODE
ul#navlist {
padding: 0;
margin: 0;
list-style-type: none;
}
None ul#navlist li { display: inline; }
ul#navlist li a
{
float: left;
width: 5em;
}
None
HTML CODE

<ul id="navlist">
<li><a href="#">菜单 1</a></li>
<li><a href="#">菜单 2</a></li>
<li><a href="#">菜单 3</a></li>
</ul>
None

第 6 步 - 给各“a”元素添加背景色，文字颜色

None None

• 菜单 1
• 菜单 2
• 菜单 3

None CSS CODE
ul#navlist {
padding: 0;
margin: 0;
list-style-type: none;
}
None ul#navlist li { display: inline; }
None ul#navlist li a
{
float: left;
width: 5em;
color: #fff;
background-color: #036;
}
None
HTML CODE

<ul id="navlist">
<li><a href="#">菜单 1</a></li>
<li><a href="#">菜单 2</a></li>
<li><a href="#">菜单 3</a></li>
</ul>
None

第 7 步 - 给各“a”元素添加内边距

None None

• 菜单 1
• 菜单 2
• 菜单 3

None CSS CODE
ul#navlist {
padding: 0;
margin: 0;
list-style-type: none;
}
None ul#navlist li { display: inline; }
None ul#navlist li a
{
float: left;
width: 5em;
color: #fff;
background-color: #036;
padding: 0.2em 1em;
}
None
HTML CODE

<ul id="navlist">
<li><a href="#">菜单 1</a></li>
<li><a href="#">菜单 2</a></li>
<li><a href="#">菜单 3</a></li>
</ul>
None

第 8 步 - 给各“a”元素添加下划线

None None

• 菜单 1
• 菜单 2
• 菜单 3

None CSS CODE
ul#navlist {
padding: 0;
margin: 0;
list-style-type: none;
}
None ul#navlist li { display: inline; }
None ul#navlist li a
{
float: left;
width: 5em;
color: #fff;
background-color: #036;
padding: 0.2em 1em;
text-decoration: underline;
}
None
HTML CODE

<ul id="navlist">
<li><a href="#">菜单 1</a></li>
<li><a href="#">菜单 2</a></li>
<li><a href="#">菜单 3</a></li>
</ul>
None

第 9 步 - 给各“a”元素添加边框以分开各个列表项

None None

• 菜单 1
• 菜单 2
• 菜单 3

None CSS CODE
ul#navlist {
padding: 0;
margin: 0;
list-style-type: none;
}
None ul#navlist li { display: inline; }
None ul#navlist li a
{
float: left;
width: 5em;
color: #fff;
background-color: #036;
padding: 0.2em 1em;
text-decoration: underline;
border-right: 1px solid #fff;
}
None
HTML CODE

<ul id="navlist">
<li><a href="#">菜单 1</a></li>
<li><a href="#">菜单 2</a></li>
<li><a href="#">菜单 3</a></li>
</ul>
None

第 10 步 - 给各“a”元素添加悬停效果

None None

• 菜单 1
• 菜单 2
• 菜单 3

None CSS CODE
ul#navlist {
padding: 0;
margin: 0;
list-style-type: none;
}
None ul#navlist li { display: inline; }
None ul#navlist li a
{
float: left;
width: 5em;
color: #fff;
background-color: #036;
padding: 0.2em 1em;
text-decoration: underline;
border-right: 1px solid #fff;
}
ul#navlist li a:hover
{
background-color: #369;
color: red;
}
None
HTML CODE

<ul id="navlist">
<li><a href="#">菜单 1</a></li>
<li><a href="#">菜单 2</a></li>
<li><a href="#">菜单 3</a></li>
</ul>
None

第 11 步 - 让UL左浮动且宽度为满屏，以便着色

None None

• 菜单 1
• 菜单 2
• 菜单 3

None CSS CODE
ul#navlist {
padding: 0;
margin: 0;
list-style-type: none;
float: left;
width: 100%;
}
None ul#navlist li { display: inline; }
None ul#navlist li a
{
float: left;
width: 5em;
color: #fff;
background-color: #036;
padding: 0.2em 1em;
text-decoration: underline;
border-right: 1px solid #fff;
}
None ul#navlist li a:hover
{
background-color: #369;
color: red;
}
None
HTML CODE

<ul id="navlist">
<li><a href="#">菜单 1</a></li>
<li><a href="#">菜单 2</a></li>
<li><a href="#">菜单 3</a></li>
</ul>
None

第 12 步 - 给 UL 添加背景色

None None

• 菜单 1
• 菜单 2
• 菜单 3

None CSS CODE
ul#navlist {
padding: 0;
margin: 0;
list-style-type: none;
float: left;
width: 100%;
color: #fff;
background-color: #036;
}
None ul#navlist li { display: inline; }
None ul#navlist li a
{
float: left;
width: 5em;
color: #fff;
background-color: #036;
padding: 0.2em 1em;
text-decoration: underline;
border-right: 1px solid #fff;
}
None ul#navlist li a:hover
{
background-color: #369;
color: red;
}
None
HTML CODE

<ul id="navlist">
<li><a href="#">菜单 1</a></li>
<li><a href="#">菜单 2</a></li>
<li><a href="#">菜单 3</a></li>
</ul>

🟢 读者资源专享

这里是我从网络上收集并整理的一些免费节点资源。 如果你需要，可以通过下面的链接下载或订阅使用。

📥 V2ray / Karing / Shadowrocket

下载节点文件 预览节点

📥 Clash Verge

下载节点文件 预览节点

📥 For Shadowrocket

下载节点文件 预览节点