软件20-4王静雯Bootstrap作业4

最新推荐文章于 2024-05-21 11:24:52 发布
最新推荐文章于 2024-05-21 11:24:52 发布
阅读量185 收藏 1
点赞数
文章标签： bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/w_200415/article/details/124231229
版权

index.html

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="css/index.css">
    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
      <script src="https://fastly.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://fastly.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
  </head>
	<body>
		<nav class="navbar ">
			<div class="container-fluid navbar-inverse navbar-fixed-top">
				<div class="container">
		    <!-- Brand and toggle get grouped for better mobile display -->
		    <div class="navbar-header">
		      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
		        <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="#"><img src="img/logo.png" ></a>
		    </div>
		
		    <!-- Collect the nav links, forms, and other content for toggling -->
		    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
		      <ul class="nav navbar-nav">
		        <li class="active"><a href="#">首页 <span class="sr-only">(current)</span></a></li>
		        <li><a href="#">公司简介</a></li>
		       <li><a href="#">解决方案</a></li>
			   <li><a href="#">成功案例</a></li>
		      </ul>
		      <form class="navbar-form navbar-right">
		       <div class="input-group">
		             <input type="text" class="form-control" placeholder="搜索">
		             <span class="input-group-btn">
		               <button class="btn btn-default" type="button"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button>
		             </span>
		           </div><!-- /input-group -->
		      </form>
		      
		    </div><!-- /.navbar-collapse -->
		  </div><!-- /.container-fluid -->
			</div>	
		  
		</nav>
		
		<div class="jumbotron">
		  <div class="container">
		    <div class="row">
				<div class="col-md-6">
					<div class="container-fluid">
						<div class="row">
				<div class="col-md-10 col-md-offset-2">
					<h2>公司简介</h2>
					<p>GEMINITECH有限公司， 我们作为创新型科技企业，拥有一个充满朝气，高素质、年轻化、专业化的开发团队，
					 为公司蓬勃发展提供源源不断的活力与动力。我们致力于为企业提供中高端专属定制开发服务， 集策划，设计，
					 开发，营销服务于一体的新型互联网企业.</p>
				</div>
				</div>
				</div>
				</div>
				
				
				<div class="col-md-6 hidden-sm hidden-xs">
					<img src="img/person.png" >
				</div>
			</div>
		  </div>
		</div>
		
		<div class="container-fluid bg-gray">
			<div class="container">
				<div class="row">
					<div class="col-md-8 col-md-offset-2">
						<h2>解决方案</h2>
						<p>主要从事互联网品牌建设与网络营销，专业领域包括网站建设，微信开发，网络营销，电子商务服务外包相关类别，并积极开拓IT技术在各个行业应用的咨询服务。致力于为用户提 供适合的解决方案。</p>
					</div>
				</div>
				<div class="row">
					<div class="col-md-4 list-item ">
						<h4>网站建设</h4>
						<p>品牌展示网站、官方门户网站、营销网站建设、电商平台开发</p>
					</div>
					<div class="col-md-4 list-item item2">
						<h4>网站建设</h4>
						<p>品牌展示网站、官方门户网站、营销网站建设、电商平台开发</p>
					</div>
					<div class="col-md-4 list-item item3">
						<h4>网站建设</h4>
						<p>品牌展示网站、官方门户网站、营销网站建设、电商平台开发</p>
					</div>
					<div class="col-md-4 list-item item4">
						<h4>网站建设</h4>
						<p>品牌展示网站、官方门户网站、营销网站建设、电商平台开发</p>
					</div>
					<div class="col-md-4 list-item item5">
						<h4>网站建设</h4>
						<p>品牌展示网站、官方门户网站、营销网站建设、电商平台开发</p>
					</div>
					<div class="col-md-4 list-item item6">
						<h4>网站建设</h4>
						<p>品牌展示网站、官方门户网站、营销网站建设、电商平台开发</p>
					</div>
				</div>
			</div>
		</div>
		
		<div class="container-fluid gay">
			<div class="container">
				<div class="row">
					<div class="col-md-8 col-md-offset-2">
						<h2>成功案例</h2>
						<p>以HTML5技术为基础，实现移动终端自动兼容与浏览，延伸品牌和用户之间的触点设计开发符合移动端的H5页面，全面兼容手机、PAD等移动设备，拓宽品牌传播渠道，结合移动互联网的特点，将个性化、社会化、场景化融入项目。</p>
					</div>
				</div>
				<div class="row case-list">
						<div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">
						<img src="./img/pic01.jpg" alt="">
						<div class="mask">
							<h4>网站建设</h4>
							<p>品牌展示网站、官方门户网站、营销网站建设、电商平台开发</p>
							</div>
						</div>
					
					
						<div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">
						<img src="./img/pic02.jpg" alt="">
						<div class="mask">
							<h4>网站建设</h4>
							<p>品牌展示网站、官方门户网站、营销网站建设、电商平台开发</p>
							</div>
						</div>
					
						<div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">
						<img src="./img/pic03.jpg" alt="">
						</div>
					

						<div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">
						<img src="./img/pic04.jpg" alt="">
						</div>

						<div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">
						<img src="./img/pic05.jpg" alt="">
						</div>

						<div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">
						<img src="./img/pic06.jpg" alt="">
						</div>
				
						<div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">
						<img src="./img/pic07.jpg" alt="">
						</div>
					
						<div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">
						<img src="./img/pic08.jpg" alt="">
						</div>
				</div>
			</div>
		</div>
		
		<div class="container-fluid bg-primary common">
			<div class="container">
				<div class="row">
					<div class="col-md-8 col-md-offset-2">
						<h2>合作伙伴</h2>
						<p>我们有众多合作伙伴。</p>
					</div>
					<div class="col-lg-2 common-item"><a href="" class="log1"></a></div>
					<div class="col-lg-2 common-item"><a href="" class="log2"></a></div>
					<div class="col-lg-2 common-item"><a href="" class="log3"></a></div>
					<div class="col-lg-2 common-item"><a href="" class="log4"></a></div>
					<div class="col-lg-2 common-item"><a href="" class="log5"></a></div>
				</div>
			</div>
		</div>
		
		<div  class="container-fluid gray-bg">
		   <div class="container">
		     <div class="row links-list">
		      <div class="col-lg-3 col-md-6 col-sm-6 col-xs-6">
		        <dt>公司</dt>
		          <dd><a href="#">关于我们</a></dd>
		          <dd><a href="#">公司招聘</a></dd>
		          <dd><a href="">公司团队</a></dd>
		          <dd><a href="">版权</a></dd>
		          <dd><a href="">使用条款</a></dd>
		          <dd><a href="">隐私政策</a></dd>
		          <dd><a href="">联系我们</a></dd>
		      </div>
		      <div class="col-lg-3 col-md-6 col-sm-6 col-xs-6">
		        <dt>公司</dt>
		          <dd><a href="#">关于我们</a></dd>
		          <dd><a href="#">公司招聘</a></dd>
		          <dd><a href="">公司团队</a></dd>
		          <dd><a href="">版权</a></dd>
		          <dd><a href="">使用条款</a></dd>
		          <dd><a href="">隐私政策</a></dd>
		          <dd><a href="">联系我们</a></dd>
		      </div>
		      <div class="col-lg-3 col-md-6 col-sm-6 col-xs-6">
		        <dt>公司</dt>
		           <dd><a href="#">关于我们</a></dd>
		          <dd><a href="#">公司招聘</a></dd>
		          <dd><a href="">公司团队</a></dd>
		          <dd><a href="">版权</a></dd>
		          <dd><a href="">使用条款</a></dd>
		          <dd><a href="">隐私政策</a></dd>
		          <dd><a href="">联系我们</a></dd>
		      </div>
		      <div class="col-lg-3 col-md-6 col-sm-6 col-xs-6">
		        <dt>公司</dt>
		           <dd><a href="#">关于我们</a></dd>
		          <dd><a href="#">公司招聘</a></dd>
		          <dd><a href="">公司团队</a></dd>
		          <dd><a href="">版权</a></dd>
		          <dd><a href="">使用条款</a></dd>
		          <dd><a href="">隐私政策</a></dd>
		          <dd><a href="">联系我们</a></dd>
		      </div>
		    </div>
		   </div>
		</div>
		
		<div class="container-fluid footer ">
			<div class="row">
				<div class="col-md-12">
					Copyright &copy;<a href="#">ICP备111号-2</a>
				</div>
			</div>
		</div>
			
	</body>
