【无标题】网页第十次制作，前加入bootstrap和字符

最新推荐文章于 2024-03-29 10:29:36 发布
最新推荐文章于 2024-03-29 10:29:36 发布
阅读量427 收藏 3
点赞数 1
文章标签： css html css3 websocket
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_74148796/article/details/130516808
版权 
<!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">&Bscr;2021保护野生动物 拒绝非法交易</p>
		</div>
		
	</div>
</body>
</html>

狮梓星
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
自己动手搭网站（四）：用bootstrap写几个简单的页面
Tao_Shimmer的博客
03-27 1万+
目录前言一、bootstrap简介二、bootstrap环境准备2.1 下载bootstrap2.2 下载jQuery2.3 补充三、bootstrap搭建页面3.1 bootstrap引入项目bootstrap搭建简单页面 前言 这是博主自己动手搭建网站尝试过程的一些记录，上篇electerm远程连接云服务器，部署环境并发布第一个静态页面 自己动手搭建网站系列总目录 上篇写了连接云服务器，并发布一个静态页面，至此，所谓的“网站”总算有了点东西，然而，那确实就是一点东西…接下来的目标是把网站搭建得好看点并实
利用Bootstrap框架制作Bootstrap中文网首页（响应式布局）
Zhang_wang_yun的博客
04-05 5395
利用Bootstrap框架制作Bootstrap中文网首页（响应式布局）
大学生bootstrap框架网页作业成品 web前端大作业期末源码 航海王html+jquery+bootstrap响应式网页制作模板 学生海贼王动漫bootstrap框架网站作品
最新发布
网页设计与制作
03-29 1243
HTML实例网页代码, 本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置，有div的样式格局，这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。 ⚽精彩专栏推荐👇🏻👇🏻👇🏻 ❤ 【作者主页——🔥获取更多优质源码】 ❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】 文章目录🌰一、网页介绍📖一、网页效果🌌二、代码展示😈1.HTML代码结构 🧱2.CSS样式代码 🏠三、个人总结😊四、更多干货🚀
【无标题】文本类网页设计
helloworld_hk的博客
06-08 4241
1234
前端：使用BootStrap搭建一个简单的网页
qq_44845785的博客
02-27 6999
之前有想法学习一下前端框架的，后来没有坚持下来。连最基础的栅格系统都忘记了。于是，花了一点时间，重新温习了一下。写了一个简单的网页。页面大致是下面这张图。做得比较一般，不过能够自适应各种设备大小了。 说下制作过程吧，首先下载bootstrap提供的css,js文件，（之前看文档的时候，直接引用了CDN，不知道什么原因，用了没效果。），在html代码里引用这些文件。 接下来，就是制作网页的过程。要实现自适应网页，首先要加入这段代码 <meta name="viewport" content="init
使用Bootstrap制作网页主界面、增加界面
yifei_345678的博客
05-03 2201
使用Bootstrap排出好看的界面👌
大学生bootstrap网页制作 个人简介博客页面作业 html网页设计 dw期末成品代码下载
06-04
页面绿色主色调，包含div+css、图片列表、bootstrap自适应布局，无复杂JS特效，比较简单容易上手。 【大学生bootstrap网页制作 个人简介博客页面作业 html网页设计 dw期末成品代码下载 】
【Web网页设计制作-毕业设计期末大作业源码】漂亮扁平化自适应bootstrap后台html模板5194.zip
05-16
Web网页设计制作-毕业设计期末大作业源码课程设计 Web网页设计制作-毕业设计期末大作业源码课程设计 Web网页设计制作-毕业设计期末大作业源码课程设计 Web网页设计制作-毕业设计期末大作业源码课程设计 Web网页设计...
网页设计成品DW静态网页Html5响应式css3——电影网站bootstrap制作(4页d
08-10
乡、 鲜花、 礼品、 汽车、 其他 可满足大学生网页大作业网页设计作业需求, 喜欢的可以下载! 原生(HTML+CSS+JS),网页作品代码简单,可使用任意HTML编辑软件（如：`Dreamweaver、HBuilder、Vscode 、Sublime 、 ...
bootstrap汽车网页成品模板
03-12
bootstrap汽车网页成品模板html+css+js，bootstrap汽车网页成品模板html+css+js，bootstrap汽车网页成品模板html+css+js，bootstrap汽车网页成品模板html+css+js，bootstrap汽车网页成品模板html+css+js，bootstrap...
html+css+Bootstrap 网页制作，电子商城网站制作模板 Ejon
02-27
Bootstrap 是快速开发 Web 应用程序的前端工具包。它是一个 CSS，HTML 和 JS 的集合，它使用了最新的浏览器技术，给你的 Web 开发提供了时尚的版式； AJAX，创建交互式网页应用的网页开发技术。 【设计思路】 用户...
野生动物保护网页模板
01-20
野生动物保护网页模板
保护野生动物网站模板
11-30
保护野生动物网站模板是一款适合野生动物保护机构网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。
最好懂的 Bootstrap 实战案例教程
热门推荐
LakeYC的博客
03-07 6万+
我们每期会根据不用的项目案例安排不同的技术栈免费课程！免费！免费！免费！来帮助大家提高，有兴趣的同学可以私信我哦~ 所有项目都是以真实项目为实战例。 我们在开发前端页面的时候，如果每一个按钮、样式、处理浏览器兼容性的代码都要自己从零开始去写，那就太浪费时间了。所以我们需要一个框架，帮我们实现一个页面的基础部分和解决一些繁琐的细节，只要在它的基础上进行个性化定制就可以了。Bootstrap 就是
html图片轮播：基于bootstrap响应式页面，家具装修公司网站
qq_524614081的博客
12-20 75
👨‍🎓学生HTML静态网页基础水平制作👩‍🎓，页面排版干净简洁。使用HTML+CSS页面布局设计,web大学生网页设计作业源码，这是一个不错的旅游网页制作，画面精明，排版整洁，内容丰富，主题鲜明，非常适合初学者学习使用, 这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。 ❤ 【作者主页——🔥获取更多优质源码】 ❤ 【学习资料/简历模板/面试资料/ 网站设计与制作】 ❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例】 # 一、👨
【无标题】html+css写静态网页
weixin_47267628的博客
12-25 1473
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="css/css.css"> </head> <body> <div> <div class="header w"> .
制作一个简单HTML中华传统文化网页（HTML+CSS）
HTML网页设计
08-02 1万+
📔网站布局方面计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面网站系统文件种类包含html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；...
使用bootstrap制作房屋网站的静态页面
wuawa的博客
02-25 645
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="https://
Bootstrap 创建一个网页
shengyin714959的博客
08-16 366
接下来我们通过 Bootstrap3 来创建一个简单的响应式网页。
bootstrap网页制作
03-15
Bootstrap是一个流行的前端开发框架，它提供了一套用于快速构建响应式网页的工具和样式。以下是关于Bootstrap网页制作的介绍： 1. 网格系统：Bootstrap提供了一个灵活的网格系统，可以将页面划分为12个等宽的列，方便进行布局和排版。通过使用不同的CSS类，可以轻松地创建响应式布局，适应不同大小的屏幕。 2. 组件库：Bootstrap内置了丰富的UI组件，如导航栏、按钮、表单、模态框等，可以直接使用这些组件来构建网页。这些组件具有统一的样式和交互效果，可以提高开发效率。 3. 响应式设计：Bootstrap支持响应式设计，可以根据设备的屏幕大小自动调整布局和样式。通过使用预定义的CSS类，可以轻松地创建适应不同设备的网页，提供更好的用户体验。 4. 自定义主题：Bootstrap提供了一套默认的样式主题，但也支持自定义主题。可以通过修改变量或覆盖样式来定制自己的主题，以满足项目的需求。 5. 插件扩展：Bootstrap还提供了一些常用的JavaScript插件，如轮播图、模态框、滚动监听等，可以增强网页的交互功能。这些插件可以通过简单的HTML标记和JavaScript调用来使用。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值