HTML+Bootstrap实现类似CSDN博客页面
来源：互联网 发布：网络教育网络统考 编辑：程序博客网 时间：2024/06/07 07:07
之前一直想打造一个个人博客，但个人博客的风格不知道该设计成什么样子。我觉得CSDN的博客风格还蛮令人喜欢的，因此就试着模仿设计一下，效果如下
这里面也没有涉及到什么难的技术，主要是运用了Bootstrap框架来辅助开发页面，非常方便。ok，废话少说，上代码
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Blog_Demo_Home</title> <link rel="stylesheet" type="text/css" href="../CSS_FILES/bootstrap.css"> <link rel="stylesheet" type="text/css" href="../CSS_FILES/font-awesome.css"> <link rel="stylesheet" type="text/css" href="../CSS_FILES/bootstrap-datetimepicker.css"> <script src="../JQuery/jquery-3.2.1.js"></script> <script src="../JS/bootstrap.js"></script> <script src="../JS/bootstrap-datetimepicker.js"></script> <style type="text/css"> header{ margin-bottom: 0px; padding-bottom: 0px; } .search{ } .navbar.square{ margin-bottom: 0px; height: 40px; border-radius: 0px; border: 0px; background-color: #36648B; } .badge-orange{ background-color: #FF8C00; } .badge-rss{ background-color:#EEEE00; } .badge-danger{ background-color: #d9534f; } .badge-success{ background-color: #5cb85c; } .badge-warning{ background-color: #f0ad4e; } .badge-info{ background-color: #5bc0de; } .bg-red{ color: #FF0000; } .bg-green{ color:#66CD00; } .bg-lightblack{ color: #4D4D4D; } .bg-blue{ color: #63B8FF; } .bg-turtle{ color: #551A8B; } .bg-orange{ color: #EE5C42; } .bg-white{ background-color: #FFFFFF; } .bg-default{ background-color: #999999; } .bg-primary{ background-color: #428bca; } .bg-success{ background-color: #5cb85c; } .bg-info{ background-color: #5bc0de; } .bg-warning{ background-color: #f0ad4e; } .bg-danger{ background-color: #d9534f; } .bg-black{ background-color: #424242; } .fg-default{ color: #999999; } .fg-primary{ color: #428bca; } .fg-success{ color: #5cb85c; } .fg-info{ color: #5bc0de; } .fg-warning{ color: #f0ad4e; } .fg-danger{ color: #d9534f; } .fg-lightdark{ color: #D6D6D6; } .navbar-nav > li > span { padding-top: 20px; width: 20px; } .navbar-nav > li { margin-left: 10px; margin-right: 10px; padding-left: 5px; padding-right: 5px; text-align: center; } .navbar-nav > li:hover{ background-color: #FFFFFF; } .navbar-nav.fix { margin-bottom: 0px; } .navbar .container > ul, .navbar .container> ul > li{ height:100%; } .navbar .container >ul > li{ width: 50px; } .container.fix{ margin-bottom: 0px; padding-bottom: 0px; height: 100%; } .navbar >ul > li{ width: 55px; height: 100%; } .navbar >ul{ height: 100%; } .navbar-header > a{ text-align: center; } table > tbody > tr > td{ margin-left: 10px; } .table > thead > tr > td { border-bottom: 1px solid #000000; /* text-decoration: underline;*/ } .dd_margin > dd{ margin-top:10px; ; } .dd_margin > dd > a{ color:#636363; } .dd_margin > dt{ margin-top:10px; } .section1{ width: 100%; height: 768px; margin:0px; padding:0px; background: url(../images/body_bg.jpg); } #blog_title{ width: 100%; height: 82px; } #main{ width: 100%； height:100%; } #side{ width: 20%; height: 100%; float: left; } #panel_profile{ margin-top:15px; } #panel_content{ margin-top:15px; } #center{ width: 78%; height: 100%; margin-left: 15px; float: left; } </style> <script type="text/javascript"> $(document).ready(function(){ $("#search_li").hover( function(){ $("#tag_div").hide(); $("#edit_div").hide(); $("#more_div").hide(); $("#share_div").hide(); $("#search_div").show(); } ,function(){ $("#search_div").hover(function(){ $("#search_div").show(); },function(){ $("#search_div").hide(); }); }); $("#tag_li").hover( function(){ $("#search_div").hide(); $("#edit_div").hide(); $("#share_div").hide(); $("#more_div").hide(); $("#tag_div").show(); } ,function(){ // $("#search_div").hide(); $("#tag_div").hover(function(){ $("#tag_div").show(); },function(){ $("#tag_div").hide(); }); }); $("#edit_li").hover( function(){ $("#search_div").hide(); $("#tag_div").hide(); $("#share_div").hide(); $("#more_div").hide(); $("#edit_div").show(); } ,function(){ // $("#search_div").hide(); $("#edit_div").hover(function(){ $("#edit_div").show(); },function(){ $("#edit_div").hide(); }); }); $("#share_li").hover( function(){ $("#search_div").hide(); $("#tag_div").hide(); $("#edit_div").hide(); $("#more_div").hide(); $("#share_div").show(); } ,function(){ // $("#search_div").hide(); $("#share_div").hover(function(){ $("#share_div").show(); },function(){ $("#share_div").hide(); }); }); $("#more_li").hover( function(){ $("#search_div").hide(); $("#tag_div").hide(); $("#edit_div").hide(); $("#share_div").hide(); $("#more_div").show(); } ,function(){ // $("#search_div").hide(); $("#more_div").hover(function(){ $("#more_div").show(); },function(){ $("#more_div").hide(); }); }); }); </script></head><body> <header> <nav class="navbar square navbar-inverse navabar-fixed-top " > <div class="navbar-header"> <a href="#" class="navbar-brand"> <span class="fa fa-user fa-lg"><img src="../images/myself.jpg" style="width:30px;height: 30px;border:5px solid transparent;margin-bottom:5px;"> </span> <!-- <img src="../images/myself.jpg" style="width:25px;height: 25px;margin-left: 2px;"> --> YeKongle </a> </div> <ul class="nav navbar-nav navbar-right fix " style="margin-right: 10px;"> <li class="search" id="search_li"> <span class="fa fa-search fa-lg fg-lightdark"></span> <!-- <div class="modal fade show"> <div class="modal-dialog"> <div class="modal-content"> <div class="body"> <form class="form-inline"> <div class="form-group"> <input type="text" class="form-control" placeholder="搜索"> <span class="fa fa-hand-o-right "></span> </div> </form> </div> </div> </div> </div> --> <div class="row" id="search_div" hidden="true" > <div class="" style="width:400px;height:50px;border-left: 1px solid #757575;border-right: 1px solid #757575;border-bottom: 1px solid #757575;padding-right: 15px;margin-top: 15px;background-color: #EDEDED;"> <div class="control-group"> <div class="controls"> <div class="input-group" style="text-align: center;padding-top: 8px;padding-left: 5px;padding-right: 5px;"> <form> <input type="text" class="col col-lg-2 form-control" id="input_search" placeholder="搜索......"> </form> <span class="input-group-addon"> <a href=""> <span class="fa fa-hand-o-right fa-lg"></span> </a> </span> </div> </div> </div> </div> </div> </li> <li class="" id="tag_li" style="float: left;"> <span class="fa fa-tags fa-lg fg-lightdark "></span> <div class="row" id="tag_div" hidden="true" > <div style=" width:500px;height:230px;border-left: 1px solid #757575;border-right: 1px solid #757575;border-bottom: 1px solid #757575;padding-top: 5px;padding-right: 10px;margin-top: 15px;margin-right: 150px;right:-400px;position: absolute;background-color: #EDEDED;"> <div class="form-horizontal" role="form"> <div class="form-group" style=" "> <label for="title" class="col-md-2 control-label">标题</label> <div class="col-md-10"> <input type="text" id="title" class="form-control" placeholder="My Bolog"> </div> </div> <div class="form-group"> <label for="tag" class="col-md-2 control-label">标签</label> <div class="col-md-10"> <input type="text" id="tag" class="form-control" placeholder=""> </div> </div> <div class="form-group"> <label for="tag" class="col-md-2 control-label">位置</label> <div class="col-md-10" style="margin-top: 10px;"> <p>个人主页=-<a href="#">我的知识</a><br> <div class="checkbox"> <label><input type="checkbox" >同时保存至 选择知识图谱 <a href="#">新建</a></label> </div> </p> </div> </div> <div class="pull-right" style="margin-right: 15px;"> <button type="button" class="btn btn-sm btn-default" style="margin-right: 10px;">取消</button> <button type="button" class="btn btn-sm btn-danger">收藏</button> </div> </div> </div> </div> </li> <li id="share_li"> <span class="fa fa-external-link fa-lg fg-lightdark"></span> <div class="row" id="share_div" hidden="true"> <!-- facebook-square google-plus-offical youtube-play qq weixin weibo --> <div class="" style="width:280px;height:40px;border-left: 1px solid #757575;border-right: 1px solid #757575;border-bottom: 1px solid #757575;padding-top: 0px;margin-top: 15px;padding-right: 15px;background-color: #EDEDED;"> <table class="table "> <tbody> <tr style="text-align: center;"> <td><a href="http://http://weibo.com/"><span class="fa fa-weibo fa-lg bg-red"></span></a></td> <td><a href="https://wx.qq.com/"><span class="fa fa-weixin fa-lg bg-green"></span></a></td> <td><a href=""><span class="fa fa-qq fa-lg bg-blue"></span></a></td> <td><a href="#"><span class="fa fa-facebook-square fa-lg bg-turtle"></span></a></td> <td><a href="#"><span class="fa fa-google-plus-official fa-lg bg-orange"></span></a></td> <td><a href="#"><span class="fa fa-youtube fa-lg bg-lightblack"></span></a></td> </tr> </tbody> </table> </div> </div> </li> <li class="" id="edit_li"> <span class="fa fa-edit fa-lg fg-lightdark" ></span> <div class="row" id="edit_div" hidden="true"> <div class="" style="width:180px;height:230px;border-left: 1px solid #757575;border-right: 1px solid #757575;border-bottom: 1px solid #757575;padding-top: 5px;margin-top: 15px;background-color: #EDEDED;"> <table class="table table-hover"> <tbody> <tr> <td class="fa fa-laptop"> 传PPT/文档</td> </tr> <tr> <td class="fa fa-commenting-o"> 提问题</td> </tr> <tr> <td class="fa fa-edit"> 写博客</td> </tr> <tr> <td class="fa fa-cloud-upload"> 传资源</td> </tr> <tr> <td class="fa fa-file-text-o"> 创建项目</td> </tr> <tr> <td class="fa fa-code"> 创建代码片</td> </tr> </tbody> </table> </div> </div> </li> <li id="more_li"> <span class="fa fa-bars fa-lg fg-lightdark"></span> <div class="row" id="more_div" hidden="true"> <div class="pull-right" style="width:390px;height:230px;border-left: 1px solid #757575;border-right: 1px solid #757575;border-bottom: 1px solid #757575;padding-top: 0px;margin-top:15px;padding-right: 15px;right: -20px;position: absolute;background-color: #EDEDED;"> <!-- <table class="table"> <thead style="text-align: center;"> <tr> <td><strong>社区</strong></td> <td><strong>服务</strong></td> <td><strong>俱乐部</strong></td> </tr> </thead> <tbody> <tr> <td></td> </tr> </tbody> </table> --> <div class="col-lg-4"> <dl class="dd_margin"> <dt>社区</dt> <dd> <a href="#" target="_blank">博客</a> </dd> <dd> <a href="#" target="_blank">论坛</a> </dd> <dd> <a href="#" target="_blank">下载</a> </dd> <dd> <a href="#" target="_blank">知识库</a> </dd> <dd> <a href="#" target="_blank">技术问答</a> </dd> <dd> <a href="#" target="_blank">极客头条</a> </dd> </dl> </div> <div class="col-lg-4"> <dl class="dd_margin"> <dt>服务</dt> <dd> <a href="#" target="_blank">学院</a> </dd> <dd> <a href="#" target="_blank">活动</a> </dd> <dd> <a href="#" target="_blank">CODE</a> </dd> <dd> <a href="#" target="_blank">CSTO</a> </dd> <dd> <a href="#" target="_blank">人品测试</a> </dd> </dl> </div> <div class="col-lg-4"> <dl class="dd_margin"> <dt>俱乐部</dt> <dd> <a href="#" target="_blank">电信俱乐部</a> </dd> <dd> <a href="#" target="_blank">文法俱乐部</a> </dd> </dl> </div> </div> </div> </li> </ul> </nav> </header> <!-- <div class="col col-lg-8" style="width: 100px;border-left: 1px solid #757575;border-right: 1px solid #757575;border-bottom: 1px solid #757575"> <div id="search_div" class="col col-md-3"> <form class="form-line"> <div class="form-group"> <input type="text" class="form-control placeholder="搜索"> <span class="pull-right"> <span class="fa fa-hand-o-right fa-lg"></span> </span> </div> </form> </div> </div> --> <section class="section1" > <div class="container"> <div class="header"> <div id="blog_title"> <h2><a href="#">YeKongle的博客</a></h2> <div class="row" > <div class="col-xs-6"> <span> <h4 style="color: #FF8C00"> ——低调、博学、修身</h4> </span> </div> <div class="col-xs-6"> <div class="row"> <div class="col-xs-5"></div> <div class="col-xs-7" style="color:#ccc;"> <div class="col-xs-4"><h5><a href="#" style="float: right;" class="btn btn-default btn-sm fa fa-list">目录视图</a> </h5></div> <div class="col-xs-4"><h5><a style="float: right;" class="btn btn-default btn-sm fa fa-list">摘要视图</a></h5></div> <div class="col-xs-4" style="margin-top:5px;"><h5 > <span class="badge badge-danger">RSS</span>订阅</h5></div> </div> <!-- <div col-xs-9></div> <div col-xs-3> <div class="col-xs-4"><h5><button style="float: right;" class="btn btn-default btn-sm fa fa-list">目录视图</button> </h5></div> <div class="col-xs-4"><h5><button style="float: right;" class="btn btn-default btn-sm fa fa-list">摘要视图</button></h5></div> <div class="col-xs-4"><span > <span class="badge badge-orange">RSS</span>订阅</span></div> </div> --> <!-- <div class="col-xs-4"><h5><button style="float: right;" class="btn btn-default btn-sm fa fa-list">目录视图</button> </h5></div> <div class="col-xs-4"><h5><button style="float: right;" class="btn btn-default btn-sm fa fa-list">摘要视图</button></h5></div> <div class="col-xs-4"><span > <span class="badge badge-orange">RSS</span>订阅</span></div> --> </div> </div> </div> <!-- <div class="col-md-6"> <div class="row"> <div class="col-md-4"><span class="fa fa-list">目录视图</span></div> <div class="col-md-4"><span class="fa fa-list">摘要视图</span></div> <div class="col-md-4"><span class="badge badge-orange">RSS <span>订阅</span></span></div> </div> </div> --> </div> </div> <div id="main"> <div id="side"> <div id="panel_profile" class="panel panel-default"> <div class="panel-heading"> 个人资料 </div> <div class="panel-body"> <ul style="display: block;list-style: none;"> <li> <div> <img class="img-circle" src="../images/myself.jpg" alt="夜空" width="100px" height="100px"> </div> </li> <li style="padding-left: 35px;"> 夜空 </li> </ul> <span> <button class="btn btn-success"><span class="fa fa-plus fa-sm">加关注</span></button> <button class="btn btn-info"><span class="fa fa-envelope fa-sm">发私信</span></button> </span> <hr> <p>访问: <span class="badge badge-orange">99+</span></p> <p>积分: <span class="badge badge-success">60</span></p> <p>等级: <span class="badge badge-info">小菜鸟</span></p> <p>排名: <span class="badge">千里之外</span></p> <hr> <table style="width: 100%;"> <tr> <td>原创: 1</td> <td>转载: 1</td> </tr> <tr> <td>译文: 1</td> <td>评论: 0</td> </tr> </table> </div> </div> </div> <div id="center"> <div id="panel_content"> <div class="panel"> <div class="panel-heading"> <div style="display:block;"> <span class="btn btn-success">转</span> <h2 style="display: inline;vertical-align: middle;"><span>印度为何越界不走，真相让印度吓尿</span></h2> </div> <div class="pull-right" style="display: inline;color: #ccc;"> <span class="" >2017-08-15 21:52</span> <span class="fa fa-search-minus">1人阅读</span> <span class="fa fa-comment-0" style="color: #FF4500;">评论 </span> <span class="" style="color: #FF4500;">收藏</span> <span class="" style="color: #FF4500;">举报</span> </div> <hr> <div style="display: inline;" > <span class="fa fa-list"> 分类: </span> <div class="btn-group"> <button data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button">时事点评 <span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul> </div> <hr> </div> </div> <div class="panel-body"> <p> 印度军队在我国洞朗地区越界已经很多天了，明显的侵略的行为，为啥中国一直是外交部发言，国防部很少在新闻上说，因为中国压根没想在那里打仗，虽然中国军队一定在备战，但是却真心不想打，很多人不明白为啥咱被欺负成这样了还不还手，有的愤青就说中国政府无能、软弱，其实站在印度的角度大家想一下，为啥印度会不惜开战的代价也要阻止中国修路呢，有人说修好了路方便中国运兵，这个说法其实是站不住脚的，运兵打仗我们用不着修路的，有很多方法运兵，这只是一个战术问题，不值当的印度冒这么大险，背后的真正原因大家请看一下下图 </p> <div style="text-align: center;"> <img class="img-rounded" style="width: 300px;height: 400px;" src="../images/photo.jpg"> </div> </div> </div> </div> </div> </div> </div> </section> <footer> </footer> <!-- <div class="row"> <div style="width: 20%;height:650px;"> <div class="bg-black" style="width:100%;height: 100%;"> </div> </div> <div class=" " style="height: 100%"> </div> </div> --> </body></html>阅读全文
0 0
- HTML+Bootstrap实现类似CSDN博客页面
- Jsoup解析html页面实现CSDN博客客户端
- HTML/CSS初写仿csdn博客页面框架
- 博客网站页面的实现(html)
- html实现类似android的tab切换页面
- 纪念一下，开通csdn博客 Bootstrap
- CSDN博客页面自定义左侧博客栏目
- CSDN博客页面自定义左侧博客栏目
- CSDN博客页面自定义左侧博客栏目
- bootstrap实现页面布局效果
- layoutit+Bootstrap html页面布局+CSS
- bootstrap html页面禁止放大缩小
- wkhtmltopdf 实现在每一个pdf页面的header或者footer加入html碎片,类似水印的功能
- 基于HTML5+bootstrap实现类似贪吃蛇游戏
- web前端实现markdown编辑预览页面（低仿csdn博客界面）
- 实现类似 lightbox的 页面等待效果
- 用FLex实现类似论坛个人信息页面
- Jqurey实现类似EasyUI的页面布局
- P3390 【模板】矩阵快速幂
- Ubuntu安装Docker 入门
- 【Java源码分析】ConcurrentModificationException并发修改异常分析与解决方案（快速失败与安全失败）
- 教你阅读Python开源项目代码
- 卡尔曼滤波原理二：扩展卡尔曼
- HTML+Bootstrap实现类似CSDN博客页面
- 【Hibernate】（六）关联映射之一对一映射
- Java设计模式——桥接模式
- 流行开源项目收集
- Jquery- Jqprint实现网页打印功能
- HDU
- 2017中国大学生程序设计竞赛
- UIButton setImage 按钮无法显示图片的问题
- nginx 配置https
