[Web]如何利用Boostrap框架搭建一个还可以的静态网站（五_子页_脱发指南）

于 2020-06-20 16:00:24 发布
阅读量279 收藏
点赞数
分类专栏： Web 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43910320/article/details/106871544
版权

文章目录

返回总结

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

整体效果

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

组件

之前书写的组件不再重复书写

人物介绍块

在这里插入图片描述

<div class="thumbnail">
				<img src="img/HairLossGuide/header_img_1_600x600.jpg" alt="..." class="img-circle thumbnail_img_size">
				<div class="caption">
				<h3 class="text-center font_head">蓝色怪猫</h3>
				<p>琴棋书画无不精通的一位怪猫</p>
				<p>在十几年的猫和老鼠连续剧当中永不脱发</p>
				<p>具有非常丰富的不掉毛发的经验</p>
				<p>是我们的不脱毛专家！</p>
				</div>
</div>

css

.thumbnail_img_size{
	height: 150px;
	width: 150px;
}
.font_head{
	color: red;
	font-family: "黑体";
}

内容介绍块

在这里插入图片描述

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

					<div id="" class="col-lg-8">
						<div class="col-lg-4">
							<div class="thumbnail">
								<img src="img/HairLossGuide/header_img_1_600x600.jpg" alt="..." class="img-circle thumbnail_img_size">
								<div class="caption">
									<h3 class="text-center font_head">蓝色怪猫</h3>
									<p>琴棋书画无不精通的一位怪猫</p>
									<p>在十几年的猫和老鼠连续剧当中永不脱发</p>
									<p>具有非常丰富的不掉毛发的经验</p>
									<p>是我们的不脱毛专家！</p>
								</div>
							</div>
						</div>

						<div class="col-lg-4">
							<div class="thumbnail">
								<img src="img/HairLossGuide/header_img_2_150X150.jpg " alt="..." class="img-circle thumbnail_img_size">
								<div class="caption">
									<h3 class="text-center font_head">羊村现任村长</h3>
									<p>絮絮叨叨唐僧再世却一心负责扛起大旗的老村长</p>
									<p>在十几年的喜羊羊和灰太狼连续剧当中疯狂长草</p>
									<p>具有非常丰富的增长毛发的经验</p>
									<p>是我们的长毛专家！</p>
								</div>
							</div>
						</div>

						<div class="col-lg-4">
							<div class="thumbnail">
								<img src="img/HairLossGuide/header_img_3_300X300.jpg" alt="..." class="img-circle thumbnail_img_size">
								<div class="caption">
									<h3 class="text-center font_head">美元界代表美元</h3>
									<p>象征的金钱与财富的美元</p>
									<p>在任何地点任何时间都可以让人花钱植发的秘密武器</p>
									<p>具有非常丰富的消费植发的经验</p>
									<p>是我们的植发专家！</p>
								</div>
							</div>
						</div>
					</div>

代码

独属CSS HairLossGuide.css

#HairLossGuide_carousel{
	height:50%;
}
.thumbnail_img_size{
	height: 150px;
	width: 150px;
}

html HairLossGuide.html

