我的博客网站开发1——博客首页设计
2024-05-09 07:48:34
首先是是对导航菜单的设计，个人感觉对界面的设计还是要以大方和显著为主为好。
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>
最后是页面的主要页中的博文显示内容的设计。
整个的博客首页设计部分基本完成，如下
转载于:https://www.cnblogs.com/suguoqiang/archive/2012/05/06/2486478.html
我的博客网站开发1——博客首页设计相关推荐
- html编写个人博客_Django 开发简易博客网站
本篇使用 Django 开发博客网站的核心内容,涉及 Django .MySQL .WampServer :我比较喜欢 Django 框架的 MVC (模型.视图.控制器)的软件设计模式,其中我最喜欢 ...
- 用开源博客系统OneBlog来搭建自己的个人技术博客网站(java版博客系统)
java版博客系统 一直想搭建一个个人的博客,方便记录和分享一些技术点,在网上也找了一圈,最终在开源中国中发现了一款很不错的java版的博客系统 https://gitee.com/yadong.zh ...
- 我的博客网站开发6——博文关键字搜索
在页面中,用户可以通过关键字的搜索功能搜索博文.可以实现类似百度和Google的页面搜索功能,可实现多个关键字的搜索.搜索后,在搜索的结果中有关键字的高亮度的提示如: 在搜索的结果页面,模仿Googl ...
- 基于SpringBoot从零构建博客网站 - 开发设置主页标识和修改个人信息功能
由于守望博客系统中支持由用户自己设置个人主页的URL的后半段,所以必须要用户设置该标识的功能,而且是用户注册登录之后自动弹出的页面,如果用户没有设置该标识,其它的操作是不能够操作的,同时要求主页标识只 ...
- Django开发个人博客网站——8、博客首页的开发
现在我们进入博客的首页127.0.0.1:8000, 发现还是欢迎页面,因为我们还没有给博客添加任何模板,也就是前端html页面. 博客前端模板托管在GitHub:django_blog_templa ...
- Diango博客--12.开发 Django 博客文章阅读量统计功能
文章目录 0.models中增加新字段 1.models中增加方法 2.迁移数据库 3.修改视图函数 4.在模板中显示阅读量 0.models中增加新字段 为了记录文章的浏览量,需要在文章的数据库表中 ...
- java 微信多客服开发_多客服会话控制
出自微信公众平台开发者文档 跳转到: 导航, 搜索 会话状态通知事件 公众号开通多客服功能以后,当客服人员有接入会话.关闭会话.转接会话时,微信后台会将会话对应的事件推送到公众号填写的url上. 微信 ...
- php网站开发期末大作业,网页设计期末大作业报告..doc
网页设计期末大作业报告. 南开大学滨海学院 本 科 生 论 文(设 计) 中文题目:外文题目:Website design and implementation based on Web develo ...
- 大学生网页制作期末作业——html+css+javascript+jquery旅游官网6页 html大学生网站开发实践作业 web网页设计实例作业
最新文章
- Educational Codeforces Round 45 (Rated for Div. 2) D Graph And Its Complement(图的构造)
- No bean named 'dataSource' is defined
- 假设磁盘块与缓冲区大小相同，每个盘块读入缓冲区的时间为10μs，由缓冲区送至用户区的时间是5μs，系统对每个磁盘块数据的处理时间为2μs。若用户需要将大小为10个磁盘块的
- win8计算机休眠的区别,详细说明win8和win10系统中待机，休眠和睡眠的功能和区别_Computer Basics_IT /...
- python引用传递产生的问题_python关于lambda、引用传递等易犯的错误
- mysql 权重 取值_mysql如何按权重查询数据啊？
- MemCache在tomcat中的负载均衡和session交叉存放
- 3.Docker技术入门与实战 --- 使用Docker镜像
- Ionic 如何使用 Cordova 插件
- windows下文件路径太深，无法删除解决办法
- GitHub上传代码及在线demo演示
- 出入库单据小票移动打印，盘点机PDA连接蓝牙打印机打印单据小票
- 用 Python 实现黑客帝国中的数字雨落既视感
- Android固定帧率录屏
- 年中大促，华硕破晓PX574特惠专场，直降400！
- python刷阅读_Python 刷高博客阅读量
- 下面不属于电子计算机外存储器的是,2013年计算机专转本模拟题三答案
- ISCC 2022 wp
- Hotmail Smtp邮箱发送的端口
- Vue v-if和-vshow的差异比较