第十次課：前臺首頁設計及顯示商品信息

時間  2020-08-26
標籤 第十 前臺 首頁 設計 顯示 商品 信息 简体版
原文   原文鏈接

1、前臺首頁設計css

0、css樣式html

@charset "utf-8";java

/*全局設置*/數據庫

*{
 padding:0;
 margin:0;
}
body
{
 font-size:12px;
 font-family:Verdana;
 line-height:1.5;
 background:url(../p_w_picpaths/navbg.jpg) top repeat-x #fff;
 color:#464646;
}jsp

ul
{
 list-style:none;
}
img
{
 border:0px;
}
a{
 color:#464646;
 text-decoration:none;
 }ide

a:hover
{
 color:#cd6200;
 text-decoration:underline;
}post

/*清除浮動*/
.clear
{
 clear:both;
 height:0;
 font-size: 1px;
 line-height: 0px;
}測試

/*總體設置*/ui

.wrap
{
    width:800px;
 margin:0 auto;
}url

/*頭部*/
.top{
 width:800px;
 clear:both;
}
.header {
 height:80px;
 margin:10px 0;
 padding:0;
}
/*logo*/
.logo {
 width:150px;
 height:80px;
 float:left;
}
/*返回*/
.return {
 float:right;
 padding:10px 20px 0 0;
}
/*Nav*/
.nav
{
 height:35px;
 line-height:35px;
 font-size:14px;
 font-weight:bold;
 background:url(../p_w_picpaths/nav_bg.gif) 0 0 repeat-x;
 clear:both;
}
.nav_bg_left {
 float:left;
}
.nav_bg_right {
 float:right;
}
.nav ul li
{
 float:left;
 height:35px;
 margin:0 10px;
 text-align:center;
 display:inline;
}
.nav ul img
{
 float:left;
 height:17px;
 margin:10px 0 0 0;
 width:1px;
}
.nav ul li a
{
 width:70px;
 height:35px;
 display:block;
 color:#fff!important;
}
/*中間內容區*/

.content {
 font-size:12px;
 width:800px;
 margin-top:10px;
 background:url(../p_w_picpaths/con_bg.gif) 0 0 repeat-y;
}
.con_top img {
 height:6px;
 width:800px;
}
.con_bottom img {
 height:6px;
 width:800px;
}


.left_con {
 font-size: 12px;
 float:left;
 width:200px;
 line-height:30px;
}
.right_con {
 width:600px;
 float:right;
}
.left_con ul{
 margin-left:20px;
}
.left_con ul li a {
 display:block;
 padding:2px 20px;
 background:url(../p_w_picpaths/coin_hui.gif) 0 center no-repeat;
 text-decoration:none;
}
.left_con ul li a:hover {
 background:url(../p_w_picpaths/coin_light.gif) 0 center no-repeat;
 color:#cf4200;
}

 


.footer {
 width:800px;
 height:94px;
 margin:10 auto 0 auto;
 background:url(../p_w_picpaths/footer_bg.gif) 0 0 repeat-x;
}
.footer_left {
 float:left;
 width:6px;
 height:94px;
 background:url(../p_w_picpaths/footer_left.gif) 0 0 no-repeat;
}
.footer_right {
 float:right;
 width:6px;
 height:94px;
 background:url(../p_w_picpaths/footer_right.gif) 0 0 no-repeat;
}
.idmain {
 padding-top:10px;
 color:#FFF;
}
.idmain p {
 text-align:center;
 height:25px;
 line-height:25px;
}

 


/*左側內容*/
.person,.info,.product_style,.contant_us{
 font-size:12px;
 line-height:18px;
 clear:both;
 
 
}
.person img,.contant_us img{
 width:200px;
}


/*標題*/
.line {
 height:30px;
 line-height:30px;
 border-bottom:1px solid #ccc; 
}
.line h4 {
 font-size:14px;
 color:#1960a2;
 float:left;
 border-bottom:1px solid #1960a2;
 margin-left:15px;
 display:inline;
}


/*列表區*/

.list_con {
 width:220px;
 margin:10px 0 0 15px;
}
.list_con li {
 height:30px;
 width:100px;
 line-height:30px;
 margin:0;
 float:left; 
}

.list_con li a {
 height:21px;
 display:block;
 padding:0px 0 0 15px;
 background:url(../p_w_picpaths/coin_hui.gif) no-repeat 1px 8px;
}
.list_con li a:hover {
 height:21px;
 display:block;
 padding:0px 0 0 15px;
 background:url(../p_w_picpaths/coin_light.gif) no-repeat 1px 8px;
}

 

 


