search

Home >Web Front-end >HTML Tutorial >Dom

Dom

WBOY
WBOYOriginal
2016-08-26 10:13:121379browse

Document Object Model (DOM) is a programming interface for HTML and XML documents. It provides a structured representation of the document and can change the content and presentation of the document. What we are most concerned about is that the DOM connects web pages with scripts and other programming languages. The DOM belongs to the browser, not the core content specified in the JavaScript language specification.

1. Find elements

1. Search directly

document.getElementById             根据ID获取一个标签
document.getElementsByName          根据name属性获取标签集合
document.getElementsByClassName     根据class属性获取标签集合
document.getElementsByTagName       根据标签名获取标签集合

2. Indirect search

parentNode          // 父节点
childNodes          // 所有子节点
firstChild          // 第一个子节点
lastChild           // 最后一个子节点
nextSibling         // 下一个兄弟节点
previousSibling     // 上一个兄弟节点
 
parentElement           // 父节点标签元素
children                // 所有子标签
firstElementChild       // 第一个子标签元素
lastElementChild        // 最后一个子标签元素
nextElementtSibling     // 下一个兄弟标签元素
previousElementSibling  // 上一个兄弟标签元素

2. Operation

1. Content

innerText   文本
outerText
innerHTML   HTML内容
innerHTML  
value       值

2. Attributes

attributes                // 获取所有标签属性
setAttribute(key,value)   // 设置标签属性
getAttribute(key)         // 获取指定标签属性
 
/*
var atr = document.createAttribute("class");
atr.nodeValue="democlass";
document.getElementById('n1').setAttributeNode(atr);
*/
<span style="color: #0000ff;">b70c64a5464fe1646808593eae42a7a7</span>
<span style="color: #0000ff;">27c48d4b480ea592f362334f61449049</span>
<span style="color: #0000ff;">d68d21ef92ab180bff26a5a93305dea8</span>
    <span style="color: #0000ff;">bb27581bdc82849cd353ec0bc99a5a93</span>
    <span style="color: #0000ff;">b02ec9dc6c1602e2b6b318511e1f513400184704c11e7804493feb92cf7cb2ef</span>
