suchen

Heim >Web-Frontend >HTML-Tutorial >Dom

Dom

WBOY
WBOYOriginal
2016-08-26 10:13:121375Durchsuche

Document Object Model (DOM) ist eine Programmierschnittstelle für HTML- und XML-Dokumente. Es bietet eine strukturierte Darstellung des Dokuments und kann den Inhalt und die Präsentation des Dokuments ändern. Was uns am meisten beunruhigt, ist, dass das DOM Webseiten mit Skripten und anderen Programmiersprachen verbindet. Das DOM gehört zum Browser und nicht zum Kerninhalt, der in der JavaScript-Sprachspezifikation angegeben ist.

1. Elemente finden

1. Direkt suchen

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

2. Indirekte Suche

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

2. Bedienung

1. Inhalt

innerText   文本
outerText
innerHTML   HTML内容
innerHTML  
value       值

2. Attribute

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. Klassenbetrieb

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

4. Tag-Operation

a. Tags erstellen

// 方式一
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. Operations-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. Stiloperation 

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. Positionsbetrieb

总文档高度
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>
Testen 
<span style="color: #0000ff;">b70c64a5464fe1646808593eae42a7a7</span>
<span style="color: #0000ff;">27c48d4b480ea592f362334f61449049</span>
<span style="color: #0000ff;">797d2b235ae52d7a0b7a41c099e11ef9</span>
    <span style="color: #0000ff;">bb27581bdc82849cd353ec0bc99a5a93</span>
    <span style="color: #0000ff;">2b6c5df2aba97703577995da96d34a97520b076d4f4be49ed1cdbe05e4870dcc</span>
<span style="color: #0000ff;">1ec99bc9204764843f8ccb2a128fc15d</span>
<span style="color: #0000ff;">743ff4f785c6588af14253ff229ecc80</span><span style="background-color: #f5f5f5; color: #800000;">

    Körper</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
        Rand</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;">
        Grenze</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;">
        Polsterung</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;">
        Rand</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;">
        Listenstil</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">keine</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:nach </span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
        Inhalt</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;">
        Anzeige</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;">
        Höhe</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;">
        klar</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> beides</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
        Sichtbarkeit</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> ausgeblendet</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;">
        Breite</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;">
        Rand</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 0 automatisch</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;">
        Hintergrundfarbe</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;">
        schweben</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> links</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
        Polsterung</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;">
        vertikal ausrichten</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> Mitte</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
        Breite</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;">
        Höhe</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;">
        Zeilenhöhe</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;">
        schweben</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> links</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;">
        Anzeige</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;">
        Farbe</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;">
        Polsterung</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;">
        Textdekoration</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> keine</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
        Schriftgröße</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;">
        Farbe</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;">
        Hintergrundfarbe</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;"> absolut</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
        oben</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;">
        Breite</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;">
        Hintergrundfarbe</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;">
        unten</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;"> fest</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
        oben</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;">
        Farbe</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;">
        Hintergrundfarbe</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;"> absolut</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
        oben</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;">
        Breite</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;">
        Rand links</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;">
        Hintergrundfarbe</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;">
        Überlauf</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> automatisch</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;">
        Höhe</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;">220c857342376db9b52cd9418344b8c2</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;">0f789ac460482d40b2f4dd555bb0e2f7</span>
                <span style="color: #0000ff;">39d3e092797f6a1ca26c0b5740e4247d</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;">0f789ac460482d40b2f4dd555bb0e2f7</span>首页<span style="color: #0000ff;">0fd58daa0ff67757e359788a964c19ae</span>
                <span style="color: #0000ff;">9a0dcfbb8f74d23e1e5829d29873faa4</span>
                <span style="color: #0000ff;">9d549b8f9ec5571cba0d7211f45a4fcc</span>
                    <span style="color: #0000ff;">c7ab37c32f8c364fe53a2ba4d5afddb5</span>功能一<span style="color: #0000ff;">ef2198faed6b9ce9f38821054836d50e</span>
                <span style="color: #0000ff;">9a0dcfbb8f74d23e1e5829d29873faa4</span>
                <span style="color: #0000ff;">9d549b8f9ec5571cba0d7211f45a4fcc</span>
                    <span style="color: #0000ff;">c7ab37c32f8c364fe53a2ba4d5afddb5</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;">292bb2f9aa36c34de41dbfc1c0d3ee6bc5f79063da447f318b600dd23b0f53ac</span>第1张<span style="color: #0000ff;">28e76c6d00452a327215750c1202bfd24d765cbf8ce485a2a526f75a4eba1cce</span>
            <span style="color: #0000ff;">96e7e0e009f899d4e2c402930849267fc5f79063da447f318b600dd23b0f53ac</span>第2张<span style="color: #0000ff;">28e76c6d00452a327215750c1202bfd24d765cbf8ce485a2a526f75a4eba1cce</span>
            <span style="color: #0000ff;">e17dc3701f5b4bfe84a7a6650c2801b5c5f79063da447f318b600dd23b0f53ac</span>第3张<span style="color: #0000ff;">28e76c6d00452a327215750c1202bfd24d765cbf8ce485a2a526f75a4eba1cce</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>
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：一个（伪）MaterialDesign风格的皮肤Nächster Artikel：CSS3过渡详解-遁地龙卷风

In Verbindung stehende Artikel

Mehr sehen