[Web]如何利用Boostrap框架搭建一个还可以的静态网站(三_主页)
文章目录
- 返回总结
- 整体效果
- 思路
- 各个组件代码
- 导航栏
- LOGO
- 滚动时间
- 标题线
- 图词模块
- 页脚
- 代码
- 独属css文件 indexCss1.css
- html代码 index.html
返回总结
如何利用Boostrap框架搭建一个还可以的静态网站
整体效果
思路
我们很显然采用一头 一尾 中间三分的结构,给出适度的余白
各个组件代码
导航栏
<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>
css
.font_style_150-withe-txt{font-size: 150%;color: white;
}
LOGO
<banner><div class="jumbotron color_MianColor" id="_banner_jumbotron"><div id="_Main_title_logo" class="bounceInRight animated"><img src="img/_Main_Tiele.png"></div><br/></banner>
css
.color_MianColor{background-color: #ffdeeb;
}#_banner_jumbotron{max-height: 200px;background-image:url(../img/Main_bg_PC_0607PM.png)
}#_Main_title_logo{padding-left: 5%;
}.font_date{font-size: 250%!important;font-family: 黑体;color: black;
}
滚动时间
<marquee behavior="" direction="right"><p id="timeOrder" class="font_date bounceInLeft animated"></p></marquee>
css
$(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="row"><div id="" class="col-lg-2"></div><div id="" class="col-lg-8"><img src="img/logo/戒烟说.png" class="up10px"><b class="banner_secoend_hr_Header-font-style">戒烟说</b><img src="img/logo/火.png"><b class="banner_secoend_hr_Txt-font-style">阅读是请教他人的过往,最佳的行程</b><br /><hr /></div><div id="" class="col-lg-2"></div></div>
css
.banner_secoend_hr_Header-font-style{font-size: 250%;font-family: "黑体";color:black;
}
图词模块
<div class="col-sm-4 col-md-4"><div class="thumbnail"><img src="img/banner_imgs/1.jpg" alt="..."><div class="caption"><h3>回响</h3><p><a href="#" class="btn btn-primary" role="button">即刻阅读</a></p></div></div></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>
#footer_Info{padding: 0px;margin: 0px;
}.color_footer{background-color: #222222;
}.font_style_150-withe-txt{font-size: 150%;color: white;
}
代码
独属css文件 indexCss1.css
*{padding:0px;margin:0px;
}
html,body{width: 100%;height: 100%;background: #f6f9fa;
}hr{border: none;background-color:#444444;height: 2px;
}img{}#_mian_style{width: 80%;margin-top: 5%;margin-bottom: 5%;
}
#_mian_screenCore{height: 1200px;width: 80%;border-radius: 5px;border: 2px solid;margin: 0 auto;margin-top: 5%;margin-bottom: 5%;text-decoration: none;
}
#_header_MainScreen{max-height: 200px;background-image: url(../img/Main_bg_PC_0607PM.png);padding: 0px;margin: 0px;text-decoration: none;
}
#_banner_jumbotron{max-height: 200px;background-image:url(../img/Main_bg_PC_0607PM.png)
}
#footer_Info{padding: 0px;margin: 0px;
}.color_MianColor{background-color: #ffdeeb;
}.color_footer{background-color: #222222;
}.AUTO_center{margin: 0 auto;
}.font_head{color: red;font-family: "黑体";
}
.font_txt{font-size: 30px;color: #111111;
}
._main_new_img{height: 200px;width:300px;box-shadow: 5px 5px 5px;border-radius: 10px;
}
#_Main_title_logo{padding-left: 5%;}#banner_word_img{min-height: 700px; background-image:url(../img/banner_imgs/banner_word_bg_600X900.jpg)
}.style_autoIMG{width: 100%;height: 100%;
}.banner_secoend_hr_Header-font-style{font-size: 250%;font-family: "黑体";color:black;
}
.banner_secoend_hr_Txt-font-style{font-size: 90%;font-family: "黑体";
}.up10px{margin-top:-10px;
}.font_zhenjing{font-size: 320%;font-family: "黑体";color: red;
}
.space_lr_50px{width: 50px;height: 50px;
}
.space_ud_style_5{margin-top: 5%;margin-bottom: 5%;
}
.space_ud_style_1{margin-top: 1%;margin-bottom: 1%;
}
#_main_news_1_img{background-image: url(../img/_mian_new_1_570x357.png);min-height: 250px;height: 100%;
}
#_main_news_2_img{background-image: url(../img/_mian_new_2_570x338.png);min-height: 250px;height: 100%;
}
#_main_news_3_img{background-image: url(../img/_mian_new_3_570x300.png);min-height: 250px;height: 100%;
}
._main_news_blockStyle{border-radius: 5px;border: 2px solid #000000;margin-bottom: 50px;min-height: 260px;box-shadow: 10px 10px 5px #888888;
}
#advertising_img{background-image: url(../img/adversting/adversting_1_1700X144.png);min-height: 144px;min-width: 500px;
}#advertising_lastBanner_img{background-image: url(../img/adversting/adversting_changpai_1750X745.png);min-height: 750px;min-width: 500px;
}
.border_right_solid-2-black{border-right: solid 2px #000000;
}
.font_style_150-withe-txt{font-size: 150%;color: white;
}.bg-pan-right {-webkit-animation: bg-pan-right 8s both;animation: bg-pan-right 8s both;
}
html代码 index.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/CommonStyle.css"/><link rel="stylesheet" type="text/css" href="animate.min.css"/><script src="js/jquery-3.4.1.js"></script><script src="js/CommonStyle.js"></script><script type="text/javascript"></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"></div><br/><marquee behavior="" direction="right"><p id="timeOrder" class="font_date bounceInLeft animated"></p></marquee></banner><!--<banner_secoend><div id="" class="container"><div id="" class="row"><div id="" class="col-lg-1"></div><div id="" class="col-lg-2"><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/_mian_new_1.png" alt="..."><div class="carousel-caption">...</div></div><div class="item"><img src="..." 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 id="" class="col-lg-8"></div><div id="" class="col-lg-1"></div></div></div></banner_secoend>--><mid class="container-fluid"><banner_secoend_hr><div id="" class="row"><div id="" class="col-lg-2"></div><div id="" class="col-lg-8"><img src="img/logo/戒烟说.png" class="up10px"><b class="banner_secoend_hr_Header-font-style">戒烟说</b><img src="img/logo/火.png"><b class="banner_secoend_hr_Txt-font-style">阅读是请教他人的过往,最佳的行程</b><br /><hr /></div><div id="" class="col-lg-2"></div></div><banner_secoend_hr /><banner_secoend class="row"><div id="" class="col-lg-2"></div><banner_pic class="col-lg-5"><div class="row"><div class="col-sm-4 col-md-4"><div class="thumbnail"><img src="img/banner_imgs/1.jpg" alt="..."><div class="caption"><h3>回响</h3><p><a href="#" class="btn btn-primary" role="button">即刻阅读</a></p></div></div></div><div class="col-sm-4 col-md-4"><div class="thumbnail"><img src="img/banner_imgs/2.jpg" alt="..."><div class="caption"><h3>下午二点十三分</h3><p><a href="#" class="btn btn-primary" role="button">即刻阅读</a></p></div></div></div><div class="col-sm-4 col-md-4"><div class="thumbnail"><img src="img/banner_imgs/3.jpg" alt="..."><div class="caption"><h3>雾</h3><p><a href="#" class="btn btn-primary" role="button">即刻阅读</a></p></div></div></div></div><div class="row"><div class="col-sm-4 col-md-4"><div class="thumbnail"><img src="img/banner_imgs/4.jpg" alt="..."><div class="caption"><h3>幻</h3><p><a href="#" class="btn btn-primary" role="button">即刻阅读</a></p></div></div></div><div class="col-sm-4 col-md-4"><div class="thumbnail"><img src="img/banner_imgs/5.jpg" alt="..."><div class="caption"><h3>秘密</h3><p><a href="#" class="btn btn-primary" role="button">即刻阅读</a></p></div></div></div><div class="col-sm-4 col-md-4"><div class="thumbnail"><img src="img/banner_imgs/6.jpg" alt="..."><div class="caption"><h3>一地鸡毛</h3><p><a href="#" class="btn btn-primary" role="button">即刻阅读</a></p></div></div></div></div></banner_pic><banner_word class="col-lg-3"><img src="img/banner_imgs/banner_word_bg_600X900.jpg" class="style_autoIMG"> </banner_word><div id="" class="col-lg-2"></div></banner_secoend><tuofa><div id="" class="row"><div id="" class="col-lg-2"></div><div id="" class="col-lg-8"><img src="img/hairGuide/头发.png" class="up10px"><b class="banner_secoend_hr_Header-font-style">脱发指南</b><img src="img/logo/火.png"><b class="banner_secoend_hr_Txt-font-style">保护头发,是对抗岁月,最有效的方式</b><br /><hr /></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 class="col-lg-6"><img src="img/toufa_duang_850x498.png" class="style_autoIMG"></div><div id="" class="col-lg-6"><h3 class="font_zhenjing">震惊!华人巨星论及防护脱发竟这样说!</h3><p class="font_txt"> 其实第一次听说这个话题我是拒绝的,</p><p class="font_txt"> 因为,你不能让我做,我就马上去做,第一我要试一下</p><p class="font_txt"> 因为我不愿意做完之后猛的长一些头发,</p><p class="font_txt"> 头发“DAUNG”一下,</p><p class="font_txt"> 很长,很亮,观众肯定会骂我,说吸烟长不了这么长的头发</p><p class="font_txt"> 但是这个真的很好用,吸烟脱发更有用</p><p class="font_txt"> 我用洗发露一个月的样子,感觉还不错,你们洗完之后也会是这个样子!</p></div></div><div id="" class="col-lg-2"></div></div></tuofa><advertising><div id="" class="row space_ud_style_1"><div id="" class="col-lg-2"></div><div id="" class="col-lg-8"><div class="col-lg-12"><img src="img/adversting/adversting_1_1700X144.png" class="style_autoIMG"></div></div><div id="" class="col-lg-2"></div></div></advertising><main class="container-fluid"><div id="" class="row"><div id="" class="col-lg-2"></div><div id="" class="col-lg-8"><img src="img/news.png" class="up10px"><b class="banner_secoend_hr_Header-font-style">今日新闻</b><img src="img/logo/火.png"><b class="banner_secoend_hr_Txt-font-style">了解当下,掌握当下</b><br /><hr /></div> </div><div id="" class="row"><div id="" class="col-lg-2"></div><div id="" class="form-group col-lg-8"><div id="" class=""><div id="_main_new1" class="_main_news_blockStyle"><div id="_main_news_1_img" class="col-lg-4 border_right_solid-2-black"></div><div id="" class="col-lg-8"><h3 class="font_head">美议员提法案:购买香烟的合法年龄上调至100岁</h3><p class="font_txt">美国50个州之一的夏威夷最近有议员提出法案,</p><p class="font_txt">计划增加购买香烟的最低年龄,如果该法案通过</p><p class="font_txt">数年后购买香烟的最低年龄将达到100岁</p><p class="font_txt">从而事实上禁止了大多数人使用香烟。</p></div></div><div id="_main_new1" class="_main_news_blockStyle"><div id="_main_news_2_img" class="col-lg-4 border_right_solid-2-black"></div><div id="" class="col-lg-8"><h3 class="font_head">香港全面禁止电子烟</h3><p class="font_txt">香港特别行政区行政长官林郑月娥 10 月 10日在任内第二份“施政报告”宣布香港将会全面禁止电子烟,她引用专家观点认为电子烟祸害大,</p><p class="font_txt">有研究发现,电子烟可导致男性不育,甚至致癌。</p><p class="font_txt">消息一出便迎来各方关注,虽然此前一直有学者呼吁香港政府解禁电子烟,</p><p class="font_txt">但这次全面禁止电子烟走向立法阶段还是给了众人当头棒喝. </p></div></div><div id="_main_new1" class="_main_news_blockStyle"><div id="_main_news_3_img" class="col-lg-4 border_right_solid-2-black"></div><div id="" class="col-lg-8"><h3 class="font_head">利用短信对戒烟进行干预和帮助的实验研究</h3><p class="font_txt">我们的研究结果表明,基于手机短信的干预</p><p class="font_txt">无论是高频还是低频短信,都增加了戒烟,尽管是在一少部分吸烟者中发生。</p><p class="font_txt">因此可以考虑在中国展开大规模的手机短信干预戒烟。</p><p class="font_txt">基于移动电话的干预措施还可以与中国的寻求戒烟者的其他戒烟服务搭配使用。</p></div></div></div></div><div id="" class="col-lg-2"></div></div></main><div id="" class="row"><div id="" class="col-lg-2"></div><div id="" class="col-lg-8"><img src="img/logo/拳头.png" class="up10px"><b class="banner_secoend_hr_Header-font-style">加入我们</b><img src="img/logo/火.png"><b class="banner_secoend_hr_Txt-font-style">把戒烟的理念带给更多需要帮助的人!</b><br /><hr /></div><div id="" class="col-lg-2"></div></div><advertising_lastBanner><div id="" class="row space_ud_style_1"><div id="" class="col-lg-2"></div><div class="col-lg-8"><img src="img/adversting/adversting_changpai_1750X745.png" class="style_autoIMG"></div><div id="" class="col-lg-2"></div></div></advertising_lastBanner></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>
[Web]如何利用Boostrap框架搭建一个还可以的静态网站(三_主页)相关推荐
- [Web]如何利用Boostrap框架搭建一个还可以的静态网站(五_子页_脱发指南)
文章目录 返回总结 整体效果 组件 人物介绍块 内容介绍块 代码 独属CSS HairLossGuide.css html HairLossGuide.html 返回总结 如何利用Boostrap框架 ...
- [Web]如何利用Boostrap框架搭建一个还可以的静态网站(六_子页)
文章目录 返回总结 整体效果 组件 vedio题目 vedio博主介绍 vedio vedio用户留言 电子烟评测块 辩论块 代码 html ElectronicCigarettes.html 返回总 ...
- [Web]如何利用Boostrap框架搭建一个还可以的静态网站(四_子页_戒烟小说)
文章目录 返回总结 整体效果 思路 组件 轮播图 排行榜 轮播广告语 广告 空行 小说块 代码 独属css SmokeNote_Style.css html SmokeNote.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 的域 ...
最新文章
- 51nod 1381 硬币游戏 概率
- QT 中 关键字讲解(emit,signal,slot)以及使用
- 容器学习 之 安装docker(二)
- [LeetCode] 搜索旋转排序数组
- 【离散数学】集合的包含排斥原理
- Curie%20Module有什么用
- 【重要通知】关于免费升级至神策分析 2.3 版本的说明
- 开放api接口平台:appid、appkey、appsecret
- Vuex Actions使用
- C++虚函数表(vtable)和虚函数指针(vfptr)
- [量化-025]某投资者的投资策略统计整理
- 看英文数据手册必备之——Copy Translator
- 区块链技术加持下的十款智能硬件产(kuang)品(ji)
- Java 反射 - Java 访问器
- android 霓虹灯效果
- 视频节目 | Apache Pulsar PMC 成员讲述「开源之道」
- Basler相机常见问题
- linux mplayer 编译,如何编译MPlayer
- 我仅代表还是我谨代表
- grafana在项目中添加datasource(数据源)