使用JQuery快速高效制作网页交互特效第九章所有上机

这里是引用
上机一
样式

body{
    border:0px;
    padding:0px;
    margin:0px auto;
    font:12px Tahoma;
}
div,ul,li,dt,dl {
    float:left;
    margin:0px auto;
    padding:0px;
}
li{
    list-style:none;
}
a:link   {color:#333333;text-decoration: none;}
a:visited   {color:#333333;text-decoration: none;}
a:active   {color:#333333;text-decoration: none;}
a:hover   {color:#ff7300;}

input {
    border:1px #333333 solid;
    margin:0px;
    padding:0px;
}

a img{
    border:0px;
}

.red {color:red;font-weight: bold;text-align:left;}
.b {font-weight:bold;}
#container{
    width:980px;
    margin:0 auto;
    float:none;
}

/*头部 从logo到服务热线*/
#header {
    width:980px;
    height:136px;
    margin:0px auto;
    background:url(../images/h_bg.jpg) no-repeat -22px 0px;
}

#logo {
    width:250px;
    height:108px;
    float:left;
    background:url(../images/h_bg.jpg) no-repeat -22px 0px;
}

/*右上方菜单 购物车 帮助中心 加入收藏 设为首页等，.pic1至.pic6分别为菜单前的小图标，h_text为头部文本*/
.upright_menu {
    float:right;padding:15px 20px 0px 0px;
}
.pic{width:28px;height:26px;}
.pic1{background:url(../images/icon.gif) no-repeat;}
.pic2{background:url(../images/icon.gif) no-repeat -28px 0px;}
.pic3{background:url(../images/icon.gif) no-repeat -56px 0px;}
.pic5{background:url(../images/icon.gif) no-repeat -84px 0px;}
.pic6{background:url(../images/icon.gif) no-repeat -112px 0px;}
.h_text{padding:6px 5px 0px 5px; padding-top:8px\0;text-align:center;}
.login {background:url(../images/icon.gif) no-repeat 0px -25px;}
.reg {background:url(../images/icon.gif) no-repeat 0px -25px;}

.upright_bottom{width:600px;height:26px;float:right;padding:7px 0px 0px 0px;}
.bt {width:38px;height:26px;}
.hello {padding:11px 33px 0px 0px;color:#636362;letter-spacing:3px;}
.nav{width:980px;}
.nav li {
    width:84px;
    height:30px;
    float:left;
    text-align:center;
    font-weight:bold;
}
.nav li a{padding:8px 10px;}
.nav li a:link,.nav li a:active,.nav li a:visited{
    padding:8px 10px;
    color:#333333;
    font-size:13px;
}
.nav li a:hover{
    padding:8px 10px;
    background:url(../images/nav_bg.png) no-repeat !important;
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled="true",sizingMethod="scale",src="../images/nav_bg.png");
    _background-image:none;
}

/*主体*/
#main{
    width:980px;
    margin:0 auto;
    border:0px;
    float:left;
}

/*主体左部 整个商品分类部分*/
#left{
    width:204px;
    height:644px;
    padding:38px 0px 0px 0px;
    background:url(../images/bg.gif) no-repeat;
}

.left_list,.right_list{padding:0px 10px 0px 13px;width:174px;}
.left_class{
    font-size:14px;
    color:#ff7300;
    font-weight:bold;
    float:none;
    padding:9px 0px 0px 0px;
}
.left_li{color:#636362;width:58px;line-height:24px;}



.width_8px{width:8px;height:644px;}

/*主体中部 从大幅轮播图（蓝色印象）到疯狂采购（IBM上网本）*/
#content{
    width:527px;
    background:url(../images/bg.gif) no-repeat -212px 0px;
}
.content_top{width:527px;padding-top:8px;height:182px;}

#adv1,#adv2,#adv3,#adv4{display:none; }
#adv {position:absolute;left:480px;top:315px;text-align:center;}
#adv a{/*设置无下划线、文字背景超连接样式*/
    font-size:13px;
    text-decoration:none;
    background-color:#cccccc;
    padding:0px 5px;
}

.content_list{width:524px;height:449px;padding-top:58px;*padding-top:50px;}
.content_li{width:166px;padding:3px 0px;text-align:center;}
.content_img {width:142px;height:89px;float:none;text-align:center;}

/*主体右部 从公告栏到手机充值*/
#right{
    width:233px;
    /*_margin-right:-3px; 浮动层里有文字则需要此行*/
    height:644px;
    background:url(../images/bg.gif) no-repeat -747px 0px;
}

.right_list dl{padding:10px 10px 0px 0px;*width:190px;}
.right_list dt{padding:0px 5px 0px 0px;}
.right_list dd{line-height:17px;white-space:nowrap;}
.right_list img{border:1px solid #9ea0a2;}

.r1{width:200px;height:170px;}
.r2 dl dt img{width:60px;height:47px;}
.r2 dd {padding-top:20px;}

#tab{padding-top:14px;}
#tabtitle1{cursor:pointer;width:80px;height:50px;background:url(../images/bg.gif) no-repeat -761px -430px;}
#tabtitle2{cursor:pointer;width:153px;height:50px;background:url(../images/bg.gif) no-repeat -840px -430px;}
#tab1,#tab2{display:none;}

/*底部 从友情链接到最后*/
#footer{
    width:980px;
    height:150px;
    float:none;
}
.copyright{width:980px;text-align:center;line-height:20px;}
.register_textBroader{width:125px;}