<span style="color: #0000ff;">aeb804e38082af6a3e321b6e6edf51e6</span>
<span style="color: #0000ff;">a229620ab34e403a9a516194c8a41e62</span>
    <span style="color: #0000ff;">6a07a319a8bb2b364041d6b9972c7008</span>
    <span style="color: #0000ff;">f80e7f8b28247db6ad6396797760086a</span>
    <span style="color: #0000ff;">45b61bac1d3dd2c149a0be2e2716fa95</span>

    <span style="color: #0000ff;">ae90c49fb6e300cfee3f40c3d9dd86a6</span>
        <span style="color: #0000ff;">f6d85f91ba7f91b9a6ee4f31cabf8d5f</span>

        <span style="color: #0000ff;">d108b7b80abfc0dc93693704d8656d08</span>
        <span style="color: #0000ff;">e5bed689f930c0bd88f428701537af69</span>
            <span style="color: #0000ff;">606b64bbc6f0c0260ee25260bf3e75fd</span>
                <span style="color: #0000ff;">88203afe6bd4dfdb2b1b0799cf0e13eb45aa5af13dcadd480575e83d28e8084556cf461caffbd7919dfc7cf6ceac9c3f</span>
                <span style="color: #0000ff;">88203afe6bd4dfdb2b1b0799cf0e13eb</span>111<span style="color: #0000ff;">56cf461caffbd7919dfc7cf6ceac9c3f</span>
                <span style="color: #0000ff;">88203afe6bd4dfdb2b1b0799cf0e13eb</span>222<span style="color: #0000ff;">56cf461caffbd7919dfc7cf6ceac9c3f</span>
            <span style="color: #0000ff;">1908b3b1aec0ac546b8f40171196b4f6</span>
            <span style="color: #0000ff;">606b64bbc6f0c0260ee25260bf3e75fd</span>
                <span style="color: #0000ff;">88203afe6bd4dfdb2b1b0799cf0e13eb45aa5af13dcadd480575e83d28e8084556cf461caffbd7919dfc7cf6ceac9c3f</span>
                <span style="color: #0000ff;">88203afe6bd4dfdb2b1b0799cf0e13eb</span>111<span style="color: #0000ff;">56cf461caffbd7919dfc7cf6ceac9c3f</span>
                <span style="color: #0000ff;">88203afe6bd4dfdb2b1b0799cf0e13eb</span>222<span style="color: #0000ff;">56cf461caffbd7919dfc7cf6ceac9c3f</span>
            <span style="color: #0000ff;">1908b3b1aec0ac546b8f40171196b4f6</span>
            <span style="color: #0000ff;">606b64bbc6f0c0260ee25260bf3e75fd</span>
                <span style="color: #0000ff;">88203afe6bd4dfdb2b1b0799cf0e13eb45aa5af13dcadd480575e83d28e8084556cf461caffbd7919dfc7cf6ceac9c3f</span>
                <span style="color: #0000ff;">88203afe6bd4dfdb2b1b0799cf0e13eb</span>111<span style="color: #0000ff;">56cf461caffbd7919dfc7cf6ceac9c3f</span>
                <span style="color: #0000ff;">88203afe6bd4dfdb2b1b0799cf0e13eb</span>222<span style="color: #0000ff;">56cf461caffbd7919dfc7cf6ceac9c3f</span>
            <span style="color: #0000ff;">1908b3b1aec0ac546b8f40171196b4f6</span>
            <span style="color: #0000ff;">606b64bbc6f0c0260ee25260bf3e75fd</span>
                <span style="color: #0000ff;">88203afe6bd4dfdb2b1b0799cf0e13eb45aa5af13dcadd480575e83d28e8084556cf461caffbd7919dfc7cf6ceac9c3f</span>
                <span style="color: #0000ff;">88203afe6bd4dfdb2b1b0799cf0e13eb</span>111<span style="color: #0000ff;">56cf461caffbd7919dfc7cf6ceac9c3f</span>
                <span style="color: #0000ff;">88203afe6bd4dfdb2b1b0799cf0e13eb</span>222<span style="color: #0000ff;">56cf461caffbd7919dfc7cf6ceac9c3f</span>
            <span style="color: #0000ff;">1908b3b1aec0ac546b8f40171196b4f6</span>
        <span style="color: #0000ff;">867cecdbca0fe0657de8e051234c2db6</span>
    <span style="color: #0000ff;">dc6fb698d5f346cc2f166c6140d50c2e</span>
    <span style="color: #0000ff;">8acf32672a8e51b9705f488a5e2ac86a</span>
        <span style="background-color: #f5f5f5; color: #0000ff;">function</span><span style="background-color: #f5f5f5; color: #000000;"> CheckAll(ths){
            </span><span style="background-color: #f5f5f5; color: #0000ff;">var</span><span style="background-color: #f5f5f5; color: #000000;"> tb </span><span style="background-color: #f5f5f5; color: #000000;">=</span><span style="background-color: #f5f5f5; color: #000000;"> document.getElementById(</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">tb</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">);
            </span><span style="background-color: #f5f5f5; color: #0000ff;">var</span><span style="background-color: #f5f5f5; color: #000000;"> trs </span><span style="background-color: #f5f5f5; color: #000000;">=</span><span style="background-color: #f5f5f5; color: #000000;"> tb.childNodes;
            </span><span style="background-color: #f5f5f5; color: #0000ff;">for</span><span style="background-color: #f5f5f5; color: #000000;">(</span><span style="background-color: #f5f5f5; color: #0000ff;">var</span><span style="background-color: #f5f5f5; color: #000000;"> i </span><span style="background-color: #f5f5f5; color: #000000;">=</span><span style="background-color: #f5f5f5; color: #000000;">0</span><span style="background-color: #f5f5f5; color: #000000;">; i</span><span style="background-color: #f5f5f5; color: #000000;">6ad68ac9a99f56d9e21e208f262a4e20</span>
<span style="color: #0000ff;">17c48f9384b0d7f54ab6024d7c7070f0</span>
<span style="color: #0000ff;">aa335abca1c4625a6feacef5476fb458</span><span style="color: #000000;">

Demo</span>
Demo

3. Class operation

className                // 获取所有类名
classList.remove(cls)    // 删除指定类
classList.add(cls)       // 添加类

4. Label operation

a.Create tags

// 方式一
var tag = document.createElement('a')
tag.innerText = "wupeiqi"
tag.className = "c1"
tag.href = "http://www.cnblogs.com/wupeiqi"
 
// 方式二
var tag = "<a class='c1' href='http://www.cnblogs.com/wupeiqi'>wupeiqi</a>"

b. Operation tag 

// 方式一
var obj = "<input type='text' />";
xxx.insertAdjacentHTML("beforeEnd",obj);
xxx.insertAdjacentElement('afterBegin',document.createElement('p'))
 
//注意：第一个参数只能是'beforeBegin'、 'afterBegin'、 'beforeEnd'、 'afterEnd'
 
// 方式二
var tag = document.createElement('a')
xxx.appendChild(tag)
xxx.insertBefore(tag,xxx[1])

　5. Style operation

var obj = document.getElementById('i1')
 
obj.style.fontSize = "32px";
obj.style.backgroundColor = "red";
<span style="color: #0000ff;">7d289d89bbca52894f59d5bcb28d93a7</span>

    <span style="color: #0000ff;">8acf32672a8e51b9705f488a5e2ac86a</span>
        <span style="background-color: #f5f5f5; color: #0000ff;">function</span><span style="background-color: #f5f5f5; color: #000000;"> Focus(ths){
            ths.style.color </span><span style="background-color: #f5f5f5; color: #000000;">=</span> <span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">black</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">;
            </span><span style="background-color: #f5f5f5; color: #0000ff;">if</span><span style="background-color: #f5f5f5; color: #000000;">(ths.value </span><span style="background-color: #f5f5f5; color: #000000;">==</span> <span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">请输入关键字</span><span style="background-color: #f5f5f5; color: #000000;">'</span> <span style="background-color: #f5f5f5; color: #000000;">||</span><span style="background-color: #f5f5f5; color: #000000;"> ths.value.trim() </span><span style="background-color: #f5f5f5; color: #000000;">==</span> <span style="background-color: #f5f5f5; color: #000000;">""</span><span style="background-color: #f5f5f5; color: #000000;">){

                ths.value </span><span style="background-color: #f5f5f5; color: #000000;">=</span> <span style="background-color: #f5f5f5; color: #000000;">""</span><span style="background-color: #f5f5f5; color: #000000;">;
            }
        }

        </span><span style="background-color: #f5f5f5; color: #0000ff;">function</span><span style="background-color: #f5f5f5; color: #000000;"> Blur(ths){
            </span><span style="background-color: #f5f5f5; color: #0000ff;">if</span><span style="background-color: #f5f5f5; color: #000000;">(ths.value.trim() </span><span style="background-color: #f5f5f5; color: #000000;">==</span> <span style="background-color: #f5f5f5; color: #000000;">""</span><span style="background-color: #f5f5f5; color: #000000;">){
                ths.value </span><span style="background-color: #f5f5f5; color: #000000;">=</span> <span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">请输入关键字</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">;
                ths.style.color </span><span style="background-color: #f5f5f5; color: #000000;">=</span> <span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">gray</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">;
            }</span><span style="background-color: #f5f5f5; color: #0000ff;">else</span><span style="background-color: #f5f5f5; color: #000000;">{
                ths.style.color </span><span style="background-color: #f5f5f5; color: #000000;">=</span> <span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">black</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">;
            }
        }
    </span><span style="color: #0000ff;">37350479318729d95f4adb838805f18d</span><span style="color: #000000;">

Demo</span>
Demo

6. Location operation

总文档高度
document.documentElement.offsetHeight
  
当前文档占屏幕高度
document.documentElement.clientHeight
  
自身高度
tag.offsetHeight
  
距离上级定位高度
tag.offsetTop
  
父定位标签
tag.offsetParent
  
滚动高度
tag.scrollTop
 
/*
    clientHeight -> 可见区域：height + padding
    clientTop    -> border高度
    offsetHeight -> 可见区域：height + padding + border
    offsetTop    -> 上级定位标签的高度
    scrollHeight -> 全文高：height + padding
    scrollTop    -> 滚动高度
    特别的：
        document.documentElement代指文档根节点
*/
<span style="color: #0000ff;">b70c64a5464fe1646808593eae42a7a7</span>
<span style="color: #0000ff;">27c48d4b480ea592f362334f61449049</span>
<span style="color: #0000ff;">d68d21ef92ab180bff26a5a93305dea8</span>
    <span style="color: #0000ff;">bb27581bdc82849cd353ec0bc99a5a93</span>
    <span style="color: #0000ff;">b02ec9dc6c1602e2b6b318511e1f513400184704c11e7804493feb92cf7cb2ef</span>
<span style="color: #0000ff;">aeb804e38082af6a3e321b6e6edf51e6</span>
<span style="color: #0000ff;">cc11a6c159f9f4b2338048072b37e55d</span>
    <span style="color: #0000ff;">865bbbcda2c9c9a15313dab7015fc1bb</span>

    <span style="color: #0000ff;">4d765cbf8ce485a2a526f75a4eba1cce</span>
    <span style="color: #0000ff;">67d106fdbb5b5cac47f2aedbc93832b7</span>
        <span style="color: #0000ff;">5a72cba5da6aed9516bee2ae5d360ffd</span>
                <span style="color: #0000ff;">fed9cad356cec09afa3e2a7bd2513208</span>asdf<span style="color: #0000ff;">aea4995305aa2743a243ce011e9fcbb5</span>
                <span style="color: #0000ff;">fed9cad356cec09afa3e2a7bd2513208</span>asdf<span style="color: #0000ff;">aea4995305aa2743a243ce011e9fcbb5</span>
                <span style="color: #0000ff;">fed9cad356cec09afa3e2a7bd2513208</span>asdf<span style="color: #0000ff;">aea4995305aa2743a243ce011e9fcbb5</span>
                <span style="color: #0000ff;">fed9cad356cec09afa3e2a7bd2513208</span>asdf<span style="color: #0000ff;">aea4995305aa2743a243ce011e9fcbb5</span>
                <span style="color: #0000ff;">fed9cad356cec09afa3e2a7bd2513208</span>asdf<span style="color: #0000ff;">aea4995305aa2743a243ce011e9fcbb5</span>
        <span style="color: #0000ff;">4d765cbf8ce485a2a526f75a4eba1cce</span>
    <span style="color: #0000ff;">4d765cbf8ce485a2a526f75a4eba1cce</span>

    <span style="color: #0000ff;">8acf32672a8e51b9705f488a5e2ac86a</span>
        <span style="background-color: #f5f5f5; color: #0000ff;">var</span><span style="background-color: #f5f5f5; color: #000000;"> i1 </span><span style="background-color: #f5f5f5; color: #000000;">=</span><span style="background-color: #f5f5f5; color: #000000;"> document.getElementById(</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">i1</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">);

        console.log(i1.clientHeight); </span><span style="background-color: #f5f5f5; color: #008000;">//</span><span style="background-color: #f5f5f5; color: #008000;"> 可见区域：height + padding</span>
<span style="background-color: #f5f5f5; color: #000000;">        console.log(i1.clientTop);    </span><span style="background-color: #f5f5f5; color: #008000;">//</span><span style="background-color: #f5f5f5; color: #008000;"> border高度</span>
<span style="background-color: #f5f5f5; color: #000000;">        console.log(</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">=====</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">);
        console.log(i1.offsetHeight); </span><span style="background-color: #f5f5f5; color: #008000;">//</span><span style="background-color: #f5f5f5; color: #008000;"> 可见区域：height + padding + border</span>
<span style="background-color: #f5f5f5; color: #000000;">        console.log(i1.offsetTop);    </span><span style="background-color: #f5f5f5; color: #008000;">//</span><span style="background-color: #f5f5f5; color: #008000;"> 上级定位标签的高度</span>
<span style="background-color: #f5f5f5; color: #000000;">        console.log(</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">=====</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">);
        console.log(i1.scrollHeight);   </span><span style="background-color: #f5f5f5; color: #008000;">//</span><span style="background-color: #f5f5f5; color: #008000;">全文高：height + padding</span>
<span style="background-color: #f5f5f5; color: #000000;">        console.log(i1.scrollTop);      </span><span style="background-color: #f5f5f5; color: #008000;">//</span><span style="background-color: #f5f5f5; color: #008000;"> 滚动高度</span>
<span style="background-color: #f5f5f5; color: #000000;">        console.log(</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">=====</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">);

    </span><span style="color: #0000ff;">37350479318729d95f4adb838805f18d</span>
<span style="color: #0000ff;">17c48f9384b0d7f54ab6024d7c7070f0</span>
<span style="color: #0000ff;">aa335abca1c4625a6feacef5476fb458</span><span style="color: #000000;">

test</span>
test 
<span style="color: #0000ff;">b70c64a5464fe1646808593eae42a7a7</span>
<span style="color: #0000ff;">27c48d4b480ea592f362334f61449049</span>
<span style="color: #0000ff;">d68d21ef92ab180bff26a5a93305dea8</span>
    <span style="color: #0000ff;">bb27581bdc82849cd353ec0bc99a5a93</span>
    <span style="color: #0000ff;">b02ec9dc6c1602e2b6b318511e1f513400184704c11e7804493feb92cf7cb2ef</span>
<span style="color: #0000ff;">aeb804e38082af6a3e321b6e6edf51e6</span>
<span style="color: #0000ff;">3b21e6c8c45975c3ab5015aaf5f6e09a</span><span style="background-color: #f5f5f5; color: #800000;">

    body</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
        margin</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 0px</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
    <span style="background-color: #f5f5f5; color: #000000;">}</span><span style="background-color: #f5f5f5; color: #800000;">
    img </span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
        border</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 0</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
    <span style="background-color: #f5f5f5; color: #000000;">}</span><span style="background-color: #f5f5f5; color: #800000;">
    ul</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
        padding</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 0</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
        margin</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 0</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
        list-style</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> none</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
    <span style="background-color: #f5f5f5; color: #000000;">}</span><span style="background-color: #f5f5f5; color: #800000;">
    .clearfix:after </span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
        content</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> "."</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
        display</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> block</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
        height</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 0</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
        clear</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> both</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
        visibility</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> hidden</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
    <span style="background-color: #f5f5f5; color: #000000;">}</span><span style="background-color: #f5f5f5; color: #800000;">

    .wrap</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
        width</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 980px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
        margin</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 0 auto</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
    <span style="background-color: #f5f5f5; color: #000000;">}</span><span style="background-color: #f5f5f5; color: #800000;">

    .pg-header</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
        background-color</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> #303a40</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
        -webkit-box-shadow</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 0 2px 5px rgba(0,0,0,.2)</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
        -moz-box-shadow</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 0 2px 5px rgba(0,0,0,.2)</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
        box-shadow</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 0 2px 5px rgba(0,0,0,.2)</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
    <span style="background-color: #f5f5f5; color: #000000;">}</span><span style="background-color: #f5f5f5; color: #800000;">
    .pg-header .logo</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
        float</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> left</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
        padding</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">5px 10px 5px 0px</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
    <span style="background-color: #f5f5f5; color: #000000;">}</span><span style="background-color: #f5f5f5; color: #800000;">
    .pg-header .logo img</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
        vertical-align</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> middle</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
        width</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 110px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
        height</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 40px</span><span style="background-color: #f5f5f5; color: #000000;">;</span>

    <span style="background-color: #f5f5f5; color: #000000;">}</span><span style="background-color: #f5f5f5; color: #800000;">
    .pg-header .nav</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
        line-height</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 50px</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
    <span style="background-color: #f5f5f5; color: #000000;">}</span><span style="background-color: #f5f5f5; color: #800000;">
    .pg-header .nav ul li</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
        float</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> left</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
    <span style="background-color: #f5f5f5; color: #000000;">}</span><span style="background-color: #f5f5f5; color: #800000;">
    .pg-header .nav ul li a</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
        display</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> block</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
        color</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> #ccc</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
        padding</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 0 20px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
        text-decoration</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> none</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
        font-size</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 14px</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
    <span style="background-color: #f5f5f5; color: #000000;">}</span><span style="background-color: #f5f5f5; color: #800000;">
    .pg-header .nav ul li a:hover</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
        color</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> #fff</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
        background-color</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> #425a66</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
    <span style="background-color: #f5f5f5; color: #000000;">}</span><span style="background-color: #f5f5f5; color: #800000;">
    .pg-body</span><span style="background-color: #f5f5f5; color: #000000;">{</span>

    <span style="background-color: #f5f5f5; color: #000000;">}</span><span style="background-color: #f5f5f5; color: #800000;">
    .pg-body .catalog</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
        position</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> absolute</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
        top</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">60px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
        width</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 200px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
        background-color</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> #fafafa</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
        bottom</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 0px</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
    <span style="background-color: #f5f5f5; color: #000000;">}</span><span style="background-color: #f5f5f5; color: #800000;">
    .pg-body .catalog.fixed</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
        position</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> fixed</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
        top</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">10px</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
    <span style="background-color: #f5f5f5; color: #000000;">}</span><span style="background-color: #f5f5f5; color: #800000;">

    .pg-body .catalog .catalog-item.active</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
        color</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> #fff</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
        background-color</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> #425a66</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
    <span style="background-color: #f5f5f5; color: #000000;">}</span><span style="background-color: #f5f5f5; color: #800000;">

    .pg-body .content</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
        position</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> absolute</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
        top</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">60px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
        width</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 700px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
        margin-left</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 210px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
        background-color</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> #fafafa</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
        overflow</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> auto</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
    <span style="background-color: #f5f5f5; color: #000000;">}</span><span style="background-color: #f5f5f5; color: #800000;">
    .pg-body .content .section</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
        height</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 500px</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
    <span style="background-color: #f5f5f5; color: #000000;">}</span>
