HTML+CSS项目课3：利用DIV+CSS制作网页（世赛服装网）

用到的知识点：
1、DIV+CSS布局
2、相对定位、绝对定位
3、CSS精灵的使用（共用背景图像，然后定位xy数值）
4、浮动塌陷的清除（在父级div添加一对空的div，并对其clear:both）

网页效果图：

HTML代码：

	

        	

            	
Sign-in/Register
                
Customer Service
                
Track Order
                
My Account
            
            
My Shopping Bag:0 Items($0.00)
    
    
    

        

        	

            	
Men
                
Women
                
Kids
                
Home
                
Watches
                
Sales
                
Blog
                
Ocean2Ocean
            
        
        

        
        

        
        
GO
        
        
        

        	

            	
50%
                
Natucia a morden America
classic,offers quality...
            
            

                
            
            

        
        
      
        

    

        	

            	
●
                
●
                
●
            
    
    



	

    	

        	
FATHER'S DAY GIFT GUIDE
            
All Gifts
            
Men's Swim Shop
            
Father & Son
            
Gifts Under $75
            
FATHER'S DAY GIFT GUIDE
            
All Gifts
            
Men's Swim Shop
            
Father & Son
            
Gifts Under $75
            
All Gifts
            
Men's Swim Shop
            
Father & Son
            
Gifts Under $75
            
FATHER'S DAY GIFT GUIDE
            
All Gifts
            
Men's Swim Shop
            
Father & Son
            
Gifts Under $75
            
All Gifts
            
Men's Swim Shop
            
Father & Son
            
Gifts Under $75
        	
FATHER'S DAY GIFT GUIDE
            
All Gifts
            
Men's Swim Shop
        	
FATHER'S DAY GIFT GUIDE
            
All Gifts
            
Men's Swim Shop
            
        
    
    
    

    	

        	

            	
New
                
FEATURED
                
more>>
            
        
        

        	

            	

                	
$49.50
                    
Fine Strip Polo
                    
★★★☆
                    

                
                

                
Buy
                
Free shipping on all orders
$50+**
            
        	

            	

                	
$49.50
                    
Fine Strip Polo
                    
★★★☆
                    

                
                

                
Buy
                
Free shipping on all orders
$50+**
            
        	

            	

                	
$49.50
                    
Fine Strip Polo
                    
★★★☆
                    

                
                

                
Buy
                
Free shipping on all orders
$50+**
            
        
    	

        	

            	
New
                
FEATURED
                
more>>
            
        
        

        	

            	

                	
$49.50
                    
Fine Strip Polo
                    
★★★☆
                    

                
                

                
Buy
                
Free shipping on all orders
$50+**
            
        	

            	

                	
$49.50
                    
Fine Strip Polo
                    
★★★☆
                    

                
                

                
Buy
                
Free shipping on all orders
$50+**
            
        	

            	

                	
$49.50
                    
Fine Strip Polo
                    
★★★☆
                    

                
                

                
Buy
                
Free shipping on all orders
$50+**
            
        
        

        	

            	

                	
$49.50
                    
Fine Strip Polo
                    
★★★☆
                    

                
                

                
Buy
                
Free shipping on all orders
$50+**
            
        	

            	

                	
$49.50
                    
Fine Strip Polo
                    
★★★☆
                    

                
                

                
Buy
                
Free shipping on all orders
$50+**
            
        	

            	

                	
$49.50
                    
Fine Strip Polo
                    
★★★☆
                    

                
                

                
Buy
                
Free shipping on all orders
$50+**
            
        
        
    
  






	

    	

            
Corporate Responsibility | 
            
Privacy Policy | 
            
Terms and Conditions | 
            
Affilates | 
            
Careers | 
            
Sitemap 
        
    
    

    	

        	
SHOP
            
Men
            
Women
            
Kids
            
Home
            
Watches
            
Gifts Certificates
            
Sale
        
    
    

    	

        	
HELP
            
Customer Service
            
Contact Us
            
About Nautica
            
Watch Information
        
    
    

    	

        	
OFFERS BY EMAIL
            
SUBMIT
            
SIGN UP FOR NAUTICA TEXT ALERTS>
            
STORE LOCATOR
            
Find a Store
        
    
    

    	

        	
COMMUNITY
            

            

            

            

            

        
    
    



©2013 NAUTICA 

 

 

CSS样式：

@charset "utf-8";
/* CSS Document */

