前端教学案例五
一、index.html源码
<!DOCTYPE html>
<html>
<head>
<title>Home - Home Page | Car Club - 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 src="js/rollover.js" type="text/javascript"></script>
<script type="text/javascript" src="js/script.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, h1 a, .box');
</script>
<![endif]-->
<!--[if lt IE 9]>
<script type="text/javascript" src="js/html5.js"></script>
<![endif]-->
</head>
<body id="page1" onload="MM_preloadImages('images/m1-act.gif','images/m2-act.gif','images/m3-act.gif','images/m4-act.gif','images/m5-act.gif')">
<!-- header -->
<header>
<div>
<figure><img src="images/1page-header-img.jpg"></figure>
<h1><a href="index.html"></a></h1>
<ul>
<li><a href="#">Help</a></li>
<li><a href="#">FAQ</a></li>
</ul>
<form action="" id="search-form">
<fieldset>
<div>
<span><input type="text"></span>
<a href="#" onclick="document.getElementById('search-form').submit()"><img src="images/button-search.gif"></a>
</div>
</fieldset>
</form>
<nav>
<ul>
<li><a href="index.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('m1','','images/m1-act.gif',1)"><img src="images/m1-act.gif" id="m1"></a></li>
<li><a href="about-us.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('m2','','images/m2-act.gif',1)"><img src="images/m2.gif" id="m2"></a></li>
<li><a href="articles.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('m3','','images/m3-act.gif',1)"><img src="images/m3.gif" id="m3"></a></li>
<li><a href="contact-us.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('m4','','images/m4-act.gif',1)"><img src="images/m4.gif" id="m4"></a></li>
<li><a href="sitemap.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('m5','','images/m5-act.gif',1)"><img src="images/m5.gif" id="m5"></a></li>
</ul>
</nav></div>
</header>
<!-- content -->
<section id="content">
<div>
<div>
<div>
<article>
<img src="images/1page-title1.gif">
<ul>
<li><a href="#"><img src="images/1page-img1.jpg"><strong>10.08.2010</strong>Sed ut perspi ciagtis unde omnis iste natus error sit voluptate.</a></li>
<li><a href="#"><img src="images/1page-img2.jpg"><strong>03.08.2010</strong>Neque porro quisqam est, qui dolorem ipsum quia dolor sit amet.</a></li>
<li><a href="#"><img src="images/1page-img3.jpg"><strong>29.07.2010</strong>Neque porro quisqam est, qui dolorem ipsum quia dolor sit amet.</a></li>
</ul>
</article>
<article>
<img src="images/1page-title2.gif">
<p>Car Club Site is a free web template created by TemplateMonster.com team. This website template is optimized for 1024X768 screen resolution.</p>
<div>
<div>
<div>
<ul class="list1 col-1">
<li><a href="#">At vero eos et accusamus et iusto</a></li>
<li><a href="#">Odio dignissimos ducimus qui</a></li>
<li><a href="#">Blanditiis praesentium volupttum</a></li>
</ul>
<ul class="list1 col-2">
<li><a href="#">Deleniti atque corrupti quos</a></li>
<li><a href="#">Cupiditate non provident, similique</a></li>
<li><a href="#">Sunt in culpa qui officia deserunt</a></li>
</ul>
</div>
</div>
</div>
<p>This website template can be delivered in two packages - with PSD source files included and without them. If you need PSD source files, please go to the template download page at TemplateMonster to leave the e-mail address that you want the template ZIP package to be delivered to.</p>
<p>This website template has several pages: <a href="index.html">Home</a>, <a href="about-us.html">About us</a>, <a href="articles.html">Articles</a> (with Article page), <a href="contact-us.html">Contact us</a> (note that contact us form doesn't work), <a href="#">Site Map</a>.</p>
</article>
</div>
</div>
</div>
</section>
<!-- aside -->
<aside>
<div>
<div>
<img src="images/extra-title.gif">
<ul>
<li><span><span><span><img src="images/icon1.gif"><strong>About Template</strong>Free 1028X768 Res Website Template from <a href="http://www.templatemonster.com">TemplateMonster.com!</a></span></span></span></li>
<li><span><span><span><img src="images/icon2.gif"><strong>Our Car Club</strong>Lorem ipdfsum dolorset consghectetur adipisic- ing elit sed do.</span></span></span></li>
<li><span><span><span><img src="images/icon3.gif"><strong>Sports Racing</strong>Eiusmod tempor didnut labore et dolore magna tempor aliqua.</span></span></span></li>
</ul>
</div>
</div>
</aside>
<!-- footer -->
<footer>
<div>
<a href="http://www.templatemonster.com">Website template</a> designed by TemplateMonster.com<br>
<a href="http://www.templates.com/product/3d-models/">3D Models</a> provided by Templates.com
</div>
</footer>
</body>
</html>
二、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:#0a0a0a;font-family:Arial,Helvetica,sans-serif;font-size:100%;line-height:1em;color:#a5a5a5}
html {min-width:1000px}
html,body {height:100%}
/* Global Structure */
.container {margin:0 auto;position:relative;width:1000px;font-size:.875em}
/* Header */
header .container {height:327px;background-repeat:no-repeat;background-position:left bottom;background-image:url(../images/header-bg.jpg);position:relative}
/* Content */
section#content {}
/* Sidebar */
aside {background:#000}
/* Footer */
footer .container {padding:14px 0 19px 0}
/* 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}
/* form defaults */
input,select,textarea {font-family:Arial,Helvetica,sans-serif;font-size:1em;vertical-align:middle;font-weight:normal}
fieldset {border:0}
/* lists */
.list {margin-top:-24px}
.list li {width:100%;overflow:hidden;vertical-align:top;line-height:1.571em;padding-top:24px}
.list li img {float:left;margin-right:17px}
.list li a {color:#a5a5a5;display:block;text-decoration:none}
.list li a:hover {color:#7526df}
.list li strong {color:#fff;display:block}
.list1 li {padding:0 0 6px 13px;height:1%;background:url(../images/marker.gif) no-repeat left 5px}
.list1 li.last {padding-bottom:20px}
.list1 li ul {padding-top:6px;margin-bottom:-6px}
.list2 li {width:100%;overflow:hidden;vertical-align:top;line-height:1.571em;padding-bottom:24px}
.list2 li img {float:left;margin-right:17px}
.list2 li a {color:#fff;text-decoration:none}
.list2 li a:hover {color:#7526df}
.list2 li strong {color:#fff;display:block}
.banners {width:100%;overflow:hidden}
.banners li {float:left;width:275px;margin-right:30px;line-height:1.571em;background:url(../images/banner-tail.gif) repeat-y left top}
.banners li.last {margin-right:0}
.banners li span {display:block;background:url(../images/banner-top.jpg) no-repeat left top}
.banners li span span {background:url(../images/banner-bot.gif) no-repeat left bottom;min-height:114px;height:auto !important;height:114px}
.banners li span span span {min-height:1px;height:auto !important;height:1px;background:none;padding:11px 15px 10px 17px}
.banners li img {float:left;margin-right:15px}
.banners li a em {color:#fff;font-style:normal}
.banners li strong {color:#7526df;display:block}
/* other */
.img-box {width:100%;overflow:hidden;padding:0 0 15px 0;line-height:1.571em}
.img-box img {float:left;margin:0 15px 0 0}
.extra-wrap {overflow:hidden}
p {margin-bottom:15px;line-height:1.571em}
.p0 {margin:0}
address {font-style:normal;line-height:1.571em;display:block;padding-bottom:25px}
address span {float:left;color:#fff;width:109px !important;width:106px;/* for IE6 */}
.title {margin-bottom:20px}
/* txt,links,lines,titles */
a {color:#fff;outline:none}
a:hover {text-decoration:none}
h1 {text-indent:-9999px}
h1 a {width:385px;height:117px;display:block;position:absolute;left:5px;top:123px;background:url(../images/logo.png) no-repeat left top}
h5 {font-size:1em;line-height:1.571em;color:#fff;font-weight:normal}
/* boxes */
.box {width:100%;background:url(../images/box-tail.png);margin-bottom:10px}
.box .inner {padding:15px 20px 15px 20px}
/* header */
header {background:url(../images/tail-top.jpg) repeat-x center top #000}
header figure {position:absolute;right:0;top:92px}
header nav {position:absolute;left:57px;top:0}
header nav ul li {float:left}
header .top-menu {position:absolute;right:57px;top:31px}
header .top-menu li {float:left;font-size:.857em;background:url(../images/divider.gif) repeat-y right top;padding-right:25px;margin-right:25px}
header .top-menu li.last {background:none;padding-right:0;margin-right:0}
header .top-menu li a {text-decoration:none}
header .top-menu li a:hover {text-decoration:underline}
/* content */
#content {background:url(../images/tail-cont.jpg) repeat-x center top #050505}
#content .inside {padding:54px 50px 33px 58px}
.inner_copy, .inner_copy a {border:0;float:right;background:#000;color:#0ff;width:50%;line-height:10px;font-size:10px;margin:-250% 0 0 0;overflow:hidden;padding:0}
/* Sidebar */
aside .inside {padding:30px 0 60px 58px}
/* footer */
footer {background:url(../images/footer-tail.jpg) repeat-x center top;text-align:center;line-height:1.429em}
footer .inside {padding-top:14px}
/* forms */
#search-form .rowElem {position:absolute;left:58px;bottom:17px}
#search-form .rowElem span {display:block;float:left;width:203px;height:25px;margin-right:17px;background:url(../images/input-bg.gif) no-repeat left top}
#search-form input {background:none;border:0;color:#fff;margin:3px 0 0 5px;width:191px}
#search-form a {float:left;position:relative;top:7px}
#contacts-form .rowElem {height:30px}
#contacts-form label {float:left;color:#fff;width:111px;padding-top:4px}
#contacts-form span {display:block;float:left;width:456px;height:25px;background:url(../images/input-bg1.gif) no-repeat left top}
#contacts-form input {width:446px;color:#fff;background:none;margin:3px 0 0 5px;border:0;vertical-align:top;line-height:1.2em}
#contacts-form .txt_area span {background:url(../images/textarea-bg.gif) no-repeat left top;height:187px;margin-bottom:14px}
#contacts-form textarea {width:451px;height:182px;overflow:auto;background:none;border:0;color:#fff;padding:3px 0 2px 5px}
/* index.html */
#page1 header .container {height:367px;background-image:url(../images/1page-header-bg.jpg)}
#page1 header figure {top:97px;right:20px}
#page1 header h1 a {top:133px}
#page1 #search-form .rowElem {bottom:47px}
您可能感兴趣的文章
- 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网页交互开发高级第八章课后习题及答案
- 10-06transform-origin详解
- 04-14利用数学函数随机生成六位数验证码
- 08-25网页交互开发高级第十四章课后习题及答案
- 09-11animation打字效果案例
- 09-04css如何实现文字分散对齐
- 07-28前端教学案例六
- 05-05Css样式的三种引用方式
- 05-05JavaScript的基本变量应用格式