[Web]如何利用Boostrap框架搭建一个还可以的静态网站（三_主页）

精选原创

俺叫西西弗斯 2023-07-07 11:47:31 博主文章分类：Web ©著作权

文章标签 前端 css html ico 文章分类 Python 后端开发

©著作权归作者所有：来自51CTO博客作者俺叫西西弗斯的原创作品，请联系作者获取转载授权，否则将追究法律责任

文章目录

返回总结
整体效果
思路
各个组件代码

导航栏
LOGO
滚动时间
标题线
图词模块
页脚

代码

独属css文件 indexCss1.css
html代码 index.html

返回总结

如何利用Boostrap框架搭建一个还可以的静态网站

整体效果

[Web]如何利用Boostrap框架搭建一个还可以的静态网站（三_主页）_前端

[Web]如何利用Boostrap框架搭建一个还可以的静态网站（三_主页）_html_02

[Web]如何利用Boostrap框架搭建一个还可以的静态网站（三_主页）_html_03

思路

我们很显然采用一头一尾中间三分的结构，给出适度的余白

各个组件代码

导航栏

[Web]如何利用Boostrap框架搭建一个还可以的静态网站（三_主页）_前端_04

<header>
			<div>
				<nav class="navbar navbar-default col-lg-12" id="_header_MainScreen">
					<div class="container-fluid">
						<!-- 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>
							<div id="" class="AUTO_center"><a class="navbar-brand" href="#"><img src="img/logo.png"></a></div>
						</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><a href="index.html"  class="font_style_150-withe-txt">主站 <span class="sr-only">(current)</span></a></li>
								<li><a href="SmokeNote.html"  class="font_style_150-withe-txt">戒烟说</a></li>
								<li><a href="HairLossGuide.html"  class="font_style_150-withe-txt">脱发指南</a></li>
								<li><a href="ElectronicCigarettes.html"  class="font_style_150-withe-txt">电子烟评鉴</a></li>
								<li><a href="register.html"  class="font_style_150-withe-txt">加入我们</a></li>
							</ul>
							<form class="navbar-form navbar-left">
								<div class="form-group">
									<input type="text" class="form-control" placeholder="Search">
								</div>
								<button type="submit" class="btn btn-default">百度一下</button>
							</form>
							<ul class="nav navbar-nav navbar-right">
								<li><a href="#"  class="font_style_150-withe-txt">登入</a></li>
								<!-- <li><a href="#"><img src="img/logo/tg_100x31.png" ></a></li>-->
							</ul>
						</div><!-- /.navbar-collapse -->
					</div><!-- /.container-fluid -->
				</nav>
			</div>
		</header>

css

.font_style_150-withe-txt{
	font-size: 150%;
	color: white;
}

LOGO

[Web]如何利用Boostrap框架搭建一个还可以的静态网站（三_主页）_html_05

<banner>
			<div class="jumbotron color_MianColor" id="_banner_jumbotron">
				<div id="_Main_title_logo" class="bounceInRight animated">
					<img src="img/_Main_Tiele.png">
				</div>
				
				<br/>
				

		</banner>

css

.color_MianColor{
	background-color: #ffdeeb;
}

#_banner_jumbotron{
	max-height: 200px;
	background-image:url(../img/Main_bg_PC_0607PM.png)
}

#_Main_title_logo{
	padding-left: 5%;
}

.font_date{
	font-size: 250%!important;
	font-family: 黑体;
	color: black;
}

滚动时间

[Web]如何利用Boostrap框架搭建一个还可以的静态网站（三_主页）_ico_06

<marquee behavior="" direction="right"><p id="timeOrder" class="font_date bounceInLeft animated"></p></marquee>

css