<span style="color: #0000ff;">6d2d69a16dc4083b65da95a7bbc232fc</span>
<span style="color: #0000ff;">81983e5222108b684a65c10acbd084a5</span>
<span style="color: #0000ff;">c31b8aecb9fe57e92a35dfa0f0b0a81b</span>
    <span style="color: #0000ff;">b4c487f112b94b4fb11bf1c784b3bac2</span>
        <span style="color: #0000ff;">7a089a2adf10ebef7843c521324d4fb1</span>
            <span style="color: #0000ff;">c7ab37c32f8c364fe53a2ba4d5afddb5</span>
                <span style="color: #0000ff;">c43380390241ed88362f0230b10ecd77</span>
            <span style="color: #0000ff;">ef2198faed6b9ce9f38821054836d50e</span>
        <span style="color: #0000ff;">4d765cbf8ce485a2a526f75a4eba1cce</span>
        <span style="color: #0000ff;">5922c1f74ed270d1b8d1146f01dfe4fc</span>
            <span style="color: #0000ff;">a15f8999304d48fee6cdba3fb75b0af0</span>
                <span style="color: #0000ff;">9d549b8f9ec5571cba0d7211f45a4fcc</span>
                    <span style="color: #0000ff;">fd4d1e601d644b2704795121501f3c2b</span>首页<span style="color: #0000ff;">ef2198faed6b9ce9f38821054836d50e</span>
                <span style="color: #0000ff;">9a0dcfbb8f74d23e1e5829d29873faa4</span>
                <span style="color: #0000ff;">9d549b8f9ec5571cba0d7211f45a4fcc</span>
                    <span style="color: #0000ff;">fd4d1e601d644b2704795121501f3c2b</span>功能一<span style="color: #0000ff;">ef2198faed6b9ce9f38821054836d50e</span>
                <span style="color: #0000ff;">9a0dcfbb8f74d23e1e5829d29873faa4</span>
                <span style="color: #0000ff;">9d549b8f9ec5571cba0d7211f45a4fcc</span>
                    <span style="color: #0000ff;">fd4d1e601d644b2704795121501f3c2b</span>功能二<span style="color: #0000ff;">ef2198faed6b9ce9f38821054836d50e</span>
                <span style="color: #0000ff;">9a0dcfbb8f74d23e1e5829d29873faa4</span>
            <span style="color: #0000ff;">76472038331ba440f7972f1d519f8dbe</span>
        <span style="color: #0000ff;">4d765cbf8ce485a2a526f75a4eba1cce</span>

    <span style="color: #0000ff;">4d765cbf8ce485a2a526f75a4eba1cce</span>
