第十次课:前台首页设计及显示商品信息
一、前台首页设计
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="header">
<div class="logo"><img src="p_w_picpaths/logo.gif"/></div>
<div class="return"><a href="#">设为首页</a> | <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" >首 页</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>
3、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©东营电器城</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"%>
<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>
5、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>密 码:</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" οnclick="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>
6、right.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<div class="current">
<p>当前位置:首页>全部商品</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>
7、详细信息页
<%@ 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>
二、前台显示商品信息
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){
//循环显示商品信息
%>
<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>
<%} %>
转载于:https://blog.51cto.com/dyzyxy/1625835
第十次课:前台首页设计及显示商品信息相关推荐
- JSP第六次课:数据库访问显示商品信息
本次课任务实现商品管理 一.建立数据库.商品表 1.安装SQLserver2005,建立数据库ebuy.goods表 gid 主键,标识规范 种子1000,自动增1 add_time 默认值 getd ...
- 显示商品信息(java web)
一.目的 在jsp页面中显示手机商品的信息. 二.思想步骤 2.1收集手机图片信息,价格信息,手机名信息等. 2.2 创建mysql数据库,新建表,将信息存入表中. ...
- c语言课程设计-商场商品信息管理,C语言课程设计商场商品信息管理系统
C语言课程设计商场商品信息管理系统 1目 录1 系统分析 21.1 课程设计内容 21.2 系统功能需求分析 21.3 数据结构设计 32 系统设计 32.1 总体设计 32.2 详细设计 42.2. ...
- 51单片机数字电子钟设计(数电课设,含时间显示、校准、整点报时、闹钟功能)
51单片机数字电子钟设计(数电课设,含时间显示.校准.整点报时.闹钟功能) 首先展示硬件设计部分,此处采用proteus仿真演示.其中液晶屏上面一行显示的是实际时间,下面一行显示的是设定闹钟时间.通过 ...
- php比特教务选排课系统的设计与实现毕业设计源码301826
比特教务选排课系统的设计与实现 摘 要 随着人类向信息社会的不断迈进,风起云涌的信息时代正掀起一次新的革命,同时计算机网络技术高速发展,网络管理运用也变得越来越广泛.因此,建立一个B/S结构的比特教务 ...
- php比特教务选排课系统的设计与实现 毕业设计-附源码301826
比特教务选排课系统的设计与实现 摘要 随着人类向信息社会的不断迈进,风起云涌的信息时代正掀起一次新的革命,同时计算机网络技术高速发展,网络管理运用也变得越来越广泛.因此,建立一个B/S结构的比特教务选 ...
- 基于java springboot+mybatis爱游旅行平台前台+后台设计实现
我剑最帅 不接受反驳 项目意义: 改革开放以来, 我国的旅游业发展迅速,但比较而言,我国旅游业发展的广度和深度都远远不能满足经济发展和人民生活水平提高的需要. 随着市场经济的发展和人民收入水平 ...
- HTML XHTML CS3 JS网页制作(IT培训网站设计+当当网首页设计)
HTML XHTML CS3 JS网页制作(IT培训网站设计+当当网首页设计) 百度云链接:http://pan.baidu.com/s/1hrH6qck 密码:bc4n 01.HTML基本标签_理论 ...
- 浅析网页界面设计——首页设计
杨科宇曾发表过一篇文章<浅析网页界面设计--首页设计>,文中为我们分享了如何进行首页的界面设计.现转载于此,供大家借鉴学习.全文如下: 首页设计,需开宗明义突出主题 开宗明义,无论是对于一 ...
最新文章
- 【imx6】/dev中fb和video的对应关系
- 「镁客·请讲」智加科技刘万千:技术与生态的成熟将推动自动驾驶的落地应用...
- sql查询时间大于某一时间_查询时间从24分钟到2秒钟:记一次神奇的SQL优化
- 求二进制数中1的个数
- Swap空间利用率不释放
- 币安布局去中心化交易所,原来是因为这三个原因!
- Flutter基础—手势处理
- [置顶] webservice系列1---基于web工程上写一个基本数据类型的webservice
- 德标螺纹规格对照表_国标德标对照表
- AppFabric 1.1: installation error 错误代码 1603 windows server 2016 sharepoint 2019 Preparation Tool
- WPS正式推出了JS宏(WPS宏编辑器)如何切换会传统VB环境
- ADS1256 24位ADC模块
- 禅与 Objective-C 编程艺术 (Zen and the Art of the Objective-C Craftsmanship 中文翻译)
- 网页无法访问怎么解决(已解决)
- 微软2016校园招聘4月在线笔试 hihocoder 1288 Font Size (模拟)
- idea中提示程序包不存在或cannot resolve symbol
- 暴走的Polkadot (DOT)(上)
- riak mysql_[Translate] 从SQL数据库迁移到Riak
- android 画布叠加,Android实现图片叠加效果的两种方法
- python账单查询软件_python3.6 通过调用 阿里云 API (非SDK方式) 查询 账单 例子
热门文章
- 创业计划书模板(周鸿祎口述)
- gil php,网络编程之多线程——GIL全局解释器锁
- date比较大小 mybatis_MyBatis版本升级导致OffsetDateTime入参解析异常问题复盘
- oracle 优化器 失效,oracle 优化器 不走索引原因
- php amr mp3,php 微信amr转mp3的方法
- 多组两两比较用什么检验方法_用SPSS进行不同变量多组间两两比较卡方检验.pdf...
- oracle有一百个人围一圈报数,案例:Oracle创建表时报session超过最大值 ORA-00018 证明递归ses...
- JavaScript初学者编程题(9)
- 树形dp --- 2020 icpc 南京 M Monster Hunter
- P1449 后缀表达式