JavaScript DOM 编程艺术读书笔记

最新推荐文章于 2024-04-24 09:22:16 发布

f(me)

最新推荐文章于 2024-04-24 09:22:16 发布

阅读量688

点赞数 2

分类专栏：前端积累文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_52151772/article/details/117293078

版权

前端积累专栏收录该内容

28 篇文章 10 订阅

订阅专栏

Js

// 首先需要一个addLoadEvent函数，因为在文档完全加载后如果想运行某个函数，就需要用到它
function addLoadEvent(func) {
    // 把现有的window.onload 事件查理函数的值存入变量oldonload.
    var oldonload = window.onload
    // 如果在这个处理函数上还没有绑定任何函数，就像平时那样把新函数添加给它
    if (typeof window.onload != 'function'){
        window.onload = func;
    // 如果在这个处理函数上已经绑定了一些函数，就把新函数最佳到现有指令的末尾。
    } else {
        window.onload = function() {
            oldonload();
            func();
        }
    }
}
// ==========================================


// ==========================================
// 添加到某个元素后面
// 编写insertAfter函数
// dom 没有提供添加到某个节点之后的方法，我们需要利用已有的方法来编写一个
// 俩个参数 一个是将要被插入的新元素，另一个是目标元素
function insertAfter(newElement,targetElement) {
    // 把目标的母节点保存到变量中
    var parent = targetElement.parentNode;
    // var parent = document.getElementById("placeholder");
    // 检查元素是不是parent的最后一个子元素
    if( parent.lastChild == targetElement) {
        // 如果是就用appendChild方法把新元素追加到parent元素上
        parent.appendChild(newElement);
    }else {
        // 如果不是就把新元素插入到目标元素和目标元素的下一个兄弟元素（既nextSbling）之间
        parent.insertBefore(newElement,targetElement.nextSibling);
    }
}
// ==========================================


// ==========================================
function highlightPage() {
    if(!document.getElementsByTagName) return false;
    if(!document.getElementById) return false;
    var headers = document.getElementsByTagName("header");
    if(headers.length == 0) return false;
    var navs = headers[0].getElementsByTagName('nav');
    if(navs.length == 0) return false;
    var links = navs[0].getElementsByTagName("a");
    var linkurl;
    for (var i = 0; i<links.length; i++) {
        linkurl = links[i].getAttribute("href");
        if (window.location.href.indexOf(linkurl)!= -1) {
            links[i].className = "here";
            //给nav页面添加id
            var text = links[i].lastChild.nodeValue.toLowerCase();
            document.body.setAttribute("id",text);
        }
        
    }
}
addLoadEvent(highlightPage());
// ==========================================



// ==========================================
function moveElement (elementID,final_x,final_y,interval) {
    var elem = document.getElementById(elementID);
    if (elem.movement) {
        clearTimeout(elem.movement);    
    }
    if (!elem.style.left) {
        elem.style.left = "0px";
    }
    if (!elem.style.top) {
        elem.style.top = "0px";
    }
    var xops= parseInt(elem.style.left);
    var yops= parseInt(elem.style.top);
    if (xops ==final_x && yops==final_y) {
        return true;
    }
    if (xops < final_x) {
        var dist = Math.ceil((final_x - xops)/10);
        xops = xops + dist;
    }
    if (xops > final_x) {
        var dist = Math.ceil((xops - final_x)/10);
        xops = xops - dist;
    }
    if (yops < final_y) {
        var dist = Math.ceil((final_y - yops)/10);
        yops = yops + dist;
    }
    if (yops > final_y) {
        var dist = Math.ceil((yops - final_y)/10);
        yops = yops + dist;
    }
    elem.style.left = xops +"px";
    elem.style.top = yops + 'px';
    var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")";
    elem.movement = setTimeout(repeat,interval);
}
// ==========================================

