我的博客网站开发1——博客首页设计

首先是是对导航菜单的设计,个人感觉对界面的设计还是要以大方和显著为主为好。

Html代码:

 1  <div id="menu_header">
 2     <ul>
 3     <li><a class="menua" href="#">首页</a></li>
 4     <li><a class="menua" href="../BlogHomePage.aspx">博客总页</a></li>
 5     <li><a class="menua" href="../BlogPrivatePage.aspx/<%=getMasterId() %>">博客首页</a></li>
 6     <li id="li_admin"><a class="menua" href="#">博客管理</a></li>
 7     <li><a class="menua" href="#">论坛</a></li>
 8     <li><a class="mebua" href="#">空间</a></li>
 9     </ul>
10     </div>

Css代码:

1 #menu_header{height: 27px; margin:0px auto; margin:10px;}
2 #menu_header ul{ float:left; list-style:none; margin :0px; padding:0px;height:20px;}
3 #menu_header ul li{ float:left; display:block;  background:url(img/icons.gif); background-position:0px -145px;width:90px;height:20px; padding-top:8px;}
4 #menu_header ul li a:link,#menu_header ul li a:visited{ font-size:14px; text-align:center; font-weight:bold;color:#FFFFFF; }
5 .menuDiv{ width:2px; height:28px; background:#999;}

Javascript代码,实现对鼠标经过时,样式的改变:

1 $('#menu_header li').hover(function () {
2        $(this).css({ "background-position": "0px -25px" });
3        $(this).children("a").css({ "color": "#000000" });
4        },function () {
5        $(this).css({ "background-position": "0px -145px;" });
6             $(this).children("a").css({ "color": "#FFFFFF" });
7 } );

接下来,用了一个jQuery日历控件放在左侧,这个基本上是直接运用了,只不过进行了简单的修改。

修改的主要在javascript代码中

 1  /*日历控件*/
 2         $(document).ready(function () {
 3             var $datepicker = $('#calendar');
 4             $datepicker.datepicker({
 5                 closeText: '关闭',
 6                 prevText: '&#x3c;上月',
 7                 monthNames: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
 8                 dayNameShort: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
 9                 dayNamesMin: ['日', '一', '二', '三', '四', '五', '六'],
10                 dateFormat: 'yy-mm-dd',
11                 altField: '#alternate',
12                 altFormat: 'yy-mm-dd',
13                 onSelect: function (datetext) {
14                     alert(datetext);
15                 }
16             });
17         });

Html代码:

1         <div id="calendar" style="margin: 5px auto; width: 195px; border: 1px solid #b6ff00;">
2         </div>

接下是对博客左侧的设计,对左侧的设计基本上是实现对博主的博文的相关信息、博客博文的分类和排行显示。

                                           

Html代码:

View Code
 1 <div id="Div1" style="text-align: left; padding: 5px;  background: #0094ff;">
 2             昵称:<a id="username" href="#" style=" font-weight:bold;  color:#000000;"><%=getMasterName()%></a><br />
 3             园龄:<a id="yuanling"></a><br />
 4             粉丝:<a id="fensi" href="#" style=" font-weight:bold;  color:#000000;"><%=getMasterFansCount()%></a><br />
 5             关注:<a id="guanzhu"  href="#" style=" font-weight:bold;  color:#000000;"><%=getMasterAttentionCount()%></a><br />
 6             <span><a id="addGuanZhu" style=" cursor:pointer;">加关注</a></span>
 7         </div>
 8         <div id="search" style="padding: 5px; text-align: left; background: #0094ff; margin-top: 5px;">
 9             <div style="text-align: left; font-weight: bold; ">搜索</div>
10             <input id="txt_search" type="text" /><br />
11             <input id="btn_search" type="button" value="搜索" />
12         </div>
13         <div id="mybiaoqian" style="padding: 5px; text-align: left; background: #0094ff; margin-top: 5px; height: 80px;">
14             <div style="text-align: left; font-weight: bold; ">我的标签</div>
15         </div>
16         <div id="articlefenlei" style="padding: 5px; text-align: left; background: #0094ff; margin-top: 5px;">
17             <div style="text-align: left; font-weight: bold; ">博文分类</div>
18         </div>
19         <div id="suibidangan" style="padding: 5px; text-align: left; background: #0094ff; margin-top: 5px; height: 80px;">
20             <div style="text-align: left; font-weight: bold; ">随笔档案</div>
21         </div>
22         <div id="articlesort" style="padding: 5px; text-align: left; background: #0094ff; margin-top: 5px;">
23             <div style="text-align: left; font-weight: bold; ">阅读排行榜</div>
24         </div>
25         <div id="commentsort" style="padding: 5px; text-align: left; background: #0094ff; margin-top: 5px;">
26             <div style="text-align: left; font-weight: bold; ">评论排行榜</div>
27             <asp:GridView ID="dgv_CommentSort" runat="server" AutoGenerateColumns="False" 
28                 BorderStyle="None" GridLines="None" ShowHeader="False">
29                 <Columns>
30                     <asp:TemplateField>
31                         <ItemTemplate>
32                             <div style=" margin-bottom:20px;">
33                                  <div style=" width:29px; background:url(../img/num.png); background-position:-5px 0px; background-repeat:no-repeat; text-align:center; float:left; color:#FFFFFF;">
34                                  <%#Container.DataItemIndex+1 %>
35                                  </div>
36                                  <div style="float:left;margin-left:5px; width:150px; overflow:hidden;">
37                                       <a href="../BlogContent.aspx/<%# DataBinder.Eval(Container.DataItem, "dengLuName") %>?id=<%# DataBinder.Eval(Container.DataItem, "essayId") %>" style=" color:#000000;"><%# DataBinder.Eval(Container.DataItem, "title") %>(<%# DataBinder.Eval(Container.DataItem, "ReplyCount")%>)</a>
38                                  </div>
39                             </div>
40                         </ItemTemplate>
41                     </asp:TemplateField>
42                 </Columns>
43             </asp:GridView>
44         </div>
45         <div id="commendsort" style="padding: 5px; text-align: left; background: #0094ff; margin-top:5px;">
46             <div style="text-align: left; font-weight: bold; ">推荐排行榜</div>
47             <div>
48                 <asp:GridView ID="dgv_UpEssaySort" runat="server" AutoGenerateColumns="False" 
49                     BorderStyle="None" GridLines="None" ShowHeader="False">
50                     <Columns>
51                         <asp:TemplateField>
52                             <ItemTemplate>
53                                 <div style=" margin-bottom:20px;">
54                                      <div style=" width:29px; background:url(../img/num.png); background-position:-5px 0px; background-repeat:no-repeat; text-align:center; float:left; color:#FFFFFF;">
55                                      <%#Container.DataItemIndex+1 %>
56                                      </div>
57                                      <div style="float:left;margin-left:5px; width:150px; overflow:hidden;">
58                                           <a href="../BlogContent.aspx/<%# DataBinder.Eval(Container.DataItem, "dengLuName") %>?id=<%# DataBinder.Eval(Container.DataItem, "essayId") %>" style=" color:#000000;"> <%# DataBinder.Eval(Container.DataItem, "title") %>(<%# DataBinder.Eval(Container.DataItem, "essayUpCount")%>)</a>
59                                      </div>
60                                 </div>
61                             </ItemTemplate>
62                         </asp:TemplateField>
63                     </Columns>
64                 </asp:GridView>
65             </div>
66         </div>

最后是页面的主要页中的博文显示内容的设计。

整个的博客首页设计部分基本完成,如下

 

posted @ 2012-05-06 19:44 Ghost Soar 阅读(...) 评论(...) 编辑 收藏