前端教学案例四
一、index.html源码
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<meta charset="utf-8">
<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.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/Copse_400.font.js"></script>
<script type="text/javascript" src="js/jquery.nivo.slider.pack.js"></script>
<script type="text/javascript" src="js/imagepreloader.js"></script>
<script type="text/javascript">
preloadImages([
'images/menu1_active.gif',
'images/menu2_active.gif',
'images/menu3_active.gif',
'images/menu4_active.gif',
'images/marker_right_active.jpg',
'images/marker_left_active.jpg',
'images/menu5_active.gif']);
</script>
<!--[if lt IE 9]>
<script type="text/javascript" src="http://info.template-help.com/files/ie6_warning/ie6_script_other.js"></script>
<script type="text/javascript" src="js/html5.js"></script>
<![endif]-->
</head>
<body id="page1">
<div>
<div>
<div>
<!-- header -->
<header>
<div>
<h1><a href="index.html" id="logo">First</a></h1>
<div>
<nav>
<ul id="top_nav">
<li><a href="#">User Area</a></li>
<li><a href="#">Sitemap</a></li>
</ul>
<form id="search" method="post">
<div>
<input type="submit" value="">
<input type="text">
</div>
</form>
</nav>
</div>
</div>
<nav id="menu">
<ul>
<li id="active"><a href="index.html">Home</a></li>
<li><a href="News.html">News</a></li>
<li><a href="Services.html">Services</a></li>
<li><a href="Products.html">Products</a></li>
<li><a href="Contact.html">Contact</a></li>
</ul>
</nav>
</header>
</div>
</div>
</div>
<div>
<div>
<div>
<div>
<div id="slider">
<img src="images/text1.jpg" alt="">
<img src="images/text2.jpg" alt="">
<img src="images/text3.jpg" alt="">
</div>
</div>
</div>
</div>
</div>
<!-- / header -->
<!-- content -->
<div>
<div>
<div>
<div>
<figure><img src="images/letter1.png" alt=""></figure>
<h2>Welcome to <span>First Company</span>!</h2>
First is one of free website templates created by TemplateMonster.com. This website template is optimized for 1024 X 768 res. It is <br>
also XHTML & CSS valid. This template goes with two packages – with PSD source files and without them.
</div>
</div>
</div>
</div>
<div>
<div>
<section id="content">
<div>
<article>
<div><div><div>
<div><div>
<h2>Think.</h2>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore.</p>
<div class="wrapper center">
<a href="#"><span><span>More</span></span></a>
</div>
</div></div>
</div></div></div>
</article>
<article class="col1 pad_left1">
<div><div><div>
<div>
<div>
<h2>Choose.</h2>
<p>Veritatis quasi architecto beatae bitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia.</p>
<div class="wrapper center">
<a href="#"><span><span>More</span></span></a>
</div>
</div></div>
</div></div></div>
</article>
<article class="col1 pad_left1">
<div><div><div>
<div>
<div>
<h2>Succeed.</h2>
<p>Quuntur magni dolores eos qui ratione voluptatem sequi nesciunt neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur.</p>
<div class="wrapper center">
<a href="#"><span><span>More</span></span></a>
</div>
</div></div>
</div></div></div>
</article>
</div>
<div>
<article>
<div>
<h2>Features Overview</h2>
<p>This Free Business Website Template goes with two packages – with PSD source files and without them. Learn more about it <a target="_blank" href="http://blog.templatemonster.com/2011/02/28/free-website-template-efficient-business/" rel="nofollow">here</a>. PSD source files are available for free for the registered members of TemplateMonster.com. The basic package (without PSD source is available for anyone without registration).</p>
<p>
This website template has several pages: Home, News, Services, Products, Contact (note that contact us form – doesn’t work).</p>
<div class="wrapper line1 marg_bot1">
<ul class="col1 list1">
<li><a href="#">Sed ut perspiciatis unde omnis</a></li>
<li><a href="#">Accusantium doloremque laudantium</a></li>
<li><a href="#">Aperiam eaque ipsa quae</a></li>
<li><a href="#">Beatae vitae dicta explicabo minima</a></li>
<li><a href="#">Nemo enim ipsam voluptatem</a></li>
</ul>
<ul class="list1 pad_left1 left">
<li><a href="#">Neque porro quisquam est qui</a></li>
<li><a href="#">Dolorem ipsum quia dolor sit amet</a></li>
<li><a href="#">Consectetur, adipisci velit</a></li>
<li><a href="#">Numquam emodi tempora incidnt</a></li>
<li><a href="#">Magnam aliquam quaerat</a></li>
</ul>
</div>
<a href="#"><span><span>Read More</span></span></a>
</div>
</article>
<article class="col1 pad_left1">
<h2>Advantages</h2>
<ul>
<li><a href="#"><img src="images/icon1.jpg" alt="">Starting up</a></li>
<li><a href="#"><img src="images/icon2.jpg" alt="">Finance and grants</a></li>
<li><a href="#"><img src="images/icon3.jpg" alt="">Taxes, returns & payroll</a></li>
<li><a href="#"><img src="images/icon4.jpg" alt="">Employment & skills</a></li>
<li><a href="#"><img src="images/icon5.jpg" alt="">Health, safety, premises</a></li>
</ul>
<div><div><div>
<div>
<h2>Newsletter</h2>
Sign up for weekly newsletter:
<form id="sign_up" method="post">
<div>
<input type="text">
<a href="#" onClick="document.getElementById('sign_up').submit()">Sign up</a>
</div>
</form>
</div>
</div></div></div>
</article>
</div>
</section>
</div>
</div>
<!-- / content -->
<!-- footer -->
<div>
<div>
<div>
<footer>
<div>
<h3>Social Networks</h3>
<ul>
<li><a href="#">Twitter</a></li>
<li><a href="#">Facebook</a></li>
<li><a href="#">Flickr</a></li>
<li><a href="#">Blogger</a></li>
</ul>
</div>
<div class="col_2 pad_left1">
<h3>Quick Solutions</h3>
<div>
<ul class="list3 col_1">
<li><a href="#">Management Consulting</a></li>
<li><a href="#">Policy and Regulatory</a></li>
<li><a href="#">Market Assessment</a></li>
<li><a href="#">Program Management</a></li>
</ul>
<ul class="list3 col_1 pad_left1">
<li><a href="#">Regulatory Support</a></li>
<li><a href="#">Risk Assessment</a></li>
<li><a href="#">Change Management</a></li>
<li><a href="#">Info Technology</a></li>
</ul>
</div>
</div>
<div>
<a href="index.html" id="footer_logo">First</a>
<p><a href="http://www.templatemonster.com/" target="_blank">Website template</a><br>designed by TemplateMonster.com</p>
<p><a href="http://www.templates.com/product/3d-models/" target="_blank">3D Models</a><br>provided by Templates.com</p>
</div>
</footer>
</div>
<!-- / footer -->
</div>
</div>
<script type="text/javascript"> Cufon.now(); </script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider({
effect:'sliceDown', //Specify sets like: 'fold,fade,sliceDown, sliceDownLeft, sliceUp, sliceUpLeft, sliceUpDown, sliceUpDownLeft'
slices:20,
animSpeed:300,
pauseTime:9999999999,
startSlide:0, //Set starting Slide (0 index)
directionNav:true, //Next & Prev
directionNavHide:false, //Only show on hover
controlNav:false, //1,2,3...
controlNavThumbs:false, //Use thumbnails for Control Nav
controlNavThumbsFromRel:false, //Use image rel for thumbs
controlNavThumbsSearch: '.jpg', //Replace this with...
controlNavThumbsReplace: '_thumb.jpg', //...this in thumb Image src
keyboardNav:true, //Use left & right arrows
pauseOnHover:true, //Stop animation while hovering
manualAdvance:false, //Force manual transitions
captionOpacity:1, //Universal caption opacity
beforeChange: function(){},
afterChange: function(){},
slideshowEnd: function(){} //Triggers after all slides have been shown
});
});
</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}
* {border:none}
三、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}
/* Left & Right alignment */
.left {float:left}
.right {float:right}
.wrapper {width:100%;overflow:hidden}
.center {text-align:center}
body {background:#001527;border:0;font:14px Arial, Helvetica, sans-serif;color:#363636;line-height:20px}
.css3{border-radius:8px;-moz-border-radius:8px;-webkit-border-radius:8px;box-shadow:0 0 4px rgba(0, 0, 0, .4);-moz-box-shadow:0 0 4px rgba(0, 0, 0, .4);-webkit-box-shadow:0 0 4px rgba(0, 0, 0, .4);behavior:url(js/PIE.htc);position:relative}
.main {margin:0 auto;width:1000px;position:relative}
.body1 {background:url(../images/bg_top_repeat.gif) top repeat-x #001527}
.body2 {background:url(../images/bg_top1.jpg) top center no-repeat}
.body3 {background:url(../images/bg_top2_repeat.jpg) top repeat-x}
.body4 {background:url(../images/bg_top2.jpg) top center no-repeat;height:379px}
.body5 {background:url(../images/bg_top3_repeat.jpg) top center repeat-x}
.body6 {background:url(../images/bg_top3.jpg) top center no-repeat;padding:28px 28px}
.body7 {background:#eeeeee}
.body8 {background:url(../images/bg_bot_repeat.jpg) top repeat-x}
.body9 {background:url(../images/bg_bot.jpg) top center no-repeat;height:230px}
/* main layout */
a {color:#006abb;text-decoration:underline;outline:none}
a:hover {text-decoration:none}
h1 {float:left;padding:21px 0 0 24px}
h2 {font-size:30px;color:#182125;line-height:1.2em;padding:26px 0 14px 0;letter-spacing:-1px}
h2 span {color:#006abb}
h3 {font-size:20px;color:#fff;line-height:1.2em;padding:24px 0 40px 0}
p {padding-bottom:20px}
/* header */
header{}
#logo {display:block;background:url(../images/logo.gif) no-repeat;width:153px;height:60px;text-indent:-9999px}
header .right{padding-right:59px;width:500px}
#top_nav {padding:25px 0 0px 0;float:right;width:500px}
#top_nav li {float:right;padding:0 7px}
#top_nav li a {font-size:10px;color:#fff;text-transform:uppercase;text-decoration:none}
#top_nav li a:hover {text-decoration:underline}
#search {background:url(../images/search.jpg) no-repeat;width:191px;height:26px;float:right;margin-top:3px}
#search .submit {float:right;background:none;height:26px;width:28px;cursor:pointer}
#search .input {float:right;width:153px;height:16px;padding:5px 0 5px 10px;font:14px Arial, Helvetica, sans-serif;color:#000;background:none}
#menu {background:url(../images/menu_border.gif) top left no-repeat;margin-top:30px}
#menu ul {background:url(../images/menu_border.gif) top right no-repeat;width:100%;overflow:hidden}
#menu li {float:left;padding-left:2px}
#menu li a {display:block;height:66px;width:198px;font-size:24px;padding-top:90px;text-align:center;text-decoration:none;text-transform:uppercase}
#menu li a:hover, #menu #menu_active a{}
.nav1 {background:url(../images/menu1.gif) center 35px no-repeat}
.nav2 {background:url(../images/menu2.gif) center 35px no-repeat}
.nav3 {background:url(../images/menu3.gif) center 35px no-repeat}
.nav4 {background:url(../images/menu4.gif) center 35px no-repeat}
.nav5 {background:url(../images/menu5.gif) center 35px no-repeat}
.nav1:hover, .nav1#active {background:url(../images/menu1_active.gif) center 31px no-repeat #001527}
.nav2:hover, .nav2#active {background:url(../images/menu2_active.gif) center 31px no-repeat #001527}
.nav3:hover, .nav3#active {background:url(../images/menu3_active.gif) center 31px no-repeat #001527}
.nav4:hover, .nav4#active {background:url(../images/menu4_active.gif) center 31px no-repeat #001527}
.nav5:hover, .nav5#active {background:url(../images/menu5_active.gif) center 31px no-repeat #001527}
.slogan {background:url(../images/text.gif) center 108px no-repeat;height:141px;overflow:hidden;position:relative;padding-top:108px}
.slogan a {margin-top:64px}
/* The Nivo Slider styles */
#slider {height:141px;position:absolute !important;top:0;width:981px;left:82px;top:108px}
.nivoSlider {position:absolute}
.nivoSlider img {top:0px;left:0px}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {position:absolute;top:0px;left:0px;width:100%;height:100%;border:0;padding:0;margin:0;z-index:60;display:none}
/* The slices in the Slider */
.nivo-slice {display:block;position:absolute;z-index:50;height:100%}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {position:absolute;margin-top:63px;z-index:99;cursor:pointer;text-indent:-9999px;width:21px;height:33px}
.nivo-prevNav {left:-22px; display:block;background:url(../images/marker_left.jpg) no-repeat}
.nivo-nextNav {right:123px;background:url(../images/marker_right.jpg) no-repeat}
.nivo-prevNav:hover {background:url(../images/marker_left_active.jpg) no-repeat}
.nivo-nextNav:hover {background:url(../images/marker_right_active.jpg) no-repeat}
/* content */
#content {width:100%;overflow:hidden;padding:33px 0 48px 53px}
.body6 figure {padding-left:58px}
#page2 .body6 figure {padding-left:53px}
#page2 #content, #page3 #content, #page4 #content, #page5 #content {padding-top:0}
#page3 #content {padding-bottom:37px}
#page2 .col2 figure {margin-right:10px}
#page4 .body6 {padding-bottom:25px}
#page4 .marg_bot1 {margin-bottom:14px}
#page4 #content {padding-bottom:44px}
.body6 h2 {padding:0 0 14px 0;margin-top:-1px;letter-spacing:-1px;float:left;width:820px}
.pad_left1 {padding-left:33px}
.pad1 {padding:0 5px}
.pad_bot1 {padding-bottom:10px}
.pad_bot2 {padding-bottom:15px}
.marg_bot1 {margin-bottom:20px}
.box1 {background:url(../images/box_repeat.gif) center repeat-y}
.box1_bot {background:url(../images/box_bot.gif) center bottom no-repeat}
.box1_top {background:url(../images/box_top.jpg) center top no-repeat;width:100%}
.box1 .pad {padding:0 26px;padding-bottom:23px}
.box1 h2 {font-size:24px;line-height:1.2em;color:#fff;padding:10px 0 22px 0}
.box1 h2.center {font-size:30px;line-height:1.2em;padding:4px 0 26px 0;letter-spacing:-1px}
.box1 .button {background:url(../images/button2_bg.gif) top repeat-x}
.box1 .button span {background:url(../images/button2_left.gif) top left no-repeat}
.box1 .button span span {background:url(../images/button2_right.gif) top right no-repeat}
.box2 {background:url(../images/box2_repeat.gif) left repeat-y;margin-bottom:11px}
.box2_top {background:url(../images/box2_top.gif) left top no-repeat}
.box2_bot {background:url(../images/box2_bot.gif) left bottom no-repeat;width:100%}
.box2 .pad {padding:15px 25px 13px}
.box2 figure {margin-right:10px}
.box2 a {display:block;margin-bottom:5px;text-decoration:none;margin-top:-2px}
.box2 a:hover {text-decoration:underline}
.box2 .cols {width:490px}
.button {background:url(../images/button1_bg.gif) top repeat-x;display:inline-block;font-size:20px;color:#363636;line-height:34px;text-decoration:none}
.button span {display:block;background:url(../images/button1_left.gif) top left no-repeat}
.button span span {padding:0 40px;background:url(../images/button1_right.gif) top right no-repeat;height:39px}
.button:hover {color:#006abb}
.font1 {font-size:12px;display:block;padding-bottom:5px;margin-top:-2px}
.line1 {background:url(../images/line_ver1.gif) 285px 0 repeat-y}
.list1 li {line-height:30px}
.list1 li a {padding-left:25px;background:url(../images/marker_1.gif) 0 8px no-repeat;display:inline-block}
.list2 {margin-top:-8px;padding-bottom:24px}
.list2 li {line-height:37px;background:url(../images/line_hor1.gif) bottom repeat-x}
.list2 .bg_none {background:none}
.list2 li a {font-size:18px;color:#363636;text-decoration:none}
.list2 li a:hover {color:#006abb}
.list2 li img {margin-right:10px}
.list3 li {line-height:25px}
.list3 li a {text-decoration:none;padding-left:14px;background:url(../images/marker_2.gif) 0 5px no-repeat}
.list3 li a:hover {text-decoration:underline}
/* footer */
footer {padding:0 0 0 60px;color:#fff}
footer a {color:#a2b8c8}
footer p {padding-bottom:15px}
.col_1 {width:190px;float:left}
.col_2 {width:413px;float:left}
.col_3 {width:230px;float:left;padding-left:8px}
#footer_logo {display:block;margin:15px 0 36px 64px;background:url(../images/footer_logo.gif) no-repeat;width:98px;height:39px;text-indent:-9999px}
/* forms */
#ContactForm {margin-top:-4px;line-height:26px}
#ContactForm strong {float:left;width:70px;font-weight:normal}
#ContactForm .wrapper {min-height:30px}
#ContactForm .bg {background:url(../images/input2.gif) no-repeat;float:left}
#ContactForm .textarea_box {min-height:260px}
#ContactForm .textarea_box .bg {background:url(../images/textarea.gif) no-repeat;float:left}
#ContactForm a span span {padding:0}
#ContactForm a {margin-right:20px;float:right;width:110px;text-align:center}
#ContactForm .input {width:277px;height:17px;background:none;padding:6px 10px;color:#000;font:14px Arial, Helvetica, sans-serif}
#ContactForm textarea {overflow:auto;width:464px;height:228px;background:none;padding:6px 10px;color:#000;font:14px Arial, Helvetica, sans-serif;margin:0}
#sign_up {width:100%;height:29px;overflow:hidden;padding-top:7px}
#sign_up .input {float:left;background:url(../images/input.gif) no-repeat;width:120px;height:17px;padding:6px 10px;font:14px Arial, Helvetica, sans-serif;color:#000;margin-right:7px}
#sign_up a {font-size:16px;float:left;background:url(../images/sign_up.gif) no-repeat;width:77px;text-align:center;line-height:24px;height:29px;color:#363636;text-decoration:none}
#sign_up a:hover {color:#006abb}
#sign_up{}
四、layout.css源码
.col1, .col2, .col3, .cols {float:left}
.col1 {width:276px}
.col2 {width:585px}
#page2 .cols {width:525px;padding-bottom:2px}
您可能感兴趣的文章
- 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的基本变量应用格式