SOURCE

      <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>
      <style>
          body{
    background:white;
    font-family:KaiTi;
    font-size:16px;
}
a{
    text-decoration:none;
    color:black;
}

a:hover{
    color:black;
    text-decoration:none;
}

a:link{
    color:black;
    text-decoration:none;

}
a:visited{
    color:black;
    text-decoration:none;
}

a:active{
    color:black;
    text-decoration:none;
}



#header {
    -moz-transition: background-color 0.2s ease;
    -webkit-transition: background-color 0.2s ease;
    -ms-transition: background-color 0.2s ease;
    transition: background-color 0.2s ease;
    /*	background: #2e3842;*/
    height: 3em;
    left: 0;
    line-height: 3em;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 10000;
    background:white;
}

#header h1 {
    -moz-transition: opacity 0.2s ease;
    -webkit-transition: opacity 0.2s ease;
    -ms-transition: opacity 0.2s ease;
    transition: opacity 0.2s ease;
    height: inherit;
    left: 1.25em;
    line-height: inherit;
    position: absolute;
    top: 0;
}

#header h1 a {
    border: 0;
    display: block;
    height: inherit;
    line-height: inherit;
}



#header nav {
    height: inherit;
    line-height: inherit;
    position: absolute;
    right: 0;
    top: 0;
}



#header.alt {
    background: transparent;
}

#header.alt p {

    -moz-pointer-events: none;
    -webkit-pointer-events: none;
    -ms-pointer-events: none;
    pointer-events: none;
    opacity: 0;
}


#modify{
    margin:30px auto;

}
table{
    margin:0 auto;


}

table {
    border-collapse: collapse;
    border-spacing: 0;
    border: 0;
    text-align: center;
    width: 1000px;
}
th,td {
    border-bottom: 1px solid #e9e4de;
    height: 50px;
}
th {
    height: 50px;
    line-height: 50px;

}
td {
    padding: 10px 10px;
    color: #444;

}
/*tbody tr:hover {background: #CFECEC;}*/



.content{
    width:1000px;
    margin: 100px auto;


}

.goods {
    width: 300px;
    overflow: hidden;
}
.goods span {
    width: 140px;
    margin-top: 16px;
    text-align: left;
    float: left;
}



.count input {
    width: 50px;
    height: 15px;
    line-height: 15px;
    border: 1px solid black;
    color: #343434;
    text-align: center;
    padding: 4px 0;
    background-color: #fff;
    z-index: 2;
}
.subtotal {
    width: 150px;
    /*color: red;*/

}
.goods img {
    width: 130px;
    /*height: 130px;*/
    /*border: 1px solid #ccc;*/
    margin-right: 5px;
    float: left;
}



.cartFooter div{
    line-height: 50px;
    height: 50px;

}
.cartFooter a {
    margin-top: 4px;
    /*margin-right: 10px;*/
    text-align:center;
}






.cartFooter .selected-view div{
    height: auto;
}
.cartFooter .selected-view img{
    width: 130px;
}

.cartFooter .selected-view .arrow span {
    color: white;
    position: absolute;
    left: 0px;
    bottom: 2px;
}

#selectedViewList div{
    display: inline-block;
    position: relative;
    width: 130px;
    /*height: 130px;*/
    border: 1px solid black;
    margin: 10px 13px;
}
#selectedViewList .del {
    display: none;
    color: #ffffff;

    position: absolute;
    bottom: 19px;
    right: 30px;
    width: 70px;
    height: 22px;
    line-height: 22px;
    text-align: center;
    background: #c81622;
    cursor: pointer;
}

#selectedViewList div:hover span {
    display: block;
}


/*继续购物CSS*/



.addressDIV span {
    display: inline-block;
    width: 150px;
    height: 100%;
    transform: skew(20deg);
    -webkit-transform: skew(20deg);
    /*background: #FF6347;*/
    background:white;
    position: absolute;
    right: -9px;
    top: 0;
    border:1px solid black;
    color:black;
}
.addressDIV span::before,
.addressDIV span::after {
    content: "";
    width: 4px;
    height: 100%;
    /* background: #FF6347;*/
    background:black;
    position: absolute;
    top: 0;
    right: -8px;
}
.addressDIV span::after {
    right: -16px
}
.addressDIV span:hover {
    transform: skew(0deg);
    -webkit-transform: skew(0deg);
}
.devideDIV{
    height: 50px;
    line-height: 50px;
    border:solid 2px #555;
}
.devideDIV span{
    display: block;
    width: 100%;
    text-align: center;

}
.devideDIV img{
    width: 30px;
    height: 30px;
}
.cartIconDIV{
    margin-top: 10px;
}
      </style>
   
    <!-- Header -->
<header id="header" class="alt">
    <strong> <p style="font-family:FangSong">&nbsp;&nbsp;&nbsp;<a href="${pageContext.request.contextPath}/newProducts">SAMMIO</a></p></strong>
    <nav id="nav">
        <a href="${pageContext.request.contextPath}/client/productHome.jsp">设计师作品中心</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <!-- <a href="${pageContext.request.contextPath}/client/registration.jsp">推广登记处</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-->
        <a href="${pageContext.request.contextPath}/myAccount">个人中心</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <a href="${pageContext.request.contextPath}/client/carts.jsp">购物车</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <a>    <%
            User user = (User) request.getSession().getAttribute("user");
            if(null == user){
        %>
            <a href="${pageContext.request.contextPath}/client/registerLogin.jsp">注册/登录</a>
            <%
            }else{
            %>
            欢迎您， ${user.username}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <a href="${pageContext.request.contextPath}/logout" onclick="javascript:return confirm_logout()">用户退出</a>
            <%
                }
            %>
        </a>
    </nav>
</header>
<div class="content">
    <div class="devideDIV">
<span>结 算 中 心
<div class="cartIconDIV"></div>
</span>
    </div>


    <div id="heji">
        <form id="orderForm" action="${pageContext.request.contextPath}/createOrder" method="post">
            <table class="jiesuan" >
                <hr/>
                <tr>
                    <td align="center">产品</td>
                    <td align="center">类别</td>
                    <td align="center">数量</td>
                    <td align="center">小计</td>
                <tr>

                    <c:set value="0" var="totalPrice"/>
                    <c:forEach items="${cart}" var="entry" varStatus="vs">
                <tr height="160px">
                    <td class="goods" align="center">
                        <img src="${pageContext.request.contextPath}${entry.key.imgurl}"  style="width:150px;height:120px;" alt="" />
                        <span><center> ${entry.key.name }</center></span>
                    </td>
                    <td align="center">${entry.key.category}</td>
                    <td align="center">
                            ${entry.value}
                    </td>
                    <td class="subtotal" align="center">${entry.key.price*entry.value}</td>
                </tr>
                <c:set var="totalPrice" value="${totalPrice+entry.key.price*entry.value}"/>
                </c:forEach>
                <tr >
                    <td style="text-align:right; padding-right:30px;border:1px solid black;" colspan="4">合计：<font
                            style="color:#c81622">&nbsp;${totalPrice}</font>元
                        <input type="hidden" name="money" value="${totalPrice}">
                    </td>
                </tr>
            </table>
            </br>
            </br>
            </br>
            <table>
                <tr ><td  colspan="2">请补充完整订单信息</td></tr>
                <tr><td colspan="2">关于成衣</td></tr>
                <tr><td>请选择您希望定制的成衣面料</td>
                    <td>    <input type="radio" name="fabric" value="棉">棉&nbsp;&nbsp;&nbsp;
            <input type="radio" name="fabric" value="麻">麻&nbsp;&nbsp;&nbsp;
            <input type="radio" name="fabric" value="丝">丝&nbsp;&nbsp;&nbsp;
            <input type="radio" name="fabric" value="绒">绒</td>
                </tr>
                <tr><td>就此设计师的作品，若您想在您的成衣上添加你喜欢的元素，在此进行留言说明</td>
                <td>
                    <textarea name="idea" class="form-control"  style="text-align:center" ></textarea>
                    </td>
                    </tr>
                    <tr><td colspan="2">关于收件</td></tr>
                <tr >
                    <td align="center" >收件地址</td>

                    <td >
                        <input id="receiverAddress" name="receiverAddress" type="text" class="form-control" value="" autocomplete="off"  onkeyup="checkReceiverAddress();" />
                        <span id="receiverAddressMsg"></span>
                    </td>
                </tr>

                <tr>
                    <td align="center" >收件人</td>
                    <td >
                        <input id="receiverName" name="receiverName" type="text" class="form-control"  value="${user.username}"  onkeyup="checkReceiverName();" />
                        <span id="receiverNameMsg"></span>
                    </td>
                </tr>
                <tr>
                    <td align="center" >联系电话</td>
                    <td  >
                        <input type="text" id="receiverPhone" name="receiverPhone"  class="form-control" value="${user.telephone}"  onkeyup="checkReceiverPhone();" />
                        <span id="receiverPhoneMsg"></span>
                    </td>
                </tr>
                <tr><td colspan="2"><input type="submit" class="btn btn-success btn-xs" value="提交订单" onclick="checkOnSubmit();"  /></td></tr>
            </table>
        </form>
    </div>


