Html與CSS學習記錄三

阿新 • • 發佈：2018-11-08

元素的顯示與隱藏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: blue;
            display: block;         none:隱藏某個元素，不保留位置      
            visibility: visible;    hidden：隱藏某個元素，保留位置
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>

案例：仿土豆顯示透明盒子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        a{
            display: block;
            width: 448px;
            height: 252px;
            margin: 100px;
            position: relative;
        }
        .mask{
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,.4) url("images/arr.png") no-repeat center;
            position: absolute;
            top: 0;
            left: 0;
            display: none;
        }
        a:hover .mask{
            display: block;
        }
    </style>
</head>
<body>
<a href="#">
    <img src="images/tudou.jpg" height="252" width="448">
    <div class="mask"></div>
</a>
</body>
</html>

溢位隱藏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            border: 1px solid blue;
            overflow: hidden;   溢位隱藏
                       scroll    顯示滾動條
                       auto      自動
        }
    </style>
</head>
<body>
    <div>
        啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
        ...許多文字...
    </div>
</body>
</html>

滑鼠樣式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div{
            cursor: move;     拖拉十字架樣式
                     pointer   小手樣式
                     text      預設的那個文字選擇的，有點像大寫的 I
                     default   不發生變化
        }
    </style>
</head>
<body>
    <div>
        啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
        ...許多文字...
    </div>
</body>
</html>

輪廓線和文字域寬高屬性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        input{
            outline: none;       獲得焦點之後，預設有一個輪廓線通過這個屬性，可以取消輪廓線
            border: 1px solid #ccc;
            width: 200px;
            height: 25px;
            background: url("images/s.png") no-repeat 180px center;
        }
        textarea{
            resize: none;         取消文字域的可拖拉效果
        }
    </style>
</head>
<body>
    <input type="text">
    <textarea cols="30" rows="20"></textarea>  cols:多少行     rows:多少列
</body>
</html>

垂直對齊的使用：vertical-align

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        img{
            vertical-align: middle;
        }
        div{
            border: 2px solid red;
        }
    </style>
</head>
<body>
    <div>
        <img src="images/tudou.jpg" height="252" width="448">
        hello world
    </div>
</body>
</html>

溢位文字通過省略號來進行顯示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        body{
            padding: 30px;
        }
        li{
            list-style: none;
            width: 200px;
            height: 30px;
            border: 1px solid blue;
            white-space: nowrap;     強制同一行顯示，除非遇到br標籤
            overflow: hidden;
            text-overflow: ellipsis; 溢位的部分使用省略號代替
            line-height: 30px;
        }
    </style>
</head>
<body>
    <ul>
        <li>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</li>
        ...多個li標籤...
    </ul>
</body>
</html>

精靈圖的使用：減輕伺服器高併發壓力。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        h3{
            background: url("images/index.png") no-repeat -2px -184px;
            width: 26px;
            height: 26px;
        }
        div{
            width: 236px;
            height: 106px;
            background: url("images/index.png") no-repeat 0 -350px;
        }
    </style>
</head>
<body>
    <h3></h3>
    <div></div>
</body>
</html>

案例：精靈圖，獲取自己的名字

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        span{
            display: inline-block;
            background: url("images/abcd.jpg") no-repeat;
        }
        .aa{
            width: 108px;
            height: 110px;
            background-position: 0 -9px;
        }
        .n{
            width: 112px;
            height: 110px;
            background-position: -255px -276px;
        }
        .d{
            width: 97px;
            height: 107px;
            background-position: -363px -8px;
        }
        .y{
            width: 110px;
            height: 110px;
            background-position: -367px -556px;
        }
    </style>
</head>
<body>
    <span class="aa"></span>
    <span class="n"></span>
    <span class="d"></span>
    <span class="y"></span>
</body>
</html>

案例：微信滑動門效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            background:url("images/wx.jpg") repeat-x;
        }
        .nav li{
            float: left;
        }
        .nav a{
            height: 33px;
            line-height: 33px;
            color: #fff;
            text-decoration: none;
            background: url("images/to.png") no-repeat;
            display: inline-block;
            padding-left: 15px;
        }
        .nav span{
            background: url("images/to.png") no-repeat right;
            display: inline-block;
            height: 33px;
            padding-right: 15px;
        }
        .nav a:hover{
            background-image: url(images/ao.png);
        }
        .nav a:hover span{
            background-image: url(images/ao.png);
        }
    </style>
</head>
<body>
    <ul class="nav">
        <li>
            <a href="#">
                <span>首頁</span>
            </a>
        </li>
        <li>
            <a href="#">
                <span>客戶端</span>
            </a>
        </li>
        <li>
            <a href="#">
                <span>微信小程式</span>
            </a>
        </li>
    </ul>
</body>
</html>

字型圖示的使用：一些可以當做字型的圖示。使用需要先官網下載，使用也用固定的格式。

*下載的壓縮包不要刪除，裡邊有一些東西，圖示顯示的時候要使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        @font-face {            宣告字型  引用字型，固定格式不需要記憶
            font-family: "icomoon";  我們自己起名字可以
            src:  url('fonts/icomoon.eot?7kkyc2');   相容ie，四種格式需要匯入四次
            src:  url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
            url('fonts/icomoon.ttf?7kkyc2') format('truetype'),
            url('fonts/icomoon.woff?7kkyc2') format('woff'),
            url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
            font-style: normal;    傾斜字型正常
        }
        span{
            font-family: 'icomoon';
            font-size: 100px;
            color: blue;
            fond-style:normal;
        }
        .car{
            font-family: 'icomoon';
        }
    </style>
</head>
<body>
    <span></span>
    <div class="car"></div>     上邊那個注意說的就是這裡，看到div中間的那個東西，字型圖示需要使用的就是，壓縮包中demo.html中粘過來的。
</body>
</html>

行高不帶單位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            line-height: 2;   不帶單位表達的是倍數，如這裡值得是，32px
        }
        div{
            border: 1px solid black;
            font-size: 16px;
        }
    </style>
</head>
<body>
    <div>行高不帶單位</div>
</body>
</html>

綜合案例：京東首頁仿寫，一小部分實現。

* title 的複製