/*对联广告 两边主图片层和关闭图片层*/

#advLeft{
    position:absolute;
    height:74px;
    width:74px;
    z-index:1;
}
#advRight{
    position:absolute;
    height:80px;
    width:80px;
    z-index:1;
}

#closeLeft{
    cursor:pointer;
    position:absolute;
    height:13px;
    width:13px;
    z-index:2;
}

#closeRight{
    cursor:pointer;
    position:absolute;
    height:13px;
    width:13px;
    z-index:2;
}

.register{float: left; padding-top: 40px;width: 650px;}
.registerRight{float: right; width: 300px; padding-top: 40px}

/*列表页*/
.list_bg {background:url(../images/list_bg.gif) repeat-x;}
.reg_text{width:130px;height:18px;margin:5px 5px; }

/*注册页*/
#formRegister dl{clear: both;}
#formRegister dt{float: left;text-align:right; width:120px; height: 35px; line-height: 35px;}
#formRegister dd{width:480px; float:left; height: 35px; line-height: 35px;}
.reg_bg {background:url(../images/reg_bg.gif) repeat-x;}
.login_bg {padding-top:50px;background:url(../images/login_bg.gif) repeat-x;}
textarea{border:1px solid #cccccc;padding:5px;}


/*长宽及对齐、浮动*/
.a_l{text-align:left;}
.a_r{text-align:right;}
.a_c{text-align:center;}

.f_l{float:left;}
.f_r{float:right;}
.f_n{float:none;}

/*input大小*/
.n4{width:35px;}

.w3p{width:3%;}
.w10p{width:10%;}
.w15p{width:15%;}
.w20p{width:20%;}
.w25p{width:25%;}
.w50p{width:50%;}
.w63p{width:63%;}
.w87p{width:87%;}

.w9{width:9px;}
.w84{width:84px;}
.w81 {width:81px;}
.w100{width:100px;}
.w129 {width:129px;}
.w252 {width:252px;}
.w350{width:350px;}
.w364{width:364px;}
.w507{width:507px;}

.h24 {height:24px;}
.h32 {height:32px;}
.h34 {height:34px;}
.h35 {height:35px;}
.h40 {height:40px;}
.h58 {height:58px;}
.h65 {height:65px;}
.h460 {height:460px;}

.h20p {height:20%;}
.h37p {height:37%;}
.h43p {height:43%;}

代码

	
 
	
 


	

		
		

     

		 

			 

				 
名字：
				 

			 
			 

				 
姓氏：
				 

			 
			 

				 
登录名：
				 
（可包含 a-z、0-9 和下划线）
			 
			 

				 
密码：
				 
（至少包含 6 个字符）
			 
			 

				 
再次输入密码：
				 
				 
			 
			 

				 
电子邮箱：
				 
（必须包含 @  和.字符）
			 
			 

				 
性别：
				 

					 
					 男 
					 
					 女
				 
			 
			 

				 
头像：
				 
 
			 
			 

				 
爱好：
				 

					 
						 
					 
					 运动  
					 
						 
					 
					 聊天  
					 
						 
					 
					 玩游戏
				 
			 
			 

				 
出生日期：
				 

					  年  
					 
						 [选择月份]
						 一月
						 二月
						 三月
						 四月
						 五月
						 六月
						 七月
						 八月
						 九月
						 十月
						 十一月
						 十二月
					  月  
					 日
				 
			 
			 

				 
 
				 
				 

					  
				 
			 
     
	 
		

			
阅读贵美网服务协议 
        			欢迎阅读服务条款协议，本协议阐述之条款和条件适用于您使用Gmgw.com网站的各种工具和服务。
  本服务协议双方为贵美与贵美网用户，本服务协议具有合同效力。
  贵美的权利和义务
    1.贵美有义务在现有技术上维护整个网上交易平台的正常运行，并努力提升和改进技术，使用户网上交易活动的顺利。
    2.对用户在注册使用贵美网上交易平台中所遇到的与交易或注册有关的问题及反映的情况，贵美应及时作出回复。
    3.对于在贵美网网上交易平台上的不当行为或其它任何贵美认为应当终止服务的情况，贵美有权随时作出删除相关信息、终止服务提供等处理，而无须征得用户的同意。
    4.因网上交易平台的特殊性，贵美没有义务对所有用户的注册资料、所有的交易行为以及与交易有关的其他事项进行事先审查。
  
		
    
		
	

	
	

		

上机二
样式跟上机一一样
代码

	
 
	
 


	

		

			

			

				

					

					
购物车
					

					
帮助中心
					

					
加入收藏
					

					
设为首页
					
登录
					
注册
				
			
 
			

				

					
你好，欢迎访问贵美商城！
						
					
				
			
 
			

				

					
 首   页 
					
家用电器
					
手机数码
					
日用百货
					
 书   籍 
					
帮助中心
					
免费开店
					
全球咨询
				
			
	
		
 
		

     

		 

			 

				 
名字：
				 

			 
			 

				 
姓氏：
				 

			 
			 

				 
登录名：
				 
（可包含 a-z、0-9 和下划线）
			 
			 

				 
密码：
				 

			 
			 

				 
再次输入密码：
				 

			 
			 

				 
电子邮箱：
				 

			 
			 

				 
性别：
				 

					 
					 男 
					 
					 女
				 
			 
			 

				 
头像：
				 
 
			 
			 

				 
爱好：
				 

					 
						 
					 
					 运动  
					 
						 
					 
					 聊天  
					 
						 
					 
					 玩游戏
				 
			 
			 

				 
出生日期：
				 

					  年  
					 
						 [选择月份]
						 一月
						 二月
						 三月
						 四月
						 五月
						 六月
						 七月
						 八月
						 九月
						 十月
						 十一月
						 十二月
					  月  
					 日
				 
			 
			 

				 
 
				 
				 

					  
				 
			 
     
	 
		

			
阅读贵美网服务协议 
        			欢迎阅读服务条款协议，本协议阐述之条款和条件适用于您使用Gmgw.com网站的各种工具和服务。
  本服务协议双方为贵美与贵美网用户，本服务协议具有合同效力。
  贵美的权利和义务
    1.贵美有义务在现有技术上维护整个网上交易平台的正常运行，并努力提升和改进技术，使用户网上交易活动的顺利。
    2.对用户在注册使用贵美网上交易平台中所遇到的与交易或注册有关的问题及反映的情况，贵美应及时作出回复。
    3.对于在贵美网网上交易平台上的不当行为或其它任何贵美认为应当终止服务的情况，贵美有权随时作出删除相关信息、终止服务提供等处理，而无须征得用户的同意。
    4.因网上交易平台的特殊性，贵美没有义务对所有用户的注册资料、所有的交易行为以及与交易有关的其他事项进行事先审查。
  
		
    
		

			
友情链接：  百度 | Google | 雅虎 | 淘宝 | 拍拍 | 易趣 | 当当 | 京东商城 | 迅雷 | 新浪 | 网易 | 搜狐 | 猫扑 | 开心网 | 新华网 | 凤凰网

				
COPYRIGHT ©  2003-2010 北京市贵美商城有限公司 ALL RIGHT RESERVED

				热线：400-66-13060 Email:[email protected]

				ICP：沪ICP备05021104号

				
			

		

	




		 
 

上机三
样式

*{
    margin:0;
    padding:0;
    font-size:12px;
    line-height:20px;
}
#register{
    width:525px;
    margin: 0 auto;
}
.hr_1 {
    font-size: 14px;
    font-weight: bold;
    color: #3275c3;
    height: 35px;
    border-bottom: 2px solid #3275c3;
    vertical-align:bottom;
    padding-left:12px;
    margin-bottom: 15px;
}
#register dl{clear: both; height: 30px;}
#register dl dt{
    text-align:right;
    width:80px;
    height:25px;
    padding-right:5px;
    float: left;
}
#register dl dd{
    float: left;}
