javascript购物车案例

最新推荐文章于 2024-05-02 18:12:22 发布

置顶

VIP文章赤诚&

最新推荐文章于 2024-05-02 18:12:22 发布

阅读量3.8k

点赞数 12

分类专栏： HTML学习文章标签： javascript css css3

本文链接：https://blog.csdn.net/weixin_67150631/article/details/123446077

版权

今天在这里给大家分享一个购物车案例

以某药品为例，如有侵权，还请于小编联系

1.css代码

	<style>
			* {
   
				margin: 0;
				padding: 0;
				font-family: "楷体";
				list-style: none;
				color: #666;
				text-decoration: none;
				font-size: 20px;
			}

			body {
   
				background: #f5f5f5;
				height: 100%;
			}

			.header {
   
				font-size: 12px;
				border-bottom: 2px solid #ff6700;
				background: #fff;
				color: #b0b0b0;
				position: relative;
				z-index: 20;
				height: 100px;
			}

			.header .container {
   
				position: relative;
				width: 1226px;
				margin-right: auto;
				margin-left: auto;
			}

			.header .container .header-logo {
   
				width: 93px;
				margin-top: 26px;
			}

			.logo {
   
				text-align: center;
				font-size: 40px;
				background-color: #ffffff;
			}

			.header-title {
   
				float: left;
				margin-top: 26px;
				font-size: 12px;
			}

			.topbar-info {
   
				margin-top: 30px;
				line-height: 40px;
			}

			.link {
   
				padding: 0 5px;
				color: #757575;
				text-decoration: none;
			}

			.hid {
   
				overflow: hidden;
			}

			.left {
   
				float: left;
			}

			.box_head {
   
				position: relative;
				margin: 0;
				height: 50px;
				font-size: 30px;
				font-weight: 400;
				color: #757575;
				border-top: 1px solid #e0e0e0;
			}

			.box_head span {
   
				position: absolute;
				top: -20px;
				left: 372px;
				height: 40px;
				width: 482px;
				line-height: 40px;
				text-align: center;
				display: block;
				background-color: #f5f5f5;
				font-size: 30px;
			}

			#box {
   
				width: 1240px;
				margin: 20px auto;
			}

			#box ul {
   
				margin-right: -14px;
				overflow: hidden;
			}

			#box li {
   
				width: 234px;
				float: left;
				margin-right: 14px;
				padding: 24px 0 20px;
				background: #FFF;
				text-align: center;
				position: relative;
				cursor: pointer;
				margin-bottom: 14px;
			}

			.pro_img {
   
				width: 150px;
				height: 150px;
				margin: 0 auto 18px;
			}

			.pro_name {
   
				display: block;
				text-overflow: ellipsis;
				white-space: nowrap;
				overflow: hidden;
				font-weight: 400;
			}

			.pro_name a {
   
				color: #333;
			}

			.pro_price {
   
				color: #ff6700;
				margin: 10px;
			}

			.pro_rank {
   
				color: #757575;
				margin: 10px;
			}

			#box li:hover .add_btn {
   
				display: block;
			}

			#box li:hover .pro_rank {
   
				opacity: 0;
			}

			#box li .add_btn:hover {
   
				background-color: #f60;
				color: white;
			}



			.add_btn {
   
				height: 22px;
				position: absolute;
				width: 122px;
				bottom: 28px;
				left: 50%;
				margin-left: -61px;
				line-height: 22px;
				display: none;
				color: #F60;
				font-size: 12px;
				border: 1px solid #f60;
			}

			.car {
   
				width: 1240px;
				margin: 20px auto;
				background: #FFF;
			}

			.car .check {
   
				width: 50px;

			}

			.car .check i {
   
				color: #fff;
				display: inline-block;

				width: 18px;
				height: 18px;
				line-height: 18px;
				border: 1px solid #e0e0e0;
				margin-left: 24px;
				background-color: #fff;
				font-size: 16px;
				text-align: center;
				vertical-align: middle;
				position: relative;
				top: -1px;
				cursor: pointer;
				font-family: "iconfont";
			}

			.i_acity {
   

				border-color: #ff6700