*tab中ico的顯示。( https://www.jd.com/favicon.ico 所有的網站都可以通過這種方式來獲取，ico圖示，注：不是圖片)

*匯入初始化css normalize.css

*base.css中寫入一些公共的類樣式，供直接使用，如版心的寬、位置。頭部和底部的樣式

*匯入首頁的css樣式 index.css

*頭部的分析：一個黑色的背景+居中的版心+關閉的按鈕分析之後，就可以程式碼實現了。

*快捷導航欄：左邊和右邊兩個。清除padding和margin。

*header部分的編寫：其中包含多個元素並且使用了絕對定位來實現排版。logo+搜尋框+搜尋框底部熱詞+右部的定點陣圖片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>京東(JD.COM)-正品低價、品質保障、配送及時、輕鬆購物！</title>
    <!--網站說明,瀏覽器訪問時，顯示的文字宣告-->
    <meta name="description" content="京東JD.COM-專業的綜合網上購物商城,銷售家電、數碼通訊、電腦、家居百貨、服裝服飾、母嬰、圖書、食品等數萬個品牌優質商品.便捷、誠信的服務，為您提供愉悅的網上購物體驗!" />
    <!--關鍵字，進行搜尋時的查詢關鍵字-->
    <meta name="Keywords" content="網上購物,網上商城,手機,筆記本,電腦,MP3,CD,VCD,DV,相機,數碼,配件,手錶,儲存卡,京東" />
    <link rel="shortcut icon" href="favicon.ico"/>       標題圖片
    <link rel="stylesheet" href="css/normalize.css">     預設設定
    <link rel="stylesheet" href="css/base.css">          公用的設定
    <link rel="stylesheet" href="css/index.css">         首頁的設定
</head>
<body>
    <!--頂部開始-->
    <div class="J_event">                                  頂部的背景
        <a href="#" class="w">                             居中的版心
            <i></i>                                          關閉的按鈕
        </a>
    </div>
    <!--頂部結束-->
    <!--快捷導航開始-->
    <div class="shortcut">                                 快件導航欄（分兩部分：版心+兩邊）
        <div class="w">                                     版心
            <ul class="fl">                                 左浮動定點陣圖標
                <li>
                    <i class="pos"></i>
                    北京
                </li>
            </ul>
            <ul class="fr">                                 右浮動的快鍵導航部分
                <li>
                    <a href="#">
                        你好，請登入&nbsp;&nbsp;
                    </a>
                    <a href="#" class="style-red">        引用紅色樣式，注：這裡優先順序不夠，css中設定了優先順序
                        免費註冊
                    </a>
                </li>
                <li class="spacer"></li>                   快捷導航中間的豎線
                <li>
                    <a href="#">
                        我的訂單
                    </a>
                </li>
                <li class="spacer"></li>
                <li class="dropdown">                      有些快捷導航標籤，有一個向下的箭頭
                    <a href="#">
                        我的京東
                    </a>
                    <i></i>
                </li>
                <li class="spacer"></li>
                <li>
                    <a href="#">
                        京東會員
                    </a>
                </li>
                <li class="spacer"></li>
                <li>
                    <a href="#">
                        企業採購
                    </a>
                </li>
                <li class="spacer"></li>
                <li class="dropdown">
                    <a href="#">
                        客戶服務
                    </a>
                    <i></i>
                </li>
                <li class="spacer"></li>
                <li class="dropdown">
                    <a href="#">
                        網站導航
                    </a>
                    <i></i>
                </li>
                <li class="spacer"></li>
                <li style="position: relative; z-index: 1;">    手機京東這有一個二維碼，為了不影響下邊所有標籤的實現
                    <a href="#">
                        手機京東
                    </a>
                    <div class="erweima">
                        <img src="images/erweima.png" alt="">
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <!--快捷導航結束-->
    <!--header部分開始-->
    <div class="header">
        <div class="w inner">                                    頭部包含五部分：logo+搜尋框+熱詞+定點陣圖片。使用絕對定位來實現定位
            <!--logo部分-->
            <div class="logo">
                <h1>
                    <a href="#" title="京東網">京東</a>
                </h1>
            </div>
            <!--搜尋部分-->
            <div class="search">
                <input type="text" value="單反相機">
                <button>                                          button是一個雙標籤，裡邊可以放東西(放大鏡)，比input好用
                    <i></i>
                </button>
                <em></em>                                         這裡是搜尋框中的那個相機圖片
            </div>
            <!--搜素底部熱詞-->
            <div class="hotwords">
                <a href="#" class="style-red">學生專享</a>
                <a href="#">300減160</a>
                <a href="#">七折返場</a>
                <a href="#">騎行運動</a>
                <a href="#">家電榜單</a>
                <a href="#">無損播放器</a>
                <a href="#">汽車腳墊</a>
                <a href="#">巧克力</a>
                <a href="#">鋁合金門窗</a>
            </div>
            <!--我的購物車-->
            <div class="myCar">
                <i></i>
                <a href="#">我的購物車</a>
                <s>1000000</s>
            </div>
            <!--電腦模組-->
            <div class="computer">
                <a href="#">
                    <img src="images/computer.jpg">
                </a>
            </div>
        </div>
    </div>
    <!--header部分結束-->
</body>
</html>

base.css樣式內容

.fr{
    float: right;
}
.fl{
    float: left;
}
li{
    list-style: none;
}
ul{
    margin:0;
    padding: 0;
}
a{
    text-decoration: none;
}
.w{
    width: 1190px;             版心的標準設定
    margin: auto;
}
.inner{
    height: 140px;
    background-color: pink;
    position: relative;
}
.style-red{
    color: #f10215!important;    注：這裡樣式出不來，因優先順序不夠，可以通過瀏覽器元素檢視器，發現有過期中線。通過這種方式可以讓其顯示出來
}
@font-face {
    font-family: 'icomoon';
    src:  url('../fonts/icomoon.eot?axvffw');
    src:  url('../fonts/icomoon.eot?axvffw#iefix') format('embedded-opentype'),
    url('../fonts/icomoon.ttf?axvffw') format('truetype'),
    url('../fonts/icomoon.woff?axvffw') format('woff'),
    url('../fonts/icomoon.svg?axvffw#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}
body{
    background-color: #F6F6F6;
}
/*頂部開始*/
.J_event{
    background-color: #000;                             背景色
}
.J_event a{                                              中間的版心
    display: block;
    height: 80px;
    background: url(../images/top.jpg) no-repeat;
    position: relative;                                 父相子絕
}
.J_event a i{                                            關閉的圖示
    width: 20px;
    height: 20px;
    position: absolute;
    right: 0;
    top: 5px;
    font-family: icomoon;
    font-style: normal;
    text-align: center;
    line-height: 20px;
    color: #fff;
    background:rgba(0,0,0,0.4);
}
/*頂部結束*/
/*快捷導航欄開始*/
.shortcut{
    height: 30px;
    line-height: 30px;
    background-color: #E3E4E5;
    border-bottom: 1px solid #DDDDDD;
    color: #9D9D9D;
    font-size: 12px;
}
.shortcut a{
    color: #9D9D9D;
    font-size: 12px;
}
.shortcut a:hover{
    color: #c81623;
}
.shortcut .fr li{
    float: left;
}
.pos{
    font-family: icomoon;
    font-style: normal;
    font-size: 14px;
    color: #f10215;
}
.shortcut .fl li{
    margin-left: 200px;
    height: 30px;
}
.spacer{
    width: 1px;
    height: 10px;
    background-color: #ccc;
    margin: 10px 10px 0;
}
.dropdown{
    padding-right: 15px;
    position: relative;
}
.dropdown i{
    font-family: icomoon;
    font-style: normal;
    font-size: 16px;
    position: absolute;
    right: -2px;
    top: -3px;
}
.erweima{
    width: 60px;
    height: 60px;
    border: 1px solid #ccc;
    padding: 3px;
    position: absolute;
    left: -8px;
    top: 35px;
}
/*快捷導航欄結束*/
/*header部分開始*/
.logo{
    height: 170px;
    width: 190px;
    position: absolute;
    top: -29px;
    left: -0.5px;
    background-color: blue;
    box-shadow: 0 -12px 10px rgba(0,0,0,.2);
}
.logo h1{
    margin: 0;
}
.logo a{
    height: 170px;
    width: 190px;
    display: block;
    background: url(../images/logo.jpg) no-repeat;
    text-indent: -3em;
    overflow: hidden;
}
.search{
    width: 550px;
    height: 35px;
    position: absolute;
    top: 25px;
    left: 320px;
}
.search input{
    padding: 0 0 0 5px;
    width: 493px;        注：這裡需要減去上邊的內邊距5px,否則會撐開
    height: 33px;
    border: 1px solid #F10215;
    outline: none;
    color: #989898;
    float: left;         行內元素之間是有間隙的，通過浮動來去除間隙，下邊也需要新增
}
.search button{
    border: 0;
    padding:0;
    width: 50px;
    height: 35px;
    background-color: #F10215;
    float: left;
    cursor: pointer;
    outline: none;
}
.search i{
    font-family: 'icomoon';
    color: #fff;
    font-style: normal;
    font-style: 16px;
}
.search em{
    position: absolute;
    top: 9px;
    right: 65px;
    width: 19px;
    height: 15px;
    background:url("../images/sprite-search.png") no-repeat;
    cursor: pointer;
}
.search em:hover{
    background-position: -30px 0;
}
.hotwords{
    position: absolute;
    top: 70px;
    left: 320px;
}
.hotwords a{
    font-size: 12px;
    color: #9E9B99;
}
.hotwords a:hover{
    color: #f10215;
}
.myCar{
    width: 188px;
    height: 33px;
    border: 1px solid #ccc;
    position: absolute;
    top: 25px;
    right: 100px;
    text-align: center;
    line-height: 33px;
}
.myCar a{
    font-size: 14px;
    color: #f10215;
}
.myCar i{
    font-family: 'icomoon';
    font-style: normal;
    font-size: 14px;
    color: #f10215;
}
.myCar s{
    position: absolute;
    top: 5px;
    left: 140px;
    text-decoration: none;
    background-color: #f20215;
    height: 16px;
    line-height: 16px;
    font-size: 12px;
    padding: 0 3px;
    border-radius: 6px;
    color: #fff;
}
.computer{
    position: absolute;
    right: 0;
    bottom: 10px;
}
/*header部分結束*/

案例：京東差不多版記錄，底部和中間部分和在了一塊。這個是自己踩過雷的

*index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>京東(JD.COM)-正品低價、品質保障、配送及時、輕鬆購物！</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/base.css">
</head>
<body>
    <!--頁面頂部開始-->
    <div class="J_event">
        <a href="#" class="w">
            <i></i>
        </a>
    </div>
    <!--頁面頂部結束-->
    <!--快捷導航欄開始-->
    <div class="shortcut">
        <div class="w">
            <ul class="fl">
                <li>
                    <i class="pos"></i>
                    北京
                </li>
            </ul>
            <ul class="fr">
                <li>
                    <a href="#">
                        你好，請登入&nbsp;&nbsp;
                    </a>
                    <a href="#" class="style-red">
                        免費註冊
                    </a>
                </li>
                <li class="spacer"></li>
                <li>
                    <a href="#">
                        我的訂單
                    </a>
                </li>
                <li class="spacer"></li>
                <li class="dropdown">
                    <a href="#">
                        我的訂單
                    </a>
                    <i></i>
                </li>
                <li class="spacer"></li>
                <li>
                    <a href="#">
                        我的訂單
                    </a>
                </li>
                <li class="spacer"></li>
                <li>
                    <a href="#">
                        我的訂單
                    </a>
                </li>
                <li class="spacer"></li>
                <li class="dropdown">
                    <a href="#">
                        我的訂單
                    </a>
                    <i></i>
                </li>
                <li class="spacer"></li>
                <li class="dropdown">
                    <a href="#">
                        我的訂單
                    </a>
                    <i></i>
                </li>
                <li class="spacer"></li>
                <li style="position: relative;z-index: 1;">
                    <a href="#">
                        我的訂單
                    </a>
                    <div class="erweima">
                        <img src="images/erweima.png">
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <!--快捷導航欄結束-->
    <!--header部分開始-->
    <div class="header">
        <div class="w inner">
            <!--logo部分-->
            <div class="logo">
                <h1>
                    <a href="#" title="京東網">京東</a>
                </h1>
            </div>
            <!--搜尋框-->
            <div class="search">
                <input value="單反相機">
                <button>
                    <i></i>
                </button>
                <em></em>
            </div>
            <!--熱詞部分-->
            <div class="hotwords">
                <a href="#" class="style-red">學生專享</a>
                <a href="#">300減160</a>
                <a href="#">七折返場</a>
                <a href="#">騎行運動</a>
                <a href="#">家電榜單</a>
                <a href="#">無損播放器</a>
                <a href="#">汽車腳墊</a>
                <a href="#">巧克力</a>
                <a href="#">鋁合金門窗</a>
            </div>
            <!--購物車-->
            <div class="myCar">
                <i></i>
                <a href="#">我的購物車</a>
                <s>0</s>
            </div>
            <!--電腦模組-->
            <div class="computer">
                <a href="#">
                    <img src="images/computer.jpg">
                </a>
            </div>
            <!--導航資訊欄-->
            <div class="navitems">
                <ul>
                    <li><a href="#">秒殺</a></li>
                    <li><a href="#">優惠券</a></li>
                    <li><a href="#">閃購</a></li>
                    <li><a href="#">拍賣</a></li>
                </ul>
                <div class="spacer"></div>
                <ul>
                    <li><a href="#">京東服飾</a></li>
                    <li><a href="#">京東超市</a></li>
                    <li><a href="#">生鮮</a></li>
                    <li><a href="#">全球購</a></li>
                </ul>
                <div class="spacer"></div>
                <ul>
                    <li><a href="#">京東金融</a></li>
                </ul>
            </div>
        </div>
    </div>
    <!--header部分結束-->

    <!--main部分開始-->
    <div class="jd">
        <div class="w jd-inner">
            <div class="jd-col1">
                <ul>
                    <li><a href="#">家用電器</a></li>
                    <li>
                        <a href="#">手機</a>
                        <span>/</span>
                        <a href="#">運營商</a>
                        <span>/</span>
                        <a href="#">數碼</a>
                    </li>
                    <li>
                        <a href="#">電腦</a>
                        <span>/</span>
                        <a href="#">運營商</a>
                        <span>/</span>
                        <a href="#">數碼</a>
                    </li>
                    <li>
                        <a href="#">手機</a>
                        <span>/</span>
                        <a href="#">運營商</a>
                        <span>/</span>
                        <a href="#">數碼</a>
                    </li>
                    <li>
                        <a href="#">手機</a>
                        <span>/</span>
                        <a href="#">運營商</a>
                        <span>/</span>
                        <a href="#">數碼</a>
                    </li>
                    <li>
                        <a href="#">手機</a>
                        <span>/</span>
                        <a href="#">運營商</a>
                        <span>/</span>
                        <a href="#">數碼</a>
                    </li>
                    <li>
                        <a href="#">手機</a>
                        <span>/</span>
                        <a href="#">運營商</a>
                        <span>/</span>
                        <a href="#">數碼</a>
                    </li>
                    <li>
                        <a href="#">手機</a>
                        <span>/</span>
                        <a href="#">運營商</a>
                        <span>/</span>
                        <a href="#">數碼</a>
                    </li>
                    <li>
                        <a href="#">手機</a>
                        <span>/</span>
                        <a href="#">運營商</a>
                        <span>/</span>
                        <a href="#">數碼</a>
                    </li>
                    <li>
                        <a href="#">手機</a>
                        <span>/</span>
                        <a href="#">運營商</a>
                        <span>/</span>
                        <a href="#">數碼</a>
                    </li>
                    <li>
                        <a href="#">手機</a>
                        <span>/</span>
                        <a href="#">運營商</a>
                        <span>/</span>
                        <a href="#">數碼</a>
                    </li>
                    <li>
                        <a href="#">手機</a>
                        <span>/</span>
                        <a href="#">運營商</a>
                        <span>/</span>
                        <a href="#">數碼</a>
                    </li>
                    <li>
                        <a href="#">手機</a>
                        <span>/</span>
                        <a href="#">運營商</a>
                        <span>/</span>
                        <a href="#">數碼</a>
                    </li>
                    <li>
                        <a href="#">手機</a>
                        <span>/</span>
                        <a href="#">運營商</a>
                        <span>/</span>
                        <a href="#">數碼</a>
                    </li>
                    <li>
                        <a href="#">手機</a>
                        <span>/</span>
                        <a href="#">運營商</a>
                        <span>/</span>
                        <a href="#">數碼</a>
                    </li>
                    <li>
                        <a href="#">手機</a>
                        <span>/</span>
                        <a href="#">運營商</a>
                        <span>/</span>
                        <a href="#">數碼</a>
                    </li>
                </ul>
            </div>
            <div class="jd-col2">
                <div class="jd-col2-hd">
                    <a href="#" class="arr-l"></a>
                    <a href="#" class="arr-r"></a>
                    <ol>
                        <li class="current"></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                    </ol>
                    <ul>
                        <li>
                            <a href="#">
                                <img src="images/banner.jpg">
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="jd-col2-bd">
                    <div class="firstPic">
                        <img src="images/pic1.jpg">
                    </div>
                    <div>
                        <img src="images/pic2.jpg">
                    </div>
                </div>
             </div>
            <div class="jd-col3">
                <div class="user">
                    <div class="user-info">
                        Hi,歡迎來到京東！<br>
                        <a href="#">登入</a>
                        <a href="#">註冊</a>
                        <a href="#" class="info-img">
                            <img src="images/no_login.jpg">
                        </a>
                    </div>
                    <div class="user-profit">
                        <a href="#">新任福利</a>
                        <a href="#">PLUS會員</a>
                    </div>
                </div>
                <div class="news">
                    <div class="tab-hd">
                        <!--這樣寫超連結的時候不會跳到上面-->
                        <a href="javascript:;" class="cuxiao">促銷</a>
                        <a href="javascript:;">公告</a>
                        <a href="#" class="more1">更多</a>
                        <div class="line"></div>
                    </div>
                    <div class="tab-bd">
                        <ul>
                            <li><a href="#">蓄電池專場下單立減100元</a></li>
                            <li><a href="#">蓄電池專場下單立減100元</a></li>
                            <li><a href="#">蓄電池專場下單立減100元</a></li>
                            <li><a href="#">蓄電池專場下單立減100元</a></li>
                        </ul>
                    </div>
                </div>
                <div class="jd-service">
                    <ul>
                        <li>
                            <a href="#">
                                <i></i>
                                <p>機票</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i></i>
                                <p>機票</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i></i>
                                <p>機票</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i></i>
                                <p>機票</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i></i>
                                <p>機票</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i></i>
                                <p>機票</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i></i>
                                <p>機票</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i></i>
                                <p>機票</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i></i>
                                <p>機票</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i></i>
                                <p>機票</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i></i>
                                <p>機票</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i></i>
                                <p>機票</p>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="ad">
            <a href="#"></a>
        </div>
    </div>

    <!--footer部分開始了-->
    <div class="footer">
        <!--多快好省-->
        <div class="footer-service">
            <div class="w footer-service-inner">
                <ul class="clearfix">
                    <li>
                        <div class="service_unit">
                            <h5>多</h5>
                            <p>品類齊全，輕鬆購物</p>
                        </div>
                    </li>
                    <li>
                        <div class="service_unit">
                            <h5 class="kuai">快</h5>
                            <p>品類齊全，輕鬆購物</p>
                        </div>
                    </li>
                    <li>
                        <div class="service_unit">
                            <h5 class="hao">好</h5>
                            <p>品類齊全，輕鬆購物</p>
                        </div>
                    </li>
                    <li>
                        <div class="service_unit">
                            <h5 class="sheng">省</h5>
                            <p>品類齊全，輕鬆購物</p>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <!--幫助模組-->
        <div class="w help">
            <dl>
                <dt>購物指南</dt>
                <dd><a href="#">購物流程</a></dd>
                <dd><a href="#">會員介紹</a></dd>
                <dd><a href="#">生活旅行</a></dd>
                <dd><a href="#">常見問題</a></dd>
                <dd><a href="#">大家電</a></dd>
                <dd><a href="#">聯絡客服</a></dd>
            </dl>
            <dl>
                <dt>購物指南</dt>
                <dd><a href="#">購物流程</a></dd>
                <dd><a href="#">會員介紹</a></dd>
                <dd><a href="#">生活旅行</a></dd>
                <dd><a href="#">常見問題</a></dd>
                <dd><a href="#">大家電</a></dd>
                <dd><a href="#">聯絡客服</a></dd>
            </dl>
            <dl>
                <dt>購物指南</dt>
                <dd><a href="#">購物流程</a></dd>
                <dd><a href="#">會員介紹</a></dd>
                <dd><a href="#">生活旅行</a></dd>
                <dd><a href="#">常見問題</a></dd>
                <dd><a href="#">大家電</a></dd>
                <dd><a href="#">聯絡客服</a></dd>
            </dl>
            <dl>
                <dt>購物指南</dt>
                <dd><a href="#">購物流程</a></dd>
                <dd><a href="#">會員介紹</a></dd>
                <dd><a href="#">生活旅行</a></dd>
                <dd><a href="#">常見問題</a></dd>
                <dd><a href="#">大家電</a></dd>
                <dd><a href="#">聯絡客服</a></dd>
            </dl>
            <dl>
                <dt>購物指南</dt>
                <dd><a href="#">購物流程</a></dd>
                <dd><a href="#">會員介紹</a></dd>
                <dd><a href="#">生活旅行</a></dd>
                <dd><a href="#">常見問題</a></dd>
                <dd><a href="#">大家電</a></dd>
                <dd><a href="#">聯絡客服</a></dd>
            </dl>
            <dl class="cover">
                <dt>京東自營覆蓋區縣</dt>
                <dd class="info">京東已向全國2661個區縣提供自營配送服務，支援貨到付款、POS機刷卡和售後上門服務。
                </dd>
                <dd class="more"><a href="#">檢視詳情 > </a></dd>

            </dl>
        </div>
        <!--版權模組-->
        <div class="w copyright">
            <div class="links">
                <a href="#">關於我們</a>
                <span>|</span>
                <a href="#">關於我們</a>
                <span>|</span>
                <a href="#">關於我們</a>
                <span>|</span>
                <a href="#">關於我們</a>
                <span>|</span>
                <a href="#">關於我們</a>
                <span>|</span>
                <a href="#">關於我們</a>
                <span>|</span>
                <a href="#">關於我們</a>
                <span>|</span>
                <a href="#">關於我們</a>
                <span>|</span>
                <a href="#">關於我們</a>
                <span>|</span>
                <a href="#">關於我們</a>
                <span>|</span>
                <a href="#">關於我們</a>
                <span>|</span>
                <a href="#">English</a>
                <span>|</span>
                <a href="#">Site</a>
                <span>|</span>
                <a href="#">Media & IR</a>
                <span>|</span>
            </div>
            <div class="c-info">
                <p>京公網安備 11000002000088號|京ICP證070359號|網際網路藥品資訊服務資格證編號(京)-經營性-2014-0008|新出發京零 字第大120007號</p>
                <p>網際網路出版許可證編號新出網證(京)字150號|出版物經營許可證|網路文化經營許可證京網文[2014]2148-348號|違法和不良資訊舉報電話：4006561155</p>
                <p>Copyright © 2004 - 2017  京東JD.com 版權所有|消費者維權熱線：4006067733經營證照</p>
                <p>京東旗下網站：京東支付|京東雲</p>
            </div>
            <div class="tupian">
                <a href="#"></a>
                <a href="#" class="kexin"></a>
                <a href="#"></a>
                <a href="#"></a>
                <a href="#"></a>
                <a href="#"></a>
            </div>
        </div>
    </div>
    <!--footer部分結束了-->
</body>
</html>

*base.css

.w{
    width: 1190px;
    margin: auto;
}
.fr{
    float: right;
}
.fl{
    float: left;
}
li{
    list-style: none;
}
ul,ol{
    padding: 0;
    margin: 0;
}
.style-red{
    color: #f10215!important;
}
a{
    text-decoration: none;
}
input,button{        /*為input去除padding,為button去除border*/
    padding: 0;
    border:0;
}
h5,dd,p{
    margin: 0;
}
.clearfix:before,.clearfix:after {
    content:"";
    display: table;  /* 這句話可以出發BFC BFC可以清除浮動,BFC我們後面講 */
}
.clearfix:after {
    clear:both;
}
.clearfix {
    *zoom:1;
}
@font-face {
    font-family: 'icomoon';
    src:  url('../fonts/icomoon.eot?axvffw');
    src:  url('../fonts/icomoon.eot?axvffw#iefix') format('embedded-opentype'),
    url('../fonts/icomoon.ttf?axvffw') format('truetype'),
    url('../fonts/icomoon.woff?axvffw') format('woff'),
    url('../fonts/icomoon.svg?axvffw#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}
/*頂部開始*/
.J_event{
    background-color: #000;
}
.J_event a{
    display: block;  /*行內標籤如果想有固定的高就必須轉塊級標籤*/
    height: 80px;
    background: url("../images/top.jpg") no-repeat;
    position: relative;
}
.J_event a i{
    width: 20px;
    height: 20px;
    position: absolute;
    top: 5px;
    right: 0;
    font-family: 'icomoon';
    font-style: normal;
    line-height: 20px;
    color: #fff;
    background:rgba(0,0,0,0.4);
}
/*頂部結束*/
/*快捷導航開始*/
.shortcut{
    height: 30px;
    line-height: 30px;
    background-color: #E3E4E5;
    border-bottom: 1px solid #DDDDDD;
    color: #9D9D9D;
    font-size: 12px;
}
.pos{
    font-family: 'icomoon';
    font-style: normal;
    font-size: 14px;
    color: #f10215;
}
.shortcut .fl li{
    margin-left: 200px;
    height: 30px;
    overflow: hidden;
}
.shortcut a{
    color: #9D9D9D;
    font-size: 12px;
}
.shortcut a:hover{
    color: #f10215;
}
.shortcut .fr li{
    float: left;
}
.spacer{
    width: 1px;
    height: 10px;
    background-color: #ccc;
    margin: 10px 10px 0;
}
.dropdown{
    padding-right: 15px;
    position: relative;
}
.dropdown i{
    font-family: 'icomoon';   /*這裡li標籤不好定位，所以直接在頁面元素上使用定位*/
    font-style: normal;
    font-size: 16px;
    position: absolute;
    top: -4px;
    right: 0;
}
.erweima{
    width: 60px;
    height: 60px;
    border: 1px solid #ccc;
    padding: 3px;
    position: absolute;
    top: 30px;
    right: -9px;
}
/*快捷導航結束*/
/*header部分開始*/
.header{
    height: 140px;
}
.inner{
    height: 140px;
    position: relative;
}
.logo{
    width: 190px;
    height: 170px;
    position: absolute;
    top: -30px;
    left: 0;
    background-color: pink;
    box-shadow: 0 -12px 10px rgba(0,0,0,.2);
}
.logo h1{
    margin: 0;
}
.logo a{
    display: block;
    width: 190px;
    height: 170px;
    background: url("../images/logo.jpg") no-repeat;
    text-indent: -2em;
    overflow: hidden;
}
.search{
    width: 550px;
    height: 35px;
    position: absolute;
    top: 25px;
    left: 320px;
}
.search input{
    width: 493px;
    height: 33px;
    border: 1px solid #f10215;
    padding-left: 5px;
    outline: none;
    color: #989898;
    float: left;
}
.search button{
    width: 50px;
    height: 35px;
    background-color: #f10215;
    cursor: pointer;
    outline: none;
    float: left;
}
.search i{
    font-family: 'icomoon';
    font-style: normal;
    color: #fff;
    font-size: 16px;
}
.search em{
    position: absolute;
    top: 10px;
    right: 65px;
    width: 20px;
    height: 16px;
    cursor: pointer;
    background:url("../images/sprite-search.png") no-repeat;
}
.search em:hover{
    background-position: -30px 0;
}
.hotwords{
    position: absolute;
    top: 70px;
    left: 320px;
    float: left;
}
.hotwords a{
    color: #9E9B99;
    font-size: 12px;
}
.hotwords a:hover{
    color: #f10215;
}
.myCar{
    width: 188px;
    height: 33px;
    border: 1px solid #ccc;
    position: absolute;
    top: 25px;
    right: 100px;
    text-align: center;
    line-height: 33px;
}
.myCar i{
    font-family: 'icomoon';
    font-style: normal;
    color: #f10215;
    margin-right: 3px;
}
.myCar a{
    font-size: 12px;
    color: #f10215;
}
.myCar s{
    text-decoration: none;
    height: 16px;
    line-height: 16px;
    background-color: #f10215;
    color: #fff;
    font-size: 12px;
    padding: 0 3px;
    position: absolute;
    top: 5px;
    left: 140px;
    border-radius: 7px;
}
.computer{
    position: absolute;
    right: 0;
    bottom: 10px;
}
.navitems{
    position: absolute;
    left: 200px;
    bottom: 0;
}
.navitems ul{
    float: left;
}
.navitems ul li{
    float: left;
    margin-left: 30px;
}
.navitems li a{
    height: 40px;
    line-height: 40px;
    font-size: 16px;
    font-weight: 700;
    color: #555A5F;
    display: block;

}
.navitems li a:hover{
    color: #f10215;
}
.navitems .spacer{     /*首先它有了原先的樣式，然後在基礎上加了定位*/
    float: left;    /*都加了浮動，所以這裡也要加浮動，否則會自動換行*/
    margin-top: 15px;
    margin-left: 20px;   /*確保左邊距*/
    margin-right: -10px;  /*右邊距是三十，減去十*/
}
/*header部分結束*/

/*footer部分開始了*/
.footer{
    height: 560px;
    background-color: #EAEAEA;
}
.footer-service{
    border-bottom: 1px solid #DEDEDE;
}
.footer-service-inner {
    padding: 30px 0;            /*由於浮動時不佔位置的，所以這裡加了padding之後，看起來像沒加一樣，所以要清楚浮動*/
}
.footer-service-inner li{
    float: left;
    width: 297px;
    height: 42px;
}
.service_unit{
    width: 225px;
    height: 42px;
    margin: 0 auto;
    position: relative;
}
.service_unit h5{
    width: 36px;
    height: 42px;
    position: absolute;
    top: 0;
    left: 0;
    background: url("../images/ico_service.png") no-repeat;
    text-indent: -2em;
    overflow: hidden;
}
.service_unit p{
    line-height: 42px;
    margin-left: 45px;
    font-size: 18px;
    font-weight: 700;
}
.service_unit .kuai{         /*這裡只寫一個.kuai是無法實現的，權重不夠*/
    background-position: 0 -44px;
}
.service_unit .hao{
    background-position: 0 -86px;
}
.service_unit .sheng{
    background-position: 0 -128px;
}
.help{
    height: 180px;
    padding-top: 20px;
}
.help dl{
    float: left;
    width: 195px;
}
.help dt{
    font-size: 14px;
    font-weight: 700;
    color: #666;
    height: 30px;
}
.help dd{
    height: 22px;
}
.help dd a{
    color: #727272;
    font-size: 12px;
}
.help dd a:hover{
    color: #f10215;      /*這裡有問題：dl dt dd預設的樣式錯開了一點：dd的margin*/
}
.help .cover{
    float: right;
    width: 207px;
    height: 150px;
    background: url("../images/ico_footer.png") no-repeat;
}
.cover dt{
    text-align: center;
}
.help .info{
    width: 175px;
    height: 50px;
    font-size: 12px;
    margin-top: 5px;
    margin-left: 10px;
    line-height: 18px;
    color: #727272;
}
.more{
    text-align: right;
    padding-right: 10px;
}
.copyright{
    border-top: 1px solid #ccc;
    padding-top: 15px;
}
.links{
    text-align: center;
}
.links a{
    color: #727272;
    font-size: 12px;
}
.links span{
    font-size: 12px;
    color: #D4CDCD;
    margin: 0 6px;
}
.c-info{
    font-size: 12px;
    color: #9E9E9B;
    text-align: center;
    line-height: 20px;
    maring-top: 10px;
}
.tupian{
    text-align: center;
    margin-top: 10px;
}
.tupian a{
    width: 103px;
    height: 32px;
    display: inline-block;
    background: url("../images/ico_footer.png") no-repeat 0 -151px;
}
.tupian .kexin{
    background-position: -104px -151px;
}
/*footer部分結合了*/

*index.css

.jd{
    position: relative;
}
.jd-inner{
    height: 480px;
    z-index: 999;      /*只有定位的盒子才可以使用z-index*/
    position: relative;
}
/*在這裡先插一腳，先把main中的大背景來實現了*/
.ad{
    height: 480px;
    background:url("../images/bg.png") no-repeat top center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}
.ad a{
    display: block;    /*後邊那個大背景是可以點選的所以直接將a填滿即可*/
    height: 100%;
}

.jd-col1{
    width: 190px;
    height: 465px;
    background-color: #6E6568;
    float: left;
    padding-top: 15px;
}
.jd-col1 li{
    padding-left: 10px;
    height: 28px;
    line-height: 28px;
}
.jd-col1 li:hover{
    background-color: #999395;
}
.jd-col1 li a{
    color: #fff;
    font-size: 14px;
}
.jd-col1 li span{
    color: #fff;
    font-size: 12px;
}

.jd-col2{
    width: 790px;
    height: 480px;
    float: left;
    margin-left: 10px;
}
.jd-col2-hd{     /*注意通欄和版心的位置關係,注意ol清除margin,否則對不齊*/
    height: 340px;
    margin-bottom: 10px;
    position: relative;
}
.arr-l,.arr-r{
    position: absolute;
    top: 50%;
    maring-top:-30;
    width: 30px;
    height: 60px;
    background: rgba(0,0,0,0.3);
    font-family: 'icomoon';
    font-style: normal;
    font-size: 25px;
    color: #fff;
    line-height: 60px;
}
.arr-l{
    left: 0;
}
.arr-r{
    right: 0;
}
.jd-col2-hd ol{
    position: absolute;
    bottom: 20px;
    left: 50%;             /*通過這樣來實現居中*/
    margin-left: -90px;
    width: 180px;
    height: 20px;
    background: rgba(255,255,255,0.3);
    border-radius: 10px;
}
.jd-col2-hd ol li{
    width: 12px;
    height: 12px;
    background-color: #fff;
    border-radius: 6px;
    float: left;
    margin: 4px 5px;
    cursor: pointer;
}
.jd-col2-hd .current{
    background-color: #f10215;
}
.jd-col2-bd div{
    width: 390px;
    height: 130px;
    float: left;
}
.jd-col2-bd div img{
    width:100%;
}
.firstPic{
    margin-right: 10px;
}

.jd-col3{
    width: 190px;
    height: 480px;
    float: right;
}
.jd-col3 a{
    font-size: 12px;
    color:#747474;
}
.user{
    height: 95px;
    padding: 20px 15px 0;
    background-color: pink;
}
.user-info{
    height: 40px;
    padding-left: 54px;
    font-size: 12px;
    color: #747474;
    line-height: 22px;
    position: relative;
}
.user-info a:hover{
    color: #f10215;
}
.info-img{
    width: 40px;
    height: 40px;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 50%;     /*只這樣設定時不夠的，圖片位置會偏，還需要下邊的填充*/
    overflow: hidden;
}
.info-img img{
    width: 100%;
    height: auto;
}
.user-profit{
    margin-top: 14px;
}
.user-profit a{
    width: 70px;
    height: 20px;
    border: 2px solid #f10215;
    display: inline-block;
    font-size: 12px;
    color: #f10215;
    text-align: center;
    line-height: 20px;
    margin-right: 4px;
}
.user-profit a:hover{
    background-color: #f10215;
    color: #fff;
}
.news{
    height: 149px;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    padding: 5px 15px 0;
}
.tab-hd{
    border-bottom: 1px solid #ccc;
    padding: 3px 0;
    position: relative;
}
.tab-hd a{
    margin: 0 4px;
}
.cuxiao{
    border-right: 1px solid #ccc;
    padding-right: 10px;
}
.tab-hd .more1{      /*原始碼寫的是.new樣式加不上，改成了.tab-hd樣式成功了*/
    position: absolute;
    top: 6px;
    right: 0;
}
.line{
    width: 28px;
    height: 2px;
    background-color: #f10215;
    position: absolute;
    bottom: -1px;
    left: 0;
}
.tab-bd{
    margin-top: 10px;
}
.tab-bd li{
    height: 23px;
    line-height: 23px;
}
.jd-service{
    height: 209px;
    width: 190px;
    overflow: hidden;   /*border加了右、下邊框，通過高度的設定組合，實現底邊框的隱藏*/
}
.jd-service ul{
    width: 195px;
}
.jd-service li{
    width: 47px;
    height: 69px;
    float: left;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}
.jd-service li a{
    width: 100%;
    height: 100%;
    display: block;
}
.jd-service i{
    display: block;
    width: 24px;
    height: 24px;
    margin: 15px auto 8px;
    background: url("../images/[email protected]") no-repeat;
}
.jd-service p{
    text-align: center;
}

Html與CSS學習記錄三

元素的顯示與隱藏 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <

Html與CSS學習記錄四

HTML5新標籤和特性 *header：定義文件的頁首頭部 *aside：定義其所處內容之外的內容側邊 *article：定義文章。 <!DOCTYPE htm

HTML與CSS學習記錄

title: HTML與CSS學習記錄 toc: true date: 2018-09-10 14:04:59 《HTML與CSS進階教程讀書筆記》 HTML基礎知識 HTML與XHTML HTML指超文字標記語言，是構成網頁文件的主要語言。我們常說的HTML指HTML4.01。 XHT

HTML與CSS學習記錄（3）————CSS樣式基本知識

認識CSS樣式 CSS全稱為“層疊樣式表 (Cascading Style Sheets)”，它主要是用於定義HTML內容在瀏覽器內的顯示樣式，如文字大小、顏色、字型加粗等。如下列程式碼： p{ font-size:12px;/*設定文字字號*/ color:

html與css學習1

劃分代碼之路裏的而是小時框架 F12 描述 html是接觸很久了，或許很多人覺得這個東西很簡單，是的，他其實就是一些再簡單不過的標簽組成，所有標簽的意思在w3school裏面1小時就能看完（記不記住關系不大，看久了自然記住了），這個文章當然不是生搬如何使用標簽的

html與css學習2

我胡漢三又回來糾結這兩個玩意了。這兩個東西真是越看越有東西,而且真的是,做專案時才知道自己小瞧他們了。前端：結構（html）+表現（css）+行為(js) 好的程式碼：各自負責各自的，儘量寫規範，別雜糅在一起。 1.html標籤更多關注的是語義，至於樣式css都可以去改 2.元素分

HTML與CSS學習基礎總結

第一天學習：先了解學習的知識點有哪些： HTML HTML指的是超文字標記語言（Hyper Text Markip Language），它不是一種程式語言而是一種標記語言，通過使用標籤來描述網頁。 CSS CSS （Cascading Style Sheets

前端HTML與CSS學習筆記總結篇(超詳細)

第一部分 HTML 第一章職業規劃和前景職業方向規劃定位： web前端開發工程師web網站架構師自己創業轉崗管理或其他 web前端開發的前景展望：未來IT行業企業需求最多的人才結合最新的html5搶佔移動端的

【幹貨】Html與CSS入門學習筆記12-14【完】

進度條 tom step char number 視頻容器復選框其中私有十二、HTML5標記現代HTML html5新增的元素：header nav footer aside section article time 這些新增元素使頁面結構更清晰，取代<di

html+css學習記錄1

框架透明圖兄弟元素就是不同顯示顏色外部郵件在html中，寫再多的空格，瀏覽器也會將其解析成一個空格，可以用<br/>來換行 <hr/>也是一個字節數標簽，可以生成一條水平線。在html中一些如 < >這種特殊字符

HTML與CSS的一些知識（三）

CSS：　　1、三大樣式：行內（內嵌）、內部（內聯）、外部（外聯）；基本都知道。　　2、三大特性：　　　　a、繼承性：父級樣式會被子級繼承（！important不會被繼承，<a></a>標籤寫了href屬性不會繼承父級的color屬性）　　　　b、層疊性：樣式發生衝突時

html與css階段學習總結

第四階段總結本應該在開學前就結束的Html和Css階段，硬生生地拖了2周才考核完，並且任務完成總量還是比較少。外因是剛開學，各種各樣的雜事太多，處理上有一些不適應。內因則是個人學習積極性的不足。此處則不做多討論。之前走過的三個階段都是都是java階段，程式碼相比html與cs

html和css學習筆記（三）

CSS 1css書寫位置 1.1內部樣式表內嵌式是將CSS程式碼集中寫在HTML文件的head頭部標籤中，並且用style標籤定義，其基本語法格式如下： ```html <head> <style type="text/CSS">

Jersey學習記錄(三)--過濾攔截器與異常處理

本文記錄全域性異常返回,過濾器,攔截器. 一.全域性異常處理器 webservice定義全域性返回錯誤碼是很重要的一個功能,jersey正好就能實現這一功能. 整個流程就是當jersey託管的類發現了異常,丟擲給jersey的異常處理器,該異常處理器直

CSS學習（三）—相對定位與絕對定位

python學習記錄三

pri data open 對稱位置 sleep col pytho -- 一、集合： list_1 = [1,4,5,7,3,6,7,9] list_1 = set(list_1) list_2 = set([2,6,0,66,22,8,4]) #交集 list_

CSS學習筆記三：自定義單選框，復選框，開關

sla checked 移動 transform 第一個 16px 位移 block back 一點一點學習CCS，這次學習了如何自定義單選框，復選框以及開關。一、單選框 1、先寫好body裏面的樣式，先寫幾個框 1 <body> 2 <d

HTML與CSS

表現構建 alt 寫代碼是我艱辛代碼 log 效果　　Html是用來做框架結構的，css用來排版的。　　html就好比是一棟房子的主體框架，而css就是室內的墻壁門框窗戶這些。只有主體框架了才能在這基礎上去發揮css的功用。　　要想做好一個好的網頁，結構一定要

HTML＋CSS學習任務清單

火狐瀏覽器網頁布局設計圖框架 cit 使用 ont 文檔學習任務 HTML部分：掌握HTML的全部語法，他的主體結構，超連接及常用標記的使用 CSS部分：掌握CSS的三種選擇器的使用，明白如何使用DIV＋CSS進行網頁布局，搞清楚浮動問題！ 1，HTML的語法（包括

Web前端開發精品課HTML與CSS基礎教程 (莫振傑著) 完整pdf掃描版

OS 選擇器鏈接樣式大量整理培養分享圖片 mage 入門 Web前端開發精品課：HTML與CSS基礎教程結合大量開發實戰經驗，將前端開發知識系統化整理，濃縮精華，用通俗易懂的語言直指初學者的痛點。全書分為兩部分：首部分是HTML基礎知識，幫助讀者認識和理解網

Html與CSS學習記錄三

相關推薦