权威网站的设计都是有其可学之处的，如果有时间不防看看它们的源代码（HTML代码）。
至少可以学到这些吧：
1。页面布局风格；
2。Javascript代码，CSS原码；
2。CSS,Javascript脚本联合操纵Dom；
以微软的官方网站和MSN中国为例：
在微软的官方网站上已看不到table的影子，页面布局全部采用CSS+DIV控制。
最多用到的HTML元素恐怕就是DIV和UL了。
利用CSS可以精确的将DIV布置在页面的任何地方。
通过脚本控制轻易实现动感DIV效果。涉及到数据读取时可以采用富客户端方式（数据一次性加载到客户端），
也可以采用当下流行的AJAX方式。
下面是MSN中国上的一个效果：

整理后的HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML >
<HEAD>
<TITLE></TITLE>
    <META http-equiv=Content-type content="text/html; charset=utf-8">
    <style>
    H2.ttl02 {}{PADDING-LEFT: 10px; FONT-SIZE: 14px; BACKGROUND: #ebf3fb; COLOR: #07519a; LINE-HEIGHT: 25px; BORDER-BOTTOM: #ace 1px solid; POSITION: relative; HEIGHT: 25px; TEXT-ALIGN: left}
    H2.ttl02 SPAN {}{FONT-WEIGHT: normal; FONT-SIZE: 12px; RIGHT: 10px; POSITION: absolute; TOP: 0px}
    .proguid {}{BORDER-RIGHT: #ace 1px solid; BORDER-TOP: #ace 1px solid; MARGIN: 0px auto 20px; BORDER-LEFT: #ace 1px solid; WIDTH: 898px; BORDER-BOTTOM: #ace 1px solid; HEIGHT: 146px}
    .lftbtn {}{MARGIN-TOP: 26px; BACKGROUND: url(lefta.gif) no-repeat center 50%; FLOAT: left; MARGIN-LEFT: 6px; WIDTH: 29px; CURSOR: pointer; HEIGHT: 62px}
    .rgtbtn {}{MARGIN-TOP: 26px; BACKGROUND: url(lefta.gif) no-repeat center 50%; FLOAT: left; MARGIN-LEFT: 6px; WIDTH: 29px; CURSOR: pointer; HEIGHT: 62px}
    .rgtbtn {}{BACKGROUND: url(rightb.gif) no-repeat center 50%; FLOAT: left; MARGIN-LEFT: 0px; WIDTH: 29px; HEIGHT: 62px}
    .procro {}{FLOAT: left; MARGIN-LEFT: 15px; OVERFLOW: hidden; WIDTH: 812px; HEIGHT: 121px}
    .procroin {}{WIDTH: 1750px; HEIGHT: 121px}
    .procont {}{DISPLAY: inline; FLOAT: left; WIDTH: 248px; MARGIN-RIGHT: 28px    }
    </style>
    <SCRIPT language=javascript type=text/javascript>
    var step = 2;
    function prorgt()
    {
        while(document.getElementById("proccc").scrollLeft<828)
        {
            document.getElementById("proccc").scrollLeft = document.getElementById("proccc").scrollLeft+step;
        }
        document.getElementById("proccc").scrollLeft = 828;
        document.getElementById("srbtn").style.backgroundImage = "url(righta.gif)";
        document.getElementById("slbtn").style.backgroundImage = "url(leftb.gif)";
    }
    function prolft()
    {
        while(document.getElementById("proccc").scrollLeft>0)
        {
            document.getElementById("proccc").scrollLeft = document.getElementById("proccc").scrollLeft-step;
        }
        document.getElementById("proccc").scrollLeft = 0;
        document.getElementById("srbtn").style.backgroundImage = "url(rightb.gif)";
        document.getElementById("slbtn").style.backgroundImage = "url(lefta.gif)";
    }
    </SCRIPT>
</HEAD>
<BODY>
    <DIV class=proguid>
        <H2 class=ttl02>Title<SPAN><A href="#">help</A></SPAN></H2>
        <DIV class=lftbtn id=slbtn onmouseover=prolft()></DIV>
        <DIV class=procro id=proccc>
            <DIV class=procroin>
                <DIV class=procont>1111</DIV>
                <DIV class=procont>2222</DIV>
                <DIV class=procont>3333</DIV>
                <DIV class=procont>4444</DIV>
                <DIV class=procont>5555</DIV>
                <DIV class=procont>6666</DIV>
             </DIV>
        </DIV>
        <DIV class=rgtbtn id=srbtn onmouseover=prorgt()></DIV>
    </DIV>
</BODY>
</HTML>

标准的CSS＋DIV布局，在body中只有以下一些东西：
1。HTML元素（DIV,UL等）;
2。HTML元素对应的CSS（可以是Class也可以是Id对应）;
3。HTML元素对应的JavaScript事件(单击触发，鼠标滑过触发等);
4。HTML元素中的数据;
涉及布局，显示等全部在CSS中控制，例如：
◆字体效果:<font>，<strong>等
◆布局效果:<br>,<center>,<p>等
◆样式效果:<style>等
是不会出现在body中的
下面是微软中国的一个效果：

整理后的HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML>
<HEAD>
<TITLE>index</TITLE>
<META http-equiv=Content-Type content="text/html; charset=utf-8">
<STYLE type=text/css>
 html, body, p, table, td, form, img, h1, h2, h3, h4, h5, h6, input {}{ font-size: 1em; }
html, body, div, p, table, td, form, img, h1, h2, h3, h4, h5, h6, input {}{ font-family: Tahoma,Verdana,Segoe,sans-serif; padding: 0px; margin: 0px; border: 0px transparent none; background-position:left top; background-repeat:no-repeat; }
body{}{ font-size: 70%; background-color:#c8e3f1; }
#masterNav{}{ position:absolute; top:49px; right:15px; width:192px; z-index:70; }
#masterNavBody {}{ position:relative; zoom:1; }
#masterNavBody h1 {}{ margin-left:1px; margin-right:1px; cursor:pointer; position:relative; background-color:#eaebf0; }
#masterNavBody .active {}{ background-image:url('activemenubg.png'); }
#masterNavBody .inactive {}{ background-image:url('inactivemenubg.png'); }
#masterNavBody h1 .topNavText {}{ padding-left:19px; padding-bottom:3px; padding-top:14px; }
#masterNavBody h1 .arrow {}{ position:absolute; top:18px; left:5px; width:11px; height:11px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='arrow_dw.png', sizingMethod='crop'); }
#masterNavBody h1 .arrow[class] {}{ background-image:url('arrow_dw.png'); }
#masterNavBody h1.inactive .arrow {}{ top:15px; left:8px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='arrow_rt.png', sizingMethod='crop'); }
#masterNavBody h1.inactive .arrow[class] {}{ background-image:url('/shared/core/1/images/arrow_rt.png'); }
#masterNavFooter {}{ height:17px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bottombg.png', sizingMethod='crop'); }
#masterNavFooter[class] {}{ background-image:url('bottombg.png'); }
#masterNavLinks a, #masterNavLinks a:visited {}{ display:block; padding-top:3px; padding-bottom:4px; padding-left:21px; padding-right:20px; color:#000000; text-decoration:none; }
#masterNavLinks a:hover {}{ background-image:url('hover_noani1.gif'); background-repeat:repeat-y; }
#masterNavLinks a.activeNav, #masterNavLinks a.activeNav:hover {}{ background-image:url('mainmenuselected.jpg'); }
#masterNavLinks {}{ padding-left:1px; padding-right:1px; overflow:hidden; }
#masterNavLinks .container {}{ background-image:url('mainmenubg.gif'); background-repeat:repeat-x; background-color:#FFFFFF; padding-top:10px; padding-bottom:10px; }
#masterNavScreen {}{ display:none; position:absolute; top:0px; left:0px; width: 933px; background-color:#000000; filter: alpha(Opacity=25); -moz-opacity:0.25; z-index:1; }
#masterNavSearch {}{ background-image:url('searchboxbg.gif'); margin:0 1px; background-color:#bac1cc; height:51px; position:relative; }
#mnsRad {}{ margin:2px 0; position:absolute; top:30px; right:5px; font-family:Tahoma; font-size:82%; color:#737373; }
#mnsRad img {}{margin: 0 3px 0 6px; vertical-align:middle;}
#masterNavSearch #searchTextDiv {}{ background-image:url('search_box.gif'); position:absolute; left:5px; top:10px; width:168px; height:22px; }
#masterNavSearch #q {}{ position:absolute; top:2px; left:5px; width:156px; border: solid 1px #FFFFFF; background-color:#FFFFFF; }
#masterNavSearch .watermark#q {}{ font-style:italic; color:#544a4c; }
#masterNavSearch #submit {}{ position:absolute; right:4px; top:10px; }
#masterNavTitle {}{ width:192px; height:21px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='topbg.png', sizingMethod='crop'); }
#masterNavTitle[class] {}{ background-image:url('topbg.png'); }
.left_flt {}{ float:left; }
.left_flt_txt {}{ padding-top:2px; }
</STYLE>
<SCRIPT type=text/javascript>
 function getObject(elementId) { if (document.getElementById) { return document.getElementById(elementId); } else if (document.all) { return document.all[elementId]; } else if (document.layers) { return document.layers[elementId]; } } 
 function getTargetFromEvent(e) { if (!e) var e = window.event; if (e.target) var tg = e.target; else if (e.srcElement) var tg = e.srcElement; while (tg.nodeType != 1) tg = tg.parentNode; return tg; } 
 var KPF=null; 
 function KP(o){ var k = GKBH(o); if(k==13||k==32) { eval(KPF); return false; } return k; } 
 function GKBH(o) { var k; try{k=(window.event != null && window.event.keyCode != null) ? window.event.keyCode : e.which;}catch(e){k=null;}; return (k==null && o !=null && o.keyCode !=null)? o.keyCode : k; } 
 var mnl; var mnl_h; var mnl_oh; var isE=true; var timer; var closeWhileCollapse=false; 
 function navH1Click(e){ if(timer){ clearInterval(timer); timer = null; }
 var target=getTargetFromEvent(e); mnl = getObject('masterNavLinks'); 
 if(target && mnl){ if(target.nodeName != 'H1') { target = target.parentNode; } mnl_h = mnl.offsetHeight; if(!mnl_oh){ mnl_oh = mnl_h; } isE = !isE; if(isE) { target.className = 'active'; } else { target.className = 'inactive'; } navH1Interval(); timer = setInterval(navH1Interval, 1); } } 
 function navH1Interval(){ var isFinishedExpanding=false; if(mnl_h <= 0 && isE) { var o =getObject('masterNavLinks'); if(null!=o){o.style.display='block';} } if(!isE){ mnl_h -= 20; } else{ mnl_h += 20; } if(mnl_h < 0){ mnl_h = 0; } else if(mnl_h > mnl_oh){ mnl_h = mnl_oh; mnl.style.height="auto"; isFinishedExpanding=true; } if(!isFinishedExpanding) mnl.style.height = mnl_h+'px'; if(mnl_h <= 0 || mnl_h >= mnl_oh) { if(mnl_h <= 0 && !isE) { var o =getObject('masterNavLinks'); o.style.display='none'; } clearInterval(timer); timer = null; var masterNavLinks = getObject('masterNavLinks'); if(closeWhileCollapse && isE && masterNavLinks && masterNavLinks.childNodes){ closeWhileCollapse = false; resetNavToFirst(masterNavLinks); } } } 
 function navClick(e){var target=getTargetFromEvent(e);for(var i=0;i<target.parentNode.childNodes.length;i++){ var node = target.parentNode.childNodes[i]; if(node && node.nodeName == 'A'){ node.className=''; } } target.className = 'activeNav';} 
 function loadPage() { try{ if(eval('nP')) { var masterNavLinks = getObject('masterNavLinks'); if(masterNavLinks && masterNavLinks.childNodes){ for(var i=0;i<masterNavLinks.childNodes.length;i++){ var node = masterNavLinks.childNodes[i]; if(node && node.className == 'container' && node.childNodes) { for(var j=0;j<node.childNodes.length;j++){ var link = node.childNodes[j]; if(link && link.nodeName == 'A' && link.className.indexOf('link') == -1){ link.onclick=navClick; } } } } } var masterNavBody = getObject('masterNavBody'); if(masterNavBody && masterNavBody.childNodes){ for(var i=0;i<masterNavBody.childNodes.length;i++){ var node = masterNavBody.childNodes[i]; if(node && node.nodeName == 'H1'){ node.onclick=navH1Click; } } } } }catch(e){;} } 
 window.onload = loadPage; 
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT type=text/javascript>var nP='/global/SiteTemplates/553a6c5f-895b-4785-84e2-1f651d0fffe1.xml';</SCRIPT>
<DIV id=masterNav>
    <DIV class=png id=masterNavTitle>&nbsp;</DIV>
    <DIV class=png id=masterNavSearch>
        <DIV class=png id=searchTextDiv><INPUT id=q  title=搜索 maxLength=256 name=q></DIV>
        <INPUT id=submit type=image alt=搜索 src="icon_search.gif">
        
        <DIV id=mnsRad>
        <DIV class="left_flt left_flt_txt">powered by</DIV>
        <DIV class=left_flt><IMG title="Live Search" height=15 alt="Live Search" src="ls.gif" width=17></DIV>
        <DIV class="left_flt left_flt_txt">Live&nbsp;Search</DIV></DIV>
    </DIV>
    <DIV id=masterNavBody>
        <H1 class=active onkeydown="if (!KP(event)){navH1Click(event);return true;}else{return event;};" onfocus="KPF='null';" tabIndex=0>
            <DIV class=arrow>&nbsp;</DIV>
            <DIV class=topNavText>All</DIV>
        </H1>
        <DIV id=masterNavLinks>
            <DIV class=container>
                <A class="link activeNav" href="#">1</A>
                <A  href="#">2</A>
                <A  href="#">3</A>
                <A  href="#">4</A>
                <A  href="#">5</A>
                <A  href="#">6</A>
            </DIV>
        </DIV>
    </DIV>
    <DIV class=png id=masterNavFooter>&nbsp;</DIV>
</DIV>
<DIV id=masterNavScreen>&nbsp;</DIV>
</BODY>
</HTML>

其中有很多JavaScript函数我们大可直接拿来。(如library)
以上两个例子的原码下载：微软&MSN

-----------------------20090320补充------------------------------

效果：

代码：

Code
<!DOCTYPE HTML PUBLIC "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html ><head>
    <title > </title>
    <style>
        body {margin:0px;border:0px;font-size:12px;font-family:宋体;background-color:#fff;}
        a:link{color: #003278;text-decoration: none;}a:visited{color: #003278;text-decoration: none;}
        a:hover{color: #FF6600;text-decoration: underline;}
    #slideBox,#slideBox .l, #slideBox .r, #slideBox .l_h, #slideBox .r_h, #slideBox .cont_l, #slideBox .cont_r
    {background:url(http://img.china.alibaba.com/images/cn/home/071028/icon_sum.gif) no-repeat;}
    #slideBox{background-position:-213px 0px;height:168px;width:178px;padding-left:5px;padding-right:5px;float:right;}
    #slide{padding-top:5px}#slide li img{margin-right:3px}
    #slideBox  ul{padding:0;margin:0;clear:both;list-style:none;overflow:hidden}
    #slideBox  li{float:left;font-weight:bold;height:37px !important;height:27px;}
    #slideBox  li a:link,#slideBox  li a:visited{color:#000;}
    #slideBox  li a:hover{color:#ff7300;text-decoration: none}
    #slideBox .l{background-position:0px -50px;width:80px;}
    #slideBox .r{background-position:-100px -50px;width:94px;float:right}
    #slideBox .l_h{background-position:0px -450px;width:80px;}
    #slideBox .r_h{background-position:-100px -450px;width:94px;float:right;}
    #slideBox img{margin:0px; padding:0px;border:0px;}
    #slideBox .hide{display:none}
    #slideBox .l a{width:52px;}
    #slideBox .r a{width:68px;}
    .arrow{padding-left:0px;background-position:0px -198px;}
    #slideBox .l a,#slideBox .r a,#slideBox .l_h a,#slideBox .r_h a{padding-left:18px;display:block;height:100%;padding-top:10px;}
    #slideBox .cont_l{float:left;background-position:-550px -150px;width:157px;height:31px;padding:9px 7px 7px 14px;margin-bottom:4px;overflow:hidden;}
    #slideBox .cont_r{float:left;background-position:-550px -100px;width:157px;height:31px;padding:9px 7px 7px 14px;margin-bottom:4px;overflow:hidden;}
    #slideBox .oneline{line-height:33px;}
    </style>
</head>
<body>

<!--slidebox start-->
                    <div id="slideBox" twffan="done">
                        <div id="slide" twffan="done">
                            <ul>
                                <li class="l_h">
                                    <a id="slideBtn_1" href="#">menu1</a> 
                                </li>
                                <li class="r">
                                    <a id="slideBtn_2" href="#">menu2</a> 
                                </li>
                            </ul>
                            <div class="cont_l" id="sc_1" twffan="done">
                                    content1
                                </div>
                            <div class="hide" id="sc_2" twffan="done">
                                        content2
                                </div>
                            <ul>
                                <li class="l">
                                    <a  id="slideBtn_3" href="#">menu3</a> 
                                </li>
                                <li class="r">
                                    <a  id="slideBtn_4" href="#">menu4</a> 
                                </li>
                            </ul>
                            <div class="hide" id="sc_3" twffan="done">
                                content3
                            </div>
                            <div class="hide" id="sc_4" twffan="done">
                            content4
                            </div>
                            <ul>
                            <li class="l">
                                <a id="slideBtn_5" href="#">menu5</a>
                            </li>
                            <li class="r">
                                <a id="slideBtn_6" href="#">menu6</a> 
                             </li>
                            </ul>
                            <div class="hide" id="sc_5" twffan="done">
                                content5
                            </div>
                            <div class="hide" id="sc_6" twffan="done">
                                content6
                            </div>
                        </div>
                    </div>
                    <script type="text/javascript">
                        var slideTabIndex=1;
                        var sTabList = document.getElementById("slideBox").getElementsByTagName("li");
                        for(var i=0;i<sTabList.length;i++){
                        var obj = sTabList[i].getElementsByTagName("a")[0];
                        sTabList[i].getElementsByTagName("a")[0].id="slideBtn_"+(i+1);
                        if (obj.addEventListener) {
                        obj.addEventListener( "mouseover", overSlide, false );
                        }
                        else if (obj.attachEvent) {
                        obj.attachEvent( "onmouseover", overSlide );
                        }
                        }
                        function overSlide(e){
                        e = window.event || e;
                        var srcElement = e.srcElement || e.target;
                        var newTabIndex=srcElement.id.replace("slideBtn_","");
                        var pos = srcElement.parentNode.className;
                        if(newTabIndex==""||pos.indexOf("_h")!=-1)return;
                        document.getElementById("slideBtn_"+slideTabIndex).parentNode.className=document.getElementById("slideBtn_"+slideTabIndex).parentNode.className.replace("_h","");
                        document.getElementById("sc_"+slideTabIndex).className="hide";
                        document.getElementById("sc_"+newTabIndex).className="cont_"+pos;
                        srcElement.parentNode.className = pos+"_h";
                        slideTabIndex=newTabIndex;
                        }

</script>
                    <!--slidebox end-->
</body></html>

从权威网站上“偷”窃相关推荐

  1. 要在医疗保健网站上使用SEO的6个原因

    不断变化的医疗保健行业已导致几家公司逐渐意识到数字营销的重要性.随着越来越多的人上网,医疗保健业开始建立自己的网站. 无论您是谈论牙科诊所网站还是家庭护理网站设计,网站设计和开发在任何医疗保健业务中都 ...

  2. 我使用Python和Django在自己的网站上建立了一个会员专区。 这是我学到的东西。

    I decided it was time to upgrade my personal website in order to allow visitors to buy and access my ...

  3. qu.la网站上的小说爬取

    qu.la网站上的小说爬取 ##这个项目是我最早开始写的爬虫项目,代码比较简陋 在写这个项目时,我还不会Python的协程编程,用协程可提升爬虫速度至少5倍,参考我的文章[线程,协程对比和Python ...

  4. 网站上传到服务器mysql数据库,网站上传到服务器mysql数据库吗

    网站上传到服务器mysql数据库吗 内容精选 换一换 安装MySQL本文档以"CentOS 6.5 64bit(40GB)"操作系统为例,对应MySQL版本为5.1.73.Cent ...

  5. 你社交网站上的照片，也许已经被用来训练人工智能了

    来源:网易智能 斯特于2013年拍摄的这张照片被收录在IBM的人像数据集(Diversity in Faces)中 毫无疑问,这张家庭照片是非常可爱的:照片中的爸爸留着短须,戴着无框眼镜,棕色头发的妈 ...

  6. Crawler：反爬虫之基于urllib库+伪装浏览器方式实现从各种网站上（以百度贴吧为例）获得你喜欢的照片下载到本地电脑上

    Crawler:反爬虫之基于urllib库+伪装浏览器方式实现从各种网站上(以百度贴吧为例)获得你喜欢的照片下载到本地电脑上 目录 输出结果 实现代码 输出结果 后期更新-- 实现代码 import ...

  7. 如何将 SAP UI5 应用托管到 Github 网站上并运行

    本文我本来想用标题"如何将 SAP UI5 应用部署到 Github 网站上并运行",但实际上这种操作并没有真正将 SAP UI5 应用部署到传统意义上的服务器,而仅仅是利用了 G ...

  8. idea重要插件代码颜色_颜色在您的网站上的重要性和品牌形象

    idea重要插件代码颜色 Choosing the right colors for a website or a logo can be a perplexing and time-consumin ...

  9. 网站图片多服务器选多大,网站上的图片一般多大合适

    网站上的图片一般多大合适 内容精选 换一换 安装了SSL证书后,访问网站时,HTTPS比HTTP要多几次握手的时间,HTTPS协议握手阶段比较费时,同时还要进行RSA校验,因此使用了SSL证书后,相较 ...

最新文章

  1. EIGRP OSFP 利用NULL0接口防止路由环路 Loopback Null0接口揭秘
  2. Spring Boot解决无法访问图片的问题
  3. About “PostMessage” SendMessage
  4. 洛谷P3155：叶子的染色（树形dp）
  5. 题解---2015年浙江理工12月校赛
  6. python同时发送与接收_Python如何发送与接收大型数组
  7. java大致了解_学习Java第一天，大致了解
  8. 晶圆代工28nm制程市场动向
  9. Bailian4130 踩方格【组合+打表】
  10. I/O设备与主机的联系方式
  11. Linq转换操作之OfType,Cast,AsEnumerable,ToLookup源码分析
  12. 《linux内核完全注释》读书笔记 2
  13. Linux 网络编程 TCP/UDP编程
  14. 怎样用比较器实现信号的衰减和饱和_高频小信号LC谐振放大器的设计思路与具体电路实现...
  15. Qt 之字体设置(QFont)详解
  16. mysql的yearweek 和 weekofyear函数
  17. 深度学习的几何观点：1流形分布定律、2学习能力的上限。附顾险峰教授简历(长文慎入，公号回复“深度学习流形分布”可下载PDF资料)
  18. python实现经典密码学中列移位算法
  19. php实现ckeditor编辑器添加水印及使用误区
  20. Docker:run镜像后使用ps命令查不到解决办法

热门文章

  1. 苏大计算机考研复试没过调剂,差一分的遗憾，调剂给你补回来
  2. 基于Volcano 3D游戏引擎开发一个类似魔兽世界的场景
  3. modelsim 仿真软件 百度云分享 questasim modelsim se 2019.2 10.7 10.6d 10.6c 10.5 10.4
  4. c++语言截取字符串,详解C++ string常用截取字符串方法
  5. 查询出部门编号为30的所有销售的详细信息
  6. 【软件体系结构】考点总结 第四章 软件体系结构描述 XJU
  7. 胸大肌（02）：史密斯卧推
  8. java难点_JAVA-详细分析JAVA中的难点与重点
  9. 手机自带计算机的功能,Win10自带手机投屏功能，80%的人居然都不知道
  10. centos7.4同步系统时间和网络时间