프런트 엔드 웹 페이지를 디자인할 때 탐색 모음을 중앙 정렬하는 방법(코드 테스트)
- 藏色散人원래의
- 2018-08-09 09:57:2714491검색
웹사이트의 프런트엔드 디자인을 막 시작한 초보 친구들에게는 네비게이션 바가 엉망이 되는 것은 불가피합니다. 일반적인 상황에서는 네비게이션 바를 중앙 정렬하는 것이 홈페이지를 표시하는 가장 좋은 방법입니다. 그렇다면 간단한 div+css를 사용하여 탐색 모음을 가운데 정렬하는 방법은 무엇입니까? 이 글에서는 내비게이션 바를 중앙 정렬하는 아주 간단한 방법을 자세히 소개하겠습니다. 여러분에게 도움이 되기를 바랍니다.
내비게이션 바의 중앙 정렬을 위한 샘플 코드는 다음과 같습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>div+css做导航栏居中对齐示例</title>
</head>
<style>
body
{
text-align:center; /* 文字居中 */
}
ul
{
list-style-type:none; /* ul前面的点 */
}
*
{
margin:0px 0px; /* 到边框的距离 */
}
.menu
{
background: #029789; /* 导航条背景的颜色 */
}
.nav
{
margin:0 auto; /* 导航栏文字的位置 */
width:800px; /* 和文字宽度有关，不能小于文字宽度的总和 */
height:80px; /* 导航栏的宽度 */
}
.nav a
{
float:left; /* 导航栏的位置配置 */
width:140px; /* 选中的文字块的长度 */
line-height:80px; /* 选中的文字块的宽度 */
text-decoration: none; /* 去掉连接下划线 */
font-size:45px; /* 字体大小 */
color: #FFFFFF; /* 字体颜色 */
}
.nav li a:hover
{
background-color: #1094f2; /* 选中的文字块的颜色 */
text-decoration:none; /* 选中时去掉连接下划线 */
}
.nav li a:link{
text-decoration:none; /* 连接被点之后没有下划线 */
}
</style>
<body>
<div class="menu"> <!-- class选择器 -->
<div class="nav">
<ul> <!-- ul标签 -->
<li><a href="#">导航1</a></li> <!-- li标签 -->
<li><a href="#">导航2</a></li>
<li><a href="#">导航3</a></li>
<li><a href="#">导航4</a></li>
<li><a href="#">导航5</a></li>
</ul>
</div>
</div>
</body>
</html>이 코드는 로컬 테스트를 위해 직접 복사할 수 있으며, 웹 페이지에는 아래와 같이 표시됩니다.
관련 소개 태그 속성:
text-장식 속성은 Grooming 텍스트에 추가되는 내용을 지정합니다. 가능한 값과 설명은 아래와 같습니다
【관련 추천 글】
CSS에서 내비게이션 메뉴의 가로 가운데 정렬을 구현하는 5가지 방법의 자세한 예
위 내용은 프런트 엔드 웹 페이지를 디자인할 때 탐색 모음을 중앙 정렬하는 방법(코드 테스트)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.