// ==========================================
function prepareSlideshow () {
    if (!document.getElementById("intro")) {
        return false;
    }
    var intro = document.getElementById("intro");
    var slidshow = document.createElement("div");
    slidshow.setAttribute("id","slidshow");
    slidshow.style.borderRadius = "10px";
    var preview = document.createElement("img");
    preview.setAttribute("src","./images/slideshow.gif");
    preview.setAttribute("id","preview");
    slidshow.appendChild(preview);
    insertAfter(slidshow,intro);
    // intro 换成 documnet 就可以实现所有的a标签都能触发 动画
    var links = document.getElementsByTagName("a");
    var destination;
    for (var i = 0;i<links.length; i++ ) {
        links[i].onmouseover = function(){
            destination = this.getAttribute("href");
            if (destination.indexOf("index.html") != -1) {
                moveElement("preview",0,0,5);
            }
            if (destination.indexOf("about.html") != -1) {
                moveElement("preview",-150,0,5);    
            }
            if (destination.indexOf("photos.html") != -1) {
                moveElement("preview",-300,0,5);
            }
            if (destination.indexOf("live.html") != -1) {
                moveElement("preview",-450,0,5);
            }
            if (destination.indexOf("contact.html") != -1) {
                moveElement("preview",-600,0,5);
            }
        }
    }
}
addLoadEvent(prepareSlideshow);
// ==========================================



function showSection (id) {
    var sections = document.getElementsByTagName("section");
    for (var i=0; i<sections.length;i++) {
        if (sections[i].getAttribute("id")!=id) {
            sections[i].style.display = "none";
        }else{
            sections[i].style.display = "block";
        }
    }
}


function preparInternalnav () {
    var articles = document.getElementsByTagName("article");
    var navs = articles[0].getElementsByTagName("nav");
    if (navs.length == 0) return false;
    var nav = navs[0];
    var links = nav.getElementsByTagName("a");

    for (var i =0 ; i<links.length;i++) {
        var sectionId = links[i].getAttribute("href").split("#")[1];
        document.getElementById(sectionId).style.display = "none";
        links[i].destination = sectionId;
        links[i].onclick = function  () {
            showSection(this.destination);
            return false;
        }

    }
}
addLoadEvent(preparInternalnav);


//photos
function showPic (whichpic) {
    if (!document.getElementById("placeholder")) {
        return false;
    }
    var source = whichpic.getAttribute("href");
    var placeholder = document.getElementById("placeholder");
    placeholder.setAttribute("src",source);
    if (whichpic.getAttribute("title")) {
        var text = whichpic.getAttribute("title");
    } else{
        var text = "";
    }
    var description = document.getElementById("description");
    if (description.firstChild.nodeType == 3) {
        description.firstChild.nodeValue == text;
    }
    return false;
}

function  preparePlaceholder() {
    if (!document.createElement) return false;
    if (!document.createTextNode) return false;
    if (!document.getElementById) return false;
    if (!document.getElementById("imagegallery")) return false;
    var placeholder = document.createElement("img");
    placeholder.setAttribute("id","placeholder");
    placeholder.setAttribute("src","images/background.gif");
    placeholder.setAttribute("alt","buguanle andasda");
    var description = document.createElement("p");
    description.setAttribute("id","description");
    var desctext = document.createTextNode("chose one pic");
    description.appendChild(desctext);
    var  gallery = document.getElementById("imagegallery");
    insertAfter(description,gallery);
    insertAfter(placeholder,description);
}

function prepareGallery () {
    if (!document.getElementById) return false;
    if (!document.getElementById("imagegallery")) return false;
    var gallery = document.getElementById("imagegallery");
    var links = gallery.getElementsByTagName("a");
    for (var i = 0;i<links.length;i++) {
        links[i].onclick = function  () {
            return showPic(this);
        }
    }
}
addLoadEvent(preparePlaceholder);
addLoadEvent(prepareGallery);



