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 중국어 웹사이트의 기타 관련 기사를 참조하세요!