*{margin:0 auto; padding:0px;}
a:link {color:#FFF; text-decoration:none;}
#head,#foot,#copuright{ width:1440px;}

/*头部*/
#head{background-image:url(images/bg.png); height:450px; overflow:hidden;}
#head ul li { list-style-type:none; float:left; margin-right:30px;}
 /*头部菜单栏*/
 .menu {font-size:12px; background-color:rgba(0,0,0,0.3); padding-left:170px; height:30px; padding-top:5px;}
 .menu ul li{ list-style-image:url(images/goods_nav.png);}
 .menu div { margin-right:150px; float:right;}

 /*头部中间部分*/
 .head-z{height:390px; margin:0px 150px; position: relative;}
 /*头部导航栏*/
 .navigation{float:left; font-size:20px; padding-top:5px;width:900px;}

 /*logo*/
 .logo{margin-top:50px;float:left;}

 /*查找框*/
 .search{ float:left;position:absolute; left:20px; top:300px;}
 .search input {height:40px; width:300px; float:left;}
 .search div {background-color:#F00; padding:2px; height:40px; font-size:24px; float:left;}

 /*优惠区*/
 .discount {float:right; margin-top:80px; position:bsolute;}
	.sale { float:left; position:absolute; top:120px; left:550px; z-index:1;}
	  .p1 {color:#FF0; font-size:80px;}
	  .p2 {color:#FFF;}
	.sale-t{ float:right;}
	.sale-t img{ margin-left:60px;}
	.sale-l img{ position:absolute; top:36px; left:740px; z-index:2;}

 /*底部按钮*/
 .button{background-color:rgba(0,0,0,0.3); height:30px;}
 .button ul{ margin:0 auto; width:200px; color:#FFF;}

/*中间内容部分*/
#zhong{ width:1250px; margin-top:10px;}
#zhong a:link { color:#000;}
dt,dd,li{ list-style-type:none; }
/*中间内容-左边样式*/
.left{float:left;}
.left dt {font-size:16px; background-color:#999; height:30px; line-height:30px; margin:20px 0px 0px 10px;}
.left dt img{ margin-left:30px;}
.left dd{ margin:5px 20px;}
/*中间内容-右边样式*/
.right{float:right;margin-left:10px;}
  /*中间内容-右边-标题样式*/
  .title{height:40px;margin:20px 20px 20px 10px; border-bottom:1px #666 solid; line-height:40px;}
  .title dt,.title dd{float:left; margin-right:10px;}
  .title dt{ font-size:36px; color:#F30;}
  .title1{ font-size:16px; color:#999; }
  .title2{ font-size:10px; color:#CCC; margin-left:600px;}
  /*中间内容-右边-图片样式*/
  .product{ height:300px; margin:20px 0px;}
   .product li{position:relative; float:left; margin:10px;}
   .product dl { float:left;}
     .product dl dt{ font-size:24px; color:#F00; margin-bottom:20px;}
  .tu {float:right;}
  .buy{background-color:#15496b; width:70px; height:70px; border-radius:50%; font-size:30px; line-height:70px; color:#FFF; text-align:center; position:absolute;top:190px; left:190px;}
  .free{font-size:14px; position:absolute; left:0px; top:230px; color:#999;}
.clearfloat{ clear:both;}

/*底部样式*/
#foot{ width:1250px;  color:#666; margin-top:100px;}
#foot dt{ font-size:18px; }
#foot dd{ margin-top:10px; font-size:14px;}
/*底部-导航样式*/
.dao ul li{ float:left;}
.dao {border-bottom:1px #999 solid; height:30px; margin-bottom:30px; padding-bottom:20px;}
.dao ul{ margin-left:250px;}
/*底部-菜单导航样式*/
.shop{ width:300px; float:left; margin-left:30px;}
.shop dl dd { float:left; width:140px;}

.help{ float:left; margin-left:30px;}
.offer{ float:left;  margin-left:60px; width:300px;}
 .offer dd{ height:20px;}
 .offer input{ float:left;}
 .offer div{ float:left; background-color:#006; width:80px; text-align:center; color:#FFF;}
 .strong{ font-weight:bold;}
/*底部-菜单导航-CSS精灵样式*/
.COMMUNITY{ float:left; margin-left:60px; width:300px;}
.COMMUNITY dl dd{ background-image:url(images/global_sprite.png); background-repeat:no-repeat;width:32px; height:34px; float:left; margin-right:10px;}
.tu1{ background-position:0px -36px;}
.tu2{ background-position:-32px -36px;}
.tu3{ background-position:-64px -36px;}
.tu4{ background-position:-96px -36px;}
.tu5{ background-position:-128px -36px;}
/*底部-版权样式*/
#copuright{ background-color:#036; text-align:center; margin-top:100px;}

用到的CSS样式：
1、颜色透明：rgba（如background-color:rgba(0,0,0,0.3);）
2、圆形图：设置宽高以后，设置border-radius:50%
3、ul居中
4、图片叠加（z-index属性）

 

 

 

================================这里是结束分割线====================================