web前端开发【连载2】-兼容性和自适应

作者: Iris_mao | 来源:发表于2017-04-06 11:29 被阅读102次

是不是有人想傻球了，那今天带着傻球继续high(^__)

傻球继续镇楼.JPG

HTML与CSS的布局技巧

网页一般分单列布局、多列布局、全屏布局和响应式布局，每种布局都有好几种方法实现，但是这些方法各有利弊，在实际应用中可以根据实际情况进行选择。
详情参考：利用HTML和CSS实现常见的布局

浏览器的基本发展情况

在做网站的过程中，浏览器的兼容性是必须要考虑的问题，随着浏览器性能的不断发展我们必须要在各个浏览器中进行测试以保证所有浏览器都能正常显示。

浏览器内核又可以分成两部分：渲染引擎(layout engineer 或者 Rendering Engine)和 JS 引擎。它负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入 CSS 等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。JS 引擎则是解析 Javascript 语言，执行 javascript 语言来实现网页的动态效果。

最开始渲染引擎和 JS 引擎并没有区分的很明确，后来 JS 引擎越来越独立，内核就倾向于只指渲染引擎。有一个网页标准计划小组制作了一个 ACID 来测试引擎的兼容性和性能。内核的种类很多，如加上没什么人使用的非商业的免费内核，可能会有 10 多种，但是常见的浏览器内核可以分这四种：Trident、Gecko、Blink、Webkit。

详情参考：主流浏览器内核介绍（前端开发值得了解的浏览器内核历史）

各种浏览器的兼容性以及处理方式

因为浏览器的内核不同，所以不同浏览器对于代码的解析就会不一样，这就造成了不同浏览器的显示效果不同，而我们的需求都是无论用户用那个浏览器登录我们的系统都应该是系统的效果。
详情参考：常见浏览器兼容性问题与解决方案

雪碧图处理应用技巧

CSS Sprites在国内很多人叫css精灵，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。对于当前网络流行的速度而言，不高于200KB的单张图片的所需载入时间基本是差不多的，所以无需顾忌这个问题。

该图片使用CSS background和background-position属性渲染，这也就意味着你的标签变得更加复杂了，图片是在CSS中定义，而非<img>标签。