$(window).bind("load", function ()
		{
			function getDate()
			{
			var time = new Date();
			var year = time.getFullYear();
			var month = time.getMonth()+1;
			var day = time.getDate();
			var time_H = time.getHours();			
			var time_M = time.getMinutes();
			var time_S = time.getSeconds();
			var time_flag;
			var time_xq = time.getDay();
			if(time_xq==1) time_xq='一';
			if(time_xq==2) time_xq='二';
			if(time_xq==3) time_xq='三';
			if(time_xq==4) time_xq='四';
			if(time_xq==5) time_xq='五';
			if(time_xq==6) time_xq='六';
			if(time_xq==7) time_xq='七';
				
			if(time_H<=12) time_flag="am";else time_flag="pm";
			
			var str = year+"年"+month+"月"+day+"日"+"星期"+time_xq+time_H+":"+time_M+":"+time_S+time_flag;
			$("#timeOrder").html(str);
			}
				
				
			setInterval(getDate,"1000");
})

标题线

[Web]如何利用Boostrap框架搭建一个还可以的静态网站（三_主页）_css_07

<div id="" class="row">
					
					<div id="" class="col-lg-2"></div>
					<div id="" class="col-lg-8">
						<img src="img/logo/戒烟说.png" class="up10px">
						<b class="banner_secoend_hr_Header-font-style">戒烟说</b>
						<img src="img/logo/火.png">
						<b class="banner_secoend_hr_Txt-font-style">阅读是请教他人的过往，最佳的行程</b>
						<br />
						<hr />
					</div>
					<div id="" class="col-lg-2"></div>
				</div>

css

.banner_secoend_hr_Header-font-style{
	font-size: 250%;
	font-family: "黑体";
	color:black;
}

图词模块

[Web]如何利用Boostrap框架搭建一个还可以的静态网站（三_主页）_css_08

<div class="col-sm-4 col-md-4">
								<div class="thumbnail">
									<img src="img/banner_imgs/1.jpg" alt="...">
									<div class="caption">
										<h3>回响</h3>
										<p><a href="#" class="btn btn-primary" role="button">即刻阅读</a></p>
									</div>
								</div>
							</div>

页脚

[Web]如何利用Boostrap框架搭建一个还可以的静态网站（三_主页）_ico_09

<tfoot>
			<div id="footer_Info" class="color_footer" align="center">
				<div class="row">
					<div class="col-lg-6 col-md-6 col-sm-12" text-align="left">
						<p><a href="">备案信息：渝ICP备</a></p>
						<p class="font_style_150-withe-txt">使用chrome,火狐等最新主流浏览器获得更好的浏览效果</p>
						<p class="font_style_150-withe-txt">网站建议或者意见请发送邮件：</p>s
						<p class="font_style_150-withe-txt">© NOSmoke 2020. All rights reserved.</p>
					</div>
					<div class="col-lg-6 col-md-6 col-sm-12">
						<p class="font_style_150-withe-txt">扫码关注公众号'老烟鬼教你戒烟'!</p>
						<p class="font_style_150-withe-txt">加入戒烟群，重获新生！</p>
						<img src="img/MainPage_FootQRCode.png" style="height: 150px; width:150px;">
					</div>
				</div>
			</div>
		</tfoot>

#footer_Info{
	padding: 0px;
	margin: 0px;
}

.color_footer{
	background-color: #222222;
}

.font_style_150-withe-txt{
	font-size: 150%;
	color: white;
}

代码

独属css文件 indexCss1.css

*{
	padding:0px;margin:0px;
}
html,body{
	width: 100%;height: 100%;
	background: #f6f9fa;
}

hr{
	border: none;
	background-color:#444444;
	height: 2px;
}

img{
	
}

#_mian_style{
	width: 80%;
	margin-top: 5%;
	margin-bottom: 5%;
}
#_mian_screenCore{
	height: 1200px;
	width: 80%;
	border-radius: 5px;
	border: 2px solid;
	margin: 0 auto;
	margin-top: 5%;
	margin-bottom: 5%;
	text-decoration: none; 
}
#_header_MainScreen{
	max-height: 200px;
	background-image: url(../img/Main_bg_PC_0607PM.png);
	padding: 0px;
	margin: 0px;
	text-decoration: none; 
}
#_banner_jumbotron{
	max-height: 200px;
	background-image:url(../img/Main_bg_PC_0607PM.png)
}
#footer_Info{
	padding: 0px;
	margin: 0px;
}

