引言
前端页面编写遇到的问题及解决方式
问题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>
