引言

前端頁(yè)面編寫(xiě)遇到的問(wèn)題及解決方式

問(wèn)題1

.service{
  float:left;
}

<div id="service_box">
    <div class="service">
        <h2>粘貼板同步</h2>
    </div>
    <div class="service">
        <h2>文件夾同步</h2>
    </div>
</div>

id中service_box的div無(wú)法找到高，怎么解決?
解決

#service_box{
  overflow:hidden;
}

問(wèn)題2

將瀏覽器窗口分為3列，2-8-2，如何使三列始終為瀏覽器窗口高度?

解決

html, body, .row, .col-sm-2, .col-sm-8{
  height: 100%;
  margin: 0;
  padding: 0;
}

問(wèn)題3

<a  onclick=""></a>

如何使a標(biāo)簽只觸發(fā)onclick事件而不進(jìn)行鏈接的跳轉(zhuǎn)?

解決

方法一(推薦):
<a  onclick="func(this);return false;"></a>
方法二(javascript偽協(xié)議):
<a href="javascript:void(0)" onclick="func(this)"></a>

問(wèn)題4

如何在javascript代碼中為元素設(shè)置onclick屬性?

解決

新人總是很容易對(duì)onclick屬性直接賦予文本代碼，但那是無(wú)效的，正確的寫(xiě)法如下:

<script>
  element  = document.getElementById("the_id");
  element.onclick = function(){
    //代碼動(dòng)作寫(xiě)在此處
  }
<script>

問(wèn)題5

如何在不同的瀏覽器頁(yè)面大小下，顯示不一樣的css樣式?

解決

css3支持的@media功能。

<style>
  @media screen and (min-width: 768px){
    //你的css樣式
  }
</style>