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

男娘i 2021-11-02 12:24 327阅读 0赞

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

![2012050619252387.jpg][]

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日历控件放在左侧，这个基本上是直接运用了，只不过进行了简单的修改。

![2012050619290061.jpg][]

修改的主要在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>

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

![2012050619333751.jpg][]

Html代码：

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

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>

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

![2012050619363140.jpg][]

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

![2012050619400478.jpg][]

转载于:https://www.cnblogs.com/suguoqiang/archive/2012/05/06/2486478.html

[2012050619252387.jpg]: /images/20211101/a299f7a675044f589ee7c6c1b089770e.png
[2012050619290061.jpg]: /images/20211101/6f86de01bc5f4d408e995e4a267a4ae3.png
[2012050619333751.jpg]: /images/20211101/718d7f1884934255b8c89a98fcd73b39.png
[ContractedBlock.gif]: https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif
[ExpandedBlockStart.gif]: /images/20211101/e7cf65b7ebd54359aeebc22ec6c9134e.png
[2012050619363140.jpg]: /images/20211101/ce4695bdacdc4e1b820fb7b8314c91f4.png
[2012050619400478.jpg]: /images/20211101/467b11bc250447d38962fe53417a3228.png