jsp创建商品数组加入购物车（记录自己的项目，内容不足仅供参考）

最新推荐文章于 2022-10-12 23:03:55 发布

夏目松松

最新推荐文章于 2022-10-12 23:03:55 发布

阅读量345

点赞数

文章标签： js html5 css

本文链接：https://blog.csdn.net/qq_43129582/article/details/113730396

版权

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="css/help-center.css" />
        <title>我的购物车</title>
 
        <style>
            * {
        margin: 0;
        padding: 0;
        font-family: "微软雅黑";
        list-style: none;
        color: #666;
        text-decoration: none;
        font-size: 14px;
    }
    body {
        background: #ffff;
        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;
}
 
 	#p1{
		font-size:20px;
		color:#999;
		margin:20px 0 0 50px;
				
		}
	#p2{
		font-size:17px;
		color:#999;
		margin:-10px 0 20px 900px;
			
		}	
		


	 #tb #tr1 #td #a1{
	    display:block;
		width:150px;
		height:40px;
		color:#000;
		text-algin:center;
		line-height:40px;
		background:#FFF;
		text-decoration:none; /*去掉a标签的下划线*/
		margin: 20px 0 -30px 10px; 
		text-align: center;  	
		transition: 0.8s all ease-in-out; 	/*缩放变速*/
		font-family:STSong;
		font-size:20px;
		}	
		
	#tb #tr1 #td #a1:hover{
		background-color:#fbb18e;	
		color:#FFF;
		transform: scale(1.2); /*鼠标悬停图片缩放*/
		
		}
		
	#td1{
		width:150px;
		height:40px;
		margin:0 20px 0 0;	
		}	
		
	#d1{
			height:400px;
			width:100%;	
			background: linear-gradient(#effbf9 0%, #eff4f8 100%); /*linear-gradient() 函数用于创建一个线性渐变的 "图像" rgba颜色值  　　0deg不是按我们数学的角度向右定义的，默认方向是向上的，是从方向北开始的，所以北才是0deg，*/
			margin:-35px 0 40px 0;
		
		}
	#d2{
		background:url(picture/狗窝1.jpg) no-repeat 30px center;
		height:400px;
		width:600px;	
		}	
	#p3{
		text-align:center;
		font-size:55px; 
		color:#242729; 
    	text-shadow:0 0 20px;   
    	letter-spacing: 2px;
		font-weight:bold;
		font-family:STSong;	
		margin:-80px 0 0 60px;
		}	
		
	#p4{
		text-align:center;
		font-size:20px; 
		color:#868b8e; 
		font-weight:bold;
		font-family:STSong;	
		margin:20px 0 0 50px;
		}	
			
	/*搜索框*/
	#f1 {
	position:relative;
	width:300px;
	margin:0 auto;
	}
	#input1,#btn {
		border:none;
		outline:none;
	}
	#input1 {
		width:100%;
		height:42px;
		padding-left:13px;
	}
	#btn {
		height:42px;
		width:42px;
		cursor:pointer;
		position:absolute;
	}
		
	#container {
		width:500px;
		height:100px;
		margin:-10px 0 0 700px;
	}
		  
	.bar1 #f1 {
		height:42px;
	}
	.bar1 #input1 {
		width:220px;
		height:35px;
		border-radius:42px;
		border:3px solid #f0f0f0;
		background:#f6f6f6;
		transition:.3s linear; /*变速时间*/
		float:right;
	}
	.bar1 #input1:focus { /*focus选择器 获得焦点*/
		width:300px;
	}
	.bar1 #btn {
		background:none;
		top:-2px;
		right:20px;
	}
	.bar1 #btn:before {
		content:"Search"; /* before选择器 在btn之前插入新内容 Search*/
		font-family:FontAwesome;
		color:#324b4e;
	}		


	#d1{
		height:400px;
		width:100%;	
		background: linear-gradient(#effbf9 0%, #eff4f8 100%); /*linear-gradient() 函数用于创建一个线性渐变的 "图像" rgba颜色值  　　0deg不是按我们数学的角度向右定义的，默认方向是向上的，是从方向北开始的，所以北才是0deg，*/
		margin:-35px 0 40px 0;
	
		}
 
 .logo {
    width: 48px;
    height: 48px;
    position: relative;
    display: block;
    width: 55px;
    height: 55px;
    overflow: hidden;
    background-color: #ff6700;
    }
    .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: #f5f5f5;
        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

最低0.47元/天解锁文章

夏目松松

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jsp创建商品数组加入购物车（记录自己的项目，内容不足仅供参考）

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%><!DOCTYPE html><html> <head> <meta charset="utf-8"
复制链接

扫一扫