.color_MianColor{
	background-color: #ffdeeb;
}

.color_footer{
	background-color: #222222;
}

.AUTO_center{
	margin: 0 auto;
}

.font_head{
	color: red;
	font-family: "黑体";
}
.font_txt{
	font-size: 30px;
	color: #111111;
}
._main_new_img{
	height: 200px;
	width:300px;
	box-shadow: 5px 5px 5px;
	border-radius: 10px;
}
#_Main_title_logo{
	padding-left: 5%;
	
}

#banner_word_img{
	min-height: 700px;	
	
	background-image:url(../img/banner_imgs/banner_word_bg_600X900.jpg)
}

.style_autoIMG{
	width: 100%;
	height: 100%;
}

.banner_secoend_hr_Header-font-style{
	font-size: 250%;
	font-family: "黑体";
	color:black;
}
.banner_secoend_hr_Txt-font-style{
	font-size: 90%;
	font-family: "黑体";
}

.up10px{
	margin-top:-10px;
}

.font_zhenjing{
	font-size: 320%;
	font-family: "黑体";
	color: red;
}
.space_lr_50px{
	width: 50px;
	height: 50px;
}
.space_ud_style_5{
	margin-top: 5%;
	margin-bottom: 5%;
}
.space_ud_style_1{
	margin-top: 1%;
	margin-bottom: 1%;
}
#_main_news_1_img{
	background-image: url(../img/_mian_new_1_570x357.png);
	min-height: 250px;
	height: 100%;
}
#_main_news_2_img{
	background-image: url(../img/_mian_new_2_570x338.png);
	min-height: 250px;
	height: 100%;
}
#_main_news_3_img{
	background-image: url(../img/_mian_new_3_570x300.png);
	min-height: 250px;
	height: 100%;
}
._main_news_blockStyle{
	border-radius: 5px;
	border: 2px solid #000000;
	margin-bottom: 50px;
	min-height: 260px;
	box-shadow: 10px 10px 5px #888888;
}
#advertising_img{
	background-image: url(../img/adversting/adversting_1_1700X144.png);
	min-height: 144px;
	min-width: 500px;	
}

#advertising_lastBanner_img{
	background-image: url(../img/adversting/adversting_changpai_1750X745.png);
	min-height: 750px;
	min-width: 500px;	
}
.border_right_solid-2-black{
	border-right: solid 2px #000000;
}
.font_style_150-withe-txt{
	font-size: 150%;
	color: white;
}

.bg-pan-right {
	-webkit-animation: bg-pan-right 8s both;
	        animation: bg-pan-right 8s both;
}

