js學習筆記6

4月27

1.列表操做:
列表的經常使用形式有圖片形式和信息形式,經常使用的操做
:顯示列表,選擇列表,新增列表,刪除列表,更新列表項


示例代碼:




二.頁面架構

1.佈局方案:

CSS Reset:全部的HTML標籤在沒有設置樣式的時候都被瀏覽器默認的樣式渲染,
CSS樣式重置就是刪除瀏覽器的默認樣式,能夠理解爲對於全局的樣式定義.對於開發者來講,
若不重置樣式,可能會形成不方便.

2.佈局解決方案:
瞭解CSS中屬性及其特性,分析問題和需求才能選擇和設計合適的佈局方案.

2.1水平居中

inline-block + text-align:兼容性好

<div class="parent">
    <div class="child">Demo</div>
</div>

<style>
    .child {
        display: inline-block;
    }
    .parent {
        text-align: center;
    }
</style>


2.2 table + margin:兼容ie8以上,無需設置父元素樣式

<div class="parent">
    <div class="child">Demo</div>
</div>

<style>
    .child {
        display: table;
        margin: 0 auto;
    }
</style>

2.3 absolute + transform:絕對定位脫離文檔流,不會影響後續元素的佈局,
CSS3兼容

<div class="parent">
    <div class="child">Demo</div>
</div>

<style>
    .parent {
        position: relative;
    }
    .child {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }
</style>


2.4 flex+justify-content:只需設置父元素的屬性,可是有兼容性問題

<div class="parent">
    <div class="child">Demo</div>
</div>

<style>
    .parent {
        display: flex;
        justify-content: center;
    }

    /* 或者下面的方法，能夠達到同樣的效果 */

    .parent {
        display: flex;
    }
    .child {
        margin: 0 auto;
    }
</style>



2.5 垂直居中


2.5.1 table-cell+ vertical-align:ie8以上

<div class="parent">
    <div class="child">Demo</div>
</div>

<style>
    .parent {
        display: table-cell;
        vertical-align: middle;
    }
</style>

2.5.2 absolute + transform
絕對定位脫離文檔流，不會對後續元素的佈局形成影響。
但若是絕對定位元素是惟一的元素則父元素也會失去高度。
<div class="parent">
    <div class="child">Demo</div>
</div>

<style>
    .parent {
        position: relative;
    }
    .child {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }
</style>


2.5.3 flex+align-items:
只需設置父節點屬性，無需設置子元素,有兼容性問題
<div class="parent">
    <div class="child">Demo</div>
</div>

<style>
    .parent {
        display: flex;
        align-items: center;
    }
</style>




2.6 水平與垂直居中

2.6.1  inline-block + text-align + table-cell + vertical-align
兼容性好
<div class="parent">
    <div class="child">Demo</div>
</div>

<style>
    .parent {
        text-align: center;
        display: table-cell;
        vertical-align: middle;
    }
    .child {
        display: inline-block;
    }
</style>


2.6.2 absolute + transform

絕對定位脫離文檔流，不會對後續元素的佈局形成影響。
<div class="parent">
    <div class="child">Demo</div>
</div>

