[Web]如何利用Boostrap框架搭建一个还可以的静态网站(五_子页_脱发指南)
文章目录
- 返回总结
- 整体效果
- 组件
- 人物介绍块
- 内容介绍块
- 代码
- 独属CSS HairLossGuide.css
- html HairLossGuide.html
返回总结
如何利用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>
[Web]如何利用Boostrap框架搭建一个还可以的静态网站(五_子页_脱发指南)相关推荐
- [Web]如何利用Boostrap框架搭建一个还可以的静态网站(六_子页)
文章目录 返回总结 整体效果 组件 vedio题目 vedio博主介绍 vedio vedio用户留言 电子烟评测块 辩论块 代码 html ElectronicCigarettes.html 返回总 ...
- [Web]如何利用Boostrap框架搭建一个还可以的静态网站(四_子页_戒烟小说)
文章目录 返回总结 整体效果 思路 组件 轮播图 排行榜 轮播广告语 广告 空行 小说块 代码 独属css SmokeNote_Style.css html SmokeNote.html 返回总结 如 ...
- [Web]如何利用Boostrap框架搭建一个还可以的静态网站(三_主页)
文章目录 返回总结 整体效果 思路 各个组件代码 导航栏 LOGO 滚动时间 标题线 图词模块 页脚 代码 独属css文件 indexCss1.css html代码 index.html 返回总结 如 ...
- 通过python利用Django框架搭建一个属于自己的免费网站(已更新)
大家好,我是天空之城,今天给大家带来,通过python利用Django框架搭建一个属于自己的免费网站. 以下是网上找到的免费教程,https://djangogirlstaipei.gitbooks. ...
- 用VuePress来搭建一个极简的静态网站
VuePress学习 全局安装前我们需要Git和node这两个软件,关于怎么安装可以我之前hexo的视频教程 假如这两个都没有安装好,那么下面就不需要看了哈,栈友们 全局安装 首先我们先全局安装一下 ...
- github项目怎么运行_利用 GitHub 从零开始搭建一个博客
"NightTeam",一个值得加星标的公众号. 趁着周末,搭建了一下 NightTeam 的官方博客和官方主页,耗时数个小时,两个站点终于完工了. 由于 NightTeam 的域 ...
- 快速的利用 Express 框架实现一个 Rustfull 接口的后端 Server
快速的利用 Express 框架实现一个 Rustfull 接口的后端 Server 附:基于 Nodejs 的服务器后端的框架用的比较多的是 Koa : github/kaojs/koa 但本文这里 ...
- 如何利用laragon框架制作一个简单的应用?
如何利用laragon框架制作一个简单的应用? 一.搭建环境 1. 安装Laragon 1.1 打开安装包用的语言 选择自己习惯用的语言 1.2 选择安装地址 1.3 选择Next,开始install ...
- 利用 GitHub 从零开始搭建一个博客
"NightTeam",一个值得加星标的公众号. 趁着周末,搭建了一下 NightTeam 的官方博客和官方主页,耗时数个小时,两个站点终于完工了. 由于 NightTeam 的域 ...
最新文章
- arXiv爆款:想了解Attention就看它!
- 敢问路在何方——项目经理成长手记
- 汇编-使用VS2008查看反汇编语言
- 用钱生钱,从掌握金钱的规律开始
- MySQL基础总结(一)
- 数据结构之选择排序:堆排序
- 快速搭建 SpringCloud 微服务开发环境的脚手架
- 下班后比你多学2个小时的人,在看这几个公众号
- USB HID 协议
- CCF201604试题
- Java基础(彩票小程序)
- Vue之echarts圆饼图详解
- 全球创见者共话企业韧性 金蝶“数字员工”惊艳亮相
- [CF 417D]Cunning Gena:状压DP
- pgAdmin4 汉化
- 分糖问题和插板法:10个相同糖果分给3个小朋友,有几种分法?
- [笔记]物化视图和普通视图
- 机器翻译与编码-解码模型 Machine Translation and Encoder-Decoder Models
- JAVA sleep函数如何用_转载:java中Thread.sleep()函数使用
- JavaScript中的强制多态 | Lynda教程 中文字幕