<th id="ik4gr"><pre id="ik4gr"></pre></th>
<rp id="ik4gr"></rp>
    <dd id="ik4gr"></dd>

  1. <rp id="ik4gr"><object id="ik4gr"><blockquote id="ik4gr"></blockquote></object></rp>
      <rp id="ik4gr"></rp>
        <button id="ik4gr"><acronym id="ik4gr"></acronym></button>
      1. <rp id="ik4gr"><object id="ik4gr"><input id="ik4gr"></input></object></rp>
        1. 課程咨詢 :0571-56026878 QQ:875338579

          杭州達內

          • 阿里巴巴web前端開發面試題

            發布:杭州達內      來源:達內培訓      時間:2015-08-25


          •     第一部分:用CSS實現布局

                讓我們一起來做一個頁面

                首先,我們需要一個布局。

                請使用CSS控制3個div,實現如下圖的布局。

                用CSS實現布局

                第二部分:用javascript優化布局

                由于我們的用戶群喜歡放大看頁面

                于是我們給上一題的布局做一次優化。

                當鼠標略過某個區塊的時候,該區塊會放大25%,

                并且其他的區塊仍然固定不動。

                用javascript優化布局

                提示:

                也許,我們其他的布局也會用到這個放大的效果哦。

                可以使用任何開源代碼,包括曾經你自己寫的。

                關鍵字:

                javascript、封裝、復用

                第三部分:處理緊急情況

                好了,我們的頁面完成了。

                于是我們將頁面發布上網。

                突然,晴天霹靂,頁面無法訪問了,這時候,你會怎么做?

                第一題個人實現:

                <html>
                      <style type="text/css">
                            body, div{margin: 0;padding: 0;}
                            .fl{float: left; display: inline;}
                            .bc_C{background-color: #CCC;}
                            .h120{height: 120px;}
                            .h250{height: 250px;}
                            .w120{width: 120px;}
                            .w220{width: 220px;}
                            .t130{top: 130px;}
                            .pa{position: absolute;}
                            .mr10{margin-right: 10px;}
                            .mb10{margin-bottom: 10px;}
                      </style>
                      <body>
                            <div class="fl bc_C h120 w120 mb10 mr10"></div>
                            <div class="fl bc_C h250 w220"></div>
                            <div class="bc_C h120 w120 t130 pa"></div>
                      </body>
                </html>

                第二題個人實現:(為了第二題 把第一題的布局稍微變動了下,都變成了絕對定位)

                <html>
                      <style type="text/css">
                            body, div{margin: 0;padding: 0;}
                            .fl{float: left; display: inline;}
                            .bc_C{background-color: #CCC;}
                            .h120{height: 120px;}
                            .h250{height: 250px;}
                            .w120{width: 120px;}
                            .w220{width: 220px;}
                            .t130{top: 130px;}
                            .l130{left: 130px;}
                            .pa{position: absolute;}
                            .mr10{margin-right: 10px;}
                            .mb10{margin-bottom: 10px;}
                            .clear{clear: both}
                      </style>
                      <body>
                            <div class="bc_C h120 w120 mb10 mr10 pa" id="first"></div>
                            <div class="bc_C h250 w220 l130 pa" id="second"></div>
                            <div class="bc_C h120 w120 t130 pa" id="third"></div>
                      </body>
                      <script type="text/javascript">
                            function zoom(id, x, y){
                                  var obj = document.getElementById(id); //設置縮放函數參數:容器id、橫向縮放倍數、縱向縮放倍數
                                  var bw = obj.clientWidth; //獲取元素寬度
                                  var bh = obj.clientHeight; //獲取元素高度
                                  obj.onmouseover = function(){
                                        this.style.width = bw*x+"px";
                                        this.style.height = bh*y+"px";
                                        this.style.backgroundColor = "#f7b";
                                        this.style.zIndex = 1000;
                                  }
                                  obj.onmouseout = function(){
                                        this.style.width = bw+"px";
                                        this.style.height = bh+"px";
                                        this.style.backgroundColor = "";
                                        this.style.zIndex = "auto";
                                  }
                            }
                            zoom("first", 1.25, 1.25);
                      </script>
                </html>

          上一篇:沒有上一篇了

          下一篇:web前端工程師企業面試題

          最新開班日期  |  更多

          童程童美少兒編程班

          童程童美少兒編程班

          開班日期:1. 工作日;晚上 2. 周末;全天

          linux培訓班

          linux培訓班

          開班日期:申請咨詢

          C++培訓班

          C++培訓班

          開班日期:申請咨詢

          3D大數據培訓班

          3D大數據培訓班

          開班日期:申請咨詢

        2. 地址:杭州西湖區教工路求是大廈10~12層
        3. 課程培訓電話:0571-56026878 QQ:875338579     全國服務監督電話:400-111-8989
        4. 服務郵箱 tousu@tedu.cn
        5. 2002-2018 達內時代科技集團有限公司 版權所有 京ICP證8000853號-56

          香蕉视频在线一级a做爰片免费观看视频 欧美成年性色生活片 百度 好搜 搜狗
          <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <文本链> <文本链> <文本链> <文本链> <文本链> <文本链>