<span style="color: #0000ff;">4d765cbf8ce485a2a526f75a4eba1cce</span>
<span style="color: #0000ff;">2ace522a4420f066a706ff466bc45407</span><span style="color: #0000ff;">75529d1c38a265491928220a31bf685c</span>
        <span style="color: #0000ff;">6d081555ceeafb4552395446973821bb</span>
            <span style="color: #0000ff;">97b63477d2dc83ee01f39d0daa3545bcc5f79063da447f318b600dd23b0f53ac</span>第1张<span style="color: #0000ff;">ef2198faed6b9ce9f38821054836d50e4d765cbf8ce485a2a526f75a4eba1cce</span>
            <span style="color: #0000ff;">dbf9389f39982520e0359e06e9b12339c5f79063da447f318b600dd23b0f53ac</span>第2张<span style="color: #0000ff;">ef2198faed6b9ce9f38821054836d50e4d765cbf8ce485a2a526f75a4eba1cce</span>
            <span style="color: #0000ff;">2933f648e01aada165efebe963e308d7c5f79063da447f318b600dd23b0f53ac</span>第3张<span style="color: #0000ff;">ef2198faed6b9ce9f38821054836d50e4d765cbf8ce485a2a526f75a4eba1cce</span>
        <span style="color: #0000ff;">4d765cbf8ce485a2a526f75a4eba1cce</span>
        <span style="color: #0000ff;">a245cabac94856ec8c1c6435e515db93</span>
            <span style="color: #0000ff;">6562dc4356a18fa01037df8031cbb615</span>
                <span style="color: #0000ff;">6f1ac5281349583249593371ee0a7f29</span>第一章<span style="color: #0000ff;">b3acff1f58cd17d3257b0cd40aecd431</span>
            <span style="color: #0000ff;">4d765cbf8ce485a2a526f75a4eba1cce</span>
            <span style="color: #0000ff;">02f150c962da7691dada213713f8cb63</span>
                <span style="color: #0000ff;">6f1ac5281349583249593371ee0a7f29</span>第二章<span style="color: #0000ff;">b3acff1f58cd17d3257b0cd40aecd431</span>
            <span style="color: #0000ff;">4d765cbf8ce485a2a526f75a4eba1cce</span>
            <span style="color: #0000ff;">c27934903e130b47a1591f8835ee3815</span>
                <span style="color: #0000ff;">6f1ac5281349583249593371ee0a7f29</span>第三章<span style="color: #0000ff;">b3acff1f58cd17d3257b0cd40aecd431</span>
            <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span>
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：一个（伪）MaterialDesign风格的皮肤Next article：CSS3过渡详解-遁地龙卷风

Related articles

See more