<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<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/SmokeNote_Style.css" />
		<link rel="stylesheet" type="text/css" href="css/CommonStyle.css" />
		<link rel="stylesheet" type="text/css" href="animate.min.css" />
		<link rel="stylesheet" type="text/css" href="css/HairLossGuide.css" />
		<script src="js/jquery-3.4.1.js"></script>
		<script src="js/bootstrap.min.js"></script>
		<script src="js/CommonStyle.js"></script>
		<title></title>
	</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"><!-- /.中文网 LOGO -->
				</div>
		</banner>

		<div id="" class="space_div_col12_height50px"></div>
		
		<marquee behavior="" direction="right">
			<!-- /.日期 -->
			<p id="timeOrder" class="font_date bounceInLeft animated"></p>
		</marquee>

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

			<div id="" class="col-lg-8">
				<div id="">
					<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/HairLossGuide/carousel_img_1_test.jpg" alt="..." class="style_autoIMG">
								<div class="carousel-caption">
									<h3 class="font_head">拒绝香烟,抵制诱惑</h3>
									<p>上帝救不了你，而你就是上帝</p>
								</div>
							</div>
							<div class="item">
								<img src="img/HairLossGuide/carousel_img_2.png" alt="..." class="style_autoIMG">
								<div class="carousel-caption">
									<h3 class="font_head">从我做起,掌控人生</h3>
									<p>不能失去生活的每一块阵地，从一根烟开始</p>
								</div>
							</div>
							<div class="item">
								<img src="img/adversting/adversting_changpai_1750X745%20-%20副本_gaitubao_900X385.png" alt="..." class="style_autoIMG">
								<div class="carousel-caption">
									<h3 class="font_head">加入我们,互帮互助</h3>
									<p>希望，未来，活力，家</p>
								</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>
			
			<div id="" class="col-lg-2"></div>
		</div>



		<div id="" class="space_div_col12_height50px"></div>
		
		<div id="" class="row">
			<div id="" class="col-lg-2"></div>
			<div id="" class="col-lg-8">
				<h2 class="text-center font_head">超级顾问团</h2>
			</div>	
			<div id="" class="col-lg-2"></div>
		</div>
		
		<div id="" class="space_div_col12_height50px"></div>
		
		<main>
			<div id="" class="container-fluid">
				<div id="" class="row">
					<div id="" class="col-lg-2"></div>

					<div id="" class="col-lg-8">
						<div class="col-lg-4">
							<div class="thumbnail">
								<img src="img/HairLossGuide/header_img_1_600x600.jpg" alt="..." class="img-circle thumbnail_img_size">
								<div class="caption">
									<h3 class="text-center font_head">蓝色怪猫</h3>
									<p>琴棋书画无不精通的一位怪猫</p>
									<p>在十几年的猫和老鼠连续剧当中永不脱发</p>
									<p>具有非常丰富的不掉毛发的经验</p>
									<p>是我们的不脱毛专家！</p>
								</div>
							</div>
						</div>

						<div class="col-lg-4">
							<div class="thumbnail">
								<img src="img/HairLossGuide/header_img_2_150X150.jpg " alt="..." class="img-circle thumbnail_img_size">
								<div class="caption">
									<h3 class="text-center font_head">羊村现任村长</h3>
									<p>絮絮叨叨唐僧再世却一心负责扛起大旗的老村长</p>
									<p>在十几年的喜羊羊和灰太狼连续剧当中疯狂长草</p>
									<p>具有非常丰富的增长毛发的经验</p>
									<p>是我们的长毛专家！</p>
								</div>
							</div>
						</div>

						<div class="col-lg-4">
							<div class="thumbnail">
								<img src="img/HairLossGuide/header_img_3_300X300.jpg" alt="..." class="img-circle thumbnail_img_size">
								<div class="caption">
									<h3 class="text-center font_head">美元界代表美元</h3>
									<p>象征的金钱与财富的美元</p>
									<p>在任何地点任何时间都可以让人花钱植发的秘密武器</p>
									<p>具有非常丰富的消费植发的经验</p>
									<p>是我们的植发专家！</p>
								</div>
							</div>
						</div>
					</div>

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

				<div id="" class="space_div_col12_height50px"></div>

				<div id="" class="row">
					<div id="" class="col-lg-2"></div>
					<div id="" class="col-lg-8">
						<h2 class="text-center font_normal">专家建议时间</h2>
					</div>	
					<div id="" class="col-lg-2"></div>
				</div>
				
				<div id="" class="space_div_col12_height50px"></div>
				
				
				
				<div id="" class="row">
					<div id="" class="col-lg-2"></div>

					<div id="" class="col-lg-8">
						<div id="" class="col-lg-4">
							<img src="img/HairLossGuide/header_img_1_600x600.jpg" class="style_autoIMG img-thumbnail div_center_byHeight_25percent">
						</div>
						<div id="" class="col-lg-8">
							<div id="" class="center-block">
								<h3  class="text-center">造成脱发的原因有哪些呢？</h3>
								<h4>一，激素原因？</h4>
								<p>内分泌失调也可引起脱发。甲状腺机能亢进或过低、男子雄性激素分泌过多、女性雌性激素分泌过少，都会引起早秃或大量脱发。同时产后脱发是正常现象，尤其是在产后3~4个月更为显著，可持续数月，原因就是怀孕时激素分泌旺盛，掉发减少，产后激素下降，代谢加速，导致脱发，其实就是过去9个月正常发量，产后6个月内恢复正常。</p>
								
								<h4>二，精神焦虑和生活作息不规律</h4>
								<p>情绪消沉、精神压抑或受到重大精神创伤时，人体的神经系统功能紊乱，头部血液供应不足，因而会在短时间内大量脱发。长期紧张脑力劳动及熬夜，会使头发、头皮毛囊的血液供应相对减少，毛囊因血液供应不足而逐渐萎缩退化导致脱发</p>
								
								<h4>三，清洁护理不到位或使用刺激性洗发水</h4>
								<p>经常不洗头容易造成毛囊堵塞，容易脱发。经常使用脱脂性强的洗发水，会是头发干燥、头皮坏死而出现脱发。</p>
								
								<h4>四，营养失衡</h4>
								
								<p>饮食单调可造成脱发，某些疾病造成的消化吸收机能障碍，可引起营养失衡，使毛发枯黄、易断或脱落等。现在的人忠于减肥，以瘦为美。饮食上营养跟不上，毛发干枯、脆裂，容易掉。</p>
								

							</div>
						</div>
					</div>

					<div id="" class="col-lg-2"></div>
				</div>
					
				<!--两个div50px 和一个hr构成的占位-->
				<div id="" class="space_div_col12_height50px"></div>
				<div id="" class="row">
					<div id="" class="col-lg-2"></div>
					<div id="" class="col-lg-8">
						<hr />
					</div>
					<div id="" class="col-lg-2"></div>
				</div>
				<div id="" class="space_div_col12_height50px"></div>

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

					<div id="" class="col-lg-8">
						<div id="" class="col-lg-8">
							<h3 class="text-center">如何有效生发?</h3>
							<h4>1.生姜水洗头</h4>
							<p>生姜水具有刺激生发，减少脱发的作用，而且还能杀菌去油。
