乾淨的代碼添加圖片

我想給風格的交通聯繫李，我已經做到了，但我有這樣的感覺，它可能是一個更乾淨的代碼，我不完全確定如果使用絕對位置是最好的辦法在這裏，也許我應該在僞類之前使用。請問您能指出一下它是實現這一目標的最佳方法。這裏是鏈接非常感謝 enter image description here [https://dl.dropboxusercontent.com/u/14407746/move_bubble_master/index.html][2]乾淨的代碼添加圖片

   #main .descript strong { 
      font-family: 'proxima_nova_altbold'; 
      display: block; 
      font-weight: 700; 
      padding: 20px 0px 16px 0px; 
      color: #000; 
      font-size: 14px; 
      border-bottom: solid 1px #e0e0e0; 
      } 
      /* line 226, ../sass/main.scss */ 
      #main .descript ol { 
      list-style: none; 
      padding: 0px; 
      width: 100%; 
      margin-bottom: 2px; 
      } 
      /* line 229, ../sass/main.scss */ 
      #main .descript ol li { 
      width: 50%; 
      float: left; 
      height: 53px; 
      border-bottom: solid 1px #e0e0e0; 
      position: relative; 
      color: #000; 
      padding-left: 34px; 
      font-size: 13px; 
      -webkit-box-sizing: border-box; 
      -moz-box-sizing: border-box; 
      box-sizing: border-box; 
      } 
      /* line 236, ../sass/main.scss */ 
      #main .descript ol li img { 
      float: left; 
      position: absolute; 
      left: 0px; 
      top: 0px; 
      } 
      /* line 237, ../sass/main.scss */ 
      #main .descript ol li span { 
      display: block; 
      color: #9c9c9c; 
      padding-bottom: 6px; 
      } 
      /* line 242, ../sass/main.scss */ 
      #main .descript ol li em { 
      font-family: 'proxima_nova_altbold'; 
      position: absolute; 
      top: 0px; 
      right: 40px; 
      line-height: 76px; 
      color: #9c9c9c; 
      font-style: normal; 
      } 
      /* line 250, ../sass/main.scss */ 
      #main .descript ol li.room { 
      line-height: 53px; 
      } 
      /* line 252, ../sass/main.scss */ 
      #main .descript ol li.room img { 
      width: 23px; 
      height: auto; 
      left: 3px; 
      top: 15px; 
      } 
      /* line 254, ../sass/main.scss */ 
      #main .descript ol li.kitchen { 
      line-height: 53px; 
      } 
      /* line 256, ../sass/main.scss */ 
      #main .descript ol li.kitchen img { 
      width: 23px; 
      height: auto; 
      left: 3px; 
      top: 15px; 
      } 
      /* line 258, ../sass/main.scss */ 
      #main .descript ol li.kilburn, #main .descript ol li.kilburnPark, #main .descript ol li.maida, #main .descript ol li.south { 
      padding: 16px 0px 0px 34px; 
      height: 64px; 
      } 
      /* line 260, ../sass/main.scss */ 
      #main .descript ol li.kilburn img, #main .descript ol li.kilburnPark img, #main .descript ol li.maida img, #main .descript ol li.south img { 
      width: 19px; 
      height: auto; 
      left: 3px; 
      top: 20px; 
      } 
      /* line 263, ../sass/main.scss */ 
      #main .descript ol:after { 
      clear: both; 
      content: ""; 
      display: table; 
      }

來源

2016-04-24 RogeMateos

與問題相關的代碼必須粘貼到問題本身中，而不僅僅通過外部鏈接可用。另外，你必須完整描述你想要完成的事情。像「賦予交通鏈接樣式」這樣的短語對於不瞭解你的項目的人來說意味着什麼。請閱讀[我如何問一個好問題]（http://stackoverflow.com/help/how-to-ask）。 – jfriend00

請勿使用''。定義和使用css類。 –

我投票結束這個問題作爲題外話題，因爲它要求代碼審查，所以會更適合[代碼評論網站]（http://codereview.stackexchange.com/） – jbutler483

一開始，我建議你與你的CSS添加一些類的一些更深層嵌套元素，並針對這些類而不是那些大的目前有多層選擇器。

這將特別適用於您已複製的代碼位;如果您在所有目標元素上定義了相同的類，則可以刪除此重複項，而不必爲每個元素單獨構建複雜的選擇器。

來源

2016-04-24 19:56:45 Spudley

非常感謝，我會改變這一點，我會盡量不重複代碼，謝謝 – RogeMateos

乾淨的代碼添加圖片

回答

相關問題