function stripeTables() {
    if (!document.getElementsByTagName) return false;
    var tables = document.getElementsByTagName("table");
    for (var i=0; i<tables.length; i++) {
      var odd = false;
      var rows = tables[i].getElementsByTagName("tr");
      for (var j=0; j<rows.length; j++) {
        if (odd == true) {
          addClass(rows[j],"odd");
          odd = false;
        } else {
          odd = true;
        }
      }
    }
  }
  
  function highlightRows() {
    if(!document.getElementsByTagName) return false;
    var rows = document.getElementsByTagName("tr");
    for (var i=0; i<rows.length; i++) {
      rows[i].oldClassName = rows[i].className
      rows[i].onmouseover = function() {
        addClass(this,"highlight");
      }
      rows[i].onmouseout = function() {
        this.className = this.oldClassName
      }
    }
  }
  
  function displayAbbreviations() {
    if (!document.getElementsByTagName || !document.createElement || !document.createTextNode) return false;
      var abbreviations = document.getElementsByTagName("abbr");
      if (abbreviations.length < 1) return false;
      var defs = new Array();
      for (var i=0; i<abbreviations.length; i++) {
          var current_abbr = abbreviations[i];
          if (current_abbr.childNodes.length < 1) continue;
          var definition = current_abbr.getAttribute("title");
          var key = current_abbr.lastChild.nodeValue;
          defs[key] = definition;
      }
    var dlist = document.createElement("dl");
    for (key in defs) {
      var definition = defs[key];
      var dtitle = document.createElement("dt");
      var dtitle_text = document.createTextNode(key);
      dtitle.appendChild(dtitle_text);
      var ddesc = document.createElement("dd");
      var ddesc_text = document.createTextNode(definition);
      ddesc.appendChild(ddesc_text);
      dlist.appendChild(dtitle);
      dlist.appendChild(ddesc);
    }
    if (dlist.childNodes.length < 1) return false;
    var header = document.createElement("h3");
    var header_text = document.createTextNode("Abbreviations");
    header.appendChild(header_text);
    var articles = document.getElementsByTagName("article");
    if(articles.length==0)return false;
    var container = articles[0];
    container.appendChild(header);
    container.appendChild(dlist);
  }
  
  addLoadEvent(stripeTables);
  addLoadEvent(highlightRows);
  addLoadEvent(displayAbbreviations);


  //ajax
function getHTTPObject() {
    if (typeof XMLHttpRequest == 'undefined') {
        XMLHttpRequest = function(){
            try{
                return new ActiveXObject("Msxml2.XMLHTTP.6.0");
            }catch(e){}
            try{
                return new ActiveXObject("Msxml2.XMLHTTP.3.0");
            }catch(e){}
            try{
                return new ActiveXObject("Msxml2.XMLHTTP");
            }catch(e){}
            return false;
        }
    }
        return new XMLHttpRequest();
}

function displayAjaxLoading (element) {

    while (element.hasChildNodes()){
        element.removeChild(element.lastChild);
    }
    var content = document.createElement("img");
    content.setAttribute("src","./images/loading.gif");
    content.setAttribute("alt","loading...");
    console.log(element);
    element.appendChild(content);

}
function submitFormWithAjax (whichform,thetarget) {
    var request = getHTTPObject();
    if (!request) {
        return false;
    }
    displayAjaxLoading(thetarget);
    var dataParts = [];
    var element;
    for (var i = 0;i<whichform.elements.length;i++) {
        element= whichform.elements[i];
        dataParts[i]= element.name + '=' +encodeURIComponent(element.value);
    }
    var data = dataParts.join("&");
    request.open('GET',whichform.getAttribute("action"),true);
    request.setRequestHeader('Content-type','application/x-www-form-urlencoded');
    request.onreadystatechange= function  () {
        if (request.readyState == 4) {
            if (request.status ==200 ||request.status ==0) {
                var matches = request.responseText.match(/<article>([\s\S]+)<\/article>/);
                if (matches.length > 0) {
                    thetarget.innerHTML = matches[1];
                }else{
                    thetarget.innerHTML = '<p>' + oops +'<p>';
                }
            }else{
                console.log("status error");
            }
        }
    };
    request.send(data);
    console.log("成功了");
    return true;
}

