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

网页制作

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

前端教学案例六

时间:2022-07-28 21:29:27|栏目:网页制作|点击:

前端教学案例六(图1)

一、index.html源码

<!DOCTYPE html>

<html>

<head>

<title>Home - Home Page | Charity - 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/maxheight.js"></script>

<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/Myriad_Pro_400.font.js"></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, #slogan, header nav ul li a, .icon img, .link1, .link1 span');

</script>

<![endif]-->

<!--[if lt IE 9]>

<script type="text/javascript" src="js/html5.js"></script>

<![endif]-->

</head>

<body id="page1" onLoad="new ElementMaxHeight();">

<div>

<!-- header -->

<header>

<div>

<h1><a href="index.html">Hope Center</a></h1>

<nav>

<ul>

<li><a href="index.html">Home</a></li>

<li><a href="mission.html">Our Mission</a></li>

<li><a href="news.html">News &amp; Press</a></li>

<li><a href="work.html">Our Work</a></li>

<li><a href="seminars.html">Seminars</a></li>

<li><a href="contacts.html">Contacts</a></li>

</ul>

</nav>

<ul>

<li><a href="index.html"><img src="images/icon-home-act.gif"></a></li>

<li><a href="contacts.html"><img src="images/icon-mail.gif"></a></li>

<li><a href="#"><img src="images/icon-sitemap.gif"></a></li>

</ul>

<div id="slogan"></div>

</div>

</header>

<!-- content -->

<section id="content">

<div>

<div>

<div class="wrapper indent">

<article>

<h2>We Do a Lot To Make the World Better!</h2>

<p><strong>Hope Center</strong> is a free web template created by <a href="http://www.templatemonster.com/" target="_blank" rel="nofollow">TemplateMonster.com</a> team. This website template is optimized for 1024X768 screen resolution.</p>

<div>

<img src="images/icon1.jpg">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.

</div>

<p>This website template has several pages: <a href="index.html">Home</a>, <a href="mission.html">Our Mission</a>, <a href="news.html">News &amp; Press</a>, <a href="work.html">Our Work</a>, <a href="seminars.html">Seminars</a>, <a href="contacts.html">Contacts</a> (note that contact us form – doesn’t work).</p>

</article>

<ul class="banners col-2">

<li><a href="#"><img src="images/banner1.jpg"></a></li>

<li><a href="#"><img src="images/banner2.jpg"></a></li>

</ul>

</div>

<h2>Recent Articles</h2>

<ul>

<li>

<div class="box maxheight">

<span><img src="images/icon2.png"></span>

<div class="border-right maxheight">

<div class="border-bot maxheight">

<div class="border-left maxheight">

<div class="left-top-corner maxheight">

<div class="right-top-corner maxheight">

<div class="right-bot-corner maxheight">

<div class="left-bot-corner maxheight">

<div>

<h3>About Template</h3>

<p>Sed ut perspiciatis ungomnis iste natus error sit volup tiatem <a href="#">accusantiu loremque</a> lautium, totam rem aperiam.</p>

<div>

<a href="#"><span><span>Read More</span></span></a>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</li>

<li>

<div class="box maxheight">

<span><img src="images/icon3.png"></span>

<div class="border-right maxheight">

<div class="border-bot maxheight">

<div class="border-left maxheight">

<div class="left-top-corner maxheight">

<div class="right-top-corner maxheight">

<div class="right-bot-corner maxheight">

<div class="left-bot-corner maxheight">

<div>

<h3>Donations</h3>

<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium vo- luptatum deleniti.</p>

<div>

<a href="#"><span><span>Read More</span></span></a>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</li>

<li class="maxheight last">

<div class="box maxheight">

<span><img src="images/icon4.png"></span>

<div class="border-right maxheight">

<div class="border-bot maxheight">

<div class="border-left maxheight">

<div class="left-top-corner maxheight">

<div class="right-top-corner maxheight">

<div class="right-bot-corner maxheight">

<div class="left-bot-corner maxheight">

<div>

<h3>Our Mission</h3>

<p>Temporibus autem quibusdam et aut officiis <a href="#">debitis aut rerum</a> necessitatibus saepe eveniet ut et voluptates.</p>

<div>

<a href="#"><span><span>Read More</span></span></a>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</li>

</ul>

</div>

</div>

</section>

</div>

<!-- footer -->

<footer>

<div>

<div>

<div>

<div>

<a href="http://www.templatemonster.com/" rel="nofollow">www.templatemonster.com</a><br/><a href="http://www.templates.com/product/illustrations/" rel="nofollow">www.templates.com</a>

</div>

</div>

</div>

</div>

</footer>

<script type="text/javascript">Cufon.now();</script>

