前端教学案例一

这是一张经典的静态主页，下面我列举了部分源码：

1、index.html

<div class="wrap">

   <!-- header -->

   <header>

      <div class="container">

         <h1><a href="index.html">Photo <span>Art</span></a></h1>

         <nav>

            <ul>

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

               <li><a href="about-us.html"><span><span>About</span></span></a></li>

               <li><a href="privacy.html"><span><span>Privacy</span></span></a></li>

               <li><a href="gallery.html"><span><span>Gallery</span></span></a></li>

               <li><a href="contact-us.html"><span><span>Contact</span></span></a></li>

               <li><a href="sitemap.html"><span><span>Sitemap</span></span></a></li>

            </ul>

         </nav>

         <ul class="tabs">

            <li><a href="#tab1"><span><span>Category 1</span></span></a></li>

            <li><a href="#tab2"><span><span>Category 2</span></span></a></li>

            <li><a href="#tab3"><span><span>Category 3</span></span></a></li>

            <li><a href="#tab4"><span><span>Category 4</span></span></a></li>

            <li><a href="#tab5"><span><span>Category 5</span></span></a></li>

         </ul>

         <div class="tab_container">

            <div id="tab1" class="tab_content">

               <div class="faded">

                  <ul class="big-image">

                     <li><img src="images/slide1-1big.jpg"></li>

                     <li><img src="images/slide1-2big.jpg"></li>

                     <li><img src="images/slide1-3big.jpg"></li>

                  </ul>

                  <ul class="pagination">

                     <li><a href="#" rel="0"><img src="images/slide1-1.jpg"></a></li>

                     <li><a href="#" rel="1"><img src="images/slide1-2.jpg"></a></li>

                     <li><a href="#" rel="2"><img src="images/slide1-3.jpg"></a></li>

                  </ul>

               </div>

            </div>

            <div id="tab2" class="tab_content">

               <div class="faded">

                  <ul class="big-image">

                     <li><img src="images/slide2-1big.jpg"></li>

                     <li><img src="images/slide2-2big.jpg"></li>

                     <li><img src="images/slide2-3big.jpg"></li>

                  </ul>

                  <ul class="pagination">

                     <li><a href="#" rel="0"><img src="images/slide2-1.jpg"></a></li>

                     <li><a href="#" rel="1"><img src="images/slide2-2.jpg"></a></li>

                     <li><a href="#" rel="2"><img src="images/slide2-3.jpg"></a></li>

                  </ul>

               </div>

            </div>

            <div id="tab3" class="tab_content">

               <div class="faded">

                  <ul class="big-image">

                     <li><img src="images/slide3-1big.jpg"></li>

                     <li><img src="images/slide3-2big.jpg"></li>

                     <li><img src="images/slide3-3big.jpg"></li>

                  </ul>

                  <ul class="pagination">

                     <li><a href="#" rel="0"><img src="images/slide3-1.jpg"></a></li>

                     <li><a href="#" rel="1"><img src="images/slide3-2.jpg"></a></li>

                     <li><a href="#" rel="2"><img src="images/slide3-3.jpg"></a></li>

                  </ul>

               </div>

            </div>

            <div id="tab4" class="tab_content">

               <div class="faded">

                  <ul class="big-image">

                     <li><img src="images/slide4-1big.jpg"></li>

                     <li><img src="images/slide4-2big.jpg"></li>

                     <li><img src="images/slide4-3big.jpg"></li>

                  </ul>

                  <ul class="pagination">

                     <li><a href="#" rel="0"><img src="images/slide4-1.jpg"></a></li>

                     <li><a href="#" rel="1"><img src="images/slide4-2.jpg"></a></li>

                     <li><a href="#" rel="2"><img src="images/slide4-3.jpg"></a></li>

                  </ul>

               </div>

            </div>

            <div id="tab5" class="tab_content">

               <div class="faded">

                  <ul class="big-image">

                     <li><img src="images/slide5-1big.jpg"></li>

                     <li><img src="images/slide5-2big.jpg"></li>

                     <li><img src="images/slide5-3big.jpg"></li>

                  </ul>

                  <ul class="pagination">

                     <li><a href="#" rel="0"><img src="images/slide5-1.jpg"></a></li>

                     <li><a href="#" rel="1"><img src="images/slide5-2.jpg"></a></li>

                     <li><a href="#" rel="2"><img src="images/slide5-3.jpg"></a></li>

                  </ul>

               </div>

            </div>

         </div>

      </div>

   </header>

   <div class="container">

      <!-- aside -->

      <aside>

         <div class="inside">

            <h2>My Clients:</h2>

            <ul class="list">

               <li><a href="#">Sed ut perspiciatis</a></li>

               <li><a href="#">Unde omnis iste</a></li>

               <li><a href="#">Natus error sit volup</a></li>

               <li><a href="#">Tatem accusantium</a></li>

            </ul>

            <figure><img src="images/extra-img.png"></figure>

         </div>

      </aside>

      <!-- content -->

      <section id="content">

         <div class="wrapper">

            <article class="col-1">

               <h2>Welcome!</h2>

               <img src="images/1page-img.jpg" class="img-indent">

               <p>Photo Art is a free web template created by TemplateMonster team, optimized for 1024X768 screen resolution. It is also HTML5 &amp; CSS3 valid. This website has several pages: <a href="index.html">Home</a>, <a href="about-us.html">About</a>, <a href="privacy.html">Privacy</a>, <a href="gallery.html">Gallery</a>, <a href="contact-us.html">Contact</a> (contact form – doesn’t work), <a href="sitemap.html">Sitemap</a>.</p>

            </article>

            <article class="col-2">

               <h2>Fresh News:</h2>

               <ul class="news">

                  <li><span>4</span><strong><a href="#">Nam libero tempore</a><br>

                     Cum soluta nobis est eligendi optio cumque.</strong></li>

                  <li><span>2</span><strong><a href="#">Ut enim ad minima veniam</a><br>

                     Quis autem vel eum iure reprehenderit qui.</strong></li>

                  <li><span>5</span><strong><a href="#">Sed perspiciatis unde</a><br>

                     Nemo enim ipsam voluptatem quia voluptas aspernatur.</strong></li>

               </ul>

            </article>

         </div>

      </section>

   </div>

