第十次课：前台首页设计及显示商品信息

最新推荐文章于 2021-06-05 16:41:54 发布

weixin_34130269

最新推荐文章于 2021-06-05 16:41:54 发布

阅读量329

点赞数

文章标签： java 数据库

原文链接：http://blog.51cto.com/dyzyxy/1625835

版权

一、前台首页设计

0、css样式

@charset "utf-8";

/*全局设置*/

*{
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;
}

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

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

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

/*整体设置*/

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

/*头部*/
.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;
}

1、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>

2、header.jsp

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

<div class="return"><a href="#">设为首页</a> | <a href="#">添加到收藏夹</a>
</div>

</div>

<ul>

   <li style="margin-left:25px;_margin-left:17px;"><a href="index.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>
   <li class="bor"><a href="showCar.jsp">查看购物车</a> </li>
           </ul>

</div>

3、footer.jsp

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

        <div class="footer">

       <div class="footer_left"></div>

        <p>Copyright©东营电器城</p>
   <p>电话：0546-8060345  邮箱：wxj@dyei.net</p>
            <p>地址：东营市东营区黄河路569号鲁班公寓  邮编：257100</p>

</div>
</div>

4、content.jsp页设计

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

5、left.jsp页

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

        </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>
       <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>

6、right.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<div class="current">
<p>当前位置：首页>全部商品</p>
</div>

7、详细信息页

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

二、前台显示商品信息

1、数据库 goods表添加picture字段，ntext类型

2、Goods.java类，添加String picture属性及相应的get、set方法

3、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);

4、前台right.jsp页，实现显示商品信息

<div class="right_down">

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

//循环显示商品信息
%>

                            <%=g.getName() %></a></li>
                      <li>价格：<%=g.getPrice() %></li>
                      <li>库存数量：<%=g.getNum() %>

               </ul>
               </div>

<%} %>

转载于:https://blog.51cto.com/dyzyxy/1625835

weixin_34130269

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
第十次课：前台首页设计及显示商品信息

一、前台首页设计0、css样式@charset "utf-8";/*全局设置*/*{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;colo...
复制链接

扫一扫