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

最新推荐文章于 2024-03-07 18:15:40 发布
最新推荐文章于 2024-03-07 18:15:40 发布
阅读量1.9w 收藏 285
点赞数 49
分类专栏： 前端开发 文章标签： html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/helloworld00754/article/details/104480853
版权

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;
}

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

胡安想
关注
  • 49
    点赞
  • 踩
  • 285
    收藏
    觉得还不错? 一键收藏
  • 24
    评论
专栏目录
商城产品详情网页html
03-03
这是一个JS+CSS+HTML 源码文件，是一个商城产品详情页的模板。
微信小程序 生鲜商城（截图+源码）
05-13
微信小程序 生鲜商城（截图+源码）微信小程序 生鲜商城（截图+源码）微信小程序 生鲜商城（截图+源码）微信小程序 生鲜商城（截图+源码）微信小程序 生鲜商城（截图+源码）微信小程序 生鲜商城（截图+源码）微信小程序 生鲜商城（截图+源码）微信小程序 生鲜商城（截图+源码）微信小程序 生鲜商城（截图+源码）微信小程序 生鲜商城（截图+源码）微信小程序 生鲜商城（截图+源码）微信小程序 生鲜商城（截图+源码）微信小程序 生鲜商城（截图+源码）微信小程序 生鲜商城（截图+源码）微信小程序 生鲜商城（截图+源码）微信小程序 生鲜商城（截图+源码）微信小程序 生鲜商城（截图+源码）微信小程序 生鲜商城（截图+源码）微信小程序 生鲜商城（截图+源码）微信小程序 生鲜商城（截图+源码）微信小程序 生鲜商城（截图+源码）微信小程序 生鲜商城（截图+源码）微信小程序 生鲜商城（截图+源码）微信小程序 生鲜商城（截图+源码）微信小程序 生鲜商城（截图+源码）微信小程序 生鲜商城（截图+源码）微信小程序 生鲜商城（截图+源码）微信小程序 生鲜商城（截图+源码）微信小程序 生鲜商城（截图+源码）微信小程序 生
HTML + CSS 连载 | 63 - 京东首页商品布局（上）
JingnanJia的博客
03-07 1252
刷新页面，所有的 item 全部在一行中显示了：如果有更多 item：</</</</</</</</</</</刷新页面，由于宽度的限制，每一行都会只有四个；这样也可以全部排满：但是使用伪元素的方式有可能对一些其他版本的浏览器存在兼容性的问题。我们可以给每一行的第五个元素加入一个特殊的 class</</</</</</</</</</</刷新浏览器：这样就可以实现需求的同时解决兼容性的问题。除了上面对每行最后一个元素添加特殊的 class 这种方式外，还有另一种解决方案；我们可以增加。
CSS——制作天天生鲜主页
dengyunhui1210的博客
06-10 441
终于做好了！ index.html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>天天生鲜-首页</title> <link rel="stylesheet" type="t...
web期末大作业 基于HTML+CSS+JavaScript实现的生鲜果蔬电子商务商城源码(6页)
12-10
web期末大作业 基于HTML+CSS+JavaScript实现的生鲜果蔬电子商务商城源码(6页) web期末大作业 基于HTML+CSS+JavaScript实现的生鲜果蔬电子商务商城源码(6页) web期末大作业 基于HTML+CSS+JavaScript实现的生鲜果蔬电子商务商城源码(6页) web期末大作业 基于HTML+CSS+JavaScript实现的生鲜果蔬电子商务商城源码(6页) web期末大作业 基于HTML+CSS+JavaScript实现的生鲜果蔬电子商务商城源码(6页) web期末大作业 基于HTML+CSS+JavaScript实现的生鲜果蔬电子商务商城源码(6页) web期末大作业 基于HTML+CSS+JavaScript实现的生鲜果蔬电子商务商城源码(6页) web期末大作业 基于HTML+CSS+JavaScript实现的生鲜果蔬电子商务商城源码(6页) web期末大作业 基于HTML+CSS+JavaScript实现的生鲜果蔬电子商务商城源码(6页) web期末大作业 基于HTML+CSS+JavaScript实现的生鲜果蔬电子商务商城源码(6页)
基于HTML+CSS开发的生鲜购物网站静态页面源码.zip
11-19
【资源介绍】 基于HTML+CSS开发的生鲜购物网站静态页面源码.zip基于HTML+CSS开发的生鲜购物网站静态页面源码.zip基于HTML+CSS开发的生鲜购物网站静态页面源码.zip基于HTML+CSS开发的生鲜购物网站静态页面源码.zip基于HTML+CSS开发的生鲜购物网站静态页面源码.zip基于HTML+CSS开发的生鲜购物网站静态页面源码.zip基于HTML+CSS开发的生鲜购物网站静态页面源码.zip基于HTML+CSS开发的生鲜购物网站静态页面源码.zip基于HTML+CSS开发的生鲜购物网站静态页面源码.zip基于HTML+CSS开发的生鲜购物网站静态页面源码.zip 基于HTML+CSS开发的生鲜购物网站静态页面源码.zip 【备注】 1、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！有问题请及时沟通交流。 2、适用人群：计算机相关专业(如计科、信息安全、数据科学与大数据技术、人工智能、通信、物联网、自动化、电子信息等)在校学生、专业老师或者企业员工下载使用。 3、用途：项目具有较高的学习借鉴价值，也适用于小白学习入门进阶。当然也可作为毕设项目、课程设计、大作业、初期项目立项演示等。 4、如果基础还行，或者热爱钻研，亦可在此项目代码基础上进行修改添加，实现其他不同功能。 欢迎下载，沟通交流，互相学习，共同进步！
HTML .CSS实现商品详情（detail）
热门推荐
qq_67519129的博客
06-15 2万+
HTML .CSS实现商品详情（detail）
品优购商品详情页html代码记录
weixin_46427707的博客
06-17 8827
品优购商品详情页html代码
HTML5期末大作业：网站设计——天天生鲜水果蔬菜商城网站静态模板 (10个页面) HTML+CSS+JavaScript
七夕情人节表白网页代码100款 HTML5网页设计与制作1120款 Echarts大屏数据150款
09-07 6518
HTML5期末大作业：网站设计——天天生鲜水果蔬菜商城网站静态模板 (10个页面) HTML+CSS+JavaScript 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大？HTML网页作业无从下手？网页要求的总数量太多？没有合适的模板？等等一系列问题。你想要解决的问题，在这篇博文中基本都能满足你的需求~ 原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，这是一个不错的网页制作，画面精明，非常适合初学者学习使用。 作品介绍 1.网页作品简介方面 天天生鲜商城网站htm
商城详情页HTML+CSS + js
W256999的博客
07-03 2102
【代码】商城详情页HTML+CSS。
【小河今学 | JavaScript+jQuery】原生JS商品页面封装
LB_laber的博客
09-12 398
原生JS商品页面封装
html+js+css天天生鲜项目
03-18
全面完善了各个页面，欢迎下载，互相学习
html+css+bootstrap实现电商-生鲜商城源码，优质购物商城网页模板Ecofarm.zip
最新发布
03-16
【技术分析】 HTML，是一种制作万维网页面的标准语言，它消除了不同计算机之间信息交流的障碍； CSS，可以帮助把网页外观做得更加美观； JavaScript，是一种轻量级的解释型编程语言； jQuery，使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互； Bootstrap 是快速开发 Web 应用程序的前端工具包。它是一个 CSS，HTML 和 JS 的集合，它使用了最新的浏览器技术，给你的 Web 开发提供了时尚的版式； AJAX，创建交互式网页应用的网页开发技术。 【设计思路】 用户友好性：界面简洁直观，易于操作，减少用户的学习成本。 模块化设计：将系统功能模块化，每个模块负责一类功能，方便扩展和维护。 Responsiveness：后台管理系统应当是响应式设计，能够适配不同设备屏幕大小，包括电脑、平板和手机等。 权限控制：根据用户角色设定不同的权限，确保用户只能访问其权限范围内的功能。 数据安全：对用户数据进行加密存储、访问控制等措施，保护用户隐私和系统安全。 日志功能：记录关键操作日志，保留操作痕迹。
html+css+bootstrap实现电商超市网站，绿色生鲜商城模板 Bigmarket.zip
02-28
它是一个 CSS，HTML 和 JS 的集合，它使用了最新的浏览器技术，给你的 Web 开发提供了时尚的版式； AJAX，创建交互式网页应用的网页开发技术。 【设计思路】 用户友好性：界面简洁直观，易于操作，减少用户的学习...
用h+c实现天天生鲜首页
weixin_34260991的博客
06-07 228
网页效果图：http://www.dycun.cc/ 如下： css代码 main.css： /*因为大部分的字体都是12px,颜色一致, 所以统一设置下*/ body{ font-size: 12px; color: #666666; } /*!--1.登录部分login -->*/ .login{ /*外...
HTML5期末大作业：动漫网页主题设计——卡通漫画教育首页HTML+CSS+JavaScript 动漫网页HTML代码 学生网页课程设计期末作业下载 动漫大学生网页设计制作成
七夕情人节表白网页代码100款 HTML5网页设计与制作1120款 Echarts大屏数据150款
07-13 1万+
HTML5期末大作业：动漫网页主题设计——卡通漫画教育首页HTML+CSS+JavaScript 动漫网页HTML代码 学生网页课程设计期末作业下载 动漫大学生网页设计制作成 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大？HTML网页作业无从下手？网页要求的总数量太多？没有合适的模板？等等一系列问题。你想要解决的问题，在这篇博文中基本都能满足你的需求~ 原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，这是一个不错的网页制作，画面精明，非常适合初学者学习使用。 作品
html5制作商品展示页面,css3制作商品展示，css3商品展示分享
weixin_30291543的博客
06-03 1339
今天看到一个用%* { padding: 0px; border: 0px; } .box { width: 300px; height: 300px; margin: 100px auto; position: relative; text-align: center; } .pic { width: 100%; height: 100%; } .pic...
HTML&CSS仿京东详情页静态页面制作总结
ccj_cmp的博客
08-03 4788
仿京东详情页面制作
淘宝主页+女装会场+详情页（html+css+js）
天天的博客
01-08 8248
淘宝网是中国电商行业的领军企业，其前端网站技术一直处于国内领先水平。本博客旨在分享淘宝网前端在技术方面的积累与探索。内容涵盖前端开发、性能优化、移动端适配、架构设计等诸多方面，对于前端开发人员有着较高的技术参考价值。注：不含源码
天天生鲜注册页面css
09-14
您好！感谢您的提问。以下是一个简单的天天生鲜注册页面的 CSS 示例： ```css /* 注册表单 */ .register-form { margin: 20px auto; max-width: 400px; padding: 20px; border: 1px solid #ccc; border-radius: 5px; } /* 输入框 */ .register-form input[type="text"], .register-form input[type="email"], .register-form input[type="password"] { width: 100%; padding: 10px; margin-bottom: 10px; border: 1px solid #ccc; border-radius: 3px; } /* 注册按钮 */ .register-form input[type="submit"] { width: 100%; padding: 10px; background-color: #4CAF50; color: white; border: none; border-radius: 3px; } .register-form input[type="submit"]:hover { background-color: #45a049; } /* 错误消息 */ .register-form .error-message { color: red; font-size: 14px; } ``` 请注意，这只是一个简单的示例，您可能需要根据实际情况进行适当的修改和调整。希望对您有所帮助！如果您还有其他问题，请随时提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 24
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值