起點中文網分析

時間 2019-11-12

標籤起點中文網分析简体版

原文原文鏈接

Header：javascript

1.定位上下左右居中：left top bottom 均設爲0；（除去文字圖片盒子均適合不？）css

2.box-sizing:border-box; //控制盒子大小不變html

3.是否是爲了避免支持svg的瀏覽器就顯示輸入的字？？java

<h1 class="logo">起點中文網</h1>/jquery

color: transparent;
background: url(/qdm/img/logo-qdm.02fc8.svg) no-repeat center;git

4.data-l1="1" ， aria-label="已選擇" //有什麼用，怎麼用github

5.display：table，會定位元素嗎？？ table-layout又是什麼？web

display: table;
width: 100%;
margin-right: auto;
margin-left: auto;
table-layout: fixed;

6.fill是什麼屬性？？
fill: currentColor;ajax

7.svg中ex是什麼單位？？
vertical-align: -.25ex;數據庫

8.svg中path是怎麼造成的；

解答：

1.單是定位不能作到讓盒子上下左右居中，還要設置margin：auto；相對什麼居中跟設置的父元素的定位有關要設置position：relative；（答：盒子圖片都可設置居中）

原理：http://www.barretlee.com/blog/2014/08/07/position-and-margin/

3.製做svg網站：http://www.zhangxinxu.com/sp/svg/

svg在線預覽：http://www.bejson.com/ui/svg_editor/

圖片黑白svg轉換：http://picsvg.com/

參考：https://zhuanlan.zhihu.com/p/20836659?utm_source=tuicool&utm_medium=referral

4.data-*屬性參考：http://www.css88.com/archives/4715

原始：讀取和設置用getAttribute，setAttribute

如今：讀取和設置用dateset.*;判斷是否是存在該屬性'someDataAttr' in el.dataset返回布爾值；

　　　批量設置css： .class["data-name=red"]{}

aria-*:給殘疾盲人設置，會讀出內容，role //參考：http://blog.csdn.net/dearcode/article/details/52218689

5.參考：http://www.css88.com/archives/6308

display：table不是定位,不脫離標準流；display:table-row;display:table-cell;

6.fill: currentColor; fill是填充，currentColor是個很好用的變量，獲取當前盒子設置的字體的顏色，是根據盒子字體的顏色變化而變化的。

7.ex單位是小寫x的高度利用的是x-height這個屬性，會根據字體大小和種類變化。

8.svg的path能夠經過grunt-sprite等工具進行自動生成

輪播區域：

1.swiper能夠提取代碼嗎？爲何會和lazylode，zepto等在一個js中？

2.break on能夠監控頁面變換的元素找到代碼；那麼還有其餘的用處嗎？

3.媒體查詢區間此處被分爲375-414-600-1000，通常移動和pc都是怎麼分的？

答：

1.當多個文件用到一個的文件的時候，第一個文件請求後後面的文件就不須要在加載了；

附加，當一個文件中用到多個輪播的時候，怎麼區別定位到讓輪播各個顯示自身，swiper的各個class很多，而後在每個的最外層定義各自的盒子名。

<div id="slideContainer" class="slide-container swiper-container" data-l1="2">
    <ul id="slideUl" class="slide-ul swiper-wrapper">
        <li class="slide-li swiper-slide">
            <a href="1006629321.htm"  class="slide-a" style="padding: 0 .5px" data-eid="mqd_A06">
                <img src="img/0.jpg" class="slide-img" alt="彪悍的人生 ">
            </a>
        </li>
        <li class="slide-li swiper-slide">
            <a href="javascript:if(confirm(%27http://activity.qidian.com/2017/59618241?index=3&qd_dd_p1=2199  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?%27))window.location=%27http://activity.qidian.com/2017/59618241?index=3&qd_dd_p1=2199%27"
               class="slide-a" style="padding: 0 .5px" data-eid="mqd_A07">
                <img src="img/0-1.jpg"  data-src="0-1.jpg" class="slide-img">
            </a>
        </li>
    </ul>
    <div id="slideDot" class="slide-dot-x swiper-pagination">
        <i class="slide-dot active"></i>
        <i class="slide-dot"></i>
        <i class="slide-dot"></i>
        <i class="slide-dot"></i>
        <i class="slide-dot"></i>
    </div>
</div>
<div id="slideContainer" class="slide-container swiper-container swiper-container2" data-l1="2">
    <ul id="slideUl" class="slide-ul swiper-wrapper">
        <li class="slide-li swiper-slide">
            <a href="1006629321.htm"  class="slide-a" style="padding: 0 .5px" data-eid="mqd_A06">
                <img src="img/0.jpg" class="slide-img" alt="彪悍的人生 ">
            </a>
        </li>
        <li class="slide-li swiper-slide">
            <a href="javascript:if(confirm(%27http://activity.qidian.com/2017/59618241?index=3&qd_dd_p1=2199  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?%27))window.location=%27http://activity.qidian.com/2017/59618241?index=3&qd_dd_p1=2199%27"
               class="slide-a" style="padding: 0 .5px" data-eid="mqd_A07">
                <img src="img/0-1.jpg"  data-src="0-1.jpg" class="slide-img">
            </a>
        </li>
    </ul>
    <div id="slideDot" class="slide-dot-x swiper-pagination">
        <i class="slide-dot active"></i>
        <i class="slide-dot"></i>
        <i class="slide-dot"></i>
        <i class="slide-dot"></i>
        <i class="slide-dot"></i>
    </div>
</div>
</body>
<script src="js/jquery-2.2.4.min.js"></script>
<script src="js/swiper-3.4.0.jquery.min.js"></script>
<script>

    var swiper = new Swiper('.swiper-container', {
//        pagination: '.swiper-pagination',
        slidesPerView: 4,
//        paginationClickable: true,
        spaceBetween: 10,
        freeMode: true
    });

    var swiper2 = new Swiper('.swiper-container2', {
            pagination: '.swiper-pagination',
            effect: 'coverflow',
            grabCursor: true,
            centeredSlides: true,
            slidesPerView: 'auto',
            coverflow: {
                rotate: 50,
                stretch: 0,
                depth: 100,
                modifier: 1,
                slideShadows : true
            }
    });




</script>