function preparForms () {
    for (var i=0; i<document.forms.length;i++) {
        var thisform = document.forms[i];

//      resetFields(thisform);
        thisform.onsubmit = function  () {
            var article = document.getElementsByTagName("article")[0];
            if (submitFormWithAjax(this,article)) {

                return false;
            }
            return true;
        }
    }
}
addLoadEvent(preparForms);

template.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Jay Skript and the Domsters</title>
    <link rel="stylesheet" href="styles/basic.css">
</head>
<body>
    <!-- 头部区域包含站点的品牌性信息，也是放Logo的地方。这个区域要使用<header>元素 -->
    <header>
        <img src="images/logo.gif" alt="">
        <!-- 导航区域中包含一组链接，指向各个页面。这个区域使用<nav>元素 -->
        <nav>`在这里插入代码片`
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="about.html">About</a></li>
                <li><a href="photos.html">Photos</a></li>
                <li><a href="live.html">Live</a></li>
                <li><a href="contact.html">Contact</a></li>
            </ul>
        </nav>
    </header>
    <!-- 内容区域包含每一页的实质性内容，这个区域使用<acticle>元素 -->
    <article>
        <p>
            呕吼
        </p>
    </article>
</body>
</html>

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Jay Skript and the Domsters</title>
    <link rel="stylesheet" href="styles/basic.css">
</head>
<body>
    <!-- 头部区域包含站点的品牌性信息，也是放Logo的地方。这个区域要使用<header>元素 -->
    <header>
        <img src="images/logo.gif" alt="">
        <!-- 导航区域中包含一组链接，指向各个页面。这个区域使用<nav>元素 -->
        <nav>
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="about.html">About</a></li>
                <li><a href="photos.html">Photos</a></li>
                <li><a href="live.html">Live</a></li>
                <li><a href="contact.html">Contact</a></li>
            </ul>
        </nav>
    </header>
    <!-- 内容区域包含每一页的实质性内容，这个区域使用<acticle>元素 -->
    <article>
        <h1>Lorem Ipsum Dolor</h1>
            <p id="intro">Welcome to the official website of Jay Skript and the Domsters. 
            Here, <a href="index.html">Home</a>you can learn more about<a href="about.html">about</a> the band, view photos of the band, 
            find out <a href="photos.html">photo</a>about tour <a href="contact.html">contact</a>dates <a href="live.html">live</a>and get in touch with the band.
            <a href="https://domscripting.com/domsters/index.html">我是一个演示案例好像是官方</a>
            </p>
    </article>

    <!-- js -->
    <script src="scripts/global.js"></script>
</body>
</html>

about.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title> Jay sckript and the Domsters</title>
        <link rel="stylesheet" type="text/css" href="styles/basic.css"/>
    </head>
    <body>
        <!-- 头部开始-->
        <header>
            <!--头部上半部分-->
            <img src="images/logo.gif"/>
            <!--头部下半部分-->
            <nav>
                <ul>
                    <li><a href="index.html">Home</a></li>
                    <li><a href="about.html">about</a></li>
                    <li><a href="photos.html">photo</a></li>
                    <li><a href="live.html">live</a></li>
                    <li><a href="contact.html">contact</a></li>
                </ul>
            </nav>
        </header>
        <!--内容-->
        <article>
            <h1>Lorem Ipsum Dolor</h1>
            <nav>
                <ul>
                    <li><a href="#jay">jav</a></li>
                    <li><a href="#dom">dom</a></li>
                </ul>
            </nav>
            <section id="jay">
                <h2>jay</h2>
                <p>Jay Skript is going to rock your world!
                    Together with his compatriots The Domsters, Jay is set for world domination. Just you wait and see.
                    Jay Skript has been on the scene since the mid nineties. His talent hasn't always been recognized or fully appreciated. 
                    In the early days, he was often unfavorably compared to bigger, similarly-named artists. That's all in the past now.</p>
            </section>
            <section id="dom">
                <h2>dom</h2>
                <p>The Domsters have been around, in one form or another, for almost as long. 
                    It's only in the past few years that The Domsters have settled down to their current,
                     stable line-up. Now they're a rock-solid bunch: methodical and dependable</p>
            </section>
        </article>
        <script src="scripts/global.js" type="text/javascript" charset="utf-8"></script>
