使用JQuery快速高效制作网页交互特效第十章课程总复习阶段1~5

阶段一
样式

* {padding:0;margin:0;}

#header,#main{
	width:600px;
	margin:0 auto;
}
#main{
	padding: 10px;
	border: 1px #999999 solid;
	border-radius: 8px;
	overflow: hidden;
}
.inputs{
	border:solid 1px #a4c8e0;
	width:150px;
	height:15px;
}

.userWidth{
	width:110px;
}
dl dd div{
	display: inline-block;
	font-size:12px;
	color:#000;
	margin-left: 5px;
	line-height: 18px;
}
dl{
	clear:both;
	line-height: 22px;
}
dt,dd{
	float:left;
}
dt{
	width:110px;
	text-align:right;
	font-size:14px;
	height:30px;
	line-height:25px;
}
dd{
	font-size:12px;
	color:#666666;
}
dl>dd:first-of-type{width: 170px;}
/*当鼠标放到文本框时，提示文本的样式*/
.import_prompt{
	border:solid 1px #ffcd00;
	background-color:#ffffda;
	padding-left:5px;
	padding-right:5px;
	line-height:20px;
}
/*当文本框内容不符合要求时，提示文本的样式*/
.error_prompt{
	border:solid 1px #ff3300;
	background:#fff2e5 url(../images/li_err.gif)5px 2px  no-repeat;
	padding:2px 5px 0px 25px;
	line-height:20px;
}
/*当文本框内容输入正确时，提示文本的样式*/
.ok_prompt{
	border:solid 1px #01be00;
	background:#e6fee4 url(../images/li_ok.gif) 5px 2px no-repeat;
	padding:2px 5px 0px 25px;
	line-height:20px;
}

代码

    
    
    





    

        

            
通行证用户名：
            
 @163.com
            

                

            
        
        

            
登录密码：
            

            

                

            
        
        

            
重复登录密码：
            

            

                

            
        
        

            
性别：
            
男 女
            
        
        

            
真实姓名：
            

        
        

            
昵称：
            

            

                

            
        
        

            
关联手机号：
            

            

                

            
        
        

            
保密邮箱：
            

            

                

            
        
        

            

            

        
    

阶段2~5
样式

@charset "gb2312";
/* CSS Document */

body{
	margin:0px;
	padding:0px;
	font-size:12px;
	line-height:20px;
	color:#333;
   }
ul,li,ol,h1,dl,dd{
	list-style:none;
	margin:0px;
	padding:0px;
	}
a{
	color:#1965b3;
    text-decoration: none;
	}    
a:hover{
	color:#CD590C;
	text-decoration:underline;
	}
img{
	border:0px;
	vertical-align:middle;
	}
#header{
	height:40px;
	margin:10px auto 10px auto;
	width:800px;
	clear:both;
	}
#nav{
	margin:10px auto 10px auto;
	width:800px;
	clear:both;
	}
#navlist{
	width:800px;
	margin:0px auto 0px auto;
	height:23px;
	}
	#navlist li{
		float:left;
		height:23px;
		line-height:26px;
	}
	.navlist_red_left{
		background-image:url(../images/taobao_bg.png);
		background-repeat:no-repeat;
		background-position:-12px -92px;
		width:3px;
		}
	.navlist_red{
		background-color:#ff6600;
		text-align:center;
		font-size:14px;
		font-weight:bold;
		color:#FFF;
		width:130px;
		}
	.navlist_red_arrow{
		background-color:#ff6600;
		background-image:url(../images/taobao_bg.png);
		background-repeat:no-repeat;
		background-position:0px 0px;
		width:13px;
		}
	.navlist_gray{
		background-color:#e4e4e4;
		text-align:center;
		font-size:14px;
		font-weight:bold;
		width:150px;
		}
	.navlist_gray_arrow{
		background-color:#e4e4e4;
		background-image:url(../images/taobao_bg.png);
		background-repeat:no-repeat;
		background-position:0px 0px;
		width:13px;
		}
	.navlist_gray_right{
		background-image:url(../images/taobao_bg.png);
		background-repeat:no-repeat;
		background-position:-12px -138px;
		width:3px;
		}
#content{
	width:800px;
	margin:10px auto 5px auto;
	clear:both;
	}
	.title_1{
		text-align:center;
		width:50px;
		}
	.title_2{
		text-align:center;
		}
	.title_3{
		text-align:center;
		width:80px;
		}
	.title_4{
		text-align:center;
		width:80px;
		}
	.title_5{
		text-align:center;
		width:100px;
		}
	.title_6{
		text-align:center;
		width:80px;
		}
	.title_7{
		text-align:center;
		width:60px;
		}
	.line{
		background-color:#a7cbff;
		height:3px;
		}
	.shopInfo{
		padding-left:10px;
		height:35px;
		vertical-align:bottom;
		}
	.num_input{
		border:solid 1px #666;
		width:25px;
		height:15px;
		text-align:center;
		}
	.cart_td_1,.cart_td_2,.cart_td_3,.cart_td_4,.cart_td_5,.cart_td_6,.cart_td_7,.cart_td_8{
		background-color:#e2f2ff;
		border-bottom:solid 1px #d1ecff;
		border-top:solid 1px #d1ecff;
		text-align:center;
		padding:5px;
		}
	.cart_td_1,.cart_td_3,.cart_td_4,.cart_td_5,.cart_td_6,.cart_td_7{
		border-right:solid 1px #FFF;
		}
	.cart_td_3{
		text-align:left;
		}
	.cart_td_4{
		font-weight:bold;
		}
	.cart_td_7{
		font-weight:bold;
		color:#fe6400;
		font-size:14px;
		}
	.hand{
		cursor:pointer;
		}
.shopend{
	text-align:right;
	padding-right:10px;
	padding-bottom:10px;
	}
.yellow{
	font-weight:bold;
	color:#fe6400;
	font-size:18px;
	line-height:40px;
	}

代码

    
    
    



您的位置：首页 > 我的淘宝 > 我的购物车

    

        

        
1. 查看购物车
        

        
2. 确认订单信息
        

        
3. 付款到支付宝
        

        
4. 确认收货
        

        
5. 评价
        

    



    

        

            

                
全选
                
店铺宝贝
                
获积分
                
单价（元）
                
数量
                
小计（元）
                
操作
            
            

                

            
            

                
店铺：纤巧百媚时尚鞋坊 卖家：纤巧百媚 
            
            

                

                

                
日韩流行风时尚美眉最爱独特米字拼图金属坡跟公主靴子黑色

                    颜色：棕色 尺码：37

                    保障：
                
5
                
138.00
                
 
                    
                

                
删除
            

            

                
店铺：香港我的美丽日记 卖家：lokemick2009 
            
            

                

                

                
chanel/香奈尔/香奈尔炫亮魅力唇膏3.5g

                    保障： 
                
12
                
265.00
                
 
                    
                

                
删除
            

            

                
店铺：实体经营 卖家：林颜店铺 
            
            

                

                

                
蝶妆海?蓝清滢粉底液10#（象牙白）

                    保障： 
                
3
                
85.00
                
 
                    
                

                
删除
            

            

                
店铺：红豆豆的小屋 卖家：taobao豆豆 
            
            

                

                

                
相宜促销专供 大S推荐 最好用的LilyBell化妆棉

                    保障：
                
12
                
12.00
                
 
                    
                

                
删除
            

            

                

                
商品总价（不含运费）： 元

                    可获积分  点