欢迎来到计算机相关教程网!

网页制作

当前位置: 主页 > 网页制作

前端教学案例五

时间:2022-07-24 18:45:44|栏目:网页制作|点击:

前端教学案例五(图1)

一、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}


上一篇:前端教学案例四

栏    目:网页制作

下一篇:前端教学案例六

本文标题:前端教学案例五

本文地址:http://www.wangzhanteacher.com/?m=home&c=View&a=index&aid=208

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:8044517 | 邮箱:8044517@qq.com

Copyright © 2022-2025 计算机相关教程网 版权所有 Powered by EyouCms冀ICP备17010187号