layout.css

Jay Skript And The Domsters一书中最后一章网站实例源代码

* {
  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;
}
#navigation {
  background-image: url(../images/navbar.gif);
  background-position: bottom left;
  background-repeat: repeat-x;
  border-width: .1em;
  border-style: solid;
  border-bottom-width: 0;
  border-top-width: 0;
  padding-left: 10%;
}
#navigation ul {
  width: 100%;
  overflow: hidden;
  border-left-width: .1em;
  border-left-style: solid;
}
#navigation li {
  display: inline;
}
#navigation li a {
  display: block;
  float: left;
  padding: .5em 2em;
  border-right: .1em solid;
}
#content {
  border-width: .1em;
  border-style: solid;
  border-top-width: 0;
  padding: 2em 10%;
  line-height: 1.8em;
}
#about #header {
  background-image: url(../images/lineup.gif);
}
#photos #header {
  background-image: url(../images/basshead.gif);
}
#live #header {
  background-image: url(../images/bassist.gif);
}
#contact #header {
  background-image: url(../images/drummer.gif);
}
#content img {
  border-width: .1em;
  border-style: solid;
  outline-width: .1em;
  outline-style: solid;
}
#imagegallery li {
  display: inline;
}
#slideshow {
  width: 150px;
  height: 150px;
  position: relative;
  overflow: hidden;
}
img#frame {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 99;
  border-width: 0;
  outline-width: 0;
}
img#preview {
  position: absolute;
  border-width: 0;
  outline-width: 0;
}
dl {
  overflow: hidden;
}
dt {
  float: left;
}
dd {
  float: left;
}
label {
  display: block;
}
fieldset {
  border: 0;
}
td {
  padding: .5em 3em;
}