一、前台首页设计

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

pageEncoding="UTF-8"%>

前台首页

2、header.jsp

pageEncoding="UTF-8"%>

3、footer.jsp

4、content.jsp页设计

5、left.jsp页

6、right.jsp

7、详细信息页

二、前台显示商品信息

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页，实现显示商品信息