天天生鲜商品详情页HTML+css

index.html

<!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"><div class="main_menu fl"><img src="./images/goods_detail.jpg"></div><div class="goods_detail_list fr"><h3>大兴大棚草莓</h3><p>草莓浆果柔软多汁，味美爽口，适合速冻保险贮藏，草莓速冻后，可以保持原有的色、香、味，既便于贮藏，又便于外销。</p><div class="prize_bar"><div class="show_prize fl">￥<em>16.80</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="1"><a href="javascript:;" class="add fr">+</a><a href="javascript:;" class="minus fr">-</a></div></div><div class="total">总价：<em>16.80元</em></div><div class="operate_btn"><a href="" class="buy_btn">立即购买</a><a href="" class="add_cart">加入购物车</a></div></div></div></body>
</html>

css代码块——main.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:75px;height:50px;border:1px solid #dddddd;
}
.goods_num .num_add .num_show{width:49px;height:50px;text-align:center;line-height:50px;border:0px;outline:none;font-size:14px;color:#666;
}
.goods_num .num_add .add,.goods_num .num_add .minus{width:25px;line-height:25px;text-align:center;border-left:1px solid #ddd;border-bottom:1px solid #ddd;color:#666;font-size:14px;
}
.goods_num .num_add .minus{border-bottom:0px;
}
.total{height: 35px;line-height: 35px;margin-top: 25px;/*background: yellow;*/
}
.total em{font-style:normal;color:#ff3e3e;font-size:18px
}
.operate_btn{height:40px;margin-top:35px;font-size:0;position:relative;
}
.operate_btn .buy_btn,.operate_btn .add_cart{display:inline-block;width:178px;height:38px;border:1px solid #c40000;font-size:14px;color:#c40000;line-height:38px;text-align:center;background-color:#ffeded;
}
.operate_btn .add_cart{background-color:#c40000;color:#fff;margin-left:10px;position:relative;z-index:10;
}

reset.css

body,p,h1,h2,h3,h4,h5,h6,ul,dl,dt,form,input{margin:0;padding:0;
}ul{list-style:none;
}
a{text-decoration:none;
}em{font-style:normal;
}img{border:0px;
}h1,h2,h3,h4,h5,h6{font-size:100%;
}
.clearfix:before,.clearfix:after{content:"";display:table;
}
.clearfix:after{clear:both;
}
.clearfix{zoom:1;
}.fl{float:left;
}
.fr{float:right;
}

页面效果图，大概就是这个样子的了，后面需要的话可以再加。

天天生鲜商品详情页HTML+css相关推荐

商品详情页html,天天生鲜商品详情页HTML+css
body{ font-family: 'Microsoft YaHei'; color:#666; font-size:12px; } /*顶部条状态*/ .header_con{ height:29 ...
Django电商项目（六）商品详情页、列表页分页、商品搜索
Django电商项目商品详情页商品列表页商品搜索全文检索安装和配置索引文件生成全文检索的使用改变分词方式商品详情页新建detail.html {% extends 'base_de ...
❤ ❤双手奉上京东生鲜页面（包含登录注册，购物车，商品页，商品详情页，调查问卷，提供源码！！！）❤ ❤
提示:该项目不涉及SQL+Servlet+mysql+navicat, 提供源码:本项目源码:链接:https://pan.baidu.com/s/1v_pV4_ybIZrGYzpvG8Frsw 提取 ...
模仿京东-商品详情页前端样式 CSS+html+js
老师让我们模仿京东前端做一下,练一下前端,我被分到商品详情页先写静态的,后续再说不怎么会前端,所以只用了css+html做静态页面,然后js做了一些超简单的点击事件,就点击出现/隐藏效果,还有左右 ...
H5+JS+CSS模仿JD商品详情页放大镜效果
源码下载:H5+JS+CSS模仿JD商品详情页放大镜效果-Javascript文档类资源-CSDN下载适合小白模仿的H5+JS+CSS模仿JD商品详情页放大镜效果,可以熟练掌握鼠标经过和鼠标移动事件更 ...
第七章 Web开发实战2——商品详情页
本章以京东商品详情页为例,京东商品详情页虽然仅是单个页面,但是其数据聚合源是非常多的,除了一些实时性要求比较高的如价格.库存.服务支持等通过AJAX异步加载加载之外,其他的数据都是在后端做数据聚合然后 ...
仿淘宝商品详情页图片滑动并且数字也跟着变化
今天遇到需求需要做个淘宝那样的商品详情页如图(这里只差放图片了)支持移动端,当然用的是swiper.js支持左右滑动上代码 html代码 <div class="swiper-con ...
OpenResty学习——第七章 Web开发实战2——商品详情页
本文转自https://blog.csdn.net/jinnianshilongnian/article/details/84704211,好文要顶,感谢博主分享! 本章以京东商品详情页为例,京东商品 ...
京东商品详情页前端开发宝典
声明:本位来自京东张开涛的微信公众号(kaitao-1234567),授权CSDN转载,如需转载请联系作者. 作者:周琪力,前端工程师,网络常用昵称「keelii」.在过去的4年里主要负责京东网站商品 ...
Java网络商城项目 SpringBoot+SpringCloud+Vue 网络商城（SSM前后端分离项目）十六（商品排序，Thymeleaf快速入门，商品详情页的展示）
Java网络商城项目 SpringBoot+SpringCloud+Vue 网络商城(SSM前后端分离项目)十六(商品详情页的展示) 一.商品排序 1.完善页面信息这是用来做排序的,默认按照综合排序 ...

天天生鲜商品详情页HTML+css

天天生鲜商品详情页HTML+css相关推荐

最新文章

热门文章