HTML 네비게이션 바를 설정하는 방법-HTML 튜토리얼-php.cn

HTML 네비게이션 바를 설정하는 방법

coldplay.xixi

풀어 주다： 2023-01-04 09:38:44

원래의

48919명이 탐색했습니다.

html 탐색 모음 설정 방법: 1. html5 [<nav></nav>]에서 탐색 모음 라벨을 직접 사용합니다. 2. 목록 순서를 취소하고 기본 스타일 설정을 부동으로 제거할 수 있습니다. 슈퍼링크를 설정합니다.

HTML 네비게이션 바를 설정하는 방법

이 문서의 운영 환경: Windows 7 시스템, html5 버전, Dell G3 컴퓨터.

추천: HTML 튜토리얼

html 네비게이션 바 설정 방법:

1 우선 html5 <nav></nav>&gt에서 네비게이션 바 태그를 직접 사용할 수 있습니다. ;<nav></nav>

具体代码如下

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>导航栏</title>
</head>
<body>
<nav>
<a href="#">首页</a>
<a href="#">新闻</a>
<a href="#">关于我们</a>
</nav>
</body>
</html>

로그인 후 복사

这是实际的效果，可以根据实际需要，去除下划线和颜色等等

HTML 네비게이션 바를 설정하는 방법

2、接下来可以无序列表，去除它的默认样式设置浮动就可以了，具体的代码如下

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
ul{
height: 100px;
width:100%;
list-style-type: none; //取消无序列表的固定样式
}
ul li{
float:left;
margin: 20px;  //设置三个元素的外间距
}
</style>
</head>
<body>
<ul>
<li><a href="">首页<a></li>
<li><a href="">新闻<a></li>
<li><a href="">关于我们<a></li>
</ul>
</body>
</html>

로그인 후 복사

这是实际的效果图。

HTML 네비게이션 바를 설정하는 방법

3、设置超链接

在这里还想说的是，<ul>的子集元素只能是<li>

구체적인 코드는 다음과 같습니다

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>bootstrap的学习</title>
<!--导入基本样式-->
<link style="text/css" rel="stylesheet" href="css/bootstrap.css">  
<!--导入基本样式的压缩-->
<link style="text/css" rel="stylesheet" href="css/bootstrap.min.css">
<!--导入主题样式  注意：顺序 不可变-->
<link style="text/css" rel="stylesheet" href="css/bootstrap-theme.css">
</head>
<body>
<!--类nav清除列表的默认样式  nav-tabs定义tabs的标题栏-->
<ul class="nav nav-tabs">
<li><a href="#tab2" data-toggle=tab">首页</a></li>
<li><a href="#tab2" data-toggle=tab">关注</a></li>
<li><a href="#tab2" data-toggle=tab">个人中心</a></li>
</ul>
 
</body>
</html>

로그인 후 복사

실제 효과는 실제 필요에 따라 밑줄과 색상을 제거할 수 있습니다

HTML 네비게이션 바를 설정하는 방법 the the list the list. 구체적인 코드는 다음과 같습니다

rrreee

실제 렌더링입니다. HTML 네비게이션 바를 설정하는 방법

🎜3 , 하이퍼링크 설정🎜🎜여기서 제가 또 말씀드리고 싶은 것은 <ul>의 하위 집합 요소는 <li>만 될 수 있으며 다른 것은 될 수 없다는 것입니다. HTML의 의미는 매우 약하고 태그의 사용은 매우 중요합니다. 실제 웹 개발에서는 태그마다 의미와 가중치가 다르기 때문에 최적화도 다릅니다. 🎜🎜4. 부트스트랩을 사용하면 구체적인 코드와 자세한 설명을 볼 수 있습니다. 🎜rrreee🎜실제 효과는 다음과 같습니다🎜🎜🎜🎜🎜더 많은 프로그래밍 관련 지식을 보려면 🎜프로그래밍 교육🎜을 방문하세요! ! 🎜

위 내용은 HTML 네비게이션 바를 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!