我的博客网站开发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: '<上月', 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>
最后是页面的主要页中的博文显示内容的设计。
整个的博客首页设计部分基本完成，如下
本是菜鸟，偶做老鸟，略读半卷书，坐井说天阔。大志无所为，海斗量得失，年到老时方恨晚，怒指生不逢时。