详细实例：[雪碧图实现原理及应用]
(http://blog.csdn.net/kevin_cyj/article/details/51348765)

滑动门处理应用技巧

滑动门特效顾名思义就是像现实中的滑动门一样，滑到哪个部分就显示哪个部分的具体内容。

滑动门效果.png

实现滑动门的方式有很多，下面我列举三种方式：

js实现滑动门
html代码

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>滑动门特效-js</title>
<link type="text/css" rel="stylesheet" href="css/common.css" />
<link type="text/css" rel="stylesheet" href="css/sliding.css"/>
</head>
<body>
<h1>滑动门-js</h1>
<script language="javascript">
    function sliding(num){
        for(var id = 0;id<=3;id++)
        {
            if(id==num)
            {
                document.getElementById("con"+id).style.display="block";
                document.getElementById("nav"+id).className="on";
            }
            else
            {
                document.getElementById("con"+id).style.display="none";
                document.getElementById("nav"+id).className="";
            }
        }
    }
</script> 
<div id="menu">
    <ul id="nav">
        <li><a id="nav0" class="on" href="#" onmouseover="javascript:sliding(0)"><span>111</span></a></li><li class="line"></li>
        <li><a id="nav1" href="#" onmouseover="javascript:sliding(1)"><span>222</span></a></li><li class="line"></li>
        <li><a id="nav2" href="#" onmouseover="javascript:sliding(2)"><span>333</span></a></li><li class="line"></li>
        <li class="bgnone"><a id="nav3" href="#" onmouseover="javascript:sliding(3)"><span>444</span></a></li>
    </ul>
    <ul id="con">
        <li id="con0"><a href="#"><span>11111</span></a></li>
        <li id="con1"><a href="#"><span>22222</span></a></li>
        <li id="con2"><a href="#"><span>33333</span></a></li>
        <li id="con3"><a href="#"><span>44444</span></a></li>
    </ul>
    <div id="menu_l"></div>
    <div id="menu_r"></div>
</div>
</body>
</html>

common.css

@charset "utf-8";
h1,h2,h3,h4,h5,h6,ol,ul,li,dl,dt,dd{padding:0;margin:0;}
li{list-style:none;}
img{border:none;}
u{text-decoration:none;}
em{font-style:normal;}
a{color:#0064B1;text-decoration:none;outline:none;blr:expression(this.onFocus=this.blur());}
a:hover{color:#ff6700;text-decoration:underline;}
body{font-size:12px;color:#444;font-family:Arial,Verdana, Helvetica, sans-serif;word-break:break-all;}
.clear{height:0;overflow:hidden;clear:both;}
h1{font:bold 18px microsoft yahei; color:#ff6700;margin-bottom:20px;}
h2{ position:absolute;top:12px;right:20px;}
h2 a{ text-indent:-9999px; background:url(http://img.daqianduan.com/ui/logo.png) no-repeat; height:55px;width:130px; display:block;}

slidding.css

#menu_l,#menu_r{width:4px; height:73px; overflow:hidden; position:absolute; top:0; }
#menu_l{background:url(../images/menu_left.gif) no-repeat;left:-4px;}
#menu_r{background:url(../images/menu_right.gif) no-repeat;right:-4px;}
#menu{background:url(../images/menu_bg.gif) repeat-x;height:73px; width:960px; margin:0 auto;position:relative;}
#menu ul{ padding:0 16px; clear:both;}
/*导航栏*/
#nav li{float:left;height:35px;}
#nav li.line{background:url(../images/menu_line.gif) no-repeat center top;width:8px;}
#nav li a{float:left;display:block;padding-left:6px;height:35px;background:url(../images/menu_on_left.gif) no-repeat left top;cursor:pointer;text-decoration:none;}
#nav li a span{float:left;padding:11px 14px 10px 10px;line-height:14px;background:url(../images/menu_on_right.gif) no-repeat right top;font-size:14px;font-weight:bold;color:#ffffff;text-decoration:none;}
#nav li a.on{background-position:left 100%;}
#nav li a.on span{background-position:right 100%;color:#333333;text-decoration:none;padding:14px 14px 7px 10px;}
/*hover切换之后*/
#con li{ display:none;}
#con li.on,#con li#con0{ display:block;}
#con a{float:left;height:22px;margin-top:8px; margin-right:10px;display:block;float:left;background:url(../images/menu_on_left2.gif) no-repeat left top;cursor:pointer;padding-left:3px;}
#con a span{float:left;padding:6px 10px 4px 6px;line-height:12px;background:url(../images/menu_on_right2.gif) no-repeat right top;}
#con a:hover{text-decoration:none;background:url(../images/menu_on_left2.gif) no-repeat left bottom;}
#con a:hover span{background:url(../images/menu_on_right2.gif) no-repeat right bottom;}

jQuery实现滑动门
html代码

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>滑动门效果-jQuery</title>
<link type="text/css" rel="stylesheet" href="css/common.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<link type="text/css" rel="stylesheet" href="css/sliding.css"/>
</head>
<body>
<h1>滑动门-jquery</h1>
<script language="javascript">
$(function(){
    $("#nav a:first,#con li:first").addClass("on");
    $("#nav a").each(function(i){
        $(this).mouseover(function(){
            $(this).addClass("on").parent().siblings().find("a").removeClass("on");
            $($("#con li")[i]).show().siblings().hide();
        })
    })
})
</script> 
<div id="menu">
    <ul id="nav">
        <li><a id="nav0" class="on" href="#" onmouseover="javascript:sliding(0)"><span>111</span></a></li><li class="line"></li>
        <li><a id="nav1" href="#" onmouseover="javascript:sliding(1)"><span>222</span></a></li><li class="line"></li>
        <li><a id="nav2" href="#" onmouseover="javascript:sliding(2)"><span>333</span></a></li><li class="line"></li>
        <li class="bgnone"><a id="nav3" href="#" onmouseover="javascript:sliding(3)"><span>444</span></a></li>
    </ul>
    <ul id="con">
        <li id="con0"><a href="#"><span>11111</span></a></li>
        <li id="con1"><a href="#"><span>22222</span></a></li>
        <li id="con2"><a href="#"><span>33333</span></a></li>
        <li id="con3"><a href="#"><span>44444</span></a></li>
    </ul>
    <div id="menu_l"></div>
    <div id="menu_r"></div>
</div>
</body>
</html>

jQuery方法的css代码跟js是一样，只是js脚本的实现方法不一样，本地img图片就不上传了，除去图片样式滑动效果是可以显示的。

bootstrap实现滑动门(点击菜单切换，不懂的同志可以先了解一下bootstrap)

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"> 
    <title>Bootstrap 实例 - 标签页（Tab）插件事件</title>
    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<ul id="myTab" class="nav nav-tabs">
    <li class="active"><a href="#home" data-toggle="tab">
        菜鸟教程</a></li>
    <li><a href="#ios" data-toggle="tab">iOS</a></li>
    <li class="dropdown">
        <a href="#" id="myTabDrop1" class="dropdown-toggle" 
           data-toggle="dropdown">
            Java <b class="caret"></b></a>
        <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
            <li><a href="#jmeter" tabindex="-1" data-toggle="tab">jmeter</a></li>
            <li><a href="#ejb" tabindex="-1" data-toggle="tab">ejb</a></li>
        </ul>
    </li>
</ul>
<div id="myTabContent" class="tab-content">
    <div class="tab-pane fade in active" id="home">
        <p>菜鸟教程是一个提供最新的web技术站点，本站免费提供了建站相关的技术文档，帮助广大web技术爱好者快速入门并建立自己的网站。菜鸟先飞早入行——学的不仅是技术，更是梦想。</p>
    </div>
    <div class="tab-pane fade" id="ios">
        <p>iOS 是一个由苹果公司开发和发布的手机操作系统。最初是于 2007 年首次发布 iPhone、iPod Touch 和 Apple 
            TV。iOS 派生自 OS X，它们共享 Darwin 基础。OS X 操作系统是用在苹果电脑上，iOS 是苹果的移动版本。</p>
    </div>
    <div class="tab-pane fade" id="jmeter">
        <p>jMeter 是一款开源的测试软件。它是 100% 纯 Java 应用程序，用于负载和性能测试。</p>
    </div>
    <div class="tab-pane fade" id="ejb">
        <p>Enterprise Java Beans（EJB）是一个创建高度可扩展性和强大企业级应用程序的开发架构，部署在兼容应用程序服务器（比如 JBOSS、Web Logic 等）的 J2EE 上。
        </p>
    </div>
</div>
</body>
</html>

宽高自适应应用技巧

在做页面的过程中，都会遇到网页缩放的问题，当网页放大缩小之后页面也应该随之进行相应的变换，以下是我整理的解决办法：

PC端用bootstrap的栅格布局方法：
详细参考：深入理解BootStrap栅格系统（布局）
移动前端的自适应方法：
详细参考：移动前端自适应解决方案和比较

web前端开发【连载2】-兼容性和自适应

HTML与CSS的布局技巧

浏览器的基本发展情况

各种浏览器的兼容性以及处理方式

雪碧图处理应用技巧

滑动门处理应用技巧

宽高自适应应用技巧

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

大闹前端

Web前端之路

程序员

前端攻城狮