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

文章目录

• 返回总结
• 整体效果
• 组件

• vedio题目
• vedio博主介绍
• vedio
• vedio用户留言
• 电子烟评测块
• 辩论块

• 代码

• html ElectronicCigarettes.html

返回总结

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

整体效果

组件

前面已经写过的不再重复

vedio题目

<div id="" class="col-lg-5">
						<h2>小安的电子烟凭评测！~</h2>
						<p class="font_normal">音乐>电音 2020-06-18 12:00:08</p>
						<p>3.5万播放 · 393弹幕 <img src="img/logo/禁止.png" > 未经作者授权，禁止转载</p>
						</video>
					</div>

vedio博主介绍

<div id="" class="col-lg-3">
						<div id="" class="col-lg-3">
							<img src="img/ElectronicCigarettes/user_img_1.jpg" class="img-circle style_autoIMG">
						</div>
						<div id="" class="col-lg-9">
							<div id="" class="row">
								<div id="" class="col-lg-8">
									<h3 class="userName_color">小安是小安不是烟鬼</h3>
								</div>
								<div id="" class="col-lg-4">
									<p><img src="img/logo/信.png" >私信</p>
								</div>
							</div>

							<p>这个人很懒，什么都懒得说</p>
							<button type="button" class="btn btn-success btn-lg btn_size_25percent">关注</button>
							<button type="button" class="btn btn-danger btn-lg btn_size_25percent">充电</button>
						</div>
					</div>

css

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

.userName_color{
	color: #FB7299;
}

vedio

<div id="" class="row">
					<!--电子烟视频-->
					<div id="" class="col-lg-2"></div>

					<div id="" class="col-lg-8">
						<video src="ElectronicCigarettes/Moive/电子烟劝解.mp4" controls="controls" autoplay="autoplay" class="style_autoIMG bounceInDown animated">
						</video>
					</div>

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

vedio用户留言

<div id="" class="col-lg-2">
							<img src="img/ElectronicCigarettes/user_img_1.jpg"  class="style_autoIMG img-circle">
						</div>
						<div id="" class="col-lg-10">
							<h3 class="userName_color">小安是小安不是烟鬼</h3>
							<p>小孩子不要购买电子烟哦~</p>
							<p>小孩子不要购买电子烟哦~</p>
							<p>小孩子不要购买电子烟哦~</p>
							<p>重要的话说三遍！</p>
							<b>两小时前  </b><img src="img/logo/支持_2.png" >123   <img src="img/logo/反对_2.png" >
							 
							<b>回复</b>
						</div>

css

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

.userName_color{
	color: #FB7299;
}

电子烟评测块

<div class="col-lg-4">
						<div class="thumbnail">
							<img src="img/ElectronicCigarettes/mid_img_1_599x247.png" alt="..." class="rotateInDownLeft animated">
							<div class="caption">
								<h3>太上皇-菠萝</h3>
								<p>口感体验：入口酸甜可口菠萝，有如一口甘甜可口的菠萝脆爽的口感，浓郁的菠萝精华在口腔中蔓延，配搭清凉显得不那么甜腻，口感还原到位！菠萝就在口中~</p>
							</div>
						</div>
					</div>

辩论块

<div class="panel panel-info">
						  <div class="panel-heading">
						    <h2 class="panel-title">电子烟危害远小于普通烟</h3>
						  </div>
						  <div class="panel-body">
							<p>焦油</p>
							<p>普通烟危害最大的是焦油，焦油是指吸烟过程中烟嘴内留存的一层棕色油腻物质，俗称烟油。
							吸烟过程中非常直观的一种变化，就是过滤嘴随着抽吸颜色逐渐加深，而夹着烟的手指也会被熏的变色，
							当然吸烟后牙齿也会随之被染上一层深色，而其根源就在于焦油。</p>

							<p>焦油可不只是变色这么简单，事实上，它是有机物在缺氧条件下不完全燃烧的产物，因此包含非常多的有物质，其中不少都是致癌物，比如苯并芘、镉、砷、β荼、胺、亚硝胺等多种致癌物质和苯酚类、富马酸等促癌物质，正因为如此，普通烟草成为了世界卫生组织旗下国际癌症研究机构列出的一类致癌物，也就是明确致癌。除此以外，烟焦油还会导致加速人体血管老化，导致血管逐步硬化丧失弹性导致心血管疾病，其他诸多疾病也往往是因为焦油导致的，因此很多疾病医生的第一建议就是戒烟。
							</p>
							
							<p>尼古丁</p>
							<p>尼古丁是烟草中的另一个重要成分，也是众所周知的烟草成分，尼古丁俗称烟碱，其本身的生理危害并不像烟焦油那样严重，但是尼古丁有一个很麻烦的问题，那就是成瘾性。尼古丁会导致人上瘾，这也是为什么吸烟的人戒烟困难。在这一点上，无论是电子烟还是普通烟都有尼古丁。不过，二者还是有区别，因为普通烟草的尼古丁本身是包含在烟草里，是烟草成长分泌的产物，所以降低尼古丁在普通烟草里是个非常困难的课题（因为烟草是物理加工过程，所以尼古丁并不会减少，如果采取化学办法减少尼古丁，必然导致烟草风味发生变化，影响烟草的销量）。反观电子烟，由于尼古丁是直接添加的，所以可以控制尼古丁的比例，甚至可以做到0尼古丁。
							</p>
							
							<p>反观电子烟呢？</p>
							<p>电子烟的雾化本身也可以产生颗粒，但是这个颗粒是液态颗粒，进入人体会被吸收或排除，比如临床上常用地雾化给药就是这个原理，雾化后的药物会被人体吸收。不仅如此，现代雾化技术的提升，使得雾化水平越来越高，比如麦克韦尔的FEELM都可以做到1μm的雾化，也就意味着其雾化出来的烟气是不包含PM1-PM10范围内的颗粒物，自然也不会对个体带来固体颗粒物的损伤了。
							</p>
						
						
							<p>事情到了这里，从直观的角度，我们已经看出，电子烟比普通烟危害要少多了，表现在：</p>
							<p>1，普通烟有危害巨大的烟焦油，电子烟没有烟焦油</p>
							<p>2，普通烟的尼古丁含量固定，很难根除，电子烟的尼古丁是添加成分，可以调节不同浓度</p>
							<p>3，普通烟燃烧会产生大量无法分解的固体颗粒物如PM2.5等附着于喉咙、气管、肺部等部位，不断积累对人体产生伤害，而电子烟技术产生的是可以分解的液态颗粒物被人体吸收或排出，基本上不产生颗粒物伤害。</p>
							<p>因为如此，所以电子烟的出现，是作为普通烟的替代物，这其中的好处就是一方面，对于无法戒烟的群体，可减少普通烟中焦油等有害物质带来的健康损伤；另一发面，电子烟的成分可控，比如可以不断降低尼古丁含量，从而减轻患者对尼古丁的依赖，从而实现戒烟。所以会被用作戒烟使用。</p>
							
						  </div>
						</div>

代码

html ElectronicCigarettes.html