.current{
    background-color: #F8F8F8;
    height: 20px;
    padding:5px 10px;
}

.right_down {
 padding:5px;
}
.post{
 border:1px solid #ccc;
 width:140px;
 margin-left:5px;
 margin-top:5px;
 float:left;
 margin-bottom:5px;
 padding-bottom:5px;
}
.post a img{
 width:120px;
 margin:0 5px;
}

.post ul li{
 height:15px;
 font-size:10px;
 margin-left:10px;
}
.post li .txt{
 height:15px;
 font-size:10px;
}
.post li .buy{
 height:15px;
 font-size:10px;
}

一、index.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>前臺首頁</title>
<LINK href="css/style.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="wrap">
 <div class="top"><%@ include file="header.jsp" %></div>
 <div class="content"><jsp:include page="content.jsp"></jsp:include></div>
 <div class="footer"><%@include file="footer.jsp" %></div>
</div>
</body>
</html> 

 

二、header.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="java.util.*"%>

<div class="header">

  <div class="logo"><img src="p_w_picpaths/logo.gif"/></div>

  <div class="return"><a href="#">設爲首頁</a>&nbsp;|&nbsp;<a href="#">添加到收藏夾</a>
        </div>

</div>


<!--Nav部分-->

 <div class="nav">

     <div class="nav_bg_left"><img src="p_w_picpaths/nav_left.gif" /></div>

  <ul>

   <li style="margin-left:25px;_margin-left:17px;"><a href="index.jsp" >首&nbsp;&nbsp;&nbsp;頁</a></li>
   <li class="bor"><a href="showCar.jsp">查看購物車</a> </li>
            <li class="bor"><a href="showCar.jsp">查看購物車</a> </li>
   <li class="bor"><a href="showCar.jsp">查看購物車</a> </li>
   <li class="bor"><a href="showCar.jsp">查看購物車</a> </li>
            </ul>

        <div class="nav_bg_right"><img src="p_w_picpaths/nav_right.gif" /></div>

 </div>

三、footer.jsp

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
     <div class="clear"></div> 
        
        <div class="footer">
                
        <div class="footer_left"></div>

        <div class="footer_right"></div>

        <div class="idmain">

       
         <p>Copyright&copy;東營電器城</p>
   <p>電話：0546-8060345&nbsp;&nbsp;郵箱：wxj@dyei.net</p>
            <p>地址：東營市東營區黃河路569號魯班公寓&nbsp;&nbsp;郵編：257100</p>

        </div>
        </div>

四、content.jsp頁設計

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<div class="con_top">  <img src="p_w_picpaths/con_top.gif"  /></div>
<div class="left_con">
 <jsp:include page="left.jsp"/></div>
<div class="right_con">
  <jsp:include page="right.jsp"></jsp:include></div>
<div class="clear"></div>
<div class="con_bottom"> <img src="p_w_picpaths/con_bottom.gif"  /> </div>

五、left.jsp頁

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<div class="person">
 <img src="p_w_picpaths/personal.gif">

 <FORM METHOD=POST ACTION="#">
      <table  border="0" style="margin:10px 0 0 10px;">
            <tbody><tr>
                 <td width="50%" valign="top">用戶名：</td>
                    <td><input type="text" name="username" class="txt" size="10"></td>
                </tr>
                <tr>
                 <td>密&nbsp;&nbsp;碼：</td>
                    <td>
     <INPUT TYPE="password" NAME="password" size="10" class="txt">
    </td>
                </tr>
                <tr>
                 <td align="center"><INPUT  class="txt" TYPE="submit" value="登陸"></td>
     <td><INPUT class="txt"TYPE="button" onclick="location.href='register.jsp'" value="註冊"></td>
            </tr>
         </tbody>
  </table>
 </form>
 
</div>

<div class="info">
  <div class="line">

         <h4>公告</h4>

            <div class="clear"></div>

        </div>
       <ul>
            
   
         <li><a href="notice.jsp?nid=11" target= _blank>公告測試6                  
         <span>3-20</span></a></li>
         <li><a href="notice.jsp?nid=11" target= _blank>公告測試6                  
         <span>3-20</span></a></li>
         <li><a href="notice.jsp?nid=11" target= _blank>公告測試6                  
         <span>3-20</span></a></li>
         <li><a href="notice.jsp?nid=11" target= _blank>公告測試6                  
         <span>3-20</span></a></li>
   
 
           
        </ul>
</div>