#register dl dd div{ display: inline; padding-left: 5px;}
#register dl dd input:not(.btn){
    width:130px;
    height:18px;
    border:solid 1px #0066FF;
}

.red{
    color:#cc0000;
    font-weight:bold;
}

div{
    color:#F00;
}

代码

	
	
	




	

	
新用户注册
	

		

			
用户名：
			
用户名由英文字母和数字组成的4-16位字符，以字母开头
		
		

			
密码：
			
密码由英文字母和数字组成的4-10位字符
		
		

			
确认密码：
			

		
		

			
电子邮箱：
			

		
		

			
手机号码：
			

		
		

			
生日：
			

		
		

			
 
			

		
	

上机四
样式

*{
    margin:0;
    padding:0;
    font-size:12px;
    line-height:20px;
}
#register{
    width:525px;
    margin: 0 auto;
}
.hr_1 {
    font-size: 14px;
    font-weight: bold;
    color: #3275c3;
    height: 35px;
    border-bottom: 2px solid #3275c3;
    vertical-align:bottom;
    padding-left:12px;
    margin-bottom: 15px;
}
#register dl{clear: both; height: 30px;}
#register dl dt{
    text-align:right;
    width:80px;
    height:25px;
    padding-right:5px;
    float: left;
}
#register dl dd{
    float: left;}
#register dl dd div{ display: inline; padding-left: 5px;}
#register dl dd input:not(.btn){
    width:220px;
    height:18px;
    border:solid 1px #0066FF;
}

代码

	

	




	

	
新用户注册
	

		

			
用户名：
			

		
		

			
密码：
			

		
		

			
确认密码：
			

		
		

			
电子邮箱：
			

		
		

			
手机号码：
			

		
		

			
生日：