</div>

body {
    background-attachment: fixed;
    background-size: cover;
    font-family: KaiTi;
    font-size:16px;
}

#container{
    box-shadow: 0 15px 30px 1px rgba(128, 128, 128, 0.31);
    background: rgba(255, 255, 255, 0.90);
    text-align: center;
    border-radius: 10px;
    overflow: hidden;
    margin: 70px auto;
    /*height: 350px;
    width: 700px;*/
    height:500px;
    width:900px;
}

/* 	Product details  */
.product-details {
    position: relative;
    text-align: left;
    overflow: hidden;
    padding: 30px;
    height: 100%;
    float: left;
    width: 40%;
}

/* 	Product Name */
#container .product-details h1{

    display: inline-block;
    position: relative;


    margin: 0;

}

#container .product-details h1:before{
    position: absolute;
    content: '';
    right: 0%;
    top: 0%;
    transform: translate(25px, -15px);

    display: inline-block;
    /*background: #FFA69E;*/
  /*  background:black;*/
    border-radius: 5px;
    padding: 5px;
    color: #FFF;
    margin: 0;
    animation: chan-sh 6s ease infinite;

}




/*Product Rating  */
.hint-star {
    display: inline-block;
    margin-left: 0.5em;

    width: 50%;
}


/* The most important information about the product */
#container .product-details > p {

    text-align: center;

}

/* control */

.control{
    position: absolute;
    bottom: 20%;
    left: 22.8%;

}
/* the Button */
.btn {
    transform: translateY(0px);
    transition: 0.3s linear;
    /*background: #49C608;*/
    /*  background:black;*/
    border-radius: 5px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    outline: none;
    color: black;
    padding: 0;
    margin: 0;
    border:1px solid black;
    background:white;
}

/*.btn:hover{transform: translateY(-4px);}*/

.btn span {

    transition: transform 0.3s;
    display: inline-block;
    padding: 10px 20px;
    margin:0;

}
/* shopping cart icon */
.btn .price, .shopping-cart{
    /* background: black;*/
    border: 0;
    margin: 0;
}

.btn .price {
    transform: translateX(-10%); padding-right: 15px;

}

/* the Icon */
.btn .shopping-cart {
    transform: translateX(-100%);
    position: absolute;
    /*  background: black;*/
    z-index: 1;
    left: 0;
    top: 0;


}

/* buy */
.btn .buy {z-index: 3; font-weight: bolder;}

.btn:hover .price {transform: translateX(-110%);}

.btn:hover .shopping-cart {transform: translateX(0%);}



/* product image  */
.product-image {
    transition: all 0.3s ease-out;
    display: inline-block;
    position: relative;
    overflow: hidden;
    height: 100%;

    width: 50%;

}

#container img {width: 100%;height: 100%;}

.info {
    background: rgba(27, 26, 26, 0.9);

    transition: all 0.3s ease-out;
    transform: translateX(-100%);
    position: absolute;
    line-height: 1.9;
    text-align: left;
    cursor: no-drop;
    color: #FFF;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
}

.info h4 {text-align: center}
.product-image:hover .info{transform: translateX(0);}

.info ul li{transition: 0.3s ease;list-style: none;}
.info ul li:hover{transform: translateX(50px) scale(1.3);}

.product-image:hover img {transition: all 0.3s ease-out;}
.product-image:hover img {transform: scale(1.2, 1.2);}