大項目之網上書城（二）——主頁（上）

時間 2019-12-08

標籤項目網上書城主頁简体版

原文原文鏈接

目錄html

大項目之網上書城（二）——主頁（上）
- 1.主頁
  - 代碼
  - 效果圖
- 2.head2.jsp
  - 代碼
  - 效果圖
- 3.二級頁面的empty.jsp
  - 代碼
  - 效果圖
- 總結
  - WebContent圖

大項目之網上書城（二）——主頁（上）

實在是太複雜啦，弄了半天才調出來一個殼子。明天再繼續吧。。。java

1.主頁

代碼

值得一提的是，我把因此的路徑都改爲用${pageContext}來獲取的了，這樣就能夠方便我在不一樣的地方複製粘貼一樣的代碼，能有一樣的功效了。（甚至字體的url都改了23333）web

<%@ 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是個新的，下面發。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，都同樣的，我一下子放一個就行了。ide

效果圖

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>