<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0 shrink-to-fit=no">
<link rel="stylesheet" href="./css/bootstrap.css" >
<link rel="stylesheet" href="./css/bootstrap.min.css">
<link rel="stylesheet" href="./css/bootstrap-icons.css">
<title>Document</title>
<style>
.jumbotron{
background: url("./img/banner.png") no-repeat center right;
border-radius: 0;
height: 280px;
}
.jumbotron h2{
font-weight: 900px;
letter-spacing: 0.8rem;
margin-bottom: 1rem;
}
.card p{
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 5;
overflow: hidden;
text-align: justify;
}
.post>.madia{margin-bottom: 1.5rem;}
.post h3{
padding-bottom: 1.25rem;
}
.post h5{
font-size: 1.1rem;
}
.post p{
margin: 0;
}
.post img{
width: 35%;
max-width: 85px;
margin-right: 0.9375rem;
}
</style>
</head>
<body>
<!-- 导航栏 -->
<nav class="navbar navbar-expand-md navbar-dark bg-info py-4">
<div class="container">
<!-- 品牌图案 -->
<a href="https://baike.baidu.com/item/国家重点保护野生动物名录" class="navbar-brand">国家重点保护野生动物名录</a>
<!-- 表单 -->
<form class="form-inline">
<input type="text" class="form-control-sm border-0 rounded-0"/>
<button type="button" class="btn btn-sm btn-secondary rounded-0">
<i class="bi-search"></i>
</button>
</form>
</div>
</nav>
<!-- 巨幕 -->
<div class="jumbotron text-white">
<div class="container">
<h2>保护动物</h2>
<h2>人人有责</h2>
<h2>请拒绝购买</h2>
</div>
</div>
<!-- 主题内容 -->
<div class="container">
<div class="row my-5">
<!-- 左栏展示 -->
<div class="col-lg-9">
<!-- 卡片 -->
<div class="row">
<div class="col-md-6">
<!-- card-1 -->
<div class="card border-0 mb-5">
<img src="./img/穿山甲.jpg" class="card-img-top"alt="">
<div class="card-body">
<h4 class="card-title text-info" >穿山甲</h4>
<p class="card-text">屈原在屈原在天问里写下延年不死寿何所指?阿克汉嘎哈卡号干扰好热够爱红日干哈悄然把卡不然卡巴v会计啊居然不开机啊v科技补给卡啊打卡机航发科技副科级阿爸发卡机阿爸v科技表达法手机卡v金卡不卡久啊发卡机和</p>
<a href="#"class="btn btn-outline-secondary">了解更多</a>
</div>
</div>
</div>
<div class="col-md-6">
<!-- card-2 -->
<div class="card border-0 mb-5">
<img src="./img/豹猫.jpg" class="card-img-top"alt="">
<div class="card-body">
<h4 class="card-title text-info" >柴猫</h4>
<p class="card-text">当纪录片安科技活动上课就打开疾病的父亲回答我阿克汉嘎哈卡号干扰好热够爱红日干哈悄然把卡不然卡巴v会计啊居然不开机啊v科技补给卡啊打卡机航发科技副科级阿爸发卡机阿爸v科技表达法手机卡v金卡不卡久啊发卡机和</p>
<a href="#"class="btn btn-outline-secondary">了解更多</a>
</div>
</div>
</div>
<div class="col-md-6">
<!-- card-3 -->
<div class="card border-0 mb-5">
<img src="./img/朱鹮.jpg" class="card-img-top"alt="">
<div class="card-body">
<h4 class="card-title text-info" >柴猫</h4>
<p class="card-text">当纪录片安科技活动上课就打开疾病的父亲回答我阿克汉嘎哈卡号干扰好热够爱红日干哈悄然把卡不然卡巴v会计啊居然不开机啊v科技补给卡啊打卡机航发科技副科级阿爸发卡机阿爸v科技表达法手机卡v金卡不卡久啊发卡机和</p>
<a href="#"class="btn btn-outline-secondary">了解更多</a>
</div>
</div>
</div>
<div class="col-md-6">
<!-- card-4 -->
<div class="card border-0 mb-5">
<img src="./img/金丝猴.jpg" class="card-img-top"alt="">
<div class="card-body">
<h4 class="card-title text-info" >柴猫</h4>
<p class="card-text">当纪录片安科技活动上课就打开疾病的父亲回答我阿克汉嘎哈卡号干扰好热够爱红日干哈悄然把卡不然卡巴v会计啊居然不开机啊v科技补给卡啊打卡机航发科技副科级阿爸发卡机阿爸v科技表达法手机卡v金卡不卡久啊发卡机和</p>
<a href="#"class="btn btn-outline-secondary">了解更多</a>
</div>
</div>
</div>
</div>
</div>
<!-- 右栏展示 -->
<div class="col-lg-3">
<!-- 分类 -->
<div class="category">
<h3>分类</h3>
<ul class="list-group list-goup-flush mt-4">
<a href="" class="list-group-item list-group-item-action" >兽纲
<span class="badge badge-info float-right">82</span>
</a>
<a href="" class="list-group-item list-group-item-action" >鸟纲
<span class="badge badge-info float-right">111</span>
</a>
<a href="" class="list-group-item list-group-item-action" >爬行纲
<span class="badge badge-info float-right">17</span>
</a>
<a href="" class="list-group-item list-group-item-action" >两栖纲
<span class="badge badge-info float-right">7</span>
</a>
<a href="" class="list-group-item list-group-item-action" >鱼纲
<span class="badge badge-info float-right">15</span>
</a>
<a href="" class="list-group-item list-group-item-action" >昆虫纲
<span class="badge badge-info float-right">15</span>
</a>
</ul>
</div>
<!-- 热门文章 -->
<div class="post mt-5">
<h3>热门文章</h3>
<div class="media">
<img src="img/article01.jpg"/>
<div class="media-body">
<h5><a href="#" class="text-dark">孔雀东南飞,五里一徘徊</a></h5>
<p>by xxx</p>
</div>
</div>
<div class="media">
<img src="img/article02.jpg"/>
<div class="media-body">
<h5><a href="#" class="text-dark">鲸落,深海中的温柔孤岛</a></h5>
<p>by xxx</p>
</div>
</div>
<div class="media">
<img src="img/article03.jpg"/>
<div class="media-body">
<h5><a href="#" class="text-dark">他们站在泪水小径的起点上哭泣</a></h5>
<p>by xxx</p>
</div>
</div>
</div>
<!-- 相关链接 -->
<div class="links mt-5">
<h3>相关链接</h3>
<nav>
<ul class="breadcrumb bg-white pl-0">
<li class="breadcrumb-item"><a href="#">诞生历史</a></li>
<li class="breadcrumb-item"><a href="#">反战历程</a></li>
<li class="breadcrumb-item"><a href="#">名录内容</a></li>
<li class="breadcrumb-item"><a href="#">学者呼声</a></li>
<li class="breadcrumb-item"><a href="#">相关法规</a></li>
</ul>
</nav>
</div>
</div>
</div>
<!-- 页底 -->
<div>
<div class="bottom bg-dark py-3">
<p class="text-center text-right mb-0">ℬ2021保护野生动物 拒绝非法交易</p>
</div>
</div>
</body>
</html>
【无标题】网页第十次制作,前加入bootstrap和字符
最新推荐文章于 2024-09-08 23:43:26 发布