请问怎么判断子栏目的第一个,并为它加上样式

本文深入探讨了信息技术领域的多个细分技术领域,包括前端开发、后端开发、移动开发、游戏开发等,提供了对每个领域的核心内容概述,旨在为读者提供全面的技术知识框架。


<table width="100%" border="0" cellspacing="0" cellpadding="0" class="box">
<tr>
<td>
<ul class="nymainleftul01">
[e:loop={"select classid,classname from {$dbtbpre}enewsclass where bclassid={$class_r[$GLOBALS[navclassid]][bclassid]} order by myorder,classid asc",0,24,0}] 
<?php 
$classurl=sys_ReturnBqClassname($bqr,9); 
if($GLOBALS[navclassid]==$bqr[classid]){
?>
<li><a class="choose" href="<?=$classurl?>"><?=$bqr[classname]?></a></li>
<?php }else{ ?>
<li><a href="<?=$classurl?>"><?=$bqr[classname]?></a></li>
<?php } ?>
[/e:loop]
</ul>
</td>
</tr>
</table>

嗨!博客 博客是继MSN、BBS、ICQ之后出现的第4种网络交流方式,现已受到大家的欢迎,而一个典型的博客结合了文字、图像、其他博客或网站的链接及其它与主题相关的媒体,能够让读者以互动的方式留下意见。此项目结合HTML、CSS、jQuery、bootstrap等前端页面技术,主要完成博客网站的首页、分类及详情页面的制作,包含网站banner图、分类文章、热门文章、资讯、文章的详细内容等信息的展示。 所属专业:JAVA开发 \ WEB前端(栈)开发 建议周期:5天 项目类型:课程项目 发布需求 项目承接 提交项目 项目审核 评审公示 项目详细信息需求详细 项目来源:系统资源 适用专业:JAVA开发 \ WEB前端(栈)开发 项目建议周期:5天 项目类型:课程项目 项目完整简介: 博客是继MSN、BBS、ICQ之后出现的第4种网络交流方式,现已受到大家的欢迎,而一个典型的博客结合了文字、图像、其他博客或网站的链接及其它与主题相关的媒体,能够让读者以互动的方式留下意见。此项目结合HTML、CSS、jQuery、bootstrap等前端页面技术,主要完成博客网站的首页、分类及详情页面的制作,包含网站banner图、分类文章、热门文章、资讯、文章的详细内容等信息的展示。 项目需求: 1.1 项目名称 《嗨!博客》 1.2 需求描述 本项目旨在开发一个博客网站,包括网站首页、网站分类页面和文章详情页面。通过设计合理的布局和样式,使用户能够方便地浏览和阅读博客文章。 该网站其主要功能要求如下: 1、网站首页: Ø展示最新的博客文章列表,包括标题、摘要、作者和发布日期等信息。 Ø提供搜索功能,允许用户根据关键词搜索相关文章。 Ø可以按照发布日期或热度等指标进行排序和筛选。 2、网站分类页面: Ø按照不同的分类或标签展示相关的博客文章。 Ø用户可以选择感兴趣的分类或标签,浏览对应的文章列表。 3、文章详情页面: Ø展示单篇博客文章的详细内容,包括标题、作者、发布日期和正文等信息。 Ø提供评论功能,允许用户发表评论并查看其他用户的评论。 Ø可以显示相关文章推荐,提供用户进一步阅读的选项。 4、页面布局和设计: Ø设计符合博客网站风格的页面布局和样式。 Ø页面应该具有良好的响应式设计,适应不同设备的屏幕尺寸。 1.2.1 项目结构的搭建 项目在开发工具中的结构如图1-1所示。 图1-1 项目的结构 项目中的文件及其说明见表1-1所示。 表1-1 项目中的文件及其说明 包名 说明 bootstrap 存放网站相关bootstrap框架相关的文件。 css 存放网站相关的样式类。 fonts 存放网站相关的文字字体样式。 img 存放网站相关的图片。 js 存放网站相关的JavaScript文件 1.2.2 网站首页 网站首页是一个网站的入口网页,故往往会被编辑得易于了解该网站,并引导互联网用户浏览网站其他部分的内容。这部分内容一般被认为是一个目录性质的内容。大多数作为首页的文件名是index、default、main或portal加上扩展名。 在设计原则上需要注意以下几点: 明确内容 抓住用户 优化内容 根据上述三点内容,设计了此次项目的网站首页内容,展示以“嗨”为主题的博客网站。页面展示主要包含了常规的导航栏、banner图,每个导航栏的分类展示以及底部导航栏部分。 1.2.3 单个分类页面-嗨视角 每个导航栏对应的部分属于单个页面,每个页面的布局都是一样的,主要展示的分类内容不同,从走着嗨、起来嗨、嗨玩意、嗨客说、嗨视角这五个方面出发展示网站博客的主要内容, 本次项目以嗨视角来展示网站栏目的布局展示,内容包含了以下几个方面:导航栏、文章banner,最新文章、热门文章、底部导航栏。 1.2.4 文章详情页面 不论是首页的文章还是分类展示栏目的文章,都可以通过点击的方式进入文章的详情页面,页面布局包含了:导航栏、文章具体内容(标题,作者,内容、分享)、热门文章推荐、相关文章推荐、底部导航栏。 1.3 相关技术与工具 完成项目所用技术: HTML CSS JQuery Bootstrap JavaScript 开发工具: 浏览器/HBuilder 1.4 阶段划分 嗨!博客网站实现阶段划分见表1-2所示。 表1-2 阶段任务及时间 阶段名称 使用时间 阶段实现 第一阶段 180分钟 网站首页的实现 第二阶段 180分钟 网站栏目页面的实现 第三阶段 120分钟 网站文章详情页的实现 第四阶段 120分钟 轮播图的动态.网站的动态效果实现。 第五阶段 180分钟 实现网站的响应式-手机端可访问 1.4.1 第一阶段 该阶段我们需要完成的任务:创建网站首页。页面效果如图1-2。 图1-2 首页 导航栏: 左边:log、首页、走着嗨、起来嗨、嗨玩意、嗨客说、嗨视角、搜索框 右边:登录、注册 主体内容: 轮播图:三张图轮播 走着嗨:关于该栏目的三个推荐文章 起来嗨:关于该栏目的三个推荐文章 嗨玩意:关于该栏目的六个推荐文章 嗨客说:关于该栏目的四个热门签名 嗨视角:关于该栏目的三个推荐文章 底部导航栏: 左边:关于我们、加入我们、其他 中间:展示合作伙伴 右边:分享的图标,微博、QQ、微信 底部:备案号 1.4.2 第二阶段 该阶段的目标任务是:实现单个栏目页面。页面效果如图1-3示。 图1-3告管理页面 导航栏: 左边:log、首页、走着嗨、起来嗨、嗨玩意、嗨客说、嗨视角、搜索框 右边:登录、注册 主体内容: 展示分文章、热门文章、最新文章 底部导航栏: 左边:关于我们、加入我们、其他 中间:展示合作伙伴 右边:分享的图标,微博、QQ、微信 底部:备案号 1.4.3 第三阶段 该阶段的目标任务是:完成文章详情页面。页面效果如图1-4。 图1-4文章详情页面 导航栏: 左边:log、首页、走着嗨、起来嗨、嗨玩意、嗨客说、嗨视角、搜索框 右边:登录、注册 主体内容: 展示文章的详细内容、侧边栏展示热门文章和其他文章 底部导航栏: 左边:关于我们、加入我们、其他 中间:展示合作伙伴 右边:分享的图标,微博、QQ、微信 底部:备案号 1.4.4 第四阶段 该阶段的目标任务是:完成网站的一些动态效果,具体任务如下: 一、首页 1、Banner图轮播,点击左右框中的箭头可以切换图片,底部的红色框是展示图片的位置,展示第一张图片,左边的线条从透明变为白色,同理,展示第二张图片,中间的线条从透明变为白色,展示张图片,右边的线条从透明变为白色,当第三张图展示完毕从新回到第一张图进行轮播。 当页面浏览到“走着嗨”板块时候,三个模块按照顺序依次弹出,图片从透明变为不透明,从小到大弹出,弹出来的顺序按照:第一个板块弹到一半第二个板块就弹出来,第二个板块弹到一半,第三个板块就弹出来。当鼠标指针在每个板块时,文字颜色变深一点。 、 当页面浏览到“起来嗨”板块时候,图片从透明变为不透明,从小到大弹出,弹出来的顺序按照:第一个板块弹到一半第二个板块就弹出来。 当鼠标指针在每个板块时,样式变为下图样式:背景加一层透明黑色,并在左上角出现标题和时间,此处的三个板块样式均是一样。 当页面浏览到“嗨玩意”板块时候,图片从透明变为不透明,从小到大弹出,三个模块按照顺序依次弹出,当第一个板块弹到一半第二个板块就弹出来,第二个板块弹到一半,第三个就弹出来。 当鼠标指针在每个板块时,样式变为下图样式:背景加一层透明黑色,并在左上角出现标题和时间,此处的六个板块样式均是一样。 当页面浏览到“嗨客说”和嗨视角的时候板块时候,图片从透明变为不透明,从小到大弹出,几个模块按照顺序依次弹出,当第一个板块弹到一半第二个板块就弹出来,第二个板块弹到一半,第三个就弹出来,以此类推。 二、单个页面展示页 1.页面展示的推荐文章,当鼠标放在板块上时,左上角出现标题和时间,并且图片添加透明的黑色阴影,效果展示如下图。 2. 当鼠标滚轮在此页面往下滚动时,每篇文章栏目以此弹出,图片从透明变为不透明,从小到大弹出,展示效果如图所示。 当鼠标移动到某一个文章板块时,样式发生改变,效果展示如下图: 1.4.5 第五阶段 该阶段的目标任务是:完成网站响应式展示—手机端页面。 首页,点击右上角下拉出现导航栏,效果如下所示。 首页banner轮播图,效果如下所示。 首页的每个栏目的展示图,效果如下所示。 单个栏目分类页面效果图: 文章详情页效果图,效果如下所示。 1.5 项目总结 本项目是web前端框架开发技术课程的课程项目,在本项目中我们使用了html、css、jQuery、bootstrap等技术。 在开始开发本项目之前,我们要先熟悉项目的业务,理清思路之后再分析如何使用所学技术来实现业务。也许会遇到各种问题,但是在遇到问题的时候请不要退缩,更重要的是分析问题和解决问题,这样才能更快地提高自己的技术。 通过这个项目的历练,我们对本学期学习的web前端框架开发技术更加熟练了,对后续继续学习常用前端框架作好了充足的准备,为以后能够设计和开发出更优秀的web应用奠定了基础。
最新发布
06-26
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值