轮播图&&折叠列表组
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!-- 响应式前端框 -->
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<!-- jQuery -->
<script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
<!-- Bootstrap -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
<!-- css-->
<script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
<!-- 设置导航条向左 -->
<style type="text/css">
.navbar-collapse{
flex-grow: 0;
}
.form-group{
width: 320px;
/* 居中 */
margin: 0 auto;
}
/* 修改轮播图 小空间的背景 */
.carousel-control-prev-icon{
background-color: #E83E8C;
}
.carousel-control-next-icon{
background-color: #E83E8C;
}
/* 小空间 -- */
.carousel-indicators li{
background-color: #1E7E34;
}
</style>
</head>
<body>
<!-- 导航条 -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<!-- 固态框 -->
<div class="container">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</div>
</nav>
<!--栅格系统 -->
<div class="container">
<!-- 第一行 搜索 巨幕 表单 输入框-->
<div class="row">
<div class="col"> <!-- margin-top 间距-->
<!-- 巨幕-->
<div class="jumbotron" style="margin-top: 10px;">
<!-- 表单-->
<form>
<div class="form-group">
<!-- 输入框-->
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
<div class="input-group-append">
<button class="btn btn-primary" type="button">搜索</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<!-- 第二行 分类 轮播 新书上架 -->
<div class="row">
<div class="col-md-3" >
<!-- 折叠组 -->
<div class="accordion" id="accordionExample">
<div class="card">
<div class="card-header" id="headingOne">
<h2 class="mb-0">
<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
书籍分类
</button>
</h2>
</div>
<!-- collapse show 控制折叠的面板默认显示 -->
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
<ul class="list-group">
<li class="list-group-item">玄幻</li>
<li class="list-group-item active">惊悚</li>
<li class="list-group-item">爱情</li>
<li class="list-group-item">都市</li>
<li class="list-group-item">现代</li>
<li class="list-group-item">推理</li>
<li class="list-group-item">动漫</li>
<li class="list-group-item">仙侠</li>
<li class="list-group-item">言情</li>
<li class="list-group-item">穿越</li>
</ul>
</div>
</div>
</div>
</div>
<!-- 轮播图区域 第二行的右9-->
<div class="col-md-9">
<div class="row">
<div class="col-12">
<!--轮播图 carousel data-interval 设置轮播图时间 -->
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" data-interval="500">
<!-- carousel-indicators 小控件 -->
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<!--图片区域显示 carousel-inner-->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="img/lb1.png" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="img/lb2.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="img/lb3.jpg" class="d-block w-100" alt="...">
</div>
</div>
<!--上一页 下一页 -->
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<!-- 新书上架标题 -->
<div class="row">
<div class="col">
<p style="background-image:url(img/title_bj.png); background-color:#6C757D; border: 1px solid #000000; color: white;">新书上架</p>
</div>
</div>
<!-- 新书上架 -->
<div class="col-12">
<div class="row">
<!-- lg 大pc端 显示6个--> <!--个md 中pc端 显示 4 -->
<!-- sm 平板端 显示 3个-->
<div class="col-lg-2 col-md-3 col-sm-4">
<figure class="figure">
<img src="img/1.png" class="figure-img img-fluid rounded" alt="...">
<figcaption class="figure-caption">三国演义</figcaption>
</figure>
</div>
<div class="col-lg-2 col-md-3 col-sm-4">
<figure class="figure">
<img src="img/2.png" class="figure-img img-fluid rounded" alt="...">
<figcaption class="figure-caption">A caption for the above image.</figcaption>
</figure>
</div>
<div class="col-lg-2 col-md-3 col-sm-4">
<figure class="figure">
<img src="img/3.png" class="figure-img img-fluid rounded" alt="...">
<figcaption class="figure-caption">A caption for the above image.</figcaption>
</figure>
</div>
<div class="col-lg-2 col-md-3 col-sm-4">
<figure class="figure">
<img src="img/4.png" class="figure-img img-fluid rounded" alt="...">
<figcaption class="figure-caption">A caption for the above image.</figcaption>
</figure>
</div>
<div class="col-lg-2 col-md-3 col-sm-4">
<figure class="figure">
<img src="img/6.png" class="figure-img img-fluid rounded" alt="...">
<figcaption class="figure-caption">A caption for the above image.</figcaption>
</figure>
</div>
<div class="col-lg-2 col-md-3 col-sm-4">
<figure class="figure">
<img src="img/7.png" class="figure-img img-fluid rounded" alt="...">
<figcaption class="figure-caption">A caption for the above image.</figcaption>
</figure>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 第三行 版权信息 -->
<div class="row">
<div class="col" style="text-align: center;" >
©该版权信息归卓京教育所有
</div>
</div>
</div>
</body>
</html>
登录界面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<!-- jQuery -->
<script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
<!-- Bootstrap -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
<!-- css-->
<script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
.form-group{
width: 300px;
margin: 0 auto;
}
form{
text-align: center;
margin-top: 150px;
}
form button{
width: 300px;
}
</style>
</head>
<body>
<div class="container">
<form>
<div class="form-group">
<label for="exampleInputEmail1">账号</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">密码</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">7天自动登录</label>
</div>
<button type="submit" class="btn btn-primary">登录</button>
</form>
</div>
</body>
</html>
扫一扫
248
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
