基于bootstrap3生成一个网站主页导航页,有菜单按钮,点击菜单可以显示多个标签页,且不使用cdn方式引入样式,使用原生css生成高大尚的样式
时间: 2024-03-06 13:48:56 浏览: 20
好的,以下是一个基于 Bootstrap 3 的网站主页导航页示例,包含菜单按钮和多个标签页,使用原生 CSS 实现高大上的样式:
HTML 代码:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>网站主页</title>
<link rel="stylesheet" href="bootstrap.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- 导航栏 -->
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">网站名称</a>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">首页</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">产品中心</a></li>
<li><a href="#">新闻资讯</a></li>
<li><a href="#">联系我们</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">登录</a></li>
<li><a href="#">注册</a></li>
</ul>
</div>
</div>
</nav>
<!-- 标签页 -->
<div class="container">
<div class="row">
<div class="col-md-12">
<ul class="nav nav-tabs">
<li class="active"><a href="#tab1" data-toggle="tab">标签页1</a></li>
<li><a href="#tab2" data-toggle="tab">标签页2</a></li>
<li><a href="#tab3" data-toggle="tab">标签页3</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<h3>标签页1</h3>
<p>这是标签页1的内容。</p>
</div>
<div class="tab-pane" id="tab2">
<h3>标签页2</h3>
<p>这是标签页2的内容。</p>
</div>
<div class="tab-pane" id="tab3">
<h3>标签页3</h3>
<p>这是标签页3的内容。</p>
</div>
</div>
</div>
</div>
</div>
<script src="jquery.js"></script>
<script src="bootstrap.js"></script>
</body>
</html>
```
CSS 代码:
```css
/* 导航栏样式 */
.navbar-default {
background-color: #fff;
border-color: #ddd;
border-radius: 0;
}
.navbar-default .navbar-brand {
color: #333;
}
.navbar-default .navbar-nav>li>a {
color: #333;
}
.navbar-default .navbar-nav>li>a:hover,
.navbar-default .navbar-nav>li>a:focus {
color: #555;
background-color: transparent;
}
.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:hover,
.navbar-default .navbar-nav>.active>a:focus {
color: #555;
background-color: #f5f5f5;
}
.navbar-default .navbar-nav>.open>a,
.navbar-default .navbar-nav>.open>a:hover,
.navbar-default .navbar-nav>.open>a:focus {
color: #555;
background-color: #f5f5f5;
}
.navbar-default .navbar-toggle {
border-color: #ddd;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
background-color: #f5f5f5;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #333;
}
/* 标签页样式 */
.nav-tabs {
border-bottom: none;
}
.nav-tabs>li.active>a,
.nav-tabs>li.active>a:hover,
.nav-tabs>li.active>a:focus {
color: #555;
background-color: #f5f5f5;
border: none;
}
.nav-tabs>li>a {
border: none;
}
.nav-tabs>li>a:hover,
.nav-tabs>li>a:focus {
color: #555;
background-color: #f5f5f5;
}
.tab-content {
padding: 20px;
border: 1px solid #ddd;
border-top: none;
}
.tab-pane {
display: none;
}
.tab-pane.active {
display: block;
}
```
说明:
1. 导航栏使用 Bootstrap 默认样式,并设置了一些自定义样式,如去掉了圆角边框、改变了字体颜色等。
2. 标签页使用 Bootstrap 默认样式,并设置了一些自定义样式,如去掉了边框、改变了激活状态下的背景颜色等。
3. 通过原生 CSS 控制标签页的显示和隐藏,激活状态下的标签页显示,其他标签页隐藏。