插入
更新（修改）
shan'chu
JavaEE - A计划（永久有效期）
![]()
扫二维码继续学习 二维码时效为半小时
创建表
查看表结构
删除表 drop table mytable
能不能把取色器关了，整节课鼠标上都有一个大圆圈取色器
小图标是精灵图把
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.servlet.ModelAndView;
package com.sikiedu.controller;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.servlet.ModelAndView;
import com.sikiedu.bean.ItemInfo;
/**
* 商品管理 -> 游戏管理
* @author Joey
*
* 更多的课程学习访问 http://www.sikiedu.com/
* Siki学院官网Java交流群 175158287
*/
@Controller
@RequestMapping(value="/item/")
public class ItemController {
//显示页面
@RequestMapping(value= {"list.do", "mylist.do"}, method= {RequestMethod.GET, RequestMethod.POST})
public ModelAndView list() {
ModelAndView mav = new ModelAndView();
//传递数据
//准备一些测试数据
ItemInfo info1 = new ItemInfo("1", "王者荣耀", "MOBA", "0") ;
ItemInfo info2 = new ItemInfo("2", "守望先锋", "射击", "198") ;
ItemInfo info3 = new ItemInfo("3", "吃鸡", "射击", "98") ;
ItemInfo info4 = new ItemInfo("4", "魔兽世界", "MMORPG", "0") ;
ItemInfo info5 = new ItemInfo("5", "保卫萝卜", "休闲", "0") ;
List<ItemInfo> itemList = new ArrayList<ItemInfo>();
itemList.add(info1);
itemList.add(info2);
itemList.add(info3);
itemList.add(info4);
itemList.add(info5);
//将游戏列表返回给前台
mav.addObject("itemList", itemList);
mav.setViewName("item_list");
return mav;
}
@RequestMapping(value= {"mylist1.do"}, method= {RequestMethod.GET, RequestMethod.POST})
public ModelAndView list1() {
ModelAndView mav = new ModelAndView();
//传递数据
//准备一些测试数据
ItemInfo info1 = new ItemInfo("1", "王者荣耀", "MOBA", "0") ;
ItemInfo info2 = new ItemInfo("2", "守望先锋", "射击", "198") ;
ItemInfo info3 = new ItemInfo("3", "吃鸡", "射击", "98") ;
ItemInfo info4 = new ItemInfo("4", "魔兽世界", "MMORPG", "0") ;
ItemInfo info5 = new ItemInfo("5", "保卫萝卜", "休闲", "0") ;
List<ItemInfo> itemList = new ArrayList<ItemInfo>();
itemList.add(info1);
itemList.add(info2);
itemList.add(info3);
itemList.add(info4);
itemList.add(info5);
//将游戏列表返回给前台
mav.addObject("itemList", itemList);
mav.setViewName("item_list");
return mav;
}
//void
@RequestMapping(value="")
public void voidTest(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//获取参数
request.getParameter("");
//转发
request.getRequestDispatcher("").forward(request, response);
//重定向
response.sendRedirect(request.getContextPath() + "/xx.jsp");
}
//String 转发
@RequestMapping("forwardString.do")
public String forwardString() {
return "forward:mylist1.do";
}
//String 重定向
@RequestMapping("redirectString.do")
public String redirectString() {
return "redirect:/form.jsp";
}
//String
@RequestMapping("testList.do")
public String testList(Model model) {
//传递数据
//准备一些测试数据
ItemInfo info1 = new ItemInfo("1", "王者荣耀", "MOBA", "0") ;
ItemInfo info2 = new ItemInfo("2", "守望先锋", "射击", "198") ;
ItemInfo info3 = new ItemInfo("3", "吃鸡", "射击", "98") ;
ItemInfo info4 = new ItemInfo("4", "魔兽世界", "MMORPG", "0") ;
ItemInfo info5 = new ItemInfo("5", "保卫萝卜", "休闲", "0") ;
List<ItemInfo> itemList = new ArrayList<ItemInfo>();
itemList.add(info1);
itemList.add(info2);
itemList.add(info3);
itemList.add(info4);
itemList.add(info5);
//将游戏列表返回给前台
model.addAttribute("itemList", itemList);
return "item_list";
}
}
package com.sikiedu.bean; /** * 游戏信息bean * @author Joey * * 更多的课程学习访问 http://www.sikiedu.com/ * Siki学院官方Java交流群 175158287 */ public class ItemInfo { //id private String item_id; //name private String item_name; //type private String item_type; //price private String item_price; public String getItem_id() { return item_id; } public void setItem_id(String item_id) { this.item_id = item_id; } public String getItem_name() { return item_name; } public void setItem_name(String item_name) { this.item_name = item_name; } public String getItem_type() { return item_type; } public void setItem_type(String item_type) { this.item_type = item_type; } public String getItem_price() { return item_price; } public void setItem_price(String item_price) { this.item_price = item_price; } public ItemInfo(String item_id, String item_name, String item_type, String item_price) { super(); this.item_id = item_id; this.item_name = item_name; this.item_type = item_type; this.item_price = item_price; } }
package com.sikiedu.bean; /** * 游戏信息bean * @author Joey * * 更多的课程学习访问 http://www.sikiedu.com/ * Siki学院官方Java交流群 175158287 */ public class ItemInfo { //id private String item_id; //name private String item_name; //type private String item_type; //price private String item_price; public String getItem_id() { return item_id; } public void setItem_id(String item_id) { this.item_id = item_id; } public String getItem_name() { return item_name; } public void setItem_name(String item_name) { this.item_name = item_name; } public String getItem_type() { return item_type; } public void setItem_type(String item_type) { this.item_type = item_type; } public String getItem_price() { return item_price; } public void setItem_price(String item_price) { this.item_price = item_price; } public ItemInfo(String item_id, String item_name, String item_type, String item_price) { super(); this.item_id = item_id; this.item_name = item_name; this.item_type = item_type; this.item_price = item_price; } }
- 增删改查
- mysql关系型数据库
我的订单 页面没有
1561664987561315
一对多的关系
所有表需要一个主键（不重复）
通过外键将相关表联系在一起
tinyint（几位数）-->对于成绩几位数
外键命名规则--》
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>siki学院首页</title>
<style type="text/css">
body{
margin:0px;
padding:0px;
background-color:#f5f8fa;
}
.bar_menu{
background-color:#ffffff;
width:35px;
position:fixed;
top:0px;
bottom:0px;
right:0px;
border-left:1px solid aliceblue;
}
.bar_menu a{
display:block;/* a是行内元素，盒子模型适用于块元素 */
margin-top:100px;
width:35px;
text-align:center;
color:#616161;
font-size:14px;
padding:20px 0px;
}
.bar_menu a:hover{/* 伪类选择器的使用 */
cursor:pointer;/* 设置鼠标指针样式，小手可点击的样式 */
background-color: #43bc60;
color:white;
}/* https://www.zhangxinxu.com/wordpress/2016/06/png-icon-change-color-by-css/ */
.nav{
height:56px;
padding:0px 10px;
background-color: #212121;/* 屏幕取色器 https://colorpix.en.softonic.com */
}
.nav_left{
height:56px;
float:left;
}
.nav_left img{
display:block;
float:left;
height:50px;
margin-top:3px;
margin-left:5px;
}
.nav_left ul{
list-style-type:none;
float:left;
margin:0px 0px 0px 40px;
padding:0px;
}
.nav_left ul li{
margin:0px 40px 0px 0px;
padding:0px;
float:left;
font-size:14px;
color:#c1c1c1;
line-height:56px;
}
.nav_right{
height:56px;
float:right;
}
.slider{
height:451px;
background-color:#16232b;
}
.slider img{
display:block;/* img是行内元素，需要设置为块元素，才会显示在中间 */
height:451px;
margin:0 auto;
}
.course_list{
min-height:500px;
}
.course_list h2{
font-size:32px;
color:#313131;
font-weight:500;
text-align:center;
margin-top:50px;
margin-bottom:10px;
}
.course_list h4{
font-size:16px;
color:#919191;
font-weight:400;
text-align:center;
}
.course_nav{
width:1170px;
height:80px;
margin:40px auto 0px;
}
.course_nav a{
font-size:14px;
color:#616161;
margin-right:30px;
padding:15px;
border-radius:5px;
}
.course_nav a:hover{
background-color:#ece8e8;
cursor:pointer;
}
.selected{
background-color:#43bc60;
color:white !important;/* !important 让这个属性的优先级更高 */
}
.course_container{
width:1170px;
margin:0 auto;
min-height:30px;
/* background-color:blue; */
}
.course{
float:left;
width:248px;
padding:0px 10px;
margin:0px 10px;
border:1px solid #e4ecf3;
height:230px;
background-color:#ffffff;
border-radius:5px;
margin-bottom:30px;
}
.course img{
width:248px;
height:138px;
margin-top:10px;
}
.course_title{
display:block;/* span标签是行内元素 */
font-size:14px;
color:#616161;
margin-top:20px;
}
.course .person{
width:20px;
height:15px;
margin-top:10px;
}
.course .number{
font-size:14px;
color:#c1c1c1;
position:relative;
bottom:3px;
}
.class_list{
min-height:500px;
}
.introduction{
height:422px;
background-color: #43bc60;
}
.footer_link{
height:254px;
background-color: #2e2e2e;
}
.copyright{
height:105px;
background-color: #212121;
}
.clear{
clear:both;
}
</style>
</head>
<body>
<div class="bar_menu">
<a>学<br />习<br />中<br />心</a>
</div>
<div class="nav">
<div class="nav_left">
<img src="img/logo.png" />
<ul>
<li>首页</li>
<li>Unity</li>
<li>虚幻</li>
<li>关于我们</li>
</ul>
</div>
<div class="nav_right"></div>
</div>
<div class="slider">
<img src="img/a.jpg" />
</div>
<div class="course_list">
<h2>网校课程</h2>
<h4>精选网校课程，满足你的学习兴趣。</h4>
<div class="course_nav">
<a class="selected">全部课程</a>
<a>Unity</a>
<a>虚幻</a>
<a>JavaEE</a>
</div>
<div class="course_container">
<div class="course">
<img src="img/course.png" />
<span class="course_title">Web前端第一季（HTML）</span>
<img class="person" src="img/person.png" />
<span class="number">1507</span>
</div>
<div class="course">
<img src="img/course.png" />
<span class="course_title">Web前端第一季（HTML）</span>
<img class="person" src="img/person.png" />
<span class="number">1507</span>
</div>
<div class="course">
<img src="img/course.png" />
<span class="course_title">Web前端第一季（HTML）</span>
<img class="person" src="img/person.png" />
<span class="number">1507</span>
</div>
<div class="course">
<img src="img/course.png" />
<span class="course_title">Web前端第一季（HTML）</span>
<img class="person" src="img/person.png" />
<span class="number">1507</span>
</div>
<div class="course">
<img src="img/course.png" />
<span class="course_title">Web前端第一季（HTML）</span>
<img class="person" src="img/person.png" />
<span class="number">1507</span>
</div>
<div class="course">
<img src="img/course.png" />
<span class="course_title">Web前端第一季（HTML）</span>
<img class="person" src="img/person.png" />
<span class="number">1507</span>
</div>
<div class="course">
<img src="img/course.png" />
<span class="course_title">Web前端第一季（HTML）</span>
<img class="person" src="img/person.png" />
<span class="number">1507</span>
</div>
<div class="course">
<img src="img/course.png" />
<span class="course_title">Web前端第一季（HTML）</span>
<img class="person" src="img/person.png" />
<span class="number">1507</span>
</div>
<div class="course">
<img src="img/course.png" />
<span class="course_title">Web前端第一季（HTML）</span>
<img class="person" src="img/person.png" />
<span class="number">1507</span>
</div>
<div class="course">
<img src="img/course.png" />
<span class="course_title">Web前端第一季（HTML）</span>
<img class="person" src="img/person.png" />
<span class="number">1507</span>
</div>
<div class="course">
<img src="img/course.png" />
<span class="course_title">Web前端第一季（HTML）</span>
<img class="person" src="img/person.png" />
<span class="number">1507</span>
</div>
<div class="course">
<img src="img/course.png" />
<span class="course_title">Web前端第一季（HTML）</span>
<img class="person" src="img/person.png" />
<span class="number">1507</span>
</div>
<div class="clear"></div>
</div>
</div>
<div class="class_list"></div>
<div class="introduction"></div>
<div class="footer_link"></div>
<div class="copyright"></div>
</body>
</html>
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>siki学院首页</title>
<style type="text/css">
body{
margin:0px;
padding:0px;
background-color:#f5f8fa;
}
.bar_menu{
background-color:#ffffff;
width:35px;
position:fixed;
top:0px;
bottom:0px;
right:0px;
border-left:1px solid aliceblue;
}
.bar_menu a{
display:block;/* a是行内元素，盒子模型适用于块元素 */
margin-top:100px;
width:35px;
text-align:center;
color:#616161;
font-size:14px;
padding:20px 0px;
}
.bar_menu a:hover{/* 伪类选择器的使用 */
cursor:pointer;/* 设置鼠标指针样式，小手可点击的样式 */
background-color: #43bc60;
color:white;
}/* https://www.zhangxinxu.com/wordpress/2016/06/png-icon-change-color-by-css/ */
.nav{
height:56px;
padding:0px 10px;
background-color: #212121;/* 屏幕取色器 https://colorpix.en.softonic.com */
}
.nav_left{
height:56px;
float:left;
}
.nav_left img{
display:block;
float:left;
height:50px;
margin-top:3px;
margin-left:5px;
}
.nav_left ul{
list-style-type:none;
float:left;
margin:0px 0px 0px 40px;
padding:0px;
}
.nav_left ul li{
margin:0px 40px 0px 0px;
padding:0px;
float:left;
font-size:14px;
color:#c1c1c1;
line-height:56px;
}
.nav_right{
height:56px;
float:right;
}
.slider{
height:451px;
background-color:#16232b;
}
.slider img{
display:block;/* img是行内元素，需要设置为块元素，才会显示在中间 */
height:451px;
margin:0 auto;
}
.course_list{
min-height:500px;
}
.course_list h2{
font-size:32px;
color:#313131;
font-weight:500;
text-align:center;
margin-top:50px;
margin-bottom:10px;
}
.course_list h4{
font-size:16px;
color:#919191;
font-weight:400;
text-align:center;
}
.course_nav{
width:1170px;
margin:40px auto 0px;
}
.course_nav a{
font-size:14px;
color:#616161;
margin-right:30px;
padding:15px;
border-radius:5px;
}
.course_nav a:hover{
background-color:#ece8e8;
cursor:pointer;
}
.selected{
background-color:#43bc60;
color:white !important;/* !important 让这个属性的优先级更高 */
}
.class_list{
min-height:500px;
}
.introduction{
height:422px;
background-color: #43bc60;
}
.footer_link{
height:254px;
background-color: #2e2e2e;
}
.copyright{
height:105px;
background-color: #212121;
}
</style>
</head>
<body>
<div class="bar_menu">
<a>学<br />习<br />中<br />心</a>
</div>
<div class="nav">
<div class="nav_left">
<img src="img/logo.png" />
<ul>
<li>首页</li>
<li>Unity</li>
<li>虚幻</li>
<li>关于我们</li>
</ul>
</div>
<div class="nav_right"></div>
</div>
<div class="slider">
<img src="img/a.jpg" />
</div>
<div class="course_list">
<h2>网校课程</h2>
<h4>精选网校课程，满足你的学习兴趣。</h4>
<div class="course_nav">
<a class="selected">全部课程</a>
<a>Unity</a>
<a>虚幻</a>
<a>JavaEE</a>
</div>
</div>
<div class="class_list"></div>
<div class="introduction"></div>
<div class="footer_link"></div>
<div class="copyright"></div>
</body>
</html>
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>siki学院首页</title>
<style type="text/css">
body{
margin:0px;
padding:0px;
background-color:#f5f8fa;
}
.bar_menu{
background-color:#ffffff;
width:35px;
position:fixed;
top:0px;
bottom:0px;
right:0px;
border-left:1px solid aliceblue;
}
.bar_menu a{
display:block;/* a是行内元素，盒子模型适用于块元素 */
margin-top:100px;
width:35px;
text-align:center;
color:#616161;
font-size:14px;
padding:20px 0px;
}
.bar_menu a:hover{/* 伪类选择器的使用 */
cursor:pointer;/* 设置鼠标指针样式，小手可点击的样式 */
background-color: #43bc60;
color:white;
}/* https://www.zhangxinxu.com/wordpress/2016/06/png-icon-change-color-by-css/ */
.nav{
height:56px;
padding:0px 10px;
background-color: #212121;/* 屏幕取色器 https://colorpix.en.softonic.com */
}
.nav_left{
height:56px;
float:left;
}
.nav_left img{
display:block;
float:left;
height:50px;
margin-top:3px;
margin-left:5px;
}
.nav_left ul{
list-style-type:none;
float:left;
margin:0px 0px 0px 40px;
padding:0px;
}
.nav_left ul li{
margin:0px 40px 0px 0px;
padding:0px;
float:left;
font-size:14px;
color:#c1c1c1;
line-height:56px;
}
.nav_right{
height:56px;
float:right;
}
.slider{
height:451px;
background-color:#16232b;
}
.slider img{
display:block;/* img是行内元素，需要设置为块元素，才会显示在中间 */
height:451px;
margin:0 auto;
}
.course_list{
min-height:500px;
}
.class_list{
min-height:500px;
}
.introduction{
height:422px;
background-color: #43bc60;
}
.footer_link{
height:254px;
background-color: #2e2e2e;
}
.copyright{
height:105px;
background-color: #212121;
}
</style>
</head>
<body>
<div class="bar_menu">
<a>学<br />习<br />中<br />心</a>
</div>
<div class="nav">
<div class="nav_left">
<img src="img/logo.png" />
<ul>
<li>首页</li>
<li>Unity</li>
<li>虚幻</li>
<li>关于我们</li>
</ul>
</div>
<div class="nav_right"></div>
</div>
<div class="slider">
<img src="img/a.jpg" />
</div>
<div class="course_list"></div>
<div class="class_list"></div>
<div class="introduction"></div>
<div class="footer_link"></div>
<div class="copyright"></div>
</body>
</html>
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>siki学院首页</title>
<style type="text/css">
body{
margin:0px;
padding:0px;
background-color:#f5f8fa;
}
.bar_menu{
background-color:#ffffff;
width:35px;
position:fixed;
top:0px;
bottom:0px;
right:0px;
border-left:1px solid aliceblue;
}
.bar_menu a{
display:block;/* a是行内元素，盒子模型适用于块元素 */
margin-top:100px;
width:35px;
text-align:center;
color:#616161;
font-size:14px;
padding:20px 0px;
}
.bar_menu a:hover{/* 伪类选择器的使用 */
cursor:pointer;/* 设置鼠标指针样式，小手可点击的样式 */
background-color: #43bc60;
color:white;
}/* https://www.zhangxinxu.com/wordpress/2016/06/png-icon-change-color-by-css/ */
.nav{
height:56px;
padding:0px 10px;
background-color: #212121;/* 屏幕取色器 https://colorpix.en.softonic.com */
}
.nav_left{
height:56px;
float:left;
}
.nav_left img{
display:block;
float:left;
height:50px;
margin-top:3px;
margin-left:5px;
}
.nav_left ul{
list-style-type:none;
float:left;
margin:0px 0px 0px 40px;
padding:0px;
}
.nav_left ul li{
margin:0px 40px 0px 0px;
padding:0px;
float:left;
font-size:14px;
color:#c1c1c1;
line-height:56px;
}
.nav_right{
height:56px;
float:right;
}
.slider{
height:451px;
}
.course_list{
min-height:500px;
}
.class_list{
min-height:500px;
}
.introduction{
height:422px;
background-color: #43bc60;
}
.footer_link{
height:254px;
background-color: #2e2e2e;
}
.copyright{
height:105px;
background-color: #212121;
}
</style>
</head>
<body>
<div class="bar_menu">
<a>学<br />习<br />中<br />心</a>
</div>
<div class="nav">
<div class="nav_left">
<img src="img/logo.png" />
<ul>
<li>首页</li>
<li>Unity</li>
<li>虚幻</li>
<li>关于我们</li>
</ul>
</div>
<div class="nav_right"></div>
</div>
<div class="slider"></div>
<div class="course_list"></div>
<div class="class_list"></div>
<div class="introduction"></div>
<div class="footer_link"></div>
<div class="copyright"></div>
</body>
</html>
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>siki学院首页</title>
<style type="text/css">
body{
margin:0px;
padding:0px;
background-color:#f5f8fa;
}
.bar_menu{
background-color:#ffffff;
width:35px;
position:fixed;
top:0px;
bottom:0px;
right:0px;
border-left:1px solid aliceblue;
}
.bar_menu a{
display:block;/* a是行内元素，盒子模型适用于块元素 */
margin-top:100px;
width:35px;
text-align:center;
color:#616161;
font-size:14px;
padding:20px 0px;
}
.bar_menu a:hover{/* 伪类选择器的使用 */
cursor:pointer;/* 设置鼠标指针样式，小手可点击的样式 */
background-color: #43bc60;
color:white;
}/* https://www.zhangxinxu.com/wordpress/2016/06/png-icon-change-color-by-css/ */
.nav{
height:56px;
padding:0px 10px;
background-color: #212121;/* 屏幕取色器 https://colorpix.en.softonic.com */
}
.slider{
height:451px;
}
.course_list{
min-height:500px;
}
.class_list{
min-height:500px;
}
.introduction{
height:422px;
background-color: #43bc60;
}
.footer_link{
height:254px;
background-color: #2e2e2e;
}
.copyright{
height:105px;
background-color: #212121;
}
</style>
</head>
<body>
<div class="bar_menu">
<a>学<br />习<br />中<br />心</a>
</div>
<div class="nav"></div>
<div class="slider"></div>
<div class="course_list"></div>
<div class="class_list"></div>
<div class="introduction"></div>
<div class="footer_link"></div>
<div class="copyright"></div>
</body>
</html>
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>siki学院首页</title>
<style type="text/css">
body{
margin:0px;
padding:0px;
background-color:#f5f8fa;
}
.bar_menu{
background-color:#ffffff;
width:35px;
position:fixed;
top:0px;
bottom:0px;
right:0px;
border-left:1px solid aliceblue;
}
.bar_menu a{
display:block;/* a是行内元素，盒子模型适用于块元素 */
margin-top:100px;
width:35px;
text-align:center;
color:#616161;
font-size:14px;
padding:20px 0px;
}
.bar_menu a:hover{/* 伪类选择器的使用 */
cursor:pointer;/* 设置鼠标指针样式，小手可点击的样式 */
background-color: #43bc60;
color:white;
}
</style>
</head>
<body>
<div class="bar_menu">
<a>学<br />习<br />中<br />心</a>
</div>
</body>
</html>
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>京东例子</title>
<style type="text/css">
body{
margin:0px;
padding:0px;
background-color:#f0f3ef;
}
.title{
text-align:center;
font-family:"fzzzh";
color:#222;
}
.container{
/* background-color:red; */
width:1190px;
height:450px;
margin:0 auto;
}
.left,.center,.right{
width:390px;
height:450px;
float:left;
background-color:white;
}
.left{
background-color:transparent;
}
.left,.center{
margin-right:10px;
}
.border{
width:340px;
height:420px;
border:5px solid black;
position:relative;
top:20px;
}
.border img{
position:absolute;
bottom:25px;
left:45px;
}
.box_hd{
width:350px;
height:60px;
line-height:44px;
padding:0 20px;
}
.box_hd h3{
margin:0px;
padding:0px;
font-size:22px;
line-height:44px;
font-weight:normal;
margin-top:8px;
}
.box_bd{
padding:0px 20px;
}
.box_bd img{
margin-bottom:7px;
margin-right:2px;
}
.last{
margin-right:0px;
}
</style>
</head>
<body>
<h3 class="title">--- 居家优品 ---</h3>
<div class="container">
<div class="left">
<div class="border">
<img src="img/left.jpg" />
</div>
</div>
<div class="center">
<div class="box_hd">
<h3>家电馆</h3>
</div>
<div class="box_bd">
<img src="img/1.jpg" />
<img src="img/2.jpg" />
<img class="last" src="img/3.jpg" />
</div>
</div>
<div class="right">
<div class="box_hd">
<h3>家电馆</h3>
</div>
<div class="box_bd">
<img src="img/1.jpg" />
<img src="img/2.jpg" />
<img class="last" src="img/3.jpg" />
</div>
</div>
</div>
</body>
</html>
