JavaScript DOM 编程艺术 阅读总结 （第十二章 实践案例代码）

JavaScript DOM 编程艺术 第十二章 实践案例

---

在开始学习前端的时候买了这本书，看了很多视频这本书也就没太认真看，最近终于是看完了这本书，最后的这章算是综合了前面大部分章节的内容的一个实例，这本书内容简单易懂，就像是一个人在你身边一点一点的教，很适合入门的小白，有一些基础的人看起来会很快，因为很多都是已经掌握的基础。

这第十二章如果你前面都跟着做了，其实很简单。

---

首先是css
第一个是 basic.css 导入了样式 颜色 和 布局

@import url("layout.css");
@import url("color.css");
@import url("typography.css");
/*@import url("reset.css");*/

color.css

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

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: 0;
    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