大项目之网上书城（二）——主页（上）

大项目之网上书城（二）——主页（上）
- 1.主页
  - 代码
  - 效果图
- 2.head2.jsp
  - 代码
  - 效果图
- 3.二级页面的empty.jsp
  - 代码
  - 效果图
- 总结
  - WebContent图

大项目之网上书城（二）——主页（上）

实在是太复杂啦，弄了半天才调出来一个壳子。明天再继续吧。。。

1.主页

代码

值得一提的是，我把所以的路径都改成用${pageContext}来获取的了，这样就可以方便我在不同的地方复制粘贴同样的代码，能有同样的功效了。（甚至字体的url都改了23333）

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<title>主页</title>
</head>
<body style="background-color:#bbb">
<!-- 调用头部页面 -->
<div style="width:100%;height:100px;float:left">
<jsp:include page="/client/head.jsp"></jsp:include>
</div>
<!-- 通用内容体大小 -->
<div style="width:70%;height:886px;float:left;margin-left:15%;">
<!-- 二级导航 -->
<jsp:include page="/client/head2.jsp"></jsp:include>
<!-- 图书分类and轮播图and文案and热门推荐and新书上架and新书榜 -->
<div style="width:100%;height:800px;float:left;margin-top:2%;background-color:#bbb;">
<!-- 图书分类 -->
<div style="width:23%;height:100%;float:left;background-color:#a8f;">

</div>
<!-- 轮播图 -->
<div style="width:50%;height:35%;float:left;background-color:#a8f;margin-left:2%">

</div>
<!-- 文案and热门推荐 -->
<div style="width:23%;height:35%;float:left;background-color:#bbb;margin-left:2%">
<!-- 文案 -->
<div style="width:100%;height:30%;float:left;background-color:#a8f;">

</div>
<!-- 热门推荐 -->
<div style="width:100%;height:64%;float:left;background-color:#a8f;margin-top:8%">

</div>
</div>
<!-- 新书上架 -->
<div style="width:50%;height:63%;float:left;background-color:#a8f;margin-left:2%;margin-top:2%;">

</div>
<!-- 新书榜 -->
<div style="width:23%;height:63%;float:left;background-color:#a8f;margin-left:2%;margin-top:2%;">

</div>
</div>
</div>
<!-- 调用底部页面 -->
<div style="width:100%;height:60px;float:left">
<jsp:include page="/client/foot.jsp"></jsp:include>
</div>
</body>
</html>

恩，写注释是个好习惯，我得坚持。

然后head2.jsp是个新的，下面发。

效果图

2.head2.jsp

代码

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<title>空白</title>
</head>
<body style="background-color:#bbb">
    <div style="width:100%;height:60px;float:left;background-color:#bbb;line-height:60px;text-align:center">
        <div style="height:100%;width:10%;float:left;margin-left:2%;">
            <a href="${pageContext.request.contextPath }/client/index.jsp">图书</a>
        </div>
        <div style="height:100%;width:10%;float:left;margin-left:2%;">
            <a href="${pageContext.request.contextPath }/client/pai/index.jsp">好书拍卖</a>
        </div>
        <div style="height:100%;width:10%;float:left;margin-left:2%;">
            <a href="${pageContext.request.contextPath }/client/net_literature/index.jsp">网络文学</a>
        </div>
        <div style="height:100%;width:10%;float:left;margin-left:2%;">
            <a href="${pageContext.request.contextPath }/client/clothing/index.jsp">服装</a>
        </div>
        <div style="height:100%;width:10%;float:left;margin-left:2%;">
            <a href="${pageContext.request.contextPath }/client/sport/index.jsp">运动户外</a>
        </div>
        <div style="height:100%;width:10%;float:left;margin-left:2%;">
            <a href="${pageContext.request.contextPath }/client/nursery/index.jsp">孕婴童</a>
        </div>
        <div style="height:100%;width:10%;float:left;margin-left:2%;">
            <a href="${pageContext.request.contextPath }/client/residence/index.jsp">家居</a>
        </div>
        <div style="height:100%;width:10%;float:left;margin-left:2%;">
            <a href="${pageContext.request.contextPath }/client/food/index.jsp">食品</a>
        </div>
    </div>
</body>
</html>

是的，我在client下新建了好几个分类，还用得我一些看不懂的，翻译来的英文2333333目前他们里的代码都是通用的，一个empty和一个index，都一样的，我一会儿放一个就好了。

效果图

3.二级页面的empty.jsp

代码

什么pai/empty.jsp啊，clothing/empty.jsp啊，什么什么的，甚至pai/index.jsp这类的，目前都是一样的，唯一不同就是index.jsp里的title是主页，empty.jsp的title是空白。

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<title>空白</title>
</head>
<body style="background-color:#bbb">
<!-- 调用头部页面 -->
<div style="width:100%;height:100px;float:left">
<jsp:include page="/client/head.jsp"></jsp:include>
</div>
<!-- 通用内容体大小 -->
<div style="width:70%;height:886px;float:left;margin-left:15%;">
    <!-- 二级导航 -->
    <jsp:include page="/client/head2.jsp"></jsp:include>
    <!-- 通用界面 -->
    <div style="width:100%;height:800px;float:left;margin-top:2%;background-color:#ccc;">
    </div>
</div>
<!-- 调用底部页面 -->
<div style="width:100%;height:60px;float:left">
<jsp:include page="/client/foot.jsp"></jsp:include>
</div>
</body>
</html>

效果图

总结