<div class="product_style">
  <div class="line">

         <h4>商品分類</h4>

        </div>
       <ul class="list_con">
            
         <li><a href="content.jsp?type=1         ">電腦        </a></li>
   
         <li><a href="content.jsp?type=2         ">手機        </a></li>
   
         <li><a href="content.jsp?type=3         ">電動車       </a></li>
   
         <li><a href="content.jsp?type=4         ">洗衣機       </a></li>
   
         <li><a href="content.jsp?type=5         ">相機        </a></li>
   
           
        </ul>
</div>
<div class="contant_us">
  <img src="p_w_picpaths/contant_us.gif">
      <table  style="margin:10px 0 0 10px;">
            <tbody><tr>
                 <td width="30%" valign="top">地址：</td>
                    <td>東營市東營區黃河路569號魯班公寓</td>
                </tr>
                <tr>
                 <td>郵編：</td>
                    <td>257100</td>
                </tr>
                <tr>
                 <td>電話：</td>
                    <td>0546-8060345</td>
                 </tr>

                <tr>
                 <td>郵箱：</td>
                    <td>wxj@dyei.net</td>
                </tr>
                <tr>
                <td>網址：</td>
                <td>www.dyei.net</td>
            </tr>
         </tbody>
 </table>
</div>

六、right.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
  <div class="current">
        <p>當前位置：首頁&gt;所有商品</p>
      </div>

   <div class="right_down">
 
     <div class="post">
    <a href="detailGoods.jsp?gid=10002"><img src="p_w_picpaths/product.jpg"/></a>
    <ul>
          <li>名稱：<a href="detailGoods.jsp?gid=10002">小米 M4 </a></li>
          <li>價格：2117</li>
          <li>庫存數量：45
      
          
      </ul>
    </div>
     <div class="post">
    <a href="detailGoods.jsp?gid=10002"><img src="p_w_picpaths/product.jpg"/></a>
    <ul>
          <li>名稱：<a href="detailGoods.jsp?gid=10002">小米 M4 </a></li>
          <li>價格：2117</li>
          <li>庫存數量：45
      
          
      </ul>
    </div>
     <div class="post">
    <a href="detailGoods.jsp?gid=10002"><img src="p_w_picpaths/product.jpg"/></a>
    <ul>
          <li>名稱：<a href="detailGoods.jsp?gid=10002">小米 M4 </a></li>
          <li>價格：2117</li>
          <li>庫存數量：45
      
          
      </ul>
    </div>
     <div class="post">
    <a href="detailGoods.jsp?gid=10002"><img src="p_w_picpaths/product.jpg"/></a>
    <ul>
          <li>名稱：<a href="detailGoods.jsp?gid=10002">小米 M4 </a></li>
          <li>價格：2117</li>
          <li>庫存數量：45
      
          
      </ul>
    </div>
     
</div>
 <div class="clear"></div>

 七、詳細信息頁

 

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<div class="detail">
<form method="GET" action="doCar.jsp">
    <img src="p_w_picpaths/product.jpg">
    <ul>
            <li>編號：10002</li>
          <li>名稱：小米 M4 </li>
          <li>價格：2117</li>
          <li><a href="comment.jsp?gid=10002">查看評價</a></li>
       <li>數量：<input name="num" size="4" type="text">
       <input value="購買" type="submit"></li>
       <input name="gid" value="10002" type="hidden">
       <input name="action" value="buy" type="hidden">
                 
      </ul>
 </form>
 </div>
<div class="describe">商品描述：小米 M4 </div>  

2、前臺顯示商品信息

一、數據庫 goods表添加picture字段，ntext類型

二、Goods.java類，添加String picture屬性及相應的get、set方法

三、GoodsDAO的list方法修改，添加語句

Goods g=new Goods();
    g.setGid(rs.getInt("gid"));
    g.setName(rs.getString("name"));
    g.setPrice(rs.getFloat("price"));
    g.setNum(rs.getInt("num"));
    g.setPicture(rs.getString("picture"));//將picture信息保存到Bean中
    ls.add(g);

四、前臺right.jsp頁，實現顯示商品信息

<div class="right_down">

    <% GoodsDAO dao=new GoodsDAO();
        LinkedList<Goods> gs=dao.list();
        for(Goods g:gs){

      //循環顯示商品信息
        %>


             <div class="post">
                <a href="detailGoods.jsp?gid=10002"><img src="<%=g.getPicture()%>"/></a>
                <ul>
                      <li>名稱：<a href="detailGoods.jsp?gid=10002">

                            <%=g.getName() %></a></li>                      <li>價格：<%=g.getPrice() %></li>                      <li>庫存數量：<%=g.getNum() %>                             </ul>                </div>                    <%} %>

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程