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

文章目录

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

• 轮播图
• 排行榜
• 轮播广告语
• 广告
• 空行
• 小说块

• 代码

• 独属css SmokeNote_Style.css
• html SmokeNote.html

返回总结

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

整体效果

思路

除了头尾
前半部分我参照了起点中文网的结构来填充内容
后半部分则是直接使用ifream完成的简单阅读效果

组件

之前书写过的不会重复书写

轮播图

<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;
}

排行榜

<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;
}

小说块

<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