本文共 3467 字，大约阅读时间需要 11 分钟。

HTML&CSS案例—咖啡店

最终页面效果

	
   		
   	
   
		
    		
    
			
     		
    
		
    		
    
			
     
				
      			
     
		
    
		
    		
    
			
     
				
      
					
       
 
咖啡 MENU |
 					
					
       
 
咖啡 COOK |
 					
					
       
 
咖啡 STORY |
 					
					
       
 
咖啡 NEWS |
 					
					
       
 
咖啡 PARTY |
 					
				
      
			
     
					
    
		
    		
    
			
     
				
      
咖啡MENU
				
      
					
       
						        
         
           
           
拿铁
           
卡布奇诺
           
摩卡
           
浓缩咖啡
          
          
           
           
Latte
           
Cappuccino
           
Mocha
           
Espresso
          
          
           
大杯
           
35
           
35
           
35
           
30
          
          
           
中杯
           
30
           
30
           
30
           
25
          
          
           
小杯
           
25
           
25
           
25
           
20
          
         
       
				
      
				
      
					
       				
      
				
      
					
       				
      
				
      
					
       				
      
				
      
					
       				
      
			
     
			
     
				
      
					
       
						
        					
       
					
       
						
        
拿铁Caffè Latte
				
        
这是一种传统的经典饮料——浓缩咖啡调入热牛奶，其上覆盖一层轻盈的奶沫。
品尝此款咖啡时，您可以选择特别加入某种口味（如香草，焦糖或杏仁口味）的糖浆。
					
       
				
      
				
      
					
       
						
        					
       
					
       
						
        
摩卡Caffè Mocha
				
        
这款咖啡由醇香的摩卡酱，浓缩咖啡和蒸奶相融相合，上面覆以搅打奶油。
寒冷的日子里，忧伤的时光中,任何人都无法抵抗她的诱惑。
					
       
				
      
				
      
					
       
						
        					
       
					
       
						
        
卡布奇诺Cappuccino
				
        
这款咖啡沿袭传统技法，由我们技艺娴熟的咖啡吧员将手工制作的热奶与细腻奶泡轻柔地浇在浓缩咖啡之上制作而成。
					
       
				
      
				
      
					
       
						
        					
       
					
       
						
        
浓缩咖啡Espresso
				
        
这是咖啡的精粹，以最浓缩的方式显现。浓缩咖啡带点焦糖味道，浓厚馥郁。
					
       
				
      
			
     
		
    
		
    		
    
			
     
web前端开发 @2020-07-17
		
    
	
   

CSS代码

*{
   	margin: 0;	padding: 0;}body{
   	color: #673929;}.container{
   	width: 1010px;	margin: 0 auto;	background-color: #aaa;}/* 设置左侧广告固定定位 */.ad{
   	width: 100px;	height: 100px;	position: fixed;	top: 100px;	left: 30px;}.header{
   	width: 1000px;	height: 250px;	margin: 5px;	background-color: #123;}/* 设置图片的大小 */.pic img{
   	width: 1000px;	height: 250px;}.nav{
   	width: 1000px;	height: 30px;	margin: 5px;	background-color: #523;}.navc{
   	width: 680px;	height: 30px;	background-color: #588;	margin: 0 auto;}li{
   	float: left;	text-align: center;	margin:0 10px;	list-style: none;/* 去除列表项前面的点 */}a{
   	text-decoration: none;/* 去除超链接的下划线 */	color: #fff;	line-height: 30px;}a:hover{
   	color: #9ac;}.content{
   	width: 1000px;	height: 800px;	margin: 5px;	background-color: #fff;}.left{
   	width: 320px;	height: 800px;	margin-right: 5px;		float: left;	background-color: #aa4;}.left h2{
   	display:line-block;	margin: 15px auto;	color: black;	text-align: center;}td{
   	text-align: center;}.img{
   	width: 100px;	height: 100px;	border: 12px solid #fff;	border-radius: 5px;	margin: 8px auto;}/* 图片旋转 */.l{
   	transform: rotate(10deg);}.r{
   	transform: rotate(-10deg);}.img img{
   	width: 100px;	height: 100px;}.img:hover{
   	transform: rotate(10deg);	transform: scale(1.2);}.right{
   	width: 675px;	height: 800px;	float: left;	background-color: #aaf;}.main{
   	width: 650px;	height: 180px;	margin: 20px;	background-color: #aff;}.lpic{
   	width: 150px;	height: 178px;	border: 1px dashed #000;	float: left;}.lpic img{
   	width: 140px;	height: 170px;	margin: 5px;}.rtext{
   	width: 450px;	height: 180px;	float: left;	margin: 0 20px;}.rtext h2{
   	margin: 15px;}.footer{
   	width: 1000px;	height: 60px;	margin: 0 auto;	background-color: #abf;	text-align: center;	line-height: 60px;}

转载地址：http://qpqzi.baihongyu.com/