HTML 및 CSS를 사용하여 고정 측면 탐색 모음 레이아웃을 구현하는 방법
- PHPz원래의
- 2023-10-28 08:57:27939검색
HTML과 CSS를 사용하여 고정 측면 탐색 모음 레이아웃을 구현하는 방법
탐색 모음은 웹 페이지 레이아웃에서 매우 중요한 부분이며 고정 측면 탐색 모음 레이아웃은 일반적인 디자인 패턴입니다. 이 기사에서는 HTML과 CSS를 사용하여 간단한 고정 측면 탐색 모음 레이아웃을 구현하는 방법을 소개하고 구체적인 코드 예제를 제공합니다.
- HTML 구조
먼저 HTML 파일에 기본 구조를 만들어야 합니다. 다음은 간단한 예입니다.
<!DOCTYPE html>
<html>
<head>
<title>固定侧边导航栏布局</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<div class="sidebar">
<!-- 导航栏内容 -->
</div>
<div class="main-content">
<!-- 页面主要内容 -->
</div>
</div>
</body>
</html>위 코드에서는 "sidebar"와 "main-content"라는 두 개의 하위 요소가 포함된 "container"라는 컨테이너 요소를 만들었습니다. "sidebar"는 탐색 모음을 배치하는 데 사용되며 "main-content"는 페이지의 주요 콘텐츠를 배치하는 데 사용됩니다.
- CSS 스타일
다음으로 CSS를 사용하여 컨테이너와 탐색 모음의 스타일을 정의해야 합니다. 다음은 간단한 스타일 예입니다.
.container {
display: flex;
}
.sidebar {
width: 20%;
background-color: #f1f1f1;
position: fixed;
height: 100%;
}
.main-content {
margin-left: 20%;
padding: 20px;
}위 코드에서는 "container"를 "flex" 레이아웃으로 설정하여 탐색 바와 기본 콘텐츠의 왼쪽 및 오른쪽 배열을 구현했습니다. "사이드바"의 너비를 20%로, 배경색을 회색으로 설정하고, 화면 왼쪽에 고정되도록 고정으로 배치합니다. "main-content"의 왼쪽 여백은 20%로 설정되었으며, 네비게이션 바에 의해 콘텐츠가 가려지지 않도록 패딩이 추가되었습니다.
- 콘텐츠 채우기
다음으로 필요에 따라 탐색 바와 메인 콘텐츠 섹션에 실제 콘텐츠를 채울 수 있습니다.
<div class="sidebar">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">产品</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</div>
<div class="main-content">
<h1>欢迎访问我们的网站</h1>
<p>这里是主要内容区域，您可以在这里显示具体的页面内容。</p>
</div>위 코드에서는 "사이드바" 요소에 순서가 지정되지 않은 목록을 만들고 목록 항목에 일부 탐색 링크를 추가했습니다. "main-content" 요소에는 페이지의 주요 콘텐츠를 표시하기 위한 제목과 텍스트를 추가합니다.
- 전체 코드
<!DOCTYPE html>
<html>
<head>
<title>固定侧边导航栏布局</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<div class="sidebar">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">产品</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</div>
<div class="main-content">
<h1>欢迎访问我们的网站</h1>
<p>这里是主要内容区域，您可以在这里显示具体的页面内容。</p>
</div>
</div>
</body>
</html>.container {
display: flex;
}
.sidebar {
width: 20%;
background-color: #f1f1f1;
position: fixed;
height: 100%;
}
.main-content {
margin-left: 20%;
padding: 20px;
}위의 코드 예를 통해 간단한 고정 측면 탐색 모음 레이아웃을 성공적으로 구현했습니다. 필요에 따라 스타일을 조정하고 내용을 채워 더욱 복잡하고 다양한 효과를 얻을 수 있습니다. 이것은 여러분의 학습과 실습에 도움이 되기를 바라는 기본적인 예입니다.
위 내용은 HTML 및 CSS를 사용하여 고정 측면 탐색 모음 레이아웃을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!