1回答

• 

  浮生若梦思

  2017-02-26 15:29:36

  * {
     margin: 0;
     padding: 0;
  }
  a {
     color: #666;
     text-decoration: none;
  }
  body {
     padding: 20px;
     color: #666;
  }
  .fl{
     float: left;
  }
  .fr {
     float: right;
  }
  table {
     border-collapse: collapse;
     border-spacing: 0;
     border: 0;
     text-align: center;
     width: 937px;
  }
  th, td {
     border: 1px solid #CADEFF;
  }
  th {
     background: #e2f2ff;
     border-top: 3px solid #a7cbff;
     height: 30px;
  }
  td {
     padding: 10px;
     color: #444;
  }
  tbody tr:hover {
     background: RGB(238,246,255);
  }
  .checkbox {
     width: 60px;
  }
  .goods {
     width: 300px;
  }
  .goods span {
     width: 180px;
     margin-top: 20px;
     text-align: left;
     float: left;
  }
  .price {
     width: 130px;
  }
  .count {
     width: 90px;
  }
  .count .add, .count input, .count .reduce {
     float: left;
     margin-right: -1px;
     position: relative;
     z-index: 0;
  }
  .count .add, .count .reduce {
     height: 23px;
     width: 17px;
     border: 1px solid #e5e5e5;
     background: #f0f0f0;
     text-align: center;
     line-height: 23px;
     color: #444;
  }
  .count .add:hover, .count .reduce:hover {
     color: #f50;
     z-index: 3;
     border-color: #f60;
     cursor: pointer;
  }
  .count input {
     width: 50px;
     height: 15px;
     line-height: 15px;
     border: 1px solid #aaa;
     color: #343434;
     text-align: center;
     padding: 4px 0;
     background-color: #fff;
     z-index: 2;
  }
  .subtotal {
     width: 150px;
     color: red;
     font-weight: bold;
  }
  .operation {
     width: 80px;
  }
  .operation span:hover, a:hover {
     cursor: pointer;
     color: red;
     text-decoration: underline;
  }
  img {
     width: 100px;
     height: 80px;
     /*border: 1px solid #ccc;*/
     margin-right: 10px;
     float: left;
  }
  
  .foot {
     width: 935px;
     margin-top: 10px;
     color: #666;
     height: 48px;
     border: 1px solid #c8c8c8;
     background-color: #eaeaea;
     background-image:linear-gradient(RGB(241,241,241),RGB(226,226,226));
     position: relative;
     z-index: 8;
  }
  .foot div, .foot a {
     line-height: 48px;
     height: 48px;
  }
  .foot .select-all {
     width: 100px;
     height: 48px;
     line-height: 48px;
     padding-left: 5px;
     color: #666;
  }
  .foot .closing {
     border-left: 1px solid #c8c8c8;
     width: 100px;
     text-align: center;
     color: #000;
     font-weight: bold;
     background: RGB(238,238,238);
     cursor: pointer;
  }
  .foot .total{
     margin: 0 20px;
     cursor: pointer;
  }
  .foot  #priceTotal, .foot #selectedTotal {
     color: red;
     font-family: "Microsoft Yahei";
     font-weight: bold;
  }
  .foot .selected {
     cursor: pointer;
  }
  .foot .selected .arrow {
     position: relative;
     top:-3px;
     margin-left: 3px;
  }
  .foot .selected .down {
     position: relative;
     top:3px;
     display: none;
  }
  .show .selected .down {
     display: inline;
  }
  .show .selected .up {
     display: none;
  }
  .foot .selected:hover .arrow {
     color: red;
  }
  .foot .selected-view {
     width: 935px;
     border: 1px solid #c8c8c8;
     position: absolute;
     height: auto;
     background: #ffffff;
     z-index: 9;
     bottom: 48px;
     left: -1px;
     display:none;
  }
  .show .selected-view {
     display: block;
  }
  .foot .selected-view div{
     height: auto;
  }
  .foot .selected-view .arrow {
     font-size: 16px;
     line-height: 100%;
     color:#c8c8c8;
     position: absolute;
     right: 330px;
     bottom: -9px;
  }
  .foot .selected-view .arrow span {
     color: #ffffff;
     position: absolute;
     left: 0px;
     bottom: 1px;
  }
  #selectedViewList {
     padding: 20px;
     margin-bottom: -20px;
  }
  #selectedViewList div{
     display: inline-block;
     position: relative;
     width: 100px;
     height: 80px;
     border: 1px solid #ccc;
     margin: 10px;
  }
  #selectedViewList div span {
     display: none;
     color: #ffffff;
     font-size: 12px;
     position: absolute;
     top: 0px;
     right: 0px;
     width: 60px;
     height: 18px;
     line-height: 18px;
     text-align: center;
     background: RGBA(0,0,0,.5);
     cursor: pointer;
  }
  #selectedViewList div:hover span {
     display: block;
  }
  
  

  0 1