</div>

<!-- footer -->

<footer>

   <div class="container">

      <div class="inside"> Website template designed by <a class="new_window" href="http://www.templatemonster.com" target="_blank" rel="nofollow">www.templatemonster.com</a><br>

         3D Models provided by <a class="new_window" href="http://www.templates.com/product/3d-models/" target="_blank" rel="nofollow">www.templates.com</a> </div>

   </div>

</footer>

2、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:url(../images/tail-top.jpg) repeat-x center top #000; 

font-family:Arial, Helvetica, sans-serif;

font-size:100%; 

line-height:1em;

color:#a6a6a6;

}

html { 

min-width:1000px;

}

html, 

body { 

height:100%;

}

/* Global Structure ============================================================= */

.container {

margin:0 auto;

overflow:hidden;

width:1000px;

font-size:.875em;

padding:60px 0 140px 0;

}

/* Header */

header .container {

height:467px;

position:relative;

padding:0;

}

/* Sidebar */

aside {

width:311px;

position:relative;

z-index:10;

float:left;

margin-right:-10px;

}

/* Content */

section#content {

position:relative;

z-index:10;

width:650px;

float:left;

}

/* Footer */

footer {

background:url(../images/tail-bottom.jpg) repeat-x center top;

margin-top:-229px;

}

footer .container {

height:229px;

text-align:center;

color:#fff;

padding:0;

line-height:1.429em;

}

/* 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%;

}

/*----- 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 li {

padding:0 0 14px 12px;

background:url(../images/marker.gif) no-repeat left 5px;

height:1%;

} 

.news li {

line-height:1.429em;

margin-top:-4px;

padding:0 0 23px 0;

width:100%;

overflow:hidden;

vertical-align:top;

}

.news li a {

text-decoration:none;

line-height:2em;

}

.news li a:hover {

text-decoration:underline;

}

.news li span {

display:block;

float:left;

padding-right:20px;

font-size:.786em;

color:#000;

background:url(../images/marker1.gif) no-repeat left top;

text-align:center;

width:19px;

height:18px;

position:relative;

top:6px;

line-height:1.2em;

}

.news li strong {

display:block;

font-weight:normal;

overflow:hidden;

}

/*----- other -----*/

.img-indent { 

margin:0 0 20px 0; 

}

.img-box { 

width:100%; 

overflow:hidden; 

padding-bottom:15px;

line-height:1.429em;

}

.img-box img { 

float:left; 

margin:0 20px 0 0;

}

.extra-wrap { 

overflow:hidden;

}

p {

margin-bottom:16px;

line-height:1.429em;

}

.p1 {

margin-bottom:25px;

}