</html>

index.css

.navbar-brand{
	/* padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 20px;
	padding-right: 20px; */
	padding: 10px 20px 10px 20px;
}


.jumbotron{
 	background:url("../img/bg.jpg") center center no-repeat;
 	padding:10px 0 0 0;
	padding-bottom: 0px;
 }
 
.navbar{
	margin-bottom: 0px;
}
.jumbotron h2{
	color: yellowgreen;
}

.bg-gray{
	background-color: #DDDDDD;
}

.bg-gray .col-md-8{
	text-align: center;
}

.bg-gray h2{
	color: yellowgreen;
}

.bg-gray .list-item{
	background: url("../img/icons.png")left top no-repeat;
	height: 112px;
	padding-left: 138px;
	margin-bottom: 20px;
}

.bg-gray .item2{
	background-position:left -112px;
}

.bg-gray .item3{
	background-position:left -224px;
}

.bg-gray .item4{
	background-position:left -336px;
}

.bg-gray .item5{
	background-position:left -448px;
}

.bg-gray .item6{
	background-position:left -560px;
}

.common .common-item a{
	display: block;
	height: 180px;
	width: 200px;
	background: url("..img/logos.png") left top no-repeat;
}

.common .common-item{
	width: 20%;
	margin: 0 auto;
}