</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:#fff;font-family:Arial,Helvetica,sans-serif;font-size:100%;line-height:1em;color:#3f3f3f}

html {min-width:1000px}

html, body {height:100%}

/* Global Structure */

.container {margin:0 auto;width:1000px;font-size:.875em}

/* Header */

header .container {height:445px;position:relative;overflow:hidden;background:url(../images/header-bg.jpg) left top no-repeat}

/* Content */

section#content {margin-top:-44px;position:relative}

/* Footer */

footer {margin-top:-104px;text-align:center;color:#4c4c4c}

footer .right {height:104px;font-size:.929em;line-height:1.538em;background:url(../images/footer-right.gif) no-repeat right top}

/* 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 {height:auto !important;height:100%;min-height:100%}

/* tailings */

.tail-top {background:url(../images/tail-top.gif) left top repeat-x #ffbb00}

.tail-bottom {background:url(../images/tail-bottom.gif) left bottom repeat-x}

/* form defaults */

input, select, textarea {font-family:Arial, Helvetica, sans-serif;font-size:1em;vertical-align:middle;font-weight:normal;color:#3f3f3f;margin:0;padding:0}

fieldset {border:0}

/* lists */

.top-links {position:absolute;right:416px;top:42px;height:17px;overflow:hidden}

.top-links li {float:left;background:url(../images/divider.gif) repeat-y right top;padding:2px 26px 3px 0;margin-right:25px}

.top-links li.last {background:none;padding-right:0;margin:0}

.banners {padding-top:45px}

.banners li {padding-bottom:10px}

.articles {width:100%;overflow:hidden}

.articles li {width:254px;float:left;margin-right:49px}

.articles li.last {margin:0}

.news {margin-top:-16px}

.news li {width:100%;overflow:hidden;vertical-align:top;line-height:1.429em;padding-top:30px}

.news li img {float:left;margin:-14px 18px 0 0}

.news li strong {font-size:.857em;line-height:1.2em;display:block;padding-bottom:3px}

.news li a {text-decoration:none}

.news li a:hover {text-decoration:underline}

.seminars li {line-height:1.429em;min-height:86px;height:auto!important;height:86px;background:url(../images/icon-marker.gif) no-repeat left top;padding:0 0 26px 98px}

.seminars li.last {padding-bottom:0}

.seminars li strong {display:inline-block;padding-right:17px}

.seminars li a {text-decoration:none}

.seminars li a:hover {text-decoration:underline}

.list {padding-bottom:16px}

.list li {padding:0 0 4px 11px;background:url(../images/marker.gif) no-repeat left 5px} 

/* other */

.img-indent {margin:0 20px 0 0;float:left}

.img-box {width:100%;overflow:hidden;padding:8px 0;line-height:1.429em}

.img-box.alt {padding-bottom:20px}

.img-box img {float:left;margin:-8px 16px 0 0}

.extra-wrap {overflow:hidden}

p {margin-bottom:16px;line-height:1.429em}

.p1 {margin-bottom:8px}

dl {}

dl dt {}

dl dd {}

.address {float:left}

.address dt {margin-bottom:16px}

.address dd {clear:both;text-align:right}

.address dd span {float:left;padding-right:25px}

/* txt, links, lines, titles */

a {color:#09a1dd;outline:none}

a:hover {text-decoration:none}

h1 {text-indent:-9999px}

h1 a {position:absolute;left:68px;top:20px;width:265px;height:65px;background:url(../images/logo.gif) no-repeat left top}

h2 {font-size:30px;line-height:1.2em;color:#09a1dd;margin-bottom:18px}

h3 {color:#3f3f3f;font-size:20px;line-height:1.2em;margin-bottom:10px}

h4 {}

h5 {}

h6 {}

.txt1 {}

.txt2 {}

.link1 {display:block;float:left;background:url(../images/link1-right.png) no-repeat right top;color:#fff;text-decoration:none;cursor:pointer}

.link1 span {display:block;padding:0 12px;float:left;background:url(../images/link1-left.png) no-repeat left top}

.link1:hover span {text-decoration:underline}

.link1 span span {background:url(../images/link1-bgd.gif) left top repeat-x;padding:13px 15px}

.button {float:right}

.button span {display:block;background:url(../images/button-left.gif) no-repeat left top;padding-left:3px}

.button span span {background:url(../images/button-right.gif) no-repeat right top;padding-right:4px;padding-left:0}

.button span span a {display:block;background:#333743;padding:4px 5px 3px 5px;color:#fff;text-decoration:none;text-transform:uppercase}

.button span span a:hover {text-decoration:underline}

.line-hor {background:#3a3c52;height:1px;overflow:hidden;font-size:0;line-height:0;margin:20px 0 20px 0}

.line-ver {background-image:url(../images/line-ver.gif);background-repeat:repeat-y;background-position:0 0;width:100%}

/* boxes */

.box {background:url(../images/border-top.gif) repeat-x left top #f5f5f5;width:100%;color:#878787;position:relative}

.box .border-bot {background:url(../images/border-bot.gif) repeat-x left bottom}

.box .border-left {background:url(../images/border-left.gif) repeat-y left top}

.box .border-right {background:url(../images/border-right.gif) repeat-y right top}

.box .left-top-corner {background:url(../images/left-top-corner.gif) no-repeat left top}

.box .right-top-corner {background:url(../images/right-top-corner.gif) no-repeat right top}

.box .left-bot-corner {background:url(../images/left-bot-corner.gif) no-repeat left bottom;width:100%}

.box .right-bot-corner {background:url(../images/right-bot-corner.gif) no-repeat right bottom}

.box .inner {padding:26px 28px 38px 30px}

.box .icon {position:absolute;right:-12px;bottom:0}

/* header */

header #slogan {position:absolute;left:327px;top:172px;width:174px;height:132px;background:url(../images/slogan.png) no-repeat left top}

header nav {position:absolute;top:146px;left:20px}

header nav ul li {width:100%;overflow:hidden;vertical-align:top;margin-bottom:-2px}

header nav ul li a {color:#fff;text-transform:uppercase;font-size:1.429em;line-height:1.6em;font-family:"trebuchet MS", Helvetica, sans-serif;text-decoration:none;letter-spacing:-1px;display:block;width:195px;text-indent:50px;text-shadow:1px 1px #10addf}

header nav ul li a:hover {text-decoration:underline}

header nav ul li.current a {background:url(../images/nav-act.png) no-repeat left top}

header nav ul li.current a:hover {text-decoration:none}

/* content */

#content .inside {padding:0 0 142px 70px}

#content .indent {padding-bottom:30px}

/* Sidebar */

aside .inside {}

aside {}

/* footer */

footer .container {background:url(../images/footer-tail.gif) repeat-x left top}

footer .left {background:url(../images/footer-left.gif) no-repeat left top}

footer .inside {padding-top:37px}

footer a {color:#fff}

/* forms */

#contacts-form {clear:right;width:100%;overflow:hidden}

#contacts-form fieldset {border:none;float:left}

#contacts-form .field {clear:both;height:30px}

#contacts-form label {float:left;width:97px;padding-top:6px}

#contacts-form .field span {float:left;background:url(../images/input-bg.gif) no-repeat left top;width:264px;height:29px}

#contacts-form input {width:247px;background:none;border:0;margin:6px 0 0 8px}

#contacts-form textarea {width:452px;height:383px;padding:6px 0 6px 6px;background:none;border:0;overflow:auto}

#contacts-form .field.txt-area {margin-bottom:11px;height:396px}

#contacts-form .field.txt-area span {background:url(../images/textarea-bg.gif) no-repeat left top;height:396px;width:459px}

#contacts-form .link1 {float:right}

#page1 header .container {height:488px;background-image:url(../images/1page-header-bg.jpg)}

#page1 header #slogan {left:301px;top:184px}

#page1 header nav ul li {padding-bottom:3px;margin:0}

#page1 #content {margin-top:-60px}

#page1 #content .banners {padding-top:43px}

三、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;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:0;border-collapse:collapse}

img {vertical-align:top}

embed {vertical-align:top}

四、layout.css源码

/* index.html */

#page1 #content .col-1 {width:559px;margin-right:43px}

#page1 #content .col-2 {width:264px}

/* index-1.html */

#page2 #content .col-1 {width:559px;margin-right:43px}

#page2 #content .col-1 .col-1 {width:219px;margin-right:84px}

#page2 #content .col-1 .col-2 {width:207px}

#page2 #content .col-2 {width:264px}

/* index-2.html */

#page3 #content .col-1 {width:559px;margin-right:43px}

#page3 #content .col-2 {width:264px}

/* index-3.html */

#page4 #content .col-1 {width:257px;margin-right:48px}

#page4 #content .col-2 {width:260px;margin-right:37px}

#page4 #content .col-3 {width:264px}

/* index-4.html */

#page5 #content .col-1 {width:559px;margin-right:43px}

#page5 #content .col-2 {width:264px}

/* index-5.html */

#page6 #content .col-1 {width:559px;margin-right:43px}

#page6 #content .col-2 {width:264px}


上一篇:前端教学案例五

栏    目:网页制作

下一篇:前端教学案例七

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

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

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

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

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

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

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