用生姜水洗头前，要将生姜切成大小一样片状，然后加水烧开，煮出一锅浓浓的生姜水。如果你想要加强功效，可以选用榨汁机，直接将生姜榨汁，然后加入你的洗头水中即可。</p>
							
							<h4>2.适当按摩</h4>
							<p>我们都知道，要想拥有一头好头发，必须先得拥有一个健康的头皮。对头皮进行按摩，能刺激头皮毛细血管，让血液循环更旺盛，以供给大脑更多的氧气和养料。
头皮血液循环改善了，头发的生长发育也将会得到改善，对抑制头发脱落也有非常好地作用。</p>

							<h4>3.多吃含铁的食物</h4>
							<p>中医认为，“肝藏血，发为血之余，血亏则发枯。肾为先天之本，精血之源，其华在发。”头发变白和气血不足有关系，日常饮食可多吃补气血的食物，如猪肝、鸡蛋、海带等富含铁的食物。</p>
							
							<h4>4.适当运动</h4>
							<p>适当的运动。生命在于运动，适当的运动能够加快新陈代谢，提高营养吸收能力，配合合理饮食，有利于头发养护。！</p>
							
							<h4>5.保证睡眠时间</h4>
							<p>肾为先天之本，精血之源，其华在发，想要肾好，就要休息好，想要休息好，就要睡眠好，所以每天的睡眠时间尽可能保证在7~8个小时左右。</p>
						</div>
						<div id="" class="col-lg-4">
							<div id="" class="center-block">
								<img src="img/HairLossGuide/header_img_2_550X500.jpg" class="style_autoIMG img-thumbnail div_center_byHeight_25percent">
							</div>
						</div>
					</div>

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

				<!--两个div50px 和一个hr构成的占位-->
				<div id="" class="space_div_col12_height50px"></div>
				<div id="" class="row">
					<div id="" class="col-lg-2"></div>
					<div id="" class="col-lg-8">
						<hr />
					</div>
					<div id="" class="col-lg-2"></div>
				</div>
				<div id="" class="space_div_col12_height50px"></div>

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

					<div id="" class="col-lg-8">
						<div id="" class="col-lg-4">
							<img src="img/HairLossGuide/header_img_3_300X300.jpg" class="style_autoIMG img-thumbnail div_center_byHeight_25percent">
						</div>
						<div id="" class="col-lg-8">
							<div id="" class="center-block">
								<h3 class="text-center">植发防坑指南</h3>
								
								<h4>1、通过正规网站辨别医生的资质</h4>
								<p>植发主刀医生需要具备两个资质：医师资格证、医师执业证，这些都是可以在国家卫生健康委员会官网：http://www.nhc.gov.cn/ 进行医生资质查询的。我以 
@徐鲁
 医生为例，通过执业医院和名字就可以查询到医生的信息，如下图。</p>
	
								<h4>2、锁定植发医生年龄</h4>
								<p>在很多人的认知中，认为有经验的专家就一定是七老八十，并且年龄越大就越有经验！但在植发行业恰恰相反，植发是一个重实操的项目，并且还是一个体力活。植发手术我就拿最平常的3000单位算，最少也需要三四个小时才能做完，你真的指望一位六七十岁的专家弯着腰咬着牙，集中注意力三四个小时，拼命不让自己手抖为你植发？你确定当时你的心里不打鼓？
								</p>
								<br/>
								<p>告诉大家，植发医生的最佳年龄是在30~40岁，也就是青壮年时期，并且有了比较长的临床经验的医生才是最适合的。以我们医院的医生机制为例，必须在临床外科注册满三年，并有学习培训1年以上才可独立操作植发，我们的 @徐鲁  医生，他的临床经验就非常丰富，至今从业十余年了，并且也为很多知友植发过。
								</p>
								
								<h4>3、确保整个植发过程中，亲自为你植发的医生始终是同一个人</h4>
								<p>在任何地点任何时间都可以让人花钱植发的秘密武器</p>
								
							</div>
						</div>
					</div>

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

		<div id="" class="space_div_col12_height50px"></div>

		<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>
Freeman Z
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Freeman Z

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值