@media (max-width:960) {
	body{
		background-color: lightblue;
		color: red;
	}
	
}

.common .log1{
	background-position: left -180px;
}

.common .log2{
	background-position: left -360px;
}

.common .log3{
	background-position: left -540px;
}

.common .log4{
	background-position: left -720px;
}

.common .col-md-8{
	text-align: center;
}

.gay .col-md-8{
	text-align: center;
}

.gay h2{
	color: yellowgreen;
}

.case-list .col-lg-3 .mask{
	position: absolute;
	left:0px;
	top:0px;
	width:100%;
	height:100%;
	background-color: #b5cd42;
	color:#fff;
	padding:10px;
	display: none;
}
.case-list .col-lg-3:hover .mask{
	display: block;
}

.links-list{
	margin-top: 72px;
	margin-bottom: 72px;
}
.links-list dt{
	font-size: 20px;
	color:#191919;
	line-height: 1;
	margin-bottom: 10px;
}
.links-list dd{
	line-height: 30px;
}
.links-list dd a{
	color:#a0a0a0;
}

.footer{
	background-color: #101010;
	color: #555555;
	text-align: center;
	padding-top: 25px;
	padding-bottom: 25px;	
}

在这里插入图片描述

小攸ya
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
软件20-4王静雯Bootstrap作业6
w_200415的博客
04-27 355
<!doctype html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 上述3个meta标签*必须*
软件20-4王静雯Bootstrap作业5
w_200415的博客
04-21 202
<!doctype html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 上述3个m
大学生bootstrap框架网页作业成品 web前端大作业期末源码 航海王html+jquery+bootstrap响应式网页制作模板 学生海贼王动漫bootstrap框架网站作品
网页设计与制作 | HTML+CSS+JS
05-21 323
HTML实例网页代码, 本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置，有div的样式格局，这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。 ⚽精彩专栏推荐👇🏻👇🏻👇🏻 ❤ 【作者主页——🔥获取更多优质源码】 ❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】 文章目录🌰一、网页介绍📖一、网页效果🌌二、代码展示😈1.HTML代码结构 🧱2.CSS样式代码 🏠三、个人总结😊四、更多干货🚀
软件20-4王静雯Bootstrap作业1
w_200415的博客
03-09 218
<!doctype html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 上述3个m
软件20-4王静雯Bootstrap作业7
w_200415的博客
05-07 113
user.html <!doctype html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 上述3个
软件20-4王静雯Bootstrap作业9
w_200415的博客
05-24 78
d1.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1,shrink-to-fit=no"> <link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css"
软件20-4王静雯Bootstrap作业3
w_200415的博客
04-07 91
<!doctype html> <html lang="zh-CN"> <head> <!-- 必须的 meta 标签 --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- <meta name="viewport" content="width=devi
软件20-4王静雯Bootstrap作业2
w_200415的博客
03-17 106
<!doctype html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 上述3个m
软件20-4王静雯Bootstrap作业8
w_200415的博客
05-15 162
index.html <!doctype html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 上述3
软件20-4王静雯Laravel作业2
w_200415的博客
03-28 154
UserController.php <?php namespace App\Http\Controllers; use Illuminate\Http\Request; class UserController extends Controller { public $students=[ ['id'=>1,'xh'=>'202020411134','xingming'=>'毕志慧','nianji'=>'2020','zhuanye'=>
bootstrap4-rtl:Bootstrap 4 RTL主题
05-25
bootstrap4-rtl Bootstrap 4 RTL主题 用法： <!-- Original Bootstrap 4.x -->... link rel =" stylesheet " href =" bootstrap-rtl.css " > 使用安装：npm install @ ghalamborm / bootstrap4-rtl
Bootstrap-v4-Datepicker:用于Bootstrap v4的基于Jquery的Datepicker插件
04-28
Bootstrap v4日期选择器回购的分叉在这里： 更改，以适应Bootstrap v4样式。CSS样式使用的仓库中的.scss文件，仓库已更新为Bootstrap 4样式表。JS样式datepicker元素的对齐仍处于关闭状态。 对其进行了更正，以适应...
flask-bs4:Bootstrap 4和5支持Flask
05-06
烧瓶-BS4Bootstrap v5.0.0-beta1已知错误： 无法从CDN服务v5.0.0-beta1，因为它试图加载v5.0.0与Bootstrap文档的差异： _wrap_boolean将有额外div不类，如果是FORM_TYPE basic或floating用法这是一个例子： from ...
dj-bootstrap-components:Django Bootstrap 4组件
04-30
dj-bootstrap-components Django Bootstrap组件支持的Python版本：3.7+支持的Django版本：3.0.0+快速开始文档： : 1.安装“ dj-bootstrap-components”。 推荐且唯一受官方支持的方式是使用pip： pip install dj-...
bootstrap4-cheatsheet：Bootstrap 4备忘单
01-31
Bootstrap 4备忘单是一个在线工具，可帮助您轻松找到Bootstrap 3和Bootstrap 4之间的区别。美观且易于使用，如果您要升级Bootstrap 3项目或开始，这应该是您的转到页面。一个新的Bootstrap 4项目。
【Datawhale AI 夏令营第三期学习笔记Taks1】 跑通baseline #Datawhale AI 夏令营
07-28
【Datawhale AI 夏令营第三期学习笔记Taks1】 跑通baseline #Datawhale AI 夏令营
餐厅营销策划方案.doc
07-28
商业计划书，创业计划书，项目计划书，计划书模板 【适用人群】：适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。
OpenMv串口通信，接收数据
最新发布
07-28
OpenMV 是一个开源的机器视觉平台，它为嵌入式系统提供了强大的图像处理能力。OpenMV 主要面向对机器视觉有需求的开发者和爱好者，通过其强大的微控制器和摄像头模块，用户可以在低成本的前提下实现复杂的视觉任务。OpenMV 既可以用于教育领域，帮助学生理解图像处理和计算机视觉的基础知识，也可以用于工业应用，实现自动化检测、分类和导航等功能。 在 OpenMV 系统中，通信模块是实现与其他设备或系统互联互通的关键部分。OpenMV 支持多种通信协议，包括串口通信（UART）、I2C、SPI、CAN 和 USB 等。这些通信接口使得 OpenMV 可以方便地与各种传感器、执行器以及其他嵌入式设备进行数据交换，从而扩展其应用范围和功能。 串口通信（UART）是一种广泛应用于嵌入式系统的通信方式，具有实现简单、成本低廉的优点。OpenMV 的 UART 接口可以与单片机、PC 甚至其他 OpenMV 板卡进行数据传输，使得图像数据和处理结果能够及时传递给其他系统。这个是电赛智能送药小车利用openMv进行的串口通信接收数据的代码
Bootstrap 4深度解析：构建响应式网站
"Learning Bootstrap 4 - Second Edition" Bootstrap 4是世界上最受欢迎的前端开发框架之一，用于构建响应式和美观的网站。这个框架的主要目标是简化网页设计和开发过程，提供一系列预先设计的组件、样式和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值