images
images/photos
template.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" ; content="text/html;charset=utf-8" />
<title>Jay Skript And The Domsters</title>
<link rel="stylesheet" type="text/css" media="screen" href="styles/basic.css" />
<script type="text/javascript" src="scripts/global.js"></script>
</head>
<body>
<div id="header">
<img src="images/logo.gif" alt="Jay Skript and the Domsters" />
</div>
<div id="navigation">
<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>
</div>
<div id="content">
<h1>Lorem Ipsum Dolor</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Nullam iaculis vestibulum turpis. Pellentesque mattis rutrum
nibh. Quisque orci orci, euismod sit amet, sollicitudin et,
ullamcorper at, lorem.
Pellentesque habitant morbi tristique senectus et netus
et malesuada fames ac turpis egestas.
Ut lectus. Mauris eu sapien non enim dapibus imperdiet.
Sed eu mauris sed pede mollis commodo.
Fusce eget est. Sed ullamcorper enim nec est.
Cras dui felis, porta vitae, faucibus laoreet, sollicitudin eget,
enim. Nulla auctor. Fusce interdum diam ac eros.
Mauris egestas. Fusce in elit et sem aliquet pretium.
Donec nunc erat, sodales ac, facilisis a, molestie eu, massa.
Aenean nec justo eu neque malesuada aliquet.</p>
</div>
</body>
</html>
index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" ; content="text/html;charset=utf-8" />
<title>Jay Skript And The Domsters</title>
<link rel="stylesheet" type="text/css" media="screen" href="styles/basic.css" />
<script type="text/javascript" src="scripts/global.js"></script>
<script type="text/javascript" src="scripts/home.js"></script>
</head>
<body>
<div id="header">
<img src="images/logo.gif" alt="Jay Skript and the Domsters" />
</div>
<div id="navigation">
<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>
</div>
<div id="content">
<h1>Welcome</h1>
<p id="intro">Welcome to the official website of Jay Skript and the Domsters. Here, you can <a
href="about.html">learn more about the band</a>, view <a href="photos.html">photos of the band</a>, find
out about <a href="live.html">tour dates</a> and <a href="contact.html">get in touch with the band</a>.</p>
</div>
</body>
</html>
about.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" ; content="text/html;charset=utf-8" />
<title>Jay Skript And The Domsters</title>
<link rel="stylesheet" type="text/css" media="screen" href="styles/basic.css" />
<script type="text/javascript" src="scripts/global.js"></script>
<script type="text/javascript" src="scripts/about.js"></script>
</head>
<body>
<div id="header">
<img src="images/logo.gif" alt="Jay Skript and the Domsters" />
</div>
<div id="navigation">
<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>
</div>
<div id="content">
<h1>About the band</h1>
<ul id="internalnav">
<li><a href="#jay">Jay Skript</a></li>
<li><a href="#domsters">The Domsters</a></li>
</ul>
<div class="section" id="jay">
<h2>Jay Skript</h2>
<p>Jay Skript is going to rock your world!</p>
<p>Together with his compatriots The Domsters,
Jay is set for world domination. Just you wait and see.</p>
<p>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>
</div>
<div class="section" id="domsters">
<h2>The Domsters</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>
</div>
</div>
</body>
</html>
photos.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" ; content="text/html;charset=utf-8" />
<title>Jay Skript And The Domsters</title>
<link rel="stylesheet" type="text/css" media="screen" href="styles/basic.css" />
<script type="text/javascript" src="scripts/global.js"></script>
<script type="text/javascript" src="scripts/photos.js"></script>
</head>
<body>
<div id="header">
<img src="images/logo.gif" alt="Jay Skript and the Domsters" />
</div>
<div id="navigation">
<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>
</div>
<div id="content">
<h1>Photos of the band</h1>
<ul id="imagegallery">
<li>
<a href="images/photos/concert.jpg" title="The crowd goes wild">
<img src="images/photos/thumbnail_concert.jpg" alt="the band in concert" />
</a>
</li>
<li>
<a href="images/photos/bassist.jpg" title="An atmospheric moment">
<img src="images/photos/thumbnail_bassist.jpg" alt="the bassist" />
</a>
</li>
<li>
<a href="images/photos/guitarist.jpg" title="Rocking out">
<img src="images/photos/thumbnail_guitarist.jpg" alt="the guitarist" />
</a>
</li>
<li>
<a href="images/photos/crowd.jpg" title="Encore! Encore!">
<img src="images/photos/thumbnail_crowd.jpg" alt="the audience" />
</a>
</li>
</ul>
</div>
</body>
</html>
live.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" ; content="text/html;charset=utf-8" />
<title>Jay Skript And The Domsters</title>
<link rel="stylesheet" type="text/css" media="screen" href="styles/basic.css" />
<script type="text/javascript" src="scripts/global.js"></script>
<script type="text/javascript" src="scripts/live.js"></script>
</head>
<body>
<div id="header">
<img src="images/logo.gif" alt="Jay Skript and the Domsters" />
</div>
<div id="navigation">
<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>
</div>
<div id="content">
<h1>Tour dates</h1>
<table summary="when and where you can see the band">
<thead>
<tr>
<th>Date</th>
<th>City</th>
<th>Venue</th>
</tr>
</thead>
<tbody>
<tr>
<td>June 9th</td>
<td>Portland, <abbr title="Oregon">OR</abbr></td>
<td>Crystal Ballroom</td>
</tr>
<tr>
<td>June 10th</td>
<td>Seattle, <abbr title="Washington">WA</abbr></td>
<td>Crocodile Cafe</td>
</tr>
<tr>
<td>June 12th</td>
<td>Sacramento, <abbr title="California">CA</abbr></td>
<td>Torch Club</td>
</tr>
<tr>
<td>June 17th</td>
<td>Austin, <abbr title="Texas">TX</abbr></td>
<td>Speakeasy</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
contact.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" ; content="text/html;charset=utf-8" />
<title>Jay Skript And The Domsters</title>
<link rel="stylesheet" type="text/css" media="screen" href="styles/basic.css" />
<script type="text/javascript" src="scripts/global.js"></script>
<script type="text/javascript" src="scripts/contact.js"></script>
</head>
<body>
<div id="header">
<img src="images/logo.gif" alt="Jay Skript and the Domsters" />
</div>
<div id="navigation">
<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>
</div>
<div id="content">
<h1>Contact the band</h1>
<form method="post" action="submit.html">
<fieldset>
<p>
<label for="name">Name:</label>
<input type="text" id="name" name="name" value="Your name" class="required" />
</p>
<p>
<label for="email">Email:</label>
<input type="text" id="email" name="email" value="Your email address" class="email required" />
</p>
<p>
<label for="message">Message:</label>
<textarea cols="45" rows="7" id="message" name="message"
class="required">Write your message here.</textarea>
</p>
<input type="submit" value="Send" />
</fieldset>
</form>
</div>
</body>
</html>
submit.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" ; content="text/html;charset=utf-8" />
<title>Jay Skript And The Domsters</title>
<link rel="stylesheet" type="text/css" media="screen" href="styles/basic.css" />
<script type="text/javascript" src="scripts/global.js"></script>
</head>
<body>
<div id="header">
<img src="images/logo.gif" alt="Jay Skript and the Domsters" />
</div>
<div id="navigation">
<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>
</div>
<div id="content">
<h1>Thanks!</h1>
<p>Thanks for contacting us. We'll get back to you as soon as we can.</p>
</div>
</body>
</html>
scripts/global.js
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != "function") {
window.onload = func;
} else {
window.onload = function () {
oldonload();
func();
}
}
}
function insertAfter(newElement, targetElement) {
var parent = targetElement.parentNode;
if (parent.lastChild == targetElement) {
parent.appendChild(newElement);
} else {
parent.insertBefore(newElement, targetElement.nextSibling);
}
}
function addClass(element, value) {
if (!element.className) {
element.className = value;
} else {
newClassName = element.className;
newClassName += " ";
newClassName += value;
element.className = newClassName;
}
}
function highlightPage() {
if (!document.getElementsByTagName) return false;
if (!document.getElementById) return false;
if (!document.getElementById("navigation")) return false;
var nav = document.getElementById("navigation");
var links = nav.getElementsByTagName("a");
for (var i = 0; i < links.length; i++) {
var linkurl = links[i].getAttribute("href");
var currenturl = window.location.href;
if (currenturl.indexOf(linkurl) != -1) {
links[i].className = "here";
var linktext = links[i].lastChild.nodeValue.toLowerCase();
document.body.setAttribute("id", linktext);
}
}
}
addLoadEvent(highlightPage);
scripts/home.js
function moveElement(elementID, final_x, final_y, interval) {
if (!document.getElementById) {
return false;
}
if (!document.getElementById(elementID)) {
return false;
}
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 xpos = parseInt(elem.style.left);
var ypos = parseInt(elem.style.top);
if (xpos == final_x && ypos == final_y) {
return true;
}
if (xpos < final_x) {
var dist = Math.ceil((final_x - xpos) / 10);
xpos = xpos + dist;
}
if (xpos > final_x) {
var dist = Math.ceil((xpos - final_x) / 10);
xpos = xpos - dist;
}
if (ypos < final_y) {
var dist = Math.ceil((final_y - ypos) / 10);
ypos = ypos + dist;
}
if (ypos > final_y) {
var dist = Math.ceil((ypos - final_y) / 10);
ypos = ypos - dist;
}
elem.style.left = xpos + "px";
elem.style.top = ypos + "px";
var repeat = "moveElement('" + elementID + "'," + final_x + "," + final_y + "," + interval + ")";
elem.movement = setTimeout(repeat, interval);
}
function prepareSlideshow() {
if (!document.getElementsByTagName) {
return false;
}
if (!document.getElementById) {
return false;
}
if (!document.getElementById("intro")) {
return false;
}
var intro = document.getElementById("intro");
var slideshow = document.createElement("div");
slideshow.setAttribute("id", "slideshow");
var frame = document.createElement("img");
frame.setAttribute("src", "images/frame.gif");
frame.setAttribute("alt", "");
frame.setAttribute("id", "frame");
slideshow.appendChild(frame);
var preview = document.createElement("img");
preview.setAttribute("src", "images/slideshow.gif");
preview.setAttribute("alt", "a gilmpse of what awaits you");
preview.setAttribute("id", "preview");
slideshow.appendChild(preview);
insertAfter(slideshow, intro);
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);
scripts/about.js
function showSection(id) {
var divs = document.getElementsByTagName("div");
for (var i = 0; i < divs.length; i++) {
if (divs[i].className.indexOf("section") == -1) continue;
if (divs[i].getAttribute("id") != id) {
divs[i].style.display = "none";
} else {
divs[i].style.display = "block";
}
}
}
function prepareInternalnav() {
if (!document.getElementsByTagName) return false;
if (!document.getElementById) return false;
if (!document.getElementById("internalnav")) return false;
var nav = document.getElementById("internalnav");
var links = nav.getElementsByTagName("a");
for (var i = 0; i < links.length; i++) {
var sectionId = links[i].getAttribute("href").split("#")[1];
if (!document.getElementById(sectionId)) continue;
document.getElementById(sectionId).style.display = "none";
links[i].destination = sectionId;
links[i].onclick = function () {
showSection(this.destination);
return false;
}
}
}
addLoadEvent(prepareInternalnav);
scripts/photos.js
function showPic(whichpic) {
if (!document.getElementById("placeholder")) return true;
var source = whichpic.getAttribute("href");
var placeholder = document.getElementById("placeholder");
placeholder.setAttribute("src", source);
if (!document.getElementById("description")) return false;
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/placeholder.gif");
placeholder.setAttribute("alt", "my image gallery");
var description = document.createElement("p");
description.setAttribute("id", "description");
var desctext = document.createTextNode("Choose an image");
description.appendChild(desctext);
var gallery = document.getElementById("imagegallery");
insertAfter(description, gallery);
insertAfter(placeholder, description);
}
function prepareGallery() {
if (!document.getElementsByTagName) return false;
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);
scripts/live.js
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 container = document.getElementById("content");
container.appendChild(header);
container.appendChild(dlist);
}
addLoadEvent(stripeTables);
addLoadEvent(highlightRows);
addLoadEvent(displayAbbreviations);
scripts/contact.js
function focusLabels() {
if (!document.getElementsByTagName) return false;
var labels = document.getElementsByTagName("label");
for (var i = 0; i < labels.length; i++) {
if (!labels[i].getAttribute("for")) continue;
labels[i].onclick = function () {
var id = this.getAttribute("for");
if (!document.getElementById(id)) return false;
var element = document.getElementById(id);
element.focus();
}
}
}
function resetFields(whichform) {
for (var i = 0; i < whichform.elements.length; i++) {
var element = whichform.elements[i];
if (element.type == "submit") continue;
if (!element.defaultValue) continue;
element.onfocus = function () {
if (this.value == this.defaultValue) {
this.value = "";
}
}
element.onblur = function () {
if (this.value == "") {
this.value = this.defaultValue;
}
}
}
}
function prepareForms() {
for (var i = 0; i < document.forms.length; i++) {
var thisform = document.forms[i];
resetFields(thisform);
thisform.onsubmit = function () {
return validateForm(this);
}
}
}
function isFilled(field) {
if (field.value.length < 1 || field.value == field.defaultValue) {
return false;
} else {
return true;
}
}
function isEmail(field) {
if (field.value.indexOf("@") == -1 || field.value.indexOf(".") == -1) {
return false;
} else {
return true;
}
}
function validateForm(whichform) {
for (var i = 0; i < whichform.elements.length; i++) {
var element = whichform.elements[i];
if (element.className.indexOf("required") != -1) {
if (!isFilled(element)) {
alert("Please fill in the " + element.name + " field.");
return false;
}
}
if (element.className.indexOf("email") != -1) {
if (!isEmail(element)) {
alert("The " + element.name + " field must be a valid email address.");
return false;
}
}
}
return true;
}
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...");
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("POST", 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[i];
} else {
thetarget.innerHTML = "<p>Oops, there was an error. Sorry.</p>";
}
} else {
thetarget.innerHTML = "<p>" + request.statusText + "</p>";
}
}
};
request.send(data);
return true;
};
addLoadEvent(focusLabels);
addLoadEvent(prepareForms);
styles/basic.css
@import url(layout.css);
@import url(color.css);
@import url(typography.css);
styles/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;
}
#navigation {
color: #455;
background-color: #789;
border-color: #667;
}
#content {
color: #223;
background-color: #edc;
border-color: #667;
}
#navigation ul {
border-color: #99a;
}
#navigation a:link,
#navigation a:visited {
color: #eef;
background-color: transparent;
border-color: #99a;
}
#navigation a:hover {
color: #445;
background-color: #eb6;
}
#navigation a:active {
color: #667;
background-color: #ec8;
}
#navigation a.here:link,
#navigation a.here:visited,
#navigation a.here:hover,
#navigation a.here:active {
color: #eef;
background-color: #799;
}
th {
color: #edc;
background-color: #455;
}
tr td {
color: #223;
background-color: #eb6;
}
tr.odd td {
color: #223;
background-color: #ec8;
}
tr.highlight td {
color: #223;
background-color: #cba;
}
styles/layout.css
* {
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);
}
#slideshow {
width: 150px;
height: 150px;
position: relative;
overflow: hidden;
}
#preview {
position: absolute;
border-width: 0;
outline-width: 0;
}
#frame {
position: absolute;
top: 0;
left: 0;
z-index: 99;
}
#imagegallery li {
display: inline;
}
td {
padding: .5em 3em;
}
dl {
overflow: hidden;
}
dt {
float: left;
}
dd {
float: left;
}
label {
display: block;
}
fieldset {
border: 0;
}
styles/typography.css
body {
font-size: 76%;
font-family: "Helvetica", "Arial", sans-serif;
}
body * {
font-size: 1em;
}
a {
font-weight: bold;
text-decoration: none;
}
#navigation {
font-family: "Lucida Grande", "Helvetica", "Arial", sans-serif;
}
#navigation a {
text-decoration: none;
font-weight: bold;
}
#content {
line-height: 1.8em;
}
#content p {
margin: 1em 0;
}
h1 {
font-family: "Georgia", "Times New Roman", serif;
font: 2.4em normal;
}
h2 {
font-family: "Georgia", "Times New Roman", serif;
font: 1.8em normal;
margin-top: 1em;
}
h3 {
font-family: "Georgia", "Times New Roman", serif;
font: 1.4em normal;
margin-top: 1em;
}
#imagegallery li {
list-style-type: none;
}
textarea {
font-family: "Helvetica", "Arial", sans-serif;
}
dt {
margin-right: 1em;
}
dd {
margin-right: 3em;
}
结果
1203
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
