CSS에서 가로 탐색 모음을 만드는 방법

CSS를 사용하여 가로 탐색 모음을 만드는 단계는 다음과 같습니다. HTML 탐색 구조를 만듭니다. CSS 스타일 적용: 레이아웃 컨테이너: 디스플레이: flex-items: 센터; 스타일 목록: 없음; 여백: 0; margin-right: 1em; 스타일 링크: 텍스트 장식: 없음; 색상: 검정; 마우스 오버 상태: a:hov

CSS를 사용하여 가로 탐색 모음 만들기

대부분의 웹사이트 디자인에 대한 일반적인 요구 사항입니다. CSS를 사용하면 다음 단계에 따라 쉽게 달성할 수 있습니다.

HTML 구조 만들기:

<code class="html"><nav>
  <ul>
    <li><a href="home.html">主页</a></li>
    <li><a href="about.html">关于</a></li>
    <li><a href="contact.html">联系</a></li>
  </ul>
</nav></code>

CSS 스타일 적용:

1. 레이아웃 컨테이너:

<code class="css">nav {
  display: flex;
  justify-content: center;
  align-items: center;
}</code>

• display: flex 탐색 모음이 가로로 정렬된 컨테이너가 되도록 허용합니다. <code>display: flex 允许导航栏成为一个水平排列的容器。
• justify-content: center 将其内容水平居中。
• align-items: center 将其内容垂直居中。

2. 样式列表：

<code class="css">ul {
  display: flex;
  list-style-type: none;
  margin: 0;
  padding: 0;
}</code>

• display: flex 也将列表转换为水平容器。
• list-style-type: none 去除项目符号。
• margin: 0 和 padding: 0 去除默认间距和填充。

3. 样式列表项：

<code class="css">li {
  margin-right: 1em;
}</code>

• margin-right: 1em 在每个列表项之间添加一些间距。

4. 样式链接：

<code class="css">a {
  text-decoration: none;
  color: black;
}</code>

• text-decoration: none 去除链接下划线。
• color: black 设置链接文本为黑色。

5. 鼠标悬停状态：

<code class="css">a:hover {
  color: blue;
}</code>

• a:hover
justify-content: center 콘텐츠를 가로 중앙에 배치합니다.

align-items: center 콘텐츠를 세로로 가운데에 배치합니다.

2. 스타일 목록:

🎜rrreee🎜🎜display: flex도 목록을 수평 컨테이너로 변환합니다. 🎜🎜list-style-type: none 글머리 기호를 제거하세요. 🎜🎜margin: 0 및 padding: 0은 기본 간격과 패딩을 제거합니다. 🎜🎜🎜🎜3. 스타일 목록 항목: 🎜🎜rrreee🎜🎜margin-right: 1em 각 목록 항목 사이에 약간의 간격을 추가합니다. 🎜🎜🎜🎜4. 스타일 링크: 🎜🎜rrreee🎜🎜텍스트 장식: 없음 링크 밑줄을 제거합니다. 🎜🎜color: black 링크 텍스트를 검정색으로 설정하세요. 🎜🎜🎜🎜5. 마우스오버 상태: 🎜🎜rrreee🎜🎜a:hover 링크 위에 마우스를 올렸을 때 텍스트 색상을 파란색으로 설정합니다. 🎜🎜🎜🎜결과: 🎜🎜🎜다음 단계를 따르면 화면 중앙에 항목이 서로 수평으로 배열되는 수평 탐색 표시줄이 생성됩니다. 링크 위에 마우스를 올리면 링크 텍스트가 파란색으로 변합니다. 🎜

위 내용은 CSS에서 가로 탐색 모음을 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!