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

网页制作

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

前端教学案例四

时间:2022-07-23 10:37:33|栏目:网页制作|点击:

前端教学案例四(图1)

一、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 &amp; 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 &amp; payroll</a></li>

<li><a href="#"><img src="images/icon4.jpg" alt="">Employment &amp; 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}


上一篇:前端教学案例三

栏    目:网页制作

下一篇:前端教学案例五

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

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

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

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

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

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

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