</html>

photos.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>Jay Skript And The Domsters: Photos</title>
  <script src="scripts/modernizr.js"></script>
  <link rel="stylesheet" media="screen" href="styles/basic.css" />
    <style>
        a>img{
            width: 23%;
        }
        #placeholder{
            width: 100%;
        }
    </style>
</head>
<body>
  <header>
    <img src="images/logo.gif" alt="Jay Skript and the Domsters" />
    <nav>
      <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="photos.html">Photos</a></li>
        <li><a href="live.html">Live</a></li>
        <li><a href="contact.html">Contact</a></li>
      </ul>
    </nav>
  </header>
  <article>
    <h1>Photos of the band</h1>
    <ul id="imagegallery">
      <li>
        <a href="images/background.gif" title="The crowd goes wild">
          <img src="images/background.gif" alt="the band in concert" />
        </a>
      </li>
      <li>
        <a href="images/guitarist.gif" title="An atmospheric moment">
          <img src="images/guitarist.gif" alt="the bassist" />
        </a>
      </li>
      <li>
        <a href="images/lineup.gif" title="Rocking out">
          <img src="images/lineup.gif" alt="the guitarist" />
        </a>
      </li>
      <li>
        <a href="images/navbar.gif" title="Encore! Encore!">
          <img src="images/navbar.gif" alt="the audience" />
        </a>
      </li>
    </ul>
  </article>
  <script src="scripts/global.js"></script>
</body>
</html>

live.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title> Jay sckript and the Domsters</title>
        <link rel="stylesheet" type="text/css" href="styles/basic.css"/>
    </head>
    <body>
        <!-- 头部开始-->
        <header>
            <!--头部上半部分-->
            <img src="images/logo.gif"/>
            <!--头部下半部分-->
            <nav>
                <ul>
                    <li><a href="index.html">Home</a></li>
                    <li><a href="about.html">about</a></li>
                    <li><a href="photos.html">photo</a></li>
                    <li><a href="live.html">live</a></li>
                    <li><a href="contact.html">contact</a></li>
                </ul>
            </nav>
        </header>
        <!--内容-->
        <article>
            <h1>tour data</h1>
            <table>
                <thead>
                    <tr>
                        <th>Data</th>
                        <th>City</th>
                        <th>Venue</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>June</td>
                        <td>Portland <abbr title="Orgnr">OR</abbr></td>
                        <td>croasdasdasd</td>
                    </tr>
                    <tr>
                        <td>June</td>
                        <td>Portland <abbr title="Orgnr">OR</abbr></td>
                        <td>croasdasdasd</td>
                    </tr>
                    <tr>
                        <td>June</td>
                        <td>Portland <abbr title="Orgnr">OR</abbr></td>
                        <td>croasdasdasd</td>
                    </tr>
                    <tr>
                        <td>June</td>
                        <td>Portland <abbr title="Orgnr">OR</abbr></td>
                        <td>croasdasdasd</td>
                    </tr>
                </tbody>
            </table>
        </article>
        <script src="scripts/global.js" type="text/javascript" charset="utf-8"></script>
</html>

contact.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title> Jay sckript and the Domsters</title>
    <link rel="stylesheet" type="text/css" href="styles/basic.css" />
</head>

