前端常见问题

引言

前端页面编写遇到的问题及解决方式

问题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无法找到高，怎么解决?
解决

#service_box{
  overflow:hidden;
}

问题2

将浏览器窗口分为3列，2-8-2，如何使三列始终为浏览器窗口高度?

解决

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

问题3

<a href="http://www.baidu.com" onclick=""></a>

如何使a标签只触发onclick事件而不进行链接的跳转?

解决

方法一(推荐):
<a href="http://www.baidu.com" onclick="func(this);return false;"></a>
方法二(javascript伪协议):
<a href="javascript:void(0)" onclick="func(this)"></a>

问题4

如何在javascript代码中为元素设置onclick属性?

解决

新人总是很容易对onclick属性直接赋予文本代码，但那是无效的，正确的写法如下:

<script>
  element  = document.getElementById("the_id");
  element.onclick = function(){
    //代码动作写在此处
  }
<script>

问题5

如何在不同的浏览器页面大小下，显示不一样的css样式?

解决

css3支持的@media功能。

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