我介绍的模板就是我自己设计的模板，有兴趣的可以参考一下。--博客园老牛大讲堂
页面主要分为三个部分：
第一部分是头部，
第二部分是处理生成的数据，
第三部分就是引入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里面的东西全隐藏了。然后把自己写好的静态页面直接粘贴上去，不就成了，自己个人主页了吗？还不需要自己提供服务器。当然，如果做一个简单的页面还行吗，如果复杂的页面，我就想不到怎么做了。我看到一些人不仅仅是设计了一个页面，而是设计了自己的所有按键功能，我不知道是怎样做到的，会的留言---关注博客园老牛大讲堂。
6、关于这个页面其他的实现，例如头部代码是什么？或者怎样实现统计访问量等，弹出框咋实现的，怎样实现伸缩和拉伸效果头部不一样等等这些问题，如果想了解的给我留言，我会粘出来。----博客园老牛大讲堂
这是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="#" data-toggle="modal" data-target="#about-modal2" style="padding-right: 0px;">博客宗旨</a> 19 </li> 20 <li> 21 <a href="#" 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 alt="" 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 alt="" 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 alt="" 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="#carousel-265575" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a> 56 <a class="right carousel-control" href="#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.com 101 <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://info.flagcounter.com/y0en'><img src='http://s09.flagcounter.com/count2/y0en/bg_FFF4D1/txt_000000/border_CCBE3F/columns_1/maxflags_3/viewers_3/labels_0/pageviews_0/flags_0/percent_0/' alt='Flag Counter' border='0'></a></div>"; 7 $("#menu").prepend(str); 8 9 //增加常用网址 10 var str2 = "<div class='dropdown' style='margin-bottom:100px'><button class='btn btn-default dropdown-toggle' type='button' id='dropdownMenu1' data-toggle='dropdown' aria-haspopup='true' aria-expanded='true'> - - 常用网址 - - <span class='caret'></span></button><ul class='dropdown-menu' aria-labelledby='dropdownMenu1'><li><a href='http://www.baidu.com' target='other'>百度</a></li><li><a href='http://www.uc123.com/' target='other'>UC</a></li></ul></div>"; 11 $("#menu").append(str2); 12 13 //为列表增加样式 14 $(".list").addClass("list-group"); 15 $(".listitem").addClass("list-group-item"); 16 $(".list").eq(2).css("display", "none"); 17 18 //设置整体布局 19 $("#menu").addClass("col-lg-3 col-md-3 col-xs-3") 20 $("#main").addClass("col-lg-9 col-md-9 col-xs-9"); 21 22 //设置发布内容 23 $(".post").addClass("panel panel-default"); 24 $(".posttitle").addClass("panel-heading"); 25 $(".postcontent").addClass("panel-body"); 26 $(".itemdesc").addClass("panel-footer"); 27 </script>
样式是：默认样式，我忘了我引用的样式了
效果如图所示：