address {

line-height:1.429em;

color:#fff;

font-style:normal;

}

address span {

float:left;

color:#a6a6a6;

width:84px;

}

/*----- txt, links, lines, titles -----*/

a {

color:#ffc531; 

outline:none;

}

a:hover {

text-decoration:none;

}

h1 {

font-size:2.857em;

line-height:1.2em;

font-weight:normal;

position:absolute;

left:60px;

top:18px;

}

h1 a {

text-decoration:none;

}

h2 {

font-size:30px;

line-height:1.2em;

color:#fff;

margin-bottom:20px;

}

h5 {

font-size:1em;

line-height:1.429em;

color:#ffc531;

font-weight:normal;

}

.txt1 {

color:#ffc531; 

}

.txt2 p {

line-height:1.714em;

}

/*===== header =====*/

header nav {

position:absolute;

right:60px;

top:0;

z-index:20;

}

header nav ul li {

float:left;

font-size:16px;

line-height:1.2em;

padding-left:13px;

}

header nav ul li a {

text-decoration:none;

display:block;

color:#aeaeae;

background-image:url(../images/spacer.gif);

background-repeat:no-repeat;

background-position:left top;

}

header nav ul li a:hover,

header nav ul li a.active {

color:#000;

background-image:url(../images/nav-act-left.png);

}

header nav ul li a span {

display:block;

padding:0 3px;

background-repeat:no-repeat;

background-image:url(../images/spacer.gif);

background-position:right top;

}

header nav ul li a:hover span,

header nav ul li a.active span {

background-image:url(../images/nav-act-right.png);

}

header nav ul li a span span {

padding:40px 20px 26px 20px;

background-repeat:repeat-x;

background-image:url(../images/spacer.gif);

}

header nav ul li a:hover span span,

header nav ul li a.active span span {

background-image:url(../images/nav-act-tail.gif);

}

/*===== content =====*/

#content .inside {

padding:0 0 0 60px;

}

#content.extra {

width:auto;

}

#content .list li {

padding-bottom:8px;

}

/*===== Sidebar =====*/

aside .inside {

padding:0 0 0 60px;

}

aside figure {

margin-left:-60px;

padding-top:15px;

}

/*===== footer =====*/

footer .inside {

padding:148px 0 0 0;

}

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:29px;}

#contacts-form label { float:left; width:107px; color:#a6a6a6; padding-top:2px;}

#contacts-form input { width:237px; padding:1px 0 1px 3px; border:1px solid #a6a6a6; color:#a6a6a6; background:none; float:left;}

#contacts-form textarea { width:237px; height:114px; padding:1px 0 1px 3px; border:1px solid #a6a6a6; color:#a6a6a6; margin-bottom:15px; overflow:auto; background:none; float:left;}

/*==========================================*/

/* tabs */

ul.tabs {

position:absolute;

right:60px;

top:89px;

}

ul.tabs li {

float:left;

line-height:1.2em;

padding-left:10px;

}

ul.tabs li a {

color:#fff;

display:block;

float:left;

text-decoration:none;

background:url(../images/button-left.png) no-repeat left top;

cursor:pointer;

}

ul.tabs li a:hover,

ul.tabs li.active a {

color:#ffc632;

}

ul.tabs li a span {

display:block;

float:left;

padding:0 9px;

background:url(../images/button-right.png) no-repeat right top;

}

ul.tabs li a span span {

padding:9px 18px 8px 18px;

background:url(../images/button-tail.png) repeat-x left top;

}

.tab_container {

position:relative;

top:126px;

width:100%;

}

/* faded gallery */

.faded { 

width:888px;

height:341px;

margin:0 auto;

position:relative;

}

.faded ul.big-image { 

list-style:none; 

padding:0; 

margin:0;

width:653px;

height:341px;

float:right;

background:url(../images/img-wrapper-big.png) no-repeat left top;

}

.faded ul.big-image li {

padding:9px 0 0 9px;

width:635px;

height:323px;

}

ul.pagination { 

list-style:none; 

padding:0; 

margin:0;

background:none;

width:auto;

height:auto;

position:absolute;

left:0;

top:0;

}

ul.pagination li { 

width:183px;

height:99px;

margin-bottom:22px;

background:url(../images/img-wrapper-small.png) no-repeat left top;

}

ul.pagination li a { 

padding:9px 0 0 9px;

display:block;

}

ul.pagination li.current a {}

a { outline:0; border:0; }

如果想获取整个案例的源码，可以点：案例下载