<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>天天生鲜-商品详情页</title>
<link rel="stylesheet" href="./css/main.css">
<link rel="stylesheet" href="./css/reset.css">
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
</head>
<body>
<!-- 头部信息 -->
<div class="header_con">
<div class="header">
<div class="welcome">欢迎来到天天生鲜!</div>
<div class="user_login">
<a href="">登录</a>
<span>|</span>
<a href="">注册</a>
<span>|</span>
<a href="">我的购物车</a>
<span>|</span>
<a href="">我的订单</a>
</div>
</div>
</div>
<div class="search_bar clearfix">
<a href="#" class="logo fl"><img src="./images/logo.png"></a>
<div class="search_con fl">
<input type="text" class="input_text fl" placeholder="搜索商品">
<input type="button" class="input_btn fr" value="搜索">
</div>
<div class="guest_card fr">
<a href="#" class="card_name fl">我的购物车</a>
<div class="goods_count fl">1</div>
</div>
</div>
<!-- 商品信息栏 -->
<div class="navbar_con">
<div class="navbar clearfix">
<div class="subnav_con fl">
<h1>全部商品分类 <i></i></h1>
</div>
<ul class="navlist fl">
<li><a href="">首页</a></li>
<li><a href="">手机生鲜</a></li>
<li><a href="">抽奖</a></li>
</ul>
</div>
</div>
<div class="submena clearfix">
<a href=" ">全部分类</a>
<span>></span>
<a href=" ">新鲜水果</a>
<span>></span>
<a href=" ">商品详情</a>
</div>
<div class="center_con clearfix">
<a href="#"><img src="http://5b0988e595225.cdn.sohucs.com/images/20190830/a59b34a0f99147179d77069f27c25959.jpeg" heght="500" width="400" /></a>
<div class="goods_detail_list fr">
<h3>巴沙鱼</h3>
<p>巴沙鱼（拉丁学名：Pangasius bocourti），芒鲶属动物。它是东南亚国家重要的淡水养殖品种，湄公河流域中一种特有的优质经济鱼类。</p>
<div class="prize_bar">
<div class="show_prize fl">￥<em>24.50</em></div>
<div class="show_unit fl">单位：500g</div>
</div>
<div class="goods_num clearfix">
<div class="num_name fl">数量：</div>
<div class="num_add fl">
<input type="text" class="num_show fl" value="2">
<a href="javascript:;" class="add fr">+</a>
<a href="javascript:;" class="minus fr">-</a>
</div>
</div>
<div class="total">总价：<em>49.00元</em></div>
<div class="operate_btn">
<a href="" class="buy_btn">立即购买</a>
<a href="" class="add_cart">加入购物车</a>
</div>
</div>
</div>
</body>
</html>
<style type="text/css">
body {
font-family: 'Microsoft YaHei';
color: #666;
font-size: 12px;
}
/*顶部条状态*/
.header_con {
height: 29px;
background-color: #f7f7f7;
border-bottom: 1px solid #ddd;
}
.header {
width: 1200px;
height: 29px;
margin: 0 auto;
1
}
.welcome {
font: 12px/29px 'Microsoft YaHei UI';
float: left;
}
.user_login {
height: 29px;
line-height: 29px;
float: right;
}
.user_login a {
color: #666;
}
.user_login a:hover {
color: #f80;
}
.search_bar {
width: 1200px;
height: 115px;
margin: 0 auto;
}
.logo {
width: 151px;
height: 59px;
margin: 29px 0 0 17px;
}
.search_con {
width: 616px;
height: 38px;
border: 1px solid #37ab40;
margin: 34px 0 0 123px;
/*雪碧图的放大镜作背景图*/
background: url(../images/icons.png) 10px -335px no-repeat;
}
.search_con .input_text {
width: 470px;
height: 37px;
border: 0px;
margin-left: 37px;
outline: none;
}
.search_con .input_btn {
width: 100px;
height: 38px;
background-color: #37ab40;
border: 0;
font: 14px/38px 'Microsoft YaHei UI';
color: #fff;
/*鼠标变成手*/
cursor: pointer;
}
.guest_card {
width: 200px;
height: 40px;
margin-top: 34px;
}
.card_name {
width: 158px;
height: 38px;
border: 1px solid #ddd;
font: 14px/38px 'Microsoft YaHei UI';
color: #37ab40;
text-indent: 56px;
background: url(../images/icons.png) 10px -300px no-repeat #f7f7f7;
}
.goods_count {
width: 40px;
height: 40px;
background-color: #f80;
font: bold 18px/40px 'Microsoft YaHei UI';
text-align: center;
color: #fff;
}
.navbar_con {
height: 40px;
border-bottom: 2px solid #37ab30;
/*background: red;*/
}
.navbar {
width: 1200px;
height: 40px;
margin: 0 auto;
/*background: red;*/
}
.subnav_con h1 {
width: 200px;
height: 40px;
background-color: #37ab40;
font: 14px/40px 'Microsoft YaHei UI';
text-align: center;
color: #fff;
}
.subnav_con i {
width: 11px;
height: 7px;
background: url(../images/down.png) left center no-repeat;
overflow: hidden;
display: inline-block;
}
.navlist {
overflow: hidden;
}
.navlist li {
float: left;
height: 14px;
padding: 0 25px;
border-left: 1px solid #666;
margin-left: -2px;
margin-top: 13px;
}
.submena {
width: 1200px;
height: 30px;
margin: 0 auto;
/*background:yellow;*/
}
.submena a {
color: #37ab40;
line-height: 30px;
}
.center_con {
width: 1200px;
height: 350px;
margin: 0 auto;
/*background: yellow;*/
}
.center_con .main_menu {
width: 350px;
height: 350px;
overflow: hidden;
}
.goods_detail_list {
width: 730px;
height: 350px;
}
.goods_detail_list h3 {
font-size: 24px;
line-height: 24px;
color: #666;
font-weight: normal;
}
.goods_detail_list p {
color: #666;
line-height: 40px;
}
.prize_bar {
height: 72px;
background-color: #fff5f5;
line-height: 72px;
}
.prize_bar .show_prize {
font-size: 20px;
color: #ff3e3e;
padding-left: 20px
}
.prize_bar .show_pirze em {
font-style: normal;
font-size: 36px;
padding-left: 10px
}
.prize_bar .show_unit {
padding-left: 150px;
}
.goods_num {
height: 52px;
margin-top: 19px;
/*background: yellow;*/
}
.goods_num .num_name {
width: 70px;
height: 52px;
line-height: 52px;
}
.goods_num .num_add {
width:
天天生鲜项目.7z （32个子文件） 
天天生鲜项目 
fish.jpg 19KB
mianbao.html 10KB
listarrow.png 1KB binqiling.html 10KB chaomei.html 10KB huluobo.html 10KB buycar.png 1KB slide.jpg 36KB leftarrow.png 1KB search.png 1KB icon01.png 2KB icon03.png 2KB meat.jpg 14KB 天天生鲜.html 4KB icon05.png 1KB icon04.png 1KB slide.png 184KB egg.jpg 11KB guandongzhu.html 10KB icecream.jpg 14KB bashayu.html 10KB rightarrow.png 1KB logo.png 10KB ad2.jpg 15KB icon06.png 2KB xia.jpg 14KB icon02.png 2KB friut.jpg 10KB vegetable.jpg 17KB sprite.png 6KB
main.css 4KB 系统提示.html 3KB
评论0