<body>
    <!-- 头部开始-->
    <header>
        <!--头部上半部分-->
        <img src="images/logo.gif" />
        <!--头部下半部分-->
        <nav>
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="about.html">about</a></li>
                <li><a href="photos.html">photo</a></li>
                <li><a href="live.html">live</a></li>
                <li><a href="contact.html">contact</a></li>
            </ul>
        </nav>
    </header>
    <!--内容-->
    <article>
        <h1>Contact the band data</h1>
        <form action="submit.html" method="get">
            <fieldset>
                <p>
                    <label for="name">Name:</label>
                    <input type="text" id="name" name="name" placeholder="名" required="required" />
                </p>
                <p>
                    <label for="email">Email:</label>
                    <input type="email" name="email" id="email" placeholder="youxiang" required="required" />
                </p>
                <p>
                    <label for="message">Message:</label>
                    <textarea name="message" rows="7" cols="45" id="message" placeholder="asd as"></textarea>
                </p>
                <input type="submit" value="Send" />
            </fieldset>
        </form>
    </article>
    <script src="scripts/global.js" type="text/javascript" charset="utf-8"></script>
</html>

submit.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title> Jay sckript and the Domsters</title>
        <link rel="stylesheet" type="text/css" href="styles/basic.css"/>
    </head>
    <body>
        <!-- 头部开始-->
        <header>
            <!--头部上半部分-->
            <img src="images/logo.gif"/>
            <!--头部下半部分-->
            <nav>
                <ul>
                    <li><a href="index.html">Home</a></li>
                    <li><a href="about.html">about</a></li>
                    <li><a href="photos.html">photo</a></li>
                    <li><a href="live.html">live</a></li>
                    <li><a href="contact.html">contact</a></li>
                </ul>
            </nav>
        </header>
        <!--内容-->
        <article>
            <h1>Thanks!</h1>
            <p>thanks for contact us we will back to you as soon as we can </p>
        </article>
        <script src="scripts/global.js" type="text/javascript" charset="utf-8"></script>
</html>

basic.css

@import url("layout.css");
@import url("color.css");
@import url("typography.css");
/* 统一引入，如果你想添加一个新的样式表或者删除一个样式表，只需要编辑该文件即可 */

color.css

/*
样式表color.css是最直观的。j不管为哪个元素应用什么颜色，都要同时给它一个背景色。
否则就可能导致意外，看不到某些文本
*/

body{
    color: #fb5;
    background-color: #334;
}
/* 定义正常链接的样式 */
a:link{
    color: #445;
    background-color: #eb6;
}
/* 定义以访问过链接的样式 */
a:visited{
    color: #345;
    background-color: #eb6;
}
/* 第一鼠标悬浮在链接上时的样式 */
a:hover{
    color: #667;
    background-color: #fb5;
}
/* 第一鼠标点击链接时的样式 */
a:active{
    color: #778;
    background-color: #ec8;
}
/* 头部 */
header{
    color: #ec8;
    background-color: #334;
    border-color:#667;
}
/* 导航栏 */
header nav{
    color: #455;
    background-color: #789;
    border-color:#667;
}
/* 内容 */
article{
    color: #223;
    background-color: #edc;
    border-color:#667;
}
/* 导航分类 */
header nav ul{
    border-color: #99a;
}
/* 默认样式和访问后的样式 */
header nav a:link,header nav a:visited{
    color: #eef;
    background-color: transparent;
    border-color: #99a;
}
/* 悬浮在链接上的样式 */
header nav a:hover{
    color: #445;
    background-color:#eb6 ;
}
/* 点击链接后的样式 */
header nav a:active{
    color: #667;
    background-color:#ec8 ;
}
article img{
    border-color: #ba9;
    outline-color:#dcb ;
}
#imagegallery a{
    background: transparent;
}
 header nav a.here:link,
 header nav a.here:visited,
 header nav a.here:hover,
 header nav a.here:active{
    color: #eef;
    background-color: #799;
 }

 /*table*/
