前端教学案例二
一、index.html源码
<!DOCTYPE html>
<html>
<head>
<title>Home - Home Page | Music - Free Website Template from Templates.com</title>
<meta charset="utf-8">
<meta name="description" content="Place your description here" />
<meta name="keywords" content="put, your, keyword, here" />
<meta name="author" content="Templates.com - website templates provider" />
<link rel="stylesheet" href="css/reset.css" type="text/css" media="all">
<link rel="stylesheet" href="css/layout.css" type="text/css" media="all">
<link rel="stylesheet" href="css/style.css" type="text/css" media="all">
<script type="text/javascript" src="js/jquery-1.4.2.min.js" ></script>
<script type="text/javascript" src="js/cufon-yui.js"></script>
<script type="text/javascript" src="js/cufon-replace.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<script type="text/javascript" src="js/ITC_Busorama_500.font.js"></script>
<!--[if lt IE 7]>
<link rel="stylesheet" href="css/ie/ie6.css" type="text/css" media="screen">
<script type="text/javascript" src="js/ie_png.js"></script>
<script type="text/javascript">
ie_png.fix('.png, header nav ul li, header nav ul li a, h1 a');
</script>
<![endif]-->
<!--[if lt IE 9]>
<script type="text/javascript" src="js/html5.js"></script>
<![endif]-->
</head>
<body id="page1">
<div>
<!-- header -->
<header>
<div>
<h1><a href="index.html">Music Beats</a></h1>
<nav>
<ul>
<li><a href="index.html"><span>home</span></a></li>
<li><a href="about-us.html"><span>about</span></a></li>
<li><a href="articles.html"><span>articles</span></a></li>
<li><a href="contact-us.html"><span>contacts</span></a></li>
<li class="m5 last"><a href="sitemap.html"><span>site map</span></a></li>
</ul>
</nav>
</div>
</header>
<div>
<!-- aside -->
<aside>
<div>
<h2>Latest News</h2>
<ul>
<li><a href="#">June 30, 2010</a><strong>Sed ut perspiciatis unde</strong>Omnis iste natus luptatem accusantium doloremque laudantium totamrem.</li>
<li><a href="#">June 14, 2010</a><strong>Neque porro quisquam est</strong>Consequuntur magni dolores eos qughi ratione voluptatem sequi.</li>
<li><a href="#">May 29, 2010</a><strong>Minima veniam, quis nostrum</strong>Ut enim ad minima veniam, quis nosrum exercitatnem ullam corporis.</li>
</ul>
</div>
</aside>
<!-- content -->
<section id="content">
<div>
<article>
<h2>Burn The Night!</h2>
<img src="images/1page-img.jpg">
<p>Music Beats Site is a free web template created by <span>TemplateMonster.com</span> team. This website template is optimized for 1024X768 screen resolution. It is also HTML5 & CSS3 valid.</p>
<p>This website template can be delivered in two packages - with PSD source files included and without them. If you need PSD source files, go to the template download page at TemplateMonster to leave the e-mail that you want the template ZIP package to be delivered to.</p>
</article>
<article>
<h2>Recent Articles</h2>
<ul>
<li><strong>About This Template</strong>Free 1028X768 Optimized Website Template from <a href="http://www.templatemonster.com">TemplateMonster.com</a>! We hope that you like this template and will use for your websites. <a href="#"><img src="images/arrow.gif"></a></li>
<li><strong>Music Beats</strong>Sed ut perspiciatis unde omnis iste beatae vitae dicta sunt explicabo labore voluptatemenim. <a href="#"><img src="images/arrow.gif"></a></li>
<li><strong>Night Club Life</strong>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet adipisci velit sed quia non numquamt. <a href="#"><img src="images/arrow.gif"></a></li>
<li><strong>Best DJ Sets</strong>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet adipisci velit sed quia nnumquamt. <a href="#"><img src="images/arrow.gif"></a></li>
</ul>
</article>
</div>
</section>
<div></div>
</div>
</div>
<!-- footer -->
<footer>
<div>
<div></div>
<div> Copyright - Type in your name here<br>
<a href="http://www.templatemonster.com" rel="nofollow">Website template</a> designed by TemplateMonster.com | <a href="http://www.templates.com/product/3d-models/" rel="nofollow">3D Models</a> provided by Templates.com
</div>
</div>
</footer>
<script type="text/javascript"> Cufon.now(); </script>
</body>
</html>
二、reset.css内容
a, abbr, acronym, address, applet, article, aside, audio,
b, blockquote, big, body,
center, canvas, caption, cite, code, command,
datalist, dd, del, details, dfn, dl, div, dt,
em, embed,
fieldset, figcaption, figure, font, footer, form,
h1, h2, h3, h4, h5, h6, header, hgroup, html,
i, iframe, img, ins,
kbd,
keygen,
label, legend, li,
meter,
nav,
object, ol, output,
p, pre, progress,
q,
s, samp, section, small, span, source, strike, strong, sub, sup,
table, tbody, tfoot, thead, th, tr, tdvideo, tt,
u, ul,
var {
background:transparent;
border:0 none;
font-size:100%;
margin:0;
padding:0;
border:0;
outline:0;
vertical-align:top;
}
ol,
ul {
list-style:none;
}
blockquote,
q {
quotes:none;
}
table,
table td {
padding:0;
border:none;
border-collapse:collapse;
}
img {
vertical-align:top;
}
embed {
vertical-align:top;
}
三、layout.css内容
#page1 #content .col-1 {width:234px; margin-right:79px;}
#page1 #content .col-2 { width:237px;}
四、style.css内容
/* Getting the new tags to behave */
article, aside, audio,
canvas, command,
datalist, details,
embed,
figcaption, figure, footer,
header, hgroup,
keygen,
meter,
nav,
output,
progress,
section, source,
video {
display:block;
}
mark,
rp, rt, ruby,
summary,
time {
display:inline;
}
/* Global properties ======================================================== */
body {
background:#000;
font-family:Arial, Helvetica, sans-serif;
font-size:100%;
line-height:1em;
color:#979797;
}
html {
min-width:1000px;
}
html,
body {
height:100%;
}
/* Global Structure ============================================================= */
.container {
margin:0 auto;
position:relative;
width:1000px;
font-size:.814em;
}
/* Header */
header {
position:relative;
background:url(../images/header-bg1.jpg) no-repeat center top;
margin-bottom:-20px;
}
/* Content */
section#content {
float:left;
width:555px;
padding-bottom:50px;
}
/* Sidebar */
aside {
float:left;
width:383px;
position:relative;
z-index:10;
}
/* Footer */
footer {
background:url(../images/footer-bg.jpg) no-repeat center top;
color:#fff;
font-size:.92em;
line-height:1.667em;
}
/* Left & Right alignment */
.fleft {
float:left;
}
.fright {
float:right;
}
.clear {
clear:both;
}
.col-1,
.col-2,
.col-3 {
float:left;
}
.alignright {
text-align:right;
}
.aligncenter {
text-align:center;
}
.wrapper {
width:100%;
overflow:hidden;
}
.wrap {
position:relative;
height:auto !important;
height:100%;
min-height:100%;
}
/*---- tailings ----*/
.cont-bot {
background:url(../images/cont-bot.jpg) no-repeat left top;
width:368px;
height:199px;
position:absolute;
left:0;
top:-199px;
}
/*----- form defaults -----*/
input,
select,
textarea {
font-family:Arial, Helvetica, sans-serif;
font-size:1em;
vertical-align:middle;
font-weight:normal;
}
/*----- lists -----*/
.news li {
line-height:1.538em;
padding-bottom:20px;
}
.news li strong {
color:#fff;
display:block;
}
.news li a {
text-decoration:none;
font-weight:bold;
}
.news li a:hover {
text-decoration:underline;
}
.list {
margin-top:-25px;
}
.list li {
line-height:1.538em;
padding-top:20px;
}
.list li strong {
color:#d730f8;
display:block;
padding-bottom:5px;
}
.list li a {
color:#fff;
}
.list li a img {
position:relative;
top:5px;
}
.list1 {
margin-top:-30px;
}
.list1 li {
width:100%;
overflow:hidden;
vertical-align:top;
line-height:1.538em;
padding-top:30px;
}
.list1 li img {
float:left;
margin-right:25px;
}
.list1 li strong {
color:#d730f8;
display:block;
padding-bottom:5px;
}
.list1 li a {
text-decoration:none;
}
.list1 li a:hover {
text-decoration:underline;
}
.sitemap {
padding-bottom:20px;
}
.sitemap li {
padding:0 0 0 12px;
line-height:1.538em;
background-image:url(../images/marker.gif);
background-repeat:no-repeat;
background-position:0 7px;
}
.sitemap li ul li {
background-image:url(../images/marker1.gif);
}
/*----- other -----*/
.img-box {
width:100%;
overflow:hidden;
padding-bottom:20px;
line-height:1.538em;
}
.img-box img {
float:left;
margin:0 20px 0 0;
}
.extra-wrap {
overflow:hidden;
}
p {
margin-bottom:20px;
line-height:1.538em;
}
.p0 {
margin:0;
}
.p1 {
margin-top:20px;
}
.p2 {
margin-bottom:10px;
}
/*----- txt, links, lines, titles -----*/
a {
color:#d730f8;
outline:none;
}
a:hover {
text-decoration:none;
}
h1 {
position:absolute;
left:53px;
top:65px;
text-indent:-9999px;
}
h1 a {
width:396px;
float:left;
height:122px;
background:url(../images/logo.png) no-repeat left top;
}
h2 {
color:#fff;
font-size:30px;
line-height:1.2em;
text-transform:uppercase;
margin-bottom:20px;
}
.txt1 {
color:#fff;
}
.button {
float:right;
}
.button strong {
display:block;
background:url(../images/button-border.gif) no-repeat left top;
}
.button span {
background:url(../images/button-border.gif) no-repeat right top;
padding:0 1px;
display:block;
}
.button strong span a {
display:block;
background:url(../images/button-tail.gif) repeat-x left top;
padding:7px 19px 7px 19px;
color:#fff;
text-decoration:none;
}
.button strong span a:hover {
text-decoration:underline;
}
/*===== header =====*/
header .container {
height:316px;
}
header nav {
padding:0 0 0 57px;
position:absolute;
}
header nav ul {
width:100%;
overflow:hidden;
}
header nav ul li {
float:left;
font-size:16px;
padding-right:23px;
margin-right:20px;
line-height:1.2em;
background:url(../images/divider.png) no-repeat right 6px;
}
header nav ul li.last {
padding-right:0;
margin-right:0;
background:url(../images/spacer.gif);
}
header nav ul li a {
color:#fff;
text-decoration:none;
display:block;
text-align:center;
height:52px;
width:131px;
background:url(../images/spacer.gif);
background-repeat:no-repeat;
background-position:0 0;
}
header nav ul li.m1 a:hover,
header nav ul li.m1 a.active {
background-image:url(../images/m1-act.png);
}
header nav ul li.m2 a:hover,
header nav ul li.m2 a.active {
background-image:url(../images/m2-act.png);
}
header nav ul li.m3 a {
width:146px;
}
header nav ul li.m3 a:hover,
header nav ul li.m3 a.active {
background-image:url(../images/m3-act.png);
}
header nav ul li.m4 a {
width:159px;
margin-left:1px;
}
header nav ul li.m4 a:hover,
header nav ul li.m4 a.active {
background-image:url(../images/m4-act.jpg);
}
header nav ul li.m5 a {
width:147px;
}
header nav ul li.m5 a:hover,
header nav ul li.m5 a.active {
background-image:url(../images/m5-act.png);
}
header nav ul li a span {
display:block;
padding-top:13px;
}
/*===== content =====*/
#content .indent {
padding-top:20px;
}
/*===== Sidebar =====*/
aside .inside {
padding:0 85px 180px 59px;
}
/*===== footer =====*/
footer .container {
height:104px;
position:relative;
}
footer .inside {
text-align:center;
padding-top:32px;
}
/*----- forms -----*/
#contacts-form { clear:right; width:100%; overflow:hidden;}
#contacts-form fieldset { border:none; float:left; }
#contacts-form .field { clear:both;}
#contacts-form label { float:left; width:97px; line-height:18px; padding-bottom:8px;}
#contacts-form input { width:295px; padding:1px 0 1px 3px; border:1px solid #4d4d4d; color:#979797; background:none;}
#contacts-form textarea { width:444px; height:285px; padding:1px 0 1px 3px; border:1px solid #4d4d4d; color:#979797; margin-bottom:19px; overflow:auto; background:none;}
/*==========================================*/
#page1 header { height:449px; background:url(../images/header-bg.jpg) no-repeat center top;}
#page1 header h1 {top:128px;}
#page1 header nav ul li.m4 a:hover { background:url(../images/m4-act-alt.png) no-repeat left top;}
您可能感兴趣的文章
- 05-19DOM的元素获取
- 05-13精灵图
- 05-13flex布局
- 05-10HTML表格标签
- 05-07border属性 :规定围绕表格的边框的宽度。
- 05-07innerText和innerHTML的区别
- 05-05Css样式的三种引用方式
- 05-05JavaScript的基本变量应用格式
- 05-05css盒子模型详解
- 05-05flex布局中，align-content和align-items居中的区别
阅读排行
推荐教程
- 09-12js的数组和二维数组教程
- 08-25网页交互开发高级第八章课后习题及答案
- 09-11animation打字效果案例
- 04-14利用数学函数随机生成六位数验证码
- 08-25网页交互开发高级第十四章课后习题及答案
- 07-28前端教学案例六
- 05-05Css样式的三种引用方式
- 05-05JavaScript的基本变量应用格式
- 07-17网页制作图标素材
- 08-15不要使用 @import