跟上一篇比少好多是吧，上一篇花时间长啊，我希望能尽量日更，所以，emmmmmm，有多少算多少吧。慢慢来！

WebContent图

原文地址：https://www.cnblogs.com/zhangA/p/11028580.html

时间： 2024-08-27 20:28:45

大项目之网上书城（二）——主页（上）的相关文章

大项目之网上书城（十二）——完成啦

目录大项目之网上书城(十二)--完成啦主要改动新增代码 1.addCategory.jsp 效果图 2.bookManager.jsp 效果图 3.userManager.jsp 效果图 4.error404.jsp 效果图 5.error500.jsp 效果图 6.errorelse.jsp 效果图 7.web.xml 8.addFenLeiServlet 9.bookDao里的addFenLei 总结 github页面 bookstoreZhang 大项目之网上书城(十二)--完成啦

大项目之网上书城（六）——个人页面和书页面Demo

目录大项目之网上书城(六)--个人页面和书页面Demo 主要改动 1.user.jsp 代码效果图 user.js 代码 3.shu.jsp 代码效果图 4.其他小改动 LoginServlet LogoutServlet BookService XinShuMingServlet 5.新增 FindPageByIdServlet ShuImgByIdServlet 总结大项目之网上书城(六)--个人页面和书页面Demo 主要改动今天时间依旧不是很多,,主要是今天思路不够丰富.勉强给个

大项目之网上书城（九）——订单Demo

目录大项目之网上书城(九)--订单Demo 主要改动 1.OrderServiceImpl 代码 2.OrderDaoImpl 代码 3.OrderitemDaoImpl 代码 4.orderitem_insert触发器代码 5.DelOrderServlet 代码 6.NewOrderServlet 代码 7.PayForServlet 代码 8.shouhuo.jsp 代码效果图 9.order.jsp 代码效果图总结大项目之网上书城(九)--订单Demo 主要改动加了创建订单

JavaWeb之项目实战-网上书店(二十一)

简介作为这篇博客花费了些许时间练习和整理,最终能掌握,也算上没有白白费时间花在这个项目上面.很庆幸自己坚持把这个项目搞定,虽然这个项目对于实际毫无意义,但对于学习阶段是算作对我的提升吧关于发布博客我会写出项目历程,第二篇会提炼出重要的控制层部分.总体都是为了巩固和复习使用还有最后马上要过年了,在此祝大家新年快乐开发前奏回顾 Dao设计模式:泛型反射注解反射@[email protected] Servlet3.0新特性注解支持/part文件上传/web片段/Cookie的httpO

项目2——网上书城项目

这个项目是帮舍友做的毕设项目,舍友是个作家,写小说的,想做一个管理小说的系统,我就帮代劳了,如果做出来他看不上再花钱找别人那就不该我事了哈哈,我尽力给做的好一点吧,舍友需求还是挺简单的首先进行需求分析前台 1.用户模块: 注册激活登录退出 2.分类模块: 查看所有分类 3.图书模块查询所有图书按分类查询图书查询图书详细(按id查询) 4.购物车模块: 添加购物车条目清空所有条目删除指定条目我的购物车(按用户查询购物车) 5.订单模块生成订单我的订单(按用户查询订单) 按

网上书城项目

实习就要结束了,最终要上交的是网上书城项目和一份文档.接下来简要介绍一下项目. 项目是根据三层架构来写,数据访问层(DAO层).系统业务逻辑控制处理层(servlet层).和界面层(jsp). 首先在DAO层构造好SQL语句,对数据库进行操作,在servlet层调用Dao层相关方法进行相应的逻辑处理,JSP负责构造界面以及显示数据. 下面贴出代码,仅供参考,一些功能的具体实现在功能说明时有所介绍,只贴一些比较重要的部分的代码,大家主要重在理解. 此次项目,我感觉比较困难的部分是加入购物车部分

网上书城项目总结(servlet_jsp+javaBean)

网上书城项目总结 1 项目大纲设计: 需求分析系统设计详细设计权限设计 2 技术选型: Servlet+jsp+javaBean Listener+Filter+jstl+fileupload+c3p0+dbutils+mysql 3 开发顺序: 从dao层到service层再到web层网上书城需求分析: 分别对管理员,普通用户,系统三个用户角色的各个功能的实现. 其中包括管理员对图书商城的后台图书以及图书的类别分类增删查改,以及订单的状态; 普通用户对于图书的选购,浏览,购物车的管理以

在主方法中定义一个大小为1010的二维字符型数组，数组名为y，正反对角线上存的是‘’，其余位置存的是‘#’；输出这个数组中的所有元素。

//在主方法中定义一个大小为10*10的二维字符型数组,数组名为y,正反对角线上存的是‘*’,其余位置存的是‘#’:输出这个数组中的所有元素. char [][]y=new char [10][10]; for(int i=0;i<10;i++) { for(int j=0;j<10;j++) { if(i==j||i+j==9) { y[i][j]='*'; } else { y[i][j]='#'; } } } for(int i =0;i<10;i++) { for(int k

将web项目部署到阿里云服务器上

将web项目部署到阿里云服务器(ubantu14.0.14)上的一般流程: 1.下载putty.在host name栏输入远程服务器ip地址,端口默认为22.阿里云服务器可以通过控制台查看公网ip地址,点击open进行连接 2.输入用户名和密码后进入dos界面,用apt-get update 命令更新,否则很多东西安装不了 3.安装vsftpd服务,通过命令apt-get vsftpd安装,注意这里的ftp和之后的Tomcat.MySQL数据库端口在阿里云服务器中是默认关闭的,需要进入阿里云控