1. <wbr id="m8vu6"></wbr>

      <del id="m8vu6"><center id="m8vu6"><source id="m8vu6"></source></center></del>
        <p id="m8vu6"><sub id="m8vu6"></sub></p>

        VB.net 2010 視頻教程 VB.net 2010 視頻教程 python基礎視頻教程
        SQL Server 2008 視頻教程 c#入門經典教程 Visual Basic從門到精通視頻教程
        當前位置:
        首頁 > 網站開發 > JavaScript >
        • JavaScript教程之JavaScript教程之大項目之網上書城(三)——主頁

        大項目之網上書城(三)——主頁(中)

        盡量日更,我發現我還要寫的東西有好多啊。

        主要改動

        設計這個勉強看得過去的顏色,填充之前的主頁,按照之前的思路,左邊是圖書分類,中間一個輪播圖,然后右邊是一個文案廣告,加一個熱銷書推薦,下面是新書推薦,然后下面的右面是新書排行榜。因為我打算把網頁弄成動態的,于是熱銷書推薦,新書推薦,新書排行榜,都要是通過js+servlet來從數據庫獲取最新數據,寫起來會非常麻煩啊。(以及我還沒有數據庫,我還沒有dao,沒有BookBean,沒有service,于是測試起來超麻煩啊。就只給熱銷書推薦寫了個簡單的測試。新書推薦因為涉及到圖片,我不太了解,還在發展科技樹,真的很艱巨啊。再加上我意識到我要設計一下通用的圖書詳情頁面,我要增加個超級用戶。超級用戶要可以修改數據庫,啊,真的好難啊。任重而道遠。)

        1.主頁持續施工中

        代碼

        真實任重而道遠,這里同樣加了bootstrap的代碼,用來顯示按鈕。。

        <%@ page language="java" contentType="text/html; charset=utf-8"
            pageEncoding="utf-8"%>
        <!DOCTYPE html>
        <html>
        <head>
        <style>
        li{
            float:left;
            width:100%;
            height:10%;
            font-size:16px;
            color:#8deeee;
        }
        </style>
        <script type="text/javascript" src="${pageContext.request.contextPath}/jquery-3.3.1/jquery-3.3.1.min.js"></script>
        <script type="text/javascript" src="${pageContext.request.contextPath}/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
        <script type="text/javascript" src="${pageContext.request.contextPath}/client/js/index.js"></script>
        <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 style="width:100%;height:6%;text-align:center;line-height:45px;background-color:#556B2F">
                <font color="#ddd" style="font-size:20px;">圖書分類</font>
            </div>
            <div style="width:100%;height:94%;text-align:center;line-height:45px;background-color:#548B54">
                <ul style="width:100%;height:100%;text-align:left;">
                    <li>
                        <a href="${pageContext.request.contextPath }/client/pai/index.jsp">好書拍賣</a>
                    </li>
                    <li>
                        <a href="${pageContext.request.contextPath }/client/net_literature/index.jsp">網絡文學</a>
                    </li>
                    <li>
                        <a href="${pageContext.request.contextPath }/client/clothing/index.jsp">服裝</a>
                    </li>
                    <li>
                        <a href="${pageContext.request.contextPath }/client/sport/index.jsp">運動戶外</a>
                    </li>
                    <li>
                        <a href="${pageContext.request.contextPath }/client/nursery/index.jsp">孕嬰童</a>
                    </li>
                    <li>
                        <a href="${pageContext.request.contextPath }/client/nursery/index.jsp">孕嬰童</a>
                    </li>
                    <li>
                        <a href="${pageContext.request.contextPath }/client/food/index.jsp">食品</a>
                    </li>
                    <li>
                        <a href="#">暫無分類</a>
                    </li>
                    <li>
                        <a href="#">暫無分類</a>
                    </li>
                    <li>
                        <a href="#">暫無分類</a>
                    </li>
                </ul>
            </div>  
        </div>
        <!-- 輪播圖 -->
        <div style="width:50%;height:35%;float:left;margin-left:2%;background-size:100% 100%;"id="lun">
            <!-- table按鈕沉底大法! -->
            <table style="width:100%;height:100%">
                <tr>
                    <td style="vertical-align:bottom;">
                        <button class="btn btn-warning" style="width:30px;height:30px;float:left;margin-left:60%;" id="l1">1</button>
                        <button class="btn btn-warning" style="width:30px;height:30px;float:left;margin-left:2%;" id="l2">2</button>
                        <button class="btn btn-warning" style="width:30px;height:30px;float:left;margin-left:2%;" id="l3">3</button>
                        <button class="btn btn-warning" style="width:30px;height:30px;float:left;margin-left:2%;" id="l4">4</button>
                    </td>
                </tr>
            </table>
        </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:#548B54;">
            <font style="font-size:20px;text-align:center;display:block;width:100%;color:#ee4000">618年中狂歡</font>
            <font style="display:block;color:#eead0e">十萬童書,每滿100減50</font>
            <font style="display:block;color:#eead0e">藝術繪畫,每滿100減50</font>
        </div>
        <!-- 熱門推薦 -->
        <div style="width:100%;height:64%;float:left;background-color:#a8f;margin-top:8%">
            <div style="width:100%;height:25%;text-align:center;line-height:45px;background-color:#556B2F">
                <font color="#ddd" style="font-size:20px;">熱門推薦</font>
            </div>
            <div style="width:100%;height:75%;text-align:center;line-height:45px;background-color:#548B54;margin-top:-5%;">
                <ul>
                    <li id="a1" style="text-align:left;color:black"></li>
                    <li id="a2" style="text-align:left;color:black"></li>
                </ul>
                <div style="width:100%;height:20%;float:left;margin-top:5%">
                    <button class="btn btn-info" style="float:left;margin-left:20%;font-size:8px;"id="b1">1</button>
                    <button class="btn btn-info" style="float:left;margin-left:4%;font-size:8px;"id="b2">2</button>
                    <button class="btn btn-info" style="float:left;margin-left:4%;font-size:8px;"id="b3">3</button>
                    <button class="btn btn-info" style="float:left;margin-left:4%;font-size:8px;"id="b4">4</button>
                </div>
            </div>
        </div>
        </div>
        <!-- 新書上架 -->
        <div style="width:50%;height:63%;float:left;background-color:#a8f;margin-left:2%;margin-top:2%;"id="xinShu">
        <table border="1"style="width:100%;height:100%">
            <tr>
                <td>
                    <div style="width:94%;height:80%;background-color:white;margin-left:3%;float:left">
                        <img alt="圖書" src="${pageContext.request.contextPath}/XinShuImg?shu=1" style="width:100%;height:100%;"/>
                    </div>
                    <div style="width:94%;float:left;margin-left:3%;height:15%;">
                        <font style="font-size:16px;margin-left:3%;"id="shu1">圖書</font>
                    </div>
                </td>
                <td>
                    <div style="width:94%;height:80%;background-color:white;margin-left:3%;float:left">
                        <img alt="圖書" src="${pageContext.request.contextPath}/XinShuImg?shu=2" style="width:100%;height:100%;"/>
                    </div>
                    <div style="width:94%;float:left;margin-left:3%;height:15%;">
                        <font style="font-size:16px;margin-left:3%;"id="shu2">圖書</font>
                    </div>
                </td>
                <td>
                    <div style="width:94%;height:80%;background-color:white;margin-left:3%;float:left">
                        <img alt="圖書" src="${pageContext.request.contextPath}/XinShuImg?shu=3" style="width:100%;height:100%;"/>
                    </div>
                    <div style="width:94%;float:left;margin-left:3%;height:15%;">
                        <font style="font-size:16px;margin-left:3%;"id="shu3">圖書</font>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div style="width:94%;height:80%;background-color:white;float:left;margin-left:3%">
                        <img alt="圖書" src="${pageContext.request.contextPath}/XinShuImg?shu=4" style="width:100%;height:100%;"/>
                    </div>
                    <div style="width:94%;float:left;margin-left:3%;height:15%;">
                        <font style="font-size:16px;margin-left:3%;"id="shu4">圖書</font>
                    </div>
                </td>
                <td>
                    <div style="width:94%;height:80%;background-color:white;margin-left:3%;float:left">
                        <img alt="圖書" src="${pageContext.request.contextPath}/XinShuImg?shu=5" style="width:100%;height:100%;"/>
                    </div>
                    <div style="width:94%;float:left;margin-left:3%;height:15%;">
                        <font style="font-size:16px;margin-left:3%;"id="shu5">圖書</font>
                    </div>
                </td>
                <td>
                    <div style="width:94%;height:80%;background-color:white;margin-left:3%;float:left">
                        <img alt="圖書" src="${pageContext.request.contextPath}/XinShuImg?shu=6" style="width:100%;height:100%;"/>
                    </div>
                    <div style="width:94%;float:left;margin-left:3%;height:15%;">
                        <font style="font-size:16px;margin-left:3%;"id="shu6">圖書</font>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div style="width:94%;height:80%;background-color:white;margin-left:3%;float:left">
                        <img alt="圖書" src="${pageContext.request.contextPath}/XinShuImg?shu=7" style="width:100%;height:100%;"/>
                    </div>
                    <div style="width:94%;float:left;margin-left:3%;height:15%;">
                        <font style="font-size:16px;margin-left:3%;"id="shu7">圖書</font>
                    </div>
                </td>
                <td>
                    <div style="width:94%;height:80%;background-color:white;margin-left:3%;float:left">
                        <img alt="圖書" src="${pageContext.request.contextPath}/XinShuImg?shu=8" style="width:100%;height:100%;"/>
                    </div>
                    <div style="width:94%;float:left;margin-left:3%;height:15%;">
                        <font style="font-size:16px;margin-left:3%;"id="shu8">圖書</font>
                    </div>
                    
                </td>
                <td>
                    <div style="width:94%;height:80%;background-color:white;margin-left:3%;float:left">
                        <img alt="圖書" src="${pageContext.request.contextPath}/XinShuImg?shu=9" style="width:100%;height:100%;"/>
                    </div>
                    <div style="width:94%;float:left;margin-left:3%;height:15%;">
                        <font style="font-size:16px;margin-left:3%;"id="shu9">圖書</font>
                    </div>
                </td>
            </tr>
        </table>
        </div>
        <!-- 新書榜 -->
        <div style="width:23%;height:63%;float:left;background-color:#a8f;margin-left:2%;margin-top:2%;">
            <div style="width:100%;height:10%;text-align:center;line-height:45px;background-color:#556B2F">
                <font color="#ddd" style="font-size:20px;">新書排行榜</font>
            </div>
            <div style="width:100%;height:90%;text-align:center;line-height:45px;background-color:#548B54;margin-top:-5%;">
                <ul>
                    <li id="x1" style="text-align:left;color:black"></li>
                    <li id="x2" style="text-align:left;color:black"></li>
                    <li id="x3" style="text-align:left;color:black"></li>
                    <li id="x4" style="text-align:left;color:black"></li>
                    <li id="x5" style="text-align:left;color:black"></li>
                    <li id="x6" style="text-align:left;color:black"></li>
                    <li id="x7" style="text-align:left;color:black"></li>
                    <li id="x8" style="text-align:left;color:black"></li>
                    <li id="x9" style="text-align:left;color:black"></li>
                </ul>
            </div>
        </div>
        </div>
        </div>
        <!-- 調用底部頁面 -->
        <div style="width:100%;height:60px;float:left">
        <jsp:include page="/client/foot.jsp"></jsp:include>
        </div>
        </body>
        </html>

        效果圖


        2.index.js

        代碼

        $(function(){
            //動態顯示初始輪播圖
            $("#lun").css("background-image","Url('img/tu1.jpg')");
            //通過點擊切換輪播圖
            $("#l1").click(function(){
                $("#lun").css("background-image","Url('img/tu1.jpg')");     
            });
            $("#l2").click(function(){
                $("#lun").css("background-image","Url('img/tu2.jpg')");     
            });
            $("#l3").click(function(){
                $("#lun").css("background-image","Url('img/tu3.jpg')");     
            });
            $("#l4").click(function(){
                $("#lun").css("background-image","Url('img/tu4.jpg')");     
            });
            //動態顯示初始熱門書
            $.post("../ReMen?page=1",function(data){
                var code=data;
                code=code.split("#");
                $("#a1").html(code[0]);
                $("#a2").html(code[1]);
            });
            //動態顯示初始新書和初始新書榜
            for(var i = 1;i < 10;++i){
                var servlet="../XinShuMing?shu="+i;
                $.post(servlet,function(data){
                    var shu = "#shu" + i;
                    var xin = "#x" + i;
                    $(shu).html(data);
                    $(xin).html(data);
                });
            };
            //通過點擊b5,b6,b7,b8,將前1到36展示在頁面上。
            $("#b5").click(function(){
                for(var i = 1;i < 10;++i){
                    var servlet="../XinShuMing?shu="+i;
                    $.post(servlet,function(data){
                        var xin = "#x" + i;
                        $(xin).html(data);
                    });
                };
            });
            $("#b6").click(function(){
                for(var i = 10;i < 19;++i){
                    var servlet="../XinShuMing?shu="+i;
                    $.post(servlet,function(data){
                        var j = i - 9;
                        var xin = "#x" + j;
                        $(xin).html(data);
                    });
                };
            });
            $("#b7").click(function(){
                for(var i = 19;i < 28;++i){
                    var servlet="../XinShuMing?shu="+i;
                    $.post(servlet,function(data){
                        var j = i - 18;
                        var xin = "#x" + i;
                        $(xin).html(data);
                    });
                };
            });
            $("#b8").click(function(){
                for(var i = 28;i < 37;++i){
                    var servlet="../XinShuMing?shu="+i;
                    $.post(servlet,function(data){
                        var j = i - 27;
                        var
              
        
        
        
          
        相關教程
                
        免费看成年人视频大全_免费看成年人视频在线观看