<style>
    .parent {
        position: relative;
    }
    .child {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
</style>

2.6.3 flex + justify-content + align-items
只需設置父節點屬性，無需設置子元素
有兼容性問題

<div class="parent">
    <div class="child">Demo</div>
</div>

<style>
    .parent {
        display: flex;
        justify-content: center;
        align-items: center;
    }
</style>


5.3 多列布局

1.一列定寬,一列自適應

1.1 float + margin

<div class="parent">
    <div class="left">
        <p>left</p>
    </div>

    <div class="rigth">
        <p>right</p>
    </div>

</div>

<style>
    .left{
        float: left;
        width: 100px;
    }

    .rigth{
        margin-left: 100px;
    }
</style>
要兼容ie6,.left加入margin-left:-3px;

1.2 float+margin+(fix)


<div class="parent">
    <div class="left">
        <p>left</p>
    </div>

    <div class="right-fix">
        <div class="right">
            <p>right!</p>
        </div>
    </div>
</div>

<style>
    .left{
        float: left;
        width: 100px;
    }

    .right-fix{
        float: right;
        width: 100%;
        margin-left: -100px;
    }

    .right{
        margin-left: 100px;
    }
</style>

兼容性比較好


1.3 float + overflow

<style>
    .left{
        float: left;
        width: 100%;
    }

    .right{
        overflow: hidden;
    }
</style>

1.4  table

<style>
    .parent{
        display: table;
        width: 100%;
        table-layout: fixed;
    }

    .left{
        display: table-cell;
        width: 100px;
    }

    .right{
        display: table-cell;

    }
</style>


2 2列定寬,一列自適應

<div class="parent">
    <div class="left">
        <p>left!!!</p>
    </div>

    <div class="center">
        <p>Center!!</p>
    </div>

    <div>
        <p>Center!</p>
    </div>

    <div class="right">
        <p>right!!</p>
    </div>

</div>


<style>
    .left,.center{
        float: left;
        width: 100px;
        margin-right: 20px;
    }

    .right{
        overflow: hidden;
    }
</style>




響應式佈局

<head>    <meta charset="UTF-8">    <title>響應式佈局</title>    <!--媒體查詢-->    @media screen and (max-width: 320px) {    /* 視窗寬度小於等於 320px */    }    @media screen and (min-width: 320px) {    /* 視窗寬度大於等於 320px */    }    @media screen and (min-width: 320px) and (max-width: 1000px){    /* 視窗寬度大於等於 320px 且小於等於 1000px */    }    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"></head><body><!--頁面優化技巧--><p>    頁面優化能夠提高頁面的訪問速度從而提升用戶體驗，優化的頁面能夠更好的提高 SEO 的效果同時也能夠提升代碼的可讀性和維護性。    從下面的幾個方面能夠進行頁面的優化：    減小請求數        圖片合併        CSS 文件合併        減小內聯樣式        避免在 CSS 中使用 import    減小文件大小        選擇適合的圖片格式        圖片壓縮        CSS 值縮寫（Shorthand Property)        文件壓縮    頁面性能        調整文件加載順序        減小標籤數量        調整選擇器長度        儘可能使用 CSS 製做顯示錶現    加強代碼可讀性與可維護性        規範化        語義化        模塊化    1.減小請求    請求數與網頁加載時長有直接的關係。因此對於圖標能夠使用 Sprite 來減小小圖標的請求數，    對於文本則能夠經過合併縮小。（避免使用 import 引入 CSS 文件，而且請求是同步請求）    2.減小文件大小    頁面上最大的流量產生與多媒體（視頻或圖片）因此爲了減小文件大小，開發者須要使用合適的媒體格式並對文件進行壓縮。    3.頁面性能    頁面文件的加載順序自上而下，樣式則須要放置於最頂部，腳本則放置於底部（由於 JavaScript 的加載會阻塞頁面的繪製）。    減小標籤的數量也能夠起到提高性能的做用，縮短 CSS 選擇器的層級來提升性能。    減小使用消耗性能的樣式屬性例以下面的這些：    expression .class{width: expression(this.width > 100?'100px':'auto')}    filter .class{filter:alpha(opacity=50)}    border-radius    box-shadow    gradients    頁面中所使用的圖片尺子應該與現實尺寸相符不然在圖標下載後須要重繪致使性能降低。    能使用樣式（使用 CSS 的類名）實現的交互就不使用腳本（須要重繪致使屢次頁面渲染）來實現。    可讀性與可維護性    開發以前須要明確規範，尤爲是對人協做時。使用 HTML5 語義化的標籤來製做頁面，一樣也適用於樣式選擇器的 ID 與類名。    在使用開發中的奇技淫巧的適合須要深思是否須要使用。模塊化的製做頁面和樣式，提升可複用性並減小文件大小。    註釋註釋註釋，在代碼中添加註釋，利人利己。</p></body>