这是自学妙味课堂培训视频后做的整站效果:

    部分代码:

    

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>整站</title>
    <link rel="stylesheet" type="text/css" href="zhengchanshipin.css"/>
    <script type="text/javascript" src="mwzz.js"></script>
</head>
<body>
 <div id="top">
     <ul class="top_menu">
         <li><a href="#">Account Sign In</a></li>
         <li><a href="#">Register</a></li>
         <li><a href="#">Buyers Guide</a></li>
         <li><a href="#">About</a></li>
         <li><a href="#">Blog</a></li>
         <li class="no_dot"><a href="#">Contact</a></li>
     </ul>
     <ul class="top_bar">
         <li class="phone"><a href="#">132 40491 817</a></li>
         <li class="help"><a href="#">Live Help</a></li>
         <li class="space"><a href="#"><img src="img/cannada.gif" alt="1"title="加拿大"></a></li>
         <li><a href="#"><img src="img/amr.gif" alt="2" title="美国"></a></li>
     </ul>
 </div>
 <div id="header">
     <div id="shopping">
         <p>0 items in your bag</p>
         <a href="#">check out</a>
     </div>
     <h1 title="Ecommerce Website">
         <a href="#" target="_blank">
           <form action=""><img src="img/logo.png" alt="/">
         </a>
     </h1>
             <div class="search">
             <input class="text" id="text1" type="text" value="Search website"/>
             <input class="btn" type="submit" value=" "/>
         </form>
     </div>
 </div>
 <ul id="nav">
     <li class="active"><a href="#"><strong><span>HOME</span></strong></a></li>
     <li><a href="#"><strong><span>LATEST ARRIVALS</span></strong></a></li>
     <li><a href="#"><strong><span>MEN'S</span></strong></a></li>
     <li><a href="#"><strong><span>WOMEN'S</span></strong></a></li>
     <li><a href="#"><strong><span>KIDS</span></strong></a> </li>
     <li><a href="#"><strong><span>BRANDS</span></strong></a></li>
     <li><a href="#"><strong><span>SALE </span></strong></a> </li>
     <li><a href="#"><strong><span>GIFT CARDS </span></strong></a></li>
     <li><a href="#"><strong><span>FREEBIES</span></strong></a></li>
 </ul>
<div id="content">
     <div id="content_top">
         <div id="content_bottom">
             <div id="ad">
                 <a class="prev" href="javascript:;"></a>
                 <a class="prev" href="javascript:;"></a>
                 <span class="prev_bg"></span>
                 <span class="prev_bg"></span>
       <ul>
           <li>
               <a href="#"><img  class="banner" src="img/banner/1.png" alt="banner"></a>
           </li>
           <li>
               <a href="#"><img  class="banner" src="img/banner/3.png" alt="banner"></a>
           </li>
           <li>
               <a href="#"><img  class="banner" src="img/banner/2.png" alt="banner"></a>
           </li>
       </ul>
                 <h2>PRODUCT TITLE</h2>
                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras suscipit lacus dapibus
                     ante mattis in adipiscing nibh placerat. Cras bibendum porta diam, non dignissim sapien
                     malesuada vitae.
                 </p>
                 <div class="bg"></div>
             </div>
             <div id="main"class="clear">
                 <div id="side">
                     <div class="module_menu">
                         <h2><strong><span>Browse Categories</span></strong></h2>
                         <div class="list">
                             <ul>
                                 <li><a href="#">Lorem ipsum dolor sit</a></li>
                                 <li><a href="#">Amet consectetur</a></li>
                                 <li><a href="#">Adipiscin elit</a></li>
                                 <li><a href="#">Cras suscipit lacus</a></li>
                                 <li><a href="#">Dapibus ante mattis</a></li>
                                 <li><a href="#">Adipiscing nibh placerat</a></li>
                                 <li><a href="#">Cras bibendum</a></li>
                                 <li><a href="#">Porta diam elit</a></li>
                                 <li><a href="#">Adipiscing nibh placerat</a></li>
                                 <li><a href="#">Cras bibendum</a></li>
                                 <li><a href="#">Porta diam elit</a></li>
                             </ul>
                         </div>
                     </div>
                     <div class="module_join">

                       <div class="module_join_t">
                             <div class="module_join_b">
                                 <div class="join_form">
                                     <p>Join our newsletter list to get the latest updates</p>
                                     <form action="#">
                                         <input type="text" class="text"/>
                                         <input type="submit" class="btn" value="Join Now"/>
                                     </form>
                                 </div>
                                 <ul class="join_list">
                                     <li class="space1">Follow us on Twitter</li>
                                     <li class="space2">Become our fan on Facebook</li>
                                     <li class="space3">Connect with us on LinkedIn</li>
                                     <li class="space3">Send us your email enquiriesr</li>
                                 </ul>
                             </div>

                       </div>
                     </div>
                     <div class="paymenthod"><img src="img/payfor.gif"/></div>
                 </div>

                 <div id="wrap">
                     <div class="sort">
                         <dl>
                             <dt>sort by:</dt>
                                 <dd>
                                <h2>Ascending</h2>
                                     <a href="javasript:;"></a>
                                     <ul>
                                         <li>menu1</li>
                                         <li class="active">menu2</li>
                                         <li>menu1</li>
                                         <li>menu1</li>
                                         <li>menu1</li>

                                     </ul>
                                 </dd>
                                 <dd>
                                     <h2>Product Name</h2>
                                     <a href="javasript:;"></a>
                                     <ul>
                                         <li>menu1</li>
                                         <li>menu2</li>
                                         <li>menu1</li>
                                         <li>menu1</li>
                                         <li>menu1</li>

                                     </ul>
                                 </dd>
                                 <dd>
                                     <h2>Brand Name</h2>
                                     <a href="javasript:;"></a>
                                     <ul>
                                         <li>menu1</li>
                                         <li>menu2</li>
                                         <li>menu1</li>
                                         <li>menu1</li>
                                         <li>menu1</li>

                                     </ul>
                                 </dd>

                         </dl>
                         <p>
                             <strong>Item per page:</strong>
                             <span>12</span>/<span>20</span>/<span class="color_style">30</span>/<span class="color_style">50</span>
                         </p>
                     </div>
                     <div class="pic_list">
     

       最终实现图: