html+css—自适应webapp

代码学习到：

• 基础知识固然重要：视频、书、课上，之后线下查找 文档、博客；常练习，才不易忘。
• 自适应 class=“clear-float”，padding多次嵌套
• 宽度大体上用 百分比，别固定值。有的如图片的比例：用JS计算出来！

• div 加

  background: url(“/Uploads/2017-05-17/1494991746VGQE1.jpg”);
  background-size: 100%;

  commodityIntroduction .money {

  height: 1.9em;
  background: url("/static/images/index/RMB.svg") no-repeat **bottom left**;
  padding-left: 1.4em;
  background-size: 1.2em 1.2em;
  width: 70%;
  float: left;
  

  }
  这个进行了 一个div同时含有 图片和文字。

• line-height: 1.9em;
  font-size: 1.5em;

• combos .options {

  /\*margin-top: 10px;\*/
  

  }

  combos .options .option {

  width: 26%;
  height: 30px;
  float: left;
  padding: 15px 3.33% 0 3.33%;
  

  }

  combos .options .option .optionDetail {

  text-align: center;
  line-height: 30px;
  border: 1px solid grey;
  border-radius: 4px;
  font-size: 14px;
  

  }

• 先用一个container 确定width大小然后

  photographerInfo .avatorContainer {

  width: 20%;
  /*与#photographerInfo的高度保持一致*/
  height: 80px;
  float: left;
  

  }

  photographerInfo .avatorContainer .avator {

  height: 50px;
  width: 50px;
  float: right;
  background: url("/Uploads/2017-05-18/1495109515m3LRQ.jpeg") no-repeat;
  background-size: cover;
  border-radius: 25px;
  margin-top: 15px;
  

  }

• 转化 tabs

  switchContainer {

  margin-top: 4px;
  background-color: white;
  height: 46px;
  

  }

  switchContainer .details {

  /*与#switchContainer高度一致*/
  height: 46px;
  width: 50%;
  float: left;
  -moz-box-sizing: border-box;  /\*Firefox3.5+\*/
  -webkit-box-sizing: border-box; /\*Safari3.2+\*/
  -o-box-sizing: border-box; /\*Opera9.6\*/
  -ms-box-sizing: border-box; /\*IE8\*/
  box-sizing: border-box;
  border-right: 1px solid rgb(230, 230, 230);
  border-bottom: 1px solid rgb(230, 230, 230);
  line-height: 46px;
  text-align: center;
  font-size: 14px;
  

  }

  switchContainer .comments {

  /*与#switchContainer高度一致*/
  height: 46px;
  width: 50%;
  float: left;
  

  _-moz-box-sizing: border-box; /*Firefox3.5+*/_
  _-webkit-box-sizing: border-box; /*Safari3.2+*/_
  _-o-box-sizing: border-box; /*Opera9.6*/_
  _-ms-box-sizing: border-box; /*IE8*/_
  _box-sizing: border-box;_
  _border-bottom: 1px solid rgb(230, 230, 230);_
  _line-height: 46px;_
  _text-align: center;_
  _font-size: 14px;_
  }

  switchContainer .active {

  border-top: 2px solid #fbd34f;
  line-height: 42px;
  

  }

  bottomContainer {

  width: 200%;
  position: relative;
  

  }