html代码 index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
		<link rel="stylesheet" type="text/css" href="css/style.css" />
		<link rel="stylesheet" type="text/css" href="css/bootstrap-datetimepicker.css">
		<link rel="stylesheet" type="text/css" href="css/indexCss1.css" />
		<link rel="stylesheet" type="text/css" href="css/CommonStyle.css"/>
		<link rel="stylesheet" type="text/css" href="animate.min.css"/>
		<script src="js/jquery-3.4.1.js"></script>
		<script src="js/CommonStyle.js"></script>
		<script type="text/javascript">
			
		</script>
	</head>
	<body>
		<header>
			<div>
				<nav class="navbar navbar-default col-lg-12" id="_header_MainScreen">
					<div class="container-fluid">
						<!-- 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>
							<div id="" class="AUTO_center"><a class="navbar-brand" href="#"><img src="img/logo.png"></a></div>
						</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><a href="index.html"  class="font_style_150-withe-txt">主站 <span class="sr-only">(current)</span></a></li>
								<li><a href="SmokeNote.html"  class="font_style_150-withe-txt">戒烟说</a></li>
								<li><a href="HairLossGuide.html"  class="font_style_150-withe-txt">脱发指南</a></li>
								<li><a href="ElectronicCigarettes.html"  class="font_style_150-withe-txt">电子烟评鉴</a></li>
								<li><a href="register.html"  class="font_style_150-withe-txt">加入我们</a></li>
							</ul>
							<form class="navbar-form navbar-left">
								<div class="form-group">
									<input type="text" class="form-control" placeholder="Search">
								</div>
								<button type="submit" class="btn btn-default">百度一下</button>
							</form>
							<ul class="nav navbar-nav navbar-right">
								<li><a href="#"  class="font_style_150-withe-txt">登入</a></li>
								<!-- <li><a href="#"><img src="img/logo/tg_100x31.png" ></a></li>-->
							</ul>
						</div><!-- /.navbar-collapse -->
					</div><!-- /.container-fluid -->
				</nav>
			</div>
		</header>


		<banner>
			<div class="jumbotron color_MianColor" id="_banner_jumbotron">
				<div id="_Main_title_logo" class="bounceInRight animated">
					<img src="img/_Main_Tiele.png">
				</div>
				
				<br/>
				<marquee behavior="" direction="right"><p id="timeOrder" class="font_date bounceInLeft animated"></p></marquee>

		</banner>
		<!--
		<banner_secoend>
			<div id="" class="container">
				<div id="" class="row">
					<div id="" class="col-lg-1">
						
					</div>
					<div id="" class="col-lg-2">
						<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
							<!-- Indicators -->
		<!--<ol class="carousel-indicators">
								<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
								<li data-target="#carousel-example-generic" data-slide-to="1"></li>
								<li data-target="#carousel-example-generic" data-slide-to="2"></li>
							</ol>

							<!-- Wrapper for slides -->
		<!--<div class="carousel-inner" role="listbox">
								<div class="item active">
									<img src="img/_mian_new_1.png" alt="...">
									<div class="carousel-caption">
										...
									</div>
								</div>
								<div class="item">
									<img src="..." alt="...">
									<div class="carousel-caption">
										...
									</div>
								</div>
								...
							</div>

							<!-- Controls -->
		<!--<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
								<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
								<span class="sr-only">Previous</span>
							</a>
							<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
								<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
								<span class="sr-only">Next</span>
							</a>
						</div>
					</div>
					<div id="" class="col-lg-8">
						
					</div>
					<div id="" class="col-lg-1">
						
					</div>
				</div>
			</div>
		</banner_secoend>-->



		<mid class="container-fluid">

			<banner_secoend_hr>
				<div id="" class="row">
					
					<div id="" class="col-lg-2"></div>
					<div id="" class="col-lg-8">
						<img src="img/logo/戒烟说.png" class="up10px">
						<b class="banner_secoend_hr_Header-font-style">戒烟说</b>
						<img src="img/logo/火.png">
						<b class="banner_secoend_hr_Txt-font-style">阅读是请教他人的过往，最佳的行程</b>
						<br />
						<hr />
					</div>
					<div id="" class="col-lg-2"></div>
				</div>
				<banner_secoend_hr />

				<banner_secoend class="row">
					<div id="" class="col-lg-2"></div>
					<banner_pic class="col-lg-5">
						<div class="row">
							<div class="col-sm-4 col-md-4">
								<div class="thumbnail">
									<img src="img/banner_imgs/1.jpg" alt="...">
									<div class="caption">
										<h3>回响</h3>
										<p><a href="#" class="btn btn-primary" role="button">即刻阅读</a></p>
									</div>
								</div>
							</div>

							<div class="col-sm-4 col-md-4">
								<div class="thumbnail">
									<img src="img/banner_imgs/2.jpg" alt="...">
									<div class="caption">
										<h3>下午二点十三分</h3>
										<p><a href="#" class="btn btn-primary" role="button">即刻阅读</a></p>
									</div>
								</div>
							</div>

							<div class="col-sm-4 col-md-4">
								<div class="thumbnail">
									<img src="img/banner_imgs/3.jpg" alt="...">
									<div class="caption">
										<h3>雾</h3>
										
										<p><a href="#" class="btn btn-primary" role="button">即刻阅读</a></p>
									</div>
								</div>
							</div>

						</div>


						<div class="row">

							<div class="col-sm-4 col-md-4">
								<div class="thumbnail">
									<img src="img/banner_imgs/4.jpg" alt="...">
									<div class="caption">
										<h3>幻</h3>
										
										<p><a href="#" class="btn btn-primary" role="button">即刻阅读</a></p>
									</div>
								</div>
							</div>

							<div class="col-sm-4 col-md-4">
								<div class="thumbnail">
									<img src="img/banner_imgs/5.jpg" alt="...">
									<div class="caption">
										<h3>秘密</h3>
										
										<p><a href="#" class="btn btn-primary" role="button">即刻阅读</a></p>
									</div>
								</div>
							</div>

							<div class="col-sm-4 col-md-4">
								<div class="thumbnail">
									<img src="img/banner_imgs/6.jpg" alt="...">
									<div class="caption">
										<h3>一地鸡毛</h3>
										
										<p><a href="#" class="btn btn-primary" role="button">即刻阅读</a></p>
									</div>
								</div>
							</div>

						</div>

					</banner_pic>

					<banner_word class="col-lg-3">
						<img src="img/banner_imgs/banner_word_bg_600X900.jpg" class="style_autoIMG">					
					</banner_word>

					<div id="" class="col-lg-2"></div>
				</banner_secoend>


				<tuofa>

					<div id="" class="row">
						<div id="" class="col-lg-2"></div>
						<div id="" class="col-lg-8">
							<img src="img/hairGuide/头发.png" class="up10px">
							<b class="banner_secoend_hr_Header-font-style">脱发指南</b>
							<img src="img/logo/火.png">
							<b class="banner_secoend_hr_Txt-font-style">保护头发，是对抗岁月，最有效的方式</b>
							<br />
							<hr />
						</div>
						<div id="" class="col-lg-2"></div>
					</div>

					<div id="" class="row">
						<div id="" class="col-lg-2"></div>
							
						<div id="" class="col-lg-8">
							<div class="col-lg-6">
								<img src="img/toufa_duang_850x498.png" class="style_autoIMG">
							</div>
							<div id="" class="col-lg-6">
								<h3 class="font_zhenjing">震惊！华人巨星论及防护脱发竟这样说！</h3>
								<p class="font_txt"> 其实第一次听说这个话题我是拒绝的，</p>
								<p class="font_txt"> 因为，你不能让我做，我就马上去做，第一我要试一下</p>
								<p class="font_txt"> 因为我不愿意做完之后猛的长一些头发，</p>
								<p class="font_txt"> 头发“DAUNG”一下，</p>
								<p class="font_txt"> 很长，很亮，观众肯定会骂我，说吸烟长不了这么长的头发</p>
								<p class="font_txt"> 但是这个真的很好用，吸烟脱发更有用</p>
								<p class="font_txt"> 我用洗发露一个月的样子，感觉还不错，你们洗完之后也会是这个样子！</p>
							</div>
						</div>

						<div id="" class="col-lg-2"></div>
					</div>
				</tuofa>
				
				<advertising>
					<div id="" class="row space_ud_style_1">
						<div id="" class="col-lg-2"></div>
						<div id="" class="col-lg-8">
							<div class="col-lg-12">
								<img src="img/adversting/adversting_1_1700X144.png" class="style_autoIMG">
							</div>
						</div>
						<div id="" class="col-lg-2"></div>
						
					</div>
				</advertising>
				
				<main class="container-fluid">

					<div id="" class="row">
						<div id="" class="col-lg-2"></div>
						<div id="" class="col-lg-8">
							<img src="img/news.png" class="up10px">
							<b class="banner_secoend_hr_Header-font-style">今日新闻</b>
							<img src="img/logo/火.png">
							<b class="banner_secoend_hr_Txt-font-style">了解当下，掌握当下</b>
							<br />
							<hr />
						</div>				
					</div>

					
					<div id="" class="row">
						<div id="" class="col-lg-2"></div>

						<div id="" class="form-group col-lg-8">
							<div id="" class="">
								<div id="_main_new1" class="_main_news_blockStyle">
									<div id="_main_news_1_img" class="col-lg-4 border_right_solid-2-black"></div>
									<div id="" class="col-lg-8">
										<h3 class="font_head">美议员提法案:购买香烟的合法年龄上调至100岁</h3>
										<p class="font_txt">美国50个州之一的夏威夷最近有议员提出法案，</p>
										<p class="font_txt">计划增加购买香烟的最低年龄，如果该法案通过</p>
										<p class="font_txt">数年后购买香烟的最低年龄将达到100岁</p>
										<p class="font_txt">从而事实上禁止了大多数人使用香烟。</p>
									</div>
								</div>
								
								<div id="_main_new1" class="_main_news_blockStyle">
									<div id="_main_news_2_img" class="col-lg-4 border_right_solid-2-black"></div>
									<div id="" class="col-lg-8">
										<h3 class="font_head">香港全面禁止电子烟</h3>
										<p class="font_txt">香港特别行政区行政长官林郑月娥 10 月 10
										日在任内第二份“施政报告”宣布香港将会全面禁止电子烟,她引用专家观点认为电子烟祸害大，</p>
										<p class="font_txt">有研究发现，电子烟可导致男性不育，甚至致癌。</p>
										<p class="font_txt">消息一出便迎来各方关注，虽然此前一直有学者呼吁香港政府解禁电子烟，</p>
										<p class="font_txt">但这次全面禁止电子烟走向立法阶段还是给了众人当头棒喝.	</p>
									</div>
								</div>
								
								<div id="_main_new1" class="_main_news_blockStyle">
									<div id="_main_news_3_img" class="col-lg-4 border_right_solid-2-black"></div>
									<div id="" class="col-lg-8">
										<h3 class="font_head">利用短信对戒烟进行干预和帮助的实验研究</h3>
										<p class="font_txt">我们的研究结果表明，基于手机短信的干预</p>
										<p class="font_txt">无论是高频还是低频短信，都增加了戒烟，尽管是在一少部分吸烟者中发生。</p>
										<p class="font_txt">因此可以考虑在中国展开大规模的手机短信干预戒烟。</p>
										<p class="font_txt">基于移动电话的干预措施还可以与中国的寻求戒烟者的其他戒烟服务搭配使用。</p>
									</div>
								</div>

								
							</div>
						</div>

						<div id="" class="col-lg-2">

						</div>

					</div>
				</main>

				
				<div id="" class="row">
					<div id="" class="col-lg-2"></div>
					<div id="" class="col-lg-8">
						<img src="img/logo/拳头.png" class="up10px">
						<b class="banner_secoend_hr_Header-font-style">加入我们</b>
						<img src="img/logo/火.png">
						<b class="banner_secoend_hr_Txt-font-style">把戒烟的理念带给更多需要帮助的人！</b>
						<br />
						<hr />
					</div>
					<div id="" class="col-lg-2"></div>
				</div>
				
				<advertising_lastBanner>
					<div id="" class="row space_ud_style_1">
						<div id="" class="col-lg-2"></div>
						<div class="col-lg-8">
							<img src="img/adversting/adversting_changpai_1750X745.png" class="style_autoIMG">
						</div>
						<div id="" class="col-lg-2"></div>
						
					</div>
				</advertising_lastBanner>
				
		</mid>

		<tfoot>
			<div id="footer_Info" class="color_footer" align="center">
				<div class="row">
					<div class="col-lg-6 col-md-6 col-sm-12" text-align="left">
						<p><a href="">备案信息：渝ICP备</a></p>
						<p class="font_style_150-withe-txt">使用chrome,火狐等最新主流浏览器获得更好的浏览效果</p>
						<p class="font_style_150-withe-txt">网站建议或者意见请发送邮件：</p>s
						<p class="font_style_150-withe-txt">© NOSmoke 2020. All rights reserved.</p>
					</div>
					<div class="col-lg-6 col-md-6 col-sm-12">
						<p class="font_style_150-withe-txt">扫码关注公众号'老烟鬼教你戒烟'!</p>
						<p class="font_style_150-withe-txt">加入戒烟群，重获新生！</p>
						<img src="img/MainPage_FootQRCode.png" style="height: 150px; width:150px;">
					</div>
				</div>
			</div>
		</tfoot>
	</body>
	

</html>