[Web]如何利用Boostrap框架搭建一个还可以的静态网站（五_子页_脱发指南）
文章目录
- 返回总结
- 整体效果
- 组件
- 人物介绍块
- 内容介绍块
- 代码
- 独属CSS HairLossGuide.css
- html HairLossGuide.html
返回总结
如何利用Boostrap框架搭建一个还可以的静态网站
整体效果
![[Web]如何利用Boostrap框架搭建一个还可以的静态网站（五_子页_脱发指南）_第1张图片](http://img.e-com-net.com/image/info8/ff45870f7b5b4baa805fd7748b4b4b70.jpg)
![[Web]如何利用Boostrap框架搭建一个还可以的静态网站（五_子页_脱发指南）_第2张图片](http://img.e-com-net.com/image/info8/b90e7277ec04417c820aea82ddc38888.jpg)
![[Web]如何利用Boostrap框架搭建一个还可以的静态网站（五_子页_脱发指南）_第3张图片](http://img.e-com-net.com/image/info8/d1a88c1c4faa4be1ba10f725204e577c.jpg)
组件
之前书写的组件不再重复书写
人物介绍块
![[Web]如何利用Boostrap框架搭建一个还可以的静态网站（五_子页_脱发指南）_第4张图片](http://img.e-com-net.com/image/info8/6e5ff0a5ab8a4006bca8af198eaa53ad.jpg)
<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: "黑体";
}
内容介绍块
![[Web]如何利用Boostrap框架搭建一个还可以的静态网站（五_子页_脱发指南）_第5张图片](http://img.e-com-net.com/image/info8/84e7be149a9446d19de4c50009cf05e6.jpg)
<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>