찾다

집 >웹 프론트엔드 >HTML 튜토리얼 >돔

돔

WBOY
WBOY원래의
2016-08-26 10:13:121375검색

문서 개체 모델(DOM)은 HTML 및 XML 문서용 프로그래밍 인터페이스입니다. 문서의 구조화된 표현을 제공하고 문서의 내용과 표현을 변경할 수 있습니다. 우리가 가장 우려하는 점은 DOM이 웹페이지를 스크립트 및 기타 프로그래밍 언어와 연결한다는 것입니다. DOM은 JavaScript 언어 사양에 지정된 핵심 콘텐츠가 아닌 브라우저에 속합니다.

1. 요소 찾기

1. 직접 검색

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

2. 간접검색

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

2. 작전

1. 내용

innerText   文本
outerText
innerHTML   HTML内容
innerHTML  
value       值

2.속성

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>
데모

3. 수업운영

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

4. 태그 작업

A. 태그 만들기

// 方式一
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. 작업 태그 

// 方式一
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. 스타일 조작 

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>
데모

6. 포지션 운용

总文档高度
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>
테스트 
<span style="color: #0000ff;">b70c64a5464fe1646808593eae42a7a7</span>
<span style="color: #0000ff;">27c48d4b480ea592f362334f61449049</span>
<span style="color: #0000ff;">2be27f8dfd4ecd8bdb4f9af951c9d34a</span>
    <span style="color: #0000ff;">9631332ea94b7475d4692fd45dea1cf9</span>
    <span style="color: #0000ff;">3162c52ef92dab7d38aea13cd79a42d7459f530a799515bd233be5390a680978</span>
<span style="color: #0000ff;">be00e641158bbd6b9f3652d9d1435de5</span>
<span style="color: #0000ff;">f6a4476e39a050aba97d49f88115eab7</span><span style="background-color: #f5f5f5; color: #800000;">

    몸</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
        여백</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;">
        테두리</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;">
        패딩</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;">
        여백</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;">
        목록 스타일</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: #000000;">}</span><span style="background-color: #f5f5f5; color: #800000;">
    .clearfix:이후 </span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
        내용</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;">
        디스플레이</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;">
        키</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;">
        지우기</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;">
        가시성</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: #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;">
        너비</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;">
        여백</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;">

    .pg-헤더</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
        배경색</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;">
        상자 그림자</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;">
        부동</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;">
        패딩</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;">
        수직 정렬</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;">
        너비</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;">
        높이</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-헤더 .nav</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
        줄 높이</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;">
        부동</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: #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;">
        디스플레이</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;">
        색상</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;">
        패딩</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;">
        텍스트 장식</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;">
        글꼴 크기</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;">
        색상</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;">
        배경색</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;">
        위치</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;">
        상단</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;">
        너비</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 200픽셀</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
        배경색</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;">
        하단</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;">
        위치</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;">
        상단</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;">
        색상</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;">
        배경색</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;">
        위치</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;">
        상단</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;">
        너비</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;">
        여백-왼쪽</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;">
        배경색</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;">
        오버플로</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: #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;">
        높이</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;">274076b72114e65b0e418061315a7481</span>
<span style="color: #0000ff;">82399b68f6898abc4a7b46c91c84fb9d</span>
<span style="color: #0000ff;">c31b8aecb9fe57e92a35dfa0f0b0a81b</span>
    <span style="color: #0000ff;">6fe5c94e8abbf0f10301473a2261ec2c</span>
        <span style="color: #0000ff;">7a089a2adf10ebef7843c521324d4fb1</span>
            <span style="color: #0000ff;">df404980d84a55f5e2fb6c54656c1810</span>
                <span style="color: #0000ff;">39d3e092797f6a1ca26c0b5740e4247d</span>
            <span style="color: #0000ff;">a86b47aa084335b8f5d679f137496baa</span>
        <span style="color: #0000ff;">4d765cbf8ce485a2a526f75a4eba1cce</span>
        <span style="color: #0000ff;">5922c1f74ed270d1b8d1146f01dfe4fc</span>
            <span style="color: #0000ff;">a15f8999304d48fee6cdba3fb75b0af0</span>
                <span style="color: #0000ff;">fea7fe6073df70fc3bd6f25a2d9bb612</span>
                    <span style="color: #0000ff;">7b46d1a3bfc57cc7bdeba1f1dbfcf03c</span>首页<span style="color: #0000ff;">62b8de06a14fea7c44825f4c60e9a478</span>
                <span style="color: #0000ff;">d908a2f96f230bbe2629472b1bfbde3c</span>
                <span style="color: #0000ff;">fea7fe6073df70fc3bd6f25a2d9bb612</span>
                    <span style="color: #0000ff;">7b46d1a3bfc57cc7bdeba1f1dbfcf03c</span>功能一<span style="color: #0000ff;">a86b47aa084335b8f5d679f137496baa</span>
                <span style="color: #0000ff;">d908a2f96f230bbe2629472b1bfbde3c</span>
                <span style="color: #0000ff;">fea7fe6073df70fc3bd6f25a2d9bb612</span>
                    <span style="color: #0000ff;">7b46d1a3bfc57cc7bdeba1f1dbfcf03c</span>功能two<span style="color: #0000ff;">a86b47aa084335b8f5d679f137496baa</span>
                <span style="color: #0000ff;">d908a2f96f230bbe2629472b1bfbde3c</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;">d62896b07edd43d0951f5027bcc03ed3fb3764f219bc7af28ef22a11022f83f4</span>第1张<span style="color: #0000ff;">05029f8d394cd9c964cb060adf9608b84d765cbf8ce485a2a526f75a4eba1cce</span>
            <span style="color: #0000ff;">3f4f985b576e4fffd60b096345ceeac1fb3764f219bc7af28ef22a11022f83f4</span>第2张<span style="color: #0000ff;">05029f8d394cd9c964cb060adf9608b84d765cbf8ce485a2a526f75a4eba1cce</span>
            <span style="color: #0000ff;">425ca3cf77910593ca59d4a5dbcb4335fb3764f219bc7af28ef22a11022f83f4</span>第3张<span style="color: #0000ff;">05029f8d394cd9c964cb060adf9608b84d765cbf8ce485a2a526f75a4eba1cce</span>
        <span style="color: #0000ff;">4d765cbf8ce485a2a526f75a4eba1cce</span>
        <span style="color: #0000ff;">a245cabac94856ec8c1c6435e515db93</span>
            <span style="color: #0000ff;">47f656eb388ddc8289de476b7eade601</span>
                <span style="color: #0000ff;">6f1ac5281349583249593371ee0a7f29</span>第一章<span style="color: #0000ff;">b3acff1f58cd17d3257b0cd40aecd431</span>
            <span style="color: #0000ff;">4d765cbf8ce485a2a526f75a4eba1cce</span>
            <span style="color: #0000ff;">a88ee616021292d81157504736bc802c</span>
                <span style="color: #0000ff;">6f1ac5281349583249593371ee0a7f29</span>第二章<span style="color: #0000ff;">b3acff1f58cd17d3257b0cd40aecd431</span>
            <span style="color: #0000ff;">4d765cbf8ce485a2a526f75a4eba1cce</span>
            <span style="color: #0000ff;">73fa7bb7c966c77ae6928b88832a7729</span>
                <span style="color: #0000ff;">6f1ac5281349583249593371ee0a7f29</span>第三章<span style="color: #0000ff;">b3acff1f58cd17d3257b0cd40aecd431</span>
            <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span>
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：一个（伪）MaterialDesign风格的皮肤다음 기사：CSS3过渡详解-遁地龙卷风

관련 기사

더보기