使用 css 創(chuàng)建橫向?qū)Ш綑诘牟襟E如下：創(chuàng)建 html 導(dǎo)航結(jié)構(gòu)。應(yīng)用 css 樣式：布局容器：display: flex; justify-content: center; align-items: center;樣式列表：display: flex; list-style-type: none; margin: 0; padding: 0;樣式列表項：margin-right: 1em;樣式鏈接：text-decoration: none; color: black;鼠標(biāo)懸停狀態(tài)：a:hov
如何使用 CSS 創(chuàng)建橫向?qū)Ш綑?/strong>
創(chuàng)建一個橫向?qū)Ш綑谑谴蠖鄶?shù)網(wǎng)站設(shè)計的常見需求。使用 CSS，可以通過以下步驟輕松實現(xiàn)：
創(chuàng)建 HTML 結(jié)構(gòu)：
<code class="html"><nav><ul>
<li><a href="home.html">主頁</a></li>
<li><a href="about.html">關(guān)于</a></li>
<li><a href="contact.html">聯(lián)系</a></li>
</ul></nav></code>
登錄后復(fù)制
應(yīng)用 CSS 樣式：
1. 布局容器：
<code class="<a style='color:#f60; text-decoration:underline;' href=" https: target="_blank">css">nav {
display: flex;
justify-content: center;
align-items: center;
}</code>
登錄后復(fù)制
display: flex 允許導(dǎo)航欄成為一個水平排列的容器。
justify-content: center 將其內(nèi)容水平居中。
align-items: center 將其內(nèi)容垂直居中。
2. 樣式列表：
<code class="css">ul {
display: flex;
list-style-type: none;
margin: 0;
padding: 0;
}</code>
登錄后復(fù)制
display: flex 也將列表轉(zhuǎn)換為水平容器。
list-style-type: none 去除項目符號。
margin: 0 和 padding: 0 去除默認(rèn)間距和填充。
3. 樣式列表項：
<code class="css">li {
margin-right: 1em;
}</code>
登錄后復(fù)制
margin-right: 1em 在每個列表項之間添加一些間距。
4. 樣式鏈接：
<code class="css">a {
text-decoration: none;
color: black;
}</code>
登錄后復(fù)制
text-decoration: none 去除鏈接下劃線。
color: black 設(shè)置鏈接文本為黑色。
5. 鼠標(biāo)懸停狀態(tài)：
<code class="css">a:hover {
color: blue;
}</code>
登錄后復(fù)制
a:hover 為鼠標(biāo)懸停在鏈接上時設(shè)置文本顏色為藍(lán)色。
結(jié)果：
遵循這些步驟會創(chuàng)建一個水平導(dǎo)航欄，其中項目彼此水平排列，居中顯示于屏幕上。當(dāng)鼠標(biāo)懸停在鏈接上時，鏈接文本會變?yōu)樗{(lán)色。
