首页 > 代码库 > 博客园页面模板--老牛大讲堂
博客园页面模板--老牛大讲堂
我介绍的模板就是我自己设计的模板，有兴趣的可以参考一下。
页面主要分为三个部分：
第一部分是头部，
第二部分是处理生成的数据，
第三部分就是引入js，jq，框架，并写jqury。
首先我这个页面主要用了bootstrap框架，和jqury的js
<link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
这是引用参考路径。
设计思路：
1、先设计一个静态的好看页面。
2、之后把静态页面的部分粘贴到头部部分，我实现的静态页面主要包括。头部导航，以及图片的轮播。
3、下面就是最难的了，处理下面的文字，怎样处理下面的文字呢？我一开始想到全给隐藏了不就完啦。但是一想不行，他这里的隐藏容易，但是，怎样显示页面的内容呢？而且需要显示动态的网页内容。没办法，只有重新给出现的文字定义样式，这里就用到了jqury，用jqury把找到元素，并添加样式，以及移除样式，添加元素，等都涉及到了。对于那些广告了，静态的超链接这里就可以用重新定义样式隐藏，或者通过jqury设置样式隐藏。
4、剩下的几乎就没什么了，等页面设计编辑好，不断的测试就行了。
5、这个博客园的可以设计自己页面，其实就是个漏洞，如果我想做个个人网站不就很容易了？首先我用jqury把body里面的东西全隐藏了。然后把自己写好的静态页面直接粘贴上去，不就成了，自己个人主页了吗？还不需要自己提供服务器。当然，如果做一个简单的页面还行吗，如果复杂的页面，我就想不到怎么做了。我看到一些人不仅仅是设计了一个页面，而是设计了自己的所有按键功能，我不知道是怎样做到的，会的留言---关注博客园老牛大讲堂。
这是css样式。
1 #menu { 2 margin-top: 50px; 3 } 4 5 #menu h1 { 6 display: none; 7 } 8 9 #MyLinks1_XMLLink {10 display: none;11 }12 13 .footer {14 display: none;15 }16 17 #header {18 display: none;19 }20 21 .listtitle {22 display: none;23 }24 25 #blog-sidecolumn {26 display: none;27 }28 /*文章的定义*/29 30 .block_title {31 font-size: 18px;32 }33 34 #homepage1_HomePageDays_DaysList_ctl00_ImageLink img {35 display: none;36 }
第一部分的上面页面主要包括头部，以及图片的轮播
1 <!--头部--> 2 <nav class="nav navbar-inverse navbar-fixed-top"> 3 <div class="navbar-header col-md-4"> 4 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-collapse"> 5 <span class="icon-bar"></span> 6 <span class="icon-bar"></span> 7 <span class="icon-bar"></span> 8 </button> 9 <a class="navbar-brand" href="http://www.cnblogs.com/laonniudajiangtang/">博客园——老牛大讲堂</a> 10 <a class="navbar-brand" href="https://i.cnblogs.com/EditArticles.aspx?opt=1">发表文章</a> 11 <a class="navbar-brand" href="https://i.cnblogs.com/EditPosts.aspx?opt=1">发表随笔</a> 12 <a class="navbar-brand" href="https://home.cnblogs.com/u/laonniudajiangtang/followees/">加关注</a> 13 </div> 14 15 <div class="collapse navbar-collapse col-md-3 col-md-push-5 " id="example-navbar-collapse"> 16 <ul class="nav navbar-nav navbar-right"> 17 <li> 18 <a href="http://www.mamicode.com/#" data-toggle="modal" data-target="#about-modal2" style="padding-right: 0px;">博客宗旨</a> 19 </li> 20 <li> 21 <a href="http://www.mamicode.com/#" data-toggle="modal" data-target="#about-modal" style="padding-right: 0px;">开发者</a> 22 </li> 23 </ul> 24 </div> 25 </nav> 26 <!--头部--> 27 28 <!--幻灯片--> 29 <div class="carousel slide" id="carousel-265575"> 30 <ol class="carousel-indicators"> 31 <li class="active" data-slide-to="0" data-target="#carousel-265575"> 32 </li> 33 <li data-slide-to="1" data-target="#carousel-265575"> 34 </li> 35 <li data-slide-to="2" data-target="#carousel-265575"> 36 </li> 37 </ol> 38 <div class="carousel-inner"> 39 <div class="item active"> 40 <img src="http://img01.sogoucdn.com/app/a/100540002/691304.jpg" /> 41 <div class="carousel-caption"> 42 </div> 43 </div> 44 <div class="item"> 45 <img src="http://img01.sogoucdn.com/app/a/100540002/691303.jpg" /> 46 <div class="carousel-caption"> 47 </div> 48 </div> 49 <div class="item"> 50 <img src="http://img01.sogoucdn.com/app/a/100540002/691306.jpg" /> 51 <div class="carousel-caption"> 52 </div> 53 </div> 54 </div> 55 <a class="left carousel-control" href="http://www.mamicode.com/#carousel-265575" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a> 56 <a class="right carousel-control" href="http://www.mamicode.com/#carousel-265575" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a> 57 </div> 58 <!--幻灯片--> 59 60 <!-- 博客宗旨 --> 61 <div class="modal fade" id="about-modal2" tabindex="1" role="dialog" aria-labelledby="modal-label" aria-hidden="true"> 62 <div class="modal-dialog"> 63 <div class="modal-content"> 64 <div class="modal-header"> 65 <button type="button" class="close" data-dismiss="modal"><span 66 aria-hidden="true">×</span><span class="sr-only"></span></button> 67 <h4 class="modal-title" id="modal-label">老牛大讲堂(博客园)</h4> 68 </div> 69 <div class="modal-body"> 70 <p> 71 <br><br> 博客涉及：JAVA,Android,H5,PHP,MySQL,Access,SQLServer,SQLiter等 72 <br><br> 分享内容：好玩，有趣，心情，感兴趣，难点，遇到的问题。 73 <br><br> 给你们的：博客园这个东西挺好玩，你也自己试试建立一个自己的模板吧！ 74 <br><br> 75 </p> 76 </div> 77 <div class="modal-body"> 78 <p></p> 79 </div> 80 <div class="modal-footer"> 81 <button type="button" class="btn btn-default" data-dismiss="modal">了解了</button> 82 </div> 83 </div> 84 </div> 85 </div> 86 87 <!-- 关于 --> 88 <div class="modal fade" id="about-modal" tabindex="1" role="dialog" aria-labelledby="modal-label" aria-hidden="true"> 89 <div class="modal-dialog"> 90 <div class="modal-content"> 91 <div class="modal-header"> 92 <button type="button" class="close" data-dismiss="modal"><span 93 aria-hidden="true">×</span><span class="sr-only"></span></button> 94 <h4 class="modal-title" id="modal-label">老牛大讲堂(博客园)</h4> 95 </div> 96 <div class="modal-body"> 97 <p> 98 <br><br> 版权归属：老牛大讲堂--老牛 99 <br><br> 特别声明：该模板我会在博客园上传代码，有兴趣的伙伴们可以下载。100 <br><br> 意见反馈：2631745603@qq.com101 <br><br>102 </p>103 </div>104 <div class="modal-body">105 <p></p>106 </div>107 <div class="modal-footer">108 <button type="button" class="btn btn-default" data-dismiss="modal">了解了</button>109 </div>110 </div>111 </div>112 </div>
剩下就是jq和页面的css样式的布置了
1 <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css"> 2 <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script> 3 <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script> 4 <script> 5 //增加访问量--博客园老牛大讲堂 6 var str = "<div class=‘account-avatar well text-left‘ style=‘background-color: #FFFFFF;border-radius: 5%;border:0px‘>网页访问：432<br>文章访问:<a href=http://www.mamicode.com/‘http://info.flagcounter.com/y0en‘>
效果如图所示：
博客园页面模板--老牛大讲堂
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。