[Web]如何利用Boostrap框架搭建一个还可以的静态网站（四_子页_戒烟小说）
文章目录
- 返回总结
- 整体效果
- 思路
- 组件
- 轮播图
- 排行榜
- 轮播广告语
- 广告
- 空行
- 小说块
- 代码
- 独属css SmokeNote_Style.css
- html SmokeNote.html
返回总结
如何利用Boostrap框架搭建一个还可以的静态网站
整体效果
![[Web]如何利用Boostrap框架搭建一个还可以的静态网站（四_子页_戒烟小说）_第1张图片](http://img.e-com-net.com/image/info8/7b8a9f49547b473c9f7a13eaf38bfb6e.jpg)
思路
除了头尾
前半部分我参照了起点中文网的结构来填充内容
后半部分则是直接使用ifream完成的简单阅读效果
组件
之前书写过的不会重复书写
轮播图
![[Web]如何利用Boostrap框架搭建一个还可以的静态网站（四_子页_戒烟小说）_第2张图片](http://img.e-com-net.com/image/info8/b403c68ec0624ad2a05f7b4a0b762d90.jpg)
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="2000">
<!-- 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/SmokeNote/_SmokeNote_word_img2_811x385.jpg" class="style_autoIMG" alt="...">
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img src="img/SmokeNote/adversting_changpai_811x385.png" class="style_autoIMG" 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>
css
.style_autoIMG_justWidth{
width: 100%;
height: auto;
}
排行榜
![[Web]如何利用Boostrap框架搭建一个还可以的静态网站（四_子页_戒烟小说）_第3张图片](http://img.e-com-net.com/image/info8/1913d0f0d7c84805912b677c66f79a58.jpg)
<div class="table-responsive"><!-- /.排行榜 -->
<table class="table table-hover">
<h3>第一届老烟鬼小说大赛排行榜</h3>
<tr>
<th>名称</th>
<th>赏金</th>
</tr>
<tr>
<td>我的市长父亲</td>
<td>$100</td>
</tr>
<tr>
<td>丰乳肥臀</td>
<td>$100</td>
</tr>
<tr>
<td>秘密</td>
<td>$100</td>
</tr>
<tr>
<td>三体</td>
<td>$100</td>
</tr>
<tr>
<td>幻光</td>
<td>$100</td>
</tr>
<tr>
<td>我的区长父亲</td>
<td>$100</td>
</tr>
<tr>
<td>桃花侠大战菊花怪</td>
<td>$100</td>
</tr>
<tr>
<td>国窖1573</td>
<td>$100</td>
</tr>
</table>
</div>
</div>
轮播广告语
<div id=""class="row">
<div id="" class="col-lg-2"></div>
<div id="" class="col-lg-8">
<div id="" class="col-lg-1">
<img src="img/logo/喇叭.png" >
</div>
<div id="" class="col-lg-11">
<marquee behavior="" direction="right"><p id="timeOrder" class="font_date bounceInLeft animated">
老烟鬼的小迷妹 打赏 <我的市长父亲> 100w点，成为黄金盟主！</p>
</marquee>
</div>
</div>
<div id="" class="col-lg-2"></div>
</div>
js
$(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");
})
广告
<div id="" class="col-lg-8">
<div id="" class="col-lg-4"><!-- 起点上抓下来的网络安全广告 -->
<img src="img/SmokeNote/SmokeNote_headerIMG_1.png" class="style_autoIMG">
</div>
<div id="" class="col-lg-4">
<img src="img/SmokeNote/SmokeNote_headerIMG_2.png" class="style_autoIMG">
</div>
<div id="" class="col-lg-4">
<img src="img/SmokeNote/SmokeNote_headerIMG_3.png" class="style_autoIMG">
</div>
</div>
css
.style_autoIMG_justWidth{
width: 100%;
height: auto;
}
空行
<div id="" class="space_div_col12_height50px col-lg-12" ></div><!-- 占空位-->
css
.space_div_col12_height50px{
height: 50px;
}
小说块
![[Web]如何利用Boostrap框架搭建一个还可以的静态网站（四_子页_戒烟小说）_第4张图片](http://img.e-com-net.com/image/info8/2cbb78ffabcf41de833f0f660b2949ac.jpg)
<div id="_mian_SmokeNote_left" class="col-lg-4"><!-- iframe 小说板块 -->
<div id="_mian_SmokeNote_left_img" class="center-block">
<p><a href="SmokeNOTE/N1.html" target="_mian_SmokeNote_right_TXT" class="font_white_150_blackStyle">幻</a></p>
<p><a href="SmokeNOTE/N2.html" target="_mian_SmokeNote_right_TXT" class="font_white_150_blackStyle">秘密</a></p>
<p><a href="SmokeNOTE/N3.html" target="_mian_SmokeNote_right_TXT" class="font_white_150_blackStyle">回想</a></p>
<p><a href="SmokeNOTE/N4.html" target="_mian_SmokeNote_right_TXT" class="font_white_150_blackStyle">下午二点十三分</a></p>
<p><a href="SmokeNOTE/N5.html" target="_mian_SmokeNote_right_TXT" class="font_white_150_blackStyle">雾</a></p>
<p><a href="SmokeNOTE/N6.html" target="_mian_SmokeNote_right_TXT" class="font_white_150_blackStyle">一地鸡毛</a></p>
</div>
</div>
<div id="_mian_SmokeNote_right" class="col-lg-8">
<iframe src="" width="100%" height="1080px" name="_mian_SmokeNote_right_TXT" id="" frameborder="0"></iframe>
</div>
代码
独属css SmokeNote_Style.css
#_mian_SmokeNote{
min-height: 1000px;
box-shadow: 5px 5px 5px;
border-radius: 10px;
}
#_mian_SmokeNote_left{
min-width: 400px;
min-height: 1100px;
background-image: url(../img/SmokeNote/_SmokeNote_left_img.jpg);
}
a{
text-decoration: none;
}
a:hover
{
color: black;
}
.font_white_150_blackStyle{
color: white;
font-size: 150%;
font-family: "黑体";
}
html SmokeNote.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/SmokeNote_Style.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/bootstrap.min.js"></script>
<script src="js/CommonStyle.js"></script>
<script type="text/javascript">
$('.carousel').carousel({
interval: 2000
})
</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"><!-- /.中文网 LOGO -->
</div>
<br />
<marquee behavior="" direction="right"><!-- /.日期 -->
<p id="timeOrder" class="font_date bounceInLeft animated"></p>
</marquee>
</banner>
<mid class="container-fluid">
<div id="" class="row">
<div id="" class="col-lg-2">
</div>
<div id="" class="col-lg-8">
<div id="" class="col-lg-8"><!-- /.轮播图 -->
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="2000">
<!-- 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/SmokeNote/_SmokeNote_word_img2_811x385.jpg" class="style_autoIMG" alt="...">
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img src="img/SmokeNote/adversting_changpai_811x385.png" class="style_autoIMG" 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 class="col-lg-4">
<div class="table-responsive"><!-- /.排行榜 -->
<table class="table table-hover">
<h3>第一届老烟鬼小说大赛排行榜</h3>
<tr>
<th>名称</th>
<th>赏金</th>
</tr>
<tr>
<td>我的市长父亲</td>
<td>$100</td>
</tr>
<tr>
<td>丰乳肥臀</td>
<td>$100</td>
</tr>
<tr>
<td>秘密</td>
<td>$100</td>
</tr>
<tr>
<td>三体</td>
<td>$100</td>
</tr>
<tr>
<td>幻光</td>
<td>$100</td>
</tr>
<tr>
<td>我的区长父亲</td>
<td>$100</td>
</tr>
<tr>
<td>桃花侠大战菊花怪</td>
<td>$100</td>
</tr>
<tr>
<td>国窖1573</td>
<td>$100</td>
</tr>
</table>
</div>
</div>
</div>
<div id="" class="col-lg-2">
</div>
</div>
<div id="" class="space_div_col12_height50px col-lg-12" ></div>
<div id=""class="row">
<div id="" class="col-lg-2"></div>
<div id="" class="col-lg-8">
<div id="" class="col-lg-1">
<img src="img/logo/喇叭.png" >
</div>
<div id="" class="col-lg-11">
<marquee behavior="" direction="right"><p id="timeOrder" class="font_date bounceInLeft animated">
老烟鬼的小迷妹 打赏 <我的市长父亲> 100w点，成为黄金盟主！</p>
</marquee>
</div>
</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 id="" class="col-lg-4"><!-- 起点上抓下来的网络安全广告 -->
<img src="img/SmokeNote/SmokeNote_headerIMG_1.png" class="style_autoIMG">
</div>
<div id="" class="col-lg-4">
<img src="img/SmokeNote/SmokeNote_headerIMG_2.png" class="style_autoIMG">
</div>
<div id="" class="col-lg-4">
<img src="img/SmokeNote/SmokeNote_headerIMG_3.png" class="style_autoIMG">
</div>
</div>
<div id="" class="col-lg-2"></div>
</div>
<div id="" class="space_div_col12_height50px col-lg-12" ></div><!-- 占空位-->
<div id="" class="row">
<div id="" class="col-lg-2"></div>
<div id="_mian_SmokeNote" class="col-lg-8">
<div id="_mian_SmokeNote_left" class="col-lg-4"><!-- iframe 小说板块 -->
<div id="_mian_SmokeNote_left_img" class="center-block">
<p><a href="SmokeNOTE/N1.html" target="_mian_SmokeNote_right_TXT" class="font_white_150_blackStyle">幻</a></p>
<p><a href="SmokeNOTE/N2.html" target="_mian_SmokeNote_right_TXT" class="font_white_150_blackStyle">秘密</a></p>
<p><a href="SmokeNOTE/N3.html" target="_mian_SmokeNote_right_TXT" class="font_white_150_blackStyle">回想</a></p>
<p><a href="SmokeNOTE/N4.html" target="_mian_SmokeNote_right_TXT" class="font_white_150_blackStyle">下午二点十三分</a></p>
<p><a href="SmokeNOTE/N5.html" target="_mian_SmokeNote_right_TXT" class="font_white_150_blackStyle">雾</a></p>
<p><a href="SmokeNOTE/N6.html" target="_mian_SmokeNote_right_TXT" class="font_white_150_blackStyle">一地鸡毛</a></p>
</div>
</div>
<div id="_mian_SmokeNote_right" class="col-lg-8">
<iframe src="" width="100%" height="1080px" name="_mian_SmokeNote_right_TXT" id="" frameborder="0"></iframe>
</div>
</div>
<div id="" class="col-lg-2"></div>
</div>
</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>