td{
    padding: .5em 3em;

}
th{
    color: #edc;
    background: #445555;

}
tr td{
    color: #223;
    background: #eb6;
}

dt{
    margin-right: 1em;

}
dd{
    margin-right: 3em;
}
tr.odd td {
    color: #222233;
    background:  #EECC88;
}
tr.highlight td {
    color: #222233;
    background:  #cba;
}

layout.css

/* 
为html5块元素定义默认样式，主要针对那些不支持他们的浏览器，好让这些元素都能具有适当的块布局。
其次，使用通过选择器把所有元素的内外边距设置为零。这样就把不同浏览器为元素设置的不同内外边距
全部删除了。重设这些值之后，所有样式就可以一视同仁了。
*/
section, header, article, nav{
    display: block;
} 
* {
    padding: 0;
    margin: 0;
}
body{
    margin: 1em 10%;
    background-image: url(../images/background.gif);
    background-attachment: fixed;
    background-position: top left;
    background-repeat:repeat-x ;
    max-width: 80em;
}
header{
    background-image: url(../images/guitarist.gif);
    background-repeat: no-repeat;
    background-position: bottom right;
    border-width: .1em;
    border-style: solid;
    border-bottom-width: 0;
}
#about header{
    background-image: url(../images/lineup.gif);
}
header nav{
    background-image: url(../images/navbar.gif);
    background-repeat: repeat-x;
    background-position: bottom left;
    border-width: .1em;
    border-style: solid;
    border-bottom: 100;
    border-top: 0;
    padding-left: 10%;
}
header nav ul{
    width: 100%;
    overflow: hidden;
    border-left-width: .1em;
    border-left-style: solid;
}
header nav li{
    display: inline;
}
header nav li a {
    display: block;
    float: left;
    padding: .5em 2em;
    border-right: .1em solid;
}
article{
    border-width: .1em;
    border-style: solid;
    border-top-width:0 ;
    padding: 2em 10%;
    line-height: 1.8em;
}
article img{
    border-width: .1em;
    border-style: solid;
    outline-width: .1em;
    outline-style: solid;
}

#slidshow{
    width: 150px;
    height: 150px;
    position: relative;
    overflow: hidden;
}
#preview{
    position: absolute;
    border-width: 0;
    outline-width:0;
}
#imagegallery li{
    display: inline;
}

/* 表格*/
dl{overflow: hidden;}
dt,dd{
    float: left;
}


/*留言*/
label{
    display: block;
}
fieldset{
    border: 0;
}

typography.css

/* 
typography.css用来定义元素的外边距
*/

body{
    font-size: 76%;
    font-family: 'helvetica','arial',sans-serif;
}
body *{
    font-size: 1em;
}
a{
    font-weight: bold;
    text-decoration:none;
}
header nav{
    font-family: "lucida grande",'helvetica','arial',sans-serif;
}
header nav a{
    font-weight: bold;
    text-decoration:none;
}
article{
    line-height: 1.8em;
}
article p {
    margin: 1em 0;
}
h1{
    font-family: 'georgia',"times new roman",sans-serif;
    font: 2.4em normal;
    /*margin-top: 1em;*/
}
h2{
    font-family: 'georgia',"times new roman",sans-serif;
    font: 1.8em normal;
    margin-top: 1em;
}
h3{
    font-family: 'georgia',"times new roman",sans-serif;
    font: 1.4em normal;
    margin-top: 1em;
}
li{
    list-style-type:none ;
}
textarea{
    font-family: 'helvetica','arial',sans-serif;
}

f(me)

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
1
评论
JavaScript DOM 编程艺术读书笔记

Js// ==========================================// 首先需要一个addLoadEvent函数，因为在文档完全加载后如果想运行某个函数，就需要用到它function addLoadEvent(func) { // 把现有的window.onload 事件查理函数的值存入变量oldonload. var oldonload = w
复制链接

扫一扫