博客园页面模板--老牛大讲堂

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了博客园页面模板--老牛大讲堂相关的知识,希望对你有一定的参考价值。

我介绍的模板就是我自己设计的模板,有兴趣的可以参考一下。

页面主要分为三个部分:

第一部分是头部,

第二部分是处理生成的数据,  

第三部分就是引入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             }
View Code

第一部分的上面页面主要包括头部,以及图片的轮播

技术分享
  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  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="#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">&times;</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> &nbsp;&nbsp;&nbsp;博客涉及:JAVA,android,H5,php,mysql,Access,SQLServer,SQLiter等
 72                             <br><br> &nbsp;&nbsp;&nbsp;分享内容:好玩,有趣,心情,感兴趣,难点,遇到的问题。
 73                             <br><br> &nbsp;&nbsp;&nbsp;给你们的:博客园这个东西挺好玩,你也自己试试建立一个自己的模板吧!
 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">&times;</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> &nbsp;&nbsp;&nbsp;版权归属:老牛大讲堂--老牛
 99                             <br><br> &nbsp;&nbsp;&nbsp;特别声明:该模板我会在博客园上传代码,有兴趣的伙伴们可以下载。
100                             <br><br> &nbsp;&nbsp;&nbsp;意见反馈: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‘>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-&nbsp;-&nbsp;常用网址&nbsp;-&nbsp;-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<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>
View Code

效果如图所示:

 

以上是关于博客园页面模板--老牛大讲堂的主要内容,如果未能解决你的问题,请参考以下文章

关于ajax跨域通信-博客园老牛大讲堂

H5支持所有浏览器-博客园老牛大讲堂

Java的日期字符串的转换---博客园老牛大讲堂

JAVA的JSON数据包装-博客园老牛大讲

JavaScript的基本用法--博客园老牛大讲堂

微信小程序开发---博客园老牛大讲堂