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

上机一

*{
    margin:0px;
    padding:0px;
    font-size:12px;
}
#pruduce{
    width:947px;
    background-color:#F2F2F2;
}
.top{
    height:55px;
    background:url(../Image/top.jpg) no-repeat 10px 10px;
}
.main{
    text-align:center;
    height:309px;
}
.box{
    width:300px;
    height:285px;
    border:1px solid #999;
    margin:0px 6px;
    float:left;
    cursor:pointer;
}
dl{
    padding-top:3px;

}
dd{
    line-height:30px;
}

div.btprice_1{
    height:50px;
    background:#FFF2CE url(../Image/bt1.jpg) no-repeat 5px 4px;
}
div.btprice_2{
    height:50px;
    background:#FFF2CE url(../Image/bt2.jpg) no-repeat 5px 4px;
}
div.btprice_3{
    height:50px;
    background:#FFF2CE url(../Image/bt3.jpg) no-repeat 5px 4px;
}
.hoverstyle{
    background-color:#D51938;
    color:#fff;
}

	

	



	

    

    	

        	

            	

                
[包邮]亮点可移动儿童防身高帖（每个ID限20）
            
 
            

        
        

        	

            	

                
[包邮]韩国泡温泉游泳衣价达玛分教保守纤瘦大胸泳装
 
            
 
             

        
        

        	

            	

                
[包邮]贵人鸟运动透气跑鞋P23423(每个限购5件)
            
 
             

        
    
 

上机二

* {
    margin: 0;
    padding: 0;
    line-height: 22px;
    font-family: "Arial", "微软雅黑";
}

#chat {
    margin: 3px auto 0 auto;
    width: 436px;
    border: 1px #999999 solid;
}

.chatBody {
    width: 100%;
    height: 220px;
    overflow: auto;
}

.chatText {
    border: none;
    width: 100%;
    height: 50px;
}

.btn {
    text-align: right;
}

.btn span {
    display: inline-block;
    padding: 0 10px;
    height: 25px;
    overflow: hidden;
    color: #ffffff;
    border-radius: 5px;
    background-color: #069dd5;
    font-size: 12px;
    margin-right: 3px;
    cursor: pointer;
}
.a {
    background-color: grey;
    border-radius: 5px;
}
 .chatBody div{display: inline-block}

    
    
    



    

    

    

    
关闭(C)发送(S)

上机三

* {
    margin: 0;
    padding: 0;
    font-family: "Arial", "微软雅黑";
}

ul, li {
    list-style: none;
}

.bbs {
    margin: 0 auto;
    width: 600px;
    position: relative;
}

header {
    padding: 5px 0;
    border-bottom: 1px solid #cecece;
}

header span {
    display: inline-block;
    width: 220px;
    height: 50px;
    color: #fff;
    background: #009966;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    line-height: 50px;
    border-radius: 8px;
    cursor: pointer;
}

#post {
    position: absolute;
    background: #ffffff;
    border: 1px #cccccc solid;
    width: 500px;
    left: 65px;
    top: 70px;
    padding: 10px;
    font-size: 14px;
    z-index: 999999;
    display: none;
}

#post .title {
    width: 450px;
    height: 30px;
    line-height: 30px;
    display: block;
    border: 1px #cecece solid;
    margin-bottom: 10px;
}

#post select {
    width: 200px;
    height: 30px;
}

#post .content {
    width: 450px;
    height: 200px;
    display: block;
    margin: 10px 0;
    border: 1px #cecece solid;

}

#post .btn {
    width: 160px;
    height: 35px;
    color: #fff;
    background: #009966;
    border: none;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    line-height: 35px;
    border-radius: 8px;
    cursor: pointer;
}
.bbs section ul li {
    padding: 10px 0;
    border-bottom: 1px #999999 dashed;
    overflow: hidden;
}

.bbs section ul li div {
    float: left;
    width: 60px;
    margin-right: 10px;
}

.bbs section ul li div img {
    border-radius: 50%;
    width: 60px;
}

.bbs section ul li h1 {
    float: left;
    width: 520px;
    font-size: 16px;
    line-height: 35px;
}

.bbs section ul li p {
    color: #666666;
    line-height: 25px;
    font-size: 12px;
}

.bbs section ul li p span {
    padding-right: 20px;
}

h1 {
    margin-top: -100px;
    margin-left: 120px;
}

    
    
    



    
我要发帖
    

        

    
    

        
        所属版块：请选择版块电子书籍新课来了新手报到职业规划
        
        
    

上机四

*{
    margin:0px;
    padding:0px;
    font-size:12px;
}
#bodyDiv{
    position:relative;
    background:#FFF url(../Image/bg.jpg) no-repeat;
    width:1016px;
    height:1176px;
    margin:0 auto;
}

.search{
    position:absolute;
    left:125px;
    top:258px;
    height:24px;
    line-height:24px;
    width:325px;
    color:#999;
}

.tab{
    position:absolute;
    left:276px;
    top:397px;

}
#tab_bg{
    width: 700px;
    height: 36px;
    line-height: 36px;
    cursor: pointer;
}
.tab_bg0 {
    background: url(../Image/news_bghover.gif) 0px 0px;

}
.tab_bg1 {
    background: url(../Image/news_bghover.gif) 0px -36px;
}
.tab_bg2 {
    background: url(../Image/news_bghover.gif) 0px -72px;
}
.tab_bg3 {
    background: url(../Image/news_bghover.gif) 0px -108px;
}
.tab_bg4 {
    background: url(../Image/news_bghover.gif) 0px -144px;
}
a{
    color:#000;
    text-decoration:none;
}
.tab_common {
    width: 140px;
    height: 36px;
    line-height: 36px;
    float: left;
    text-align: left;
    cursor: pointer;
    text-indent: 40px;
}

.tab_current {
    width: 140px;
    height: 36px;
    line-height: 36px;
    float: left;
    text-align: left;
    cursor: pointer;
    color: #ffffff;
    text-indent: 40px;
}
.tab_current a{color:#fff;}

.jiejue2{
    position:absolute;
    left:817px;
    top:750px;
}

#nav{
    position:absolute;
    top:366px;
    left:26px;
}
#nav ul{
    list-style:none;
}
#nav ul li{
    display:block;
    width:196px;
    line-height:30px;
    border-bottom:1px solid #999;
}
#nav ul li div.first{
    text-indent:20px;
    border-bottom:1px solid #999;
}
#nav ul.second{
    display:none;
}

#nav ul.second li{
    display:block;
    width:166px;
    padding-left:30px;
    height:30px;
    line-height:30px;
    border:none;
}

	

	



     
      
    
    

        

            

                
账号管理
                

                    
账号注册
                    
找回密码
                    
账户关联登录
                    
账号常见问题
                
            
             

                
购物指南
                

                    
购物流程
                    
服务条款
                    
积分计划
                    
取消订单
                
            
            
              

                
配送方式
                

                    
国内配送
                    
订单拆分
                    
商品验货与签收
                    
配送常见问题
                
            
             

                
支付方式
                

                    
在线支付
                    
货到付款
                    
VANCL礼品卡
                    
发票制度
                
            
             
            
        
    
    
    

        

            

                1.新用户注册
            
            

                2.挑选商品
            
            

                3.确认下单
            
            

                4.订单跟踪
            
            

                5.验货签收
            
        
    
    
    
    
    
    

    
        
这条帮助是否解决了您的问题？
        

             已解决
             未解决
            
        
    
        

            
问题没解决？请选择原因:
            

                    文字太多，阅读困难
                    内容复杂，看不懂
                    描述不清楚
                    其他原因
            
            

            
也可以直接填写原因: