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

上机一

样式

body,h1,h2,h3,p,ul,li,dl,dt,dd,div,section{margin: 0;padding: 0;}
body{
    font-family: "微软雅黑";
    font-size: 12px;
    line-height: 28px;
}
#book{
    margin: 5px auto 0 auto;
    width: 650px;
    overflow: hidden;
}
.imgLeft{
    float:left;
    width: 210px;
}
.imgLeft img{width: 200px;}
.textRight{
    float: right;
    width: 440px;
}
#book h1{font-size: 16px; line-height: 50px;}
.textRight dl{padding-left: 5em;}
.textRight dl dd{display: none;}
#jdPrice p{ display:inline;}

代码

    
    
    



    

    

        
岛上书店【荐书联盟推荐】[The Storied Life of A.J.Fikry]
        
自营图书几十万畅销品种阶梯满减，抽奖赢魅蓝note3、JDRead阅读器！
        
[美] 加·泽文（Gabrielle Zevin） 著；孙仲旭，李玉瑶 译
        

            
京东价： ￥24.10 [6.9折] 
[定价：￥35.00]
 (降价通知)
            
促销信息：手机专享价 ￥9.90
            

                
以下促销可在购物车任选其一
                
加价购 满99.00元另加6.18元即可在购物车换购热销商品
                
满减 满100.00减20.00，满200.00减60.00，满300.00减100.00
            
            
领 券：105-6  200-16
        
    

上机二

代码

    
    


英雄联盟
    《英雄联盟》，简称LOL。

    由Riot Games 开发，为3D竞技场战游戏，其
    主创团队由实力强劲的
        魔兽争霸
        系列游戏多人即时对战自定义地图开发团队
    ...
    更多详情

目录

    
开发团队
    
游戏周边
    
游戏介绍
    
配置需求
    
游戏背景

上机三

样式

body,div,p,dl,dt,dd{padding: 0; margin: 0;}
body{font-size: 12px; line-height: 28px; font-family: "微软雅黑";}
.main{
    width:500px;
    margin: 0 auto;
}
.left{
    width:160px;
    float:left;
}
.main dt{font-weight: bold; font-size: 14px; line-height: 35px;}
.right{
    width:340px;
    float:left;
}

代码

    
    
    



    

        
        


        
    
    

        

            
非缘勿扰
            
主演：苏有朋/秦岚/傅艺伟等
            
导演：赖水清
            
标签：苏有朋  国产电视剧   2013  连续剧 
            
剧情：当代都市，大年女刘林、杨阳都在寻找自己的如意郎君，刘林偶遇陆氏房地产总裁路西诺，两人成了欢喜冤家，遭到暗恋西诺的丁娟的嫉恨。。。点击了解更多 
        
        
    

上机四

样式

*{padding:0;margin:0;}
.contain{width:100%;margin:0px auto;}

tr{text-align:center;}
th{line-height:45px;background:#0000ff; color: #ffffff;}
td{border-bottom:1px #d7d7d7 solid;}
td,td a{padding:8px 0;color:#666;font-size:14px;}
td img{vertical-align:middle;}
td img,td a{display:inline-block;margin-right:8px;}

代码

    
    
    
    
    
    
    



    

        

            
商品
            
单价
            
数量
            
操作
        
        

            

                
                丹幕妮通勤波点印花毛衣
            
            
180.0
            
3
            
删除
        
        

            

                
                预售太平洋女装连衣裙
            
            
765.0
            
4
            
删除
        
        

            

                
                丹幕妮通勤红色小外套
            
            
456.0
            
2
            
删除
        
        

            

                
                漫巴森秋装新款套头衫
            
            
140.0
            
1
            
删除
        
    

上机五

样式

*{margin: 0; padding: 0;font-family: "微软雅黑";font-size: 14px;}
ul,ol,li{list-style: none;}
#play{margin: 0 auto; width:680px; overflow: hidden;}
#play h1{line-height: 40px; font-size: 22px;}
#play ul>li{
    float: left;
    width: 220px;
    height: 308px;
    overflow: hidden;
    position: relative;
}
#play ol li{height: 37px; padding: 0px 0px 0 10px; position: relative;}
#play ul>li>span{display: block; position: absolute; left: 0; bottom: 0; font-size: 25px; color: #ffffff; font-weight: bold; padding: 5px 10px; z-index: 100;}
#play ul>li>p{position: absolute; left: 50px; bottom: 10px; color: #ffffff;}
#play ol{padding-top: 13px; padding-right: 5px;}
#play ol li span{display:inline-block; color: #ffffff; margin-right: 5px; width: 20px; height: 20px; font-size: 12px; font-weight: bold; text-align: center;}
#play ol li p{position: absolute; right: 0; top: 3px; color: #ffffff; background: #f0a30f; padding: 0 8px; font-size: 12px; display: none;}

代码

    
    
    



    
全网热播视频
    

        


            
昊花梦
1
        


            
好先生
2
        

            

                
3三八线
加入看单
                
4吉详天宝
加入看单
                
5亲爱的翻译官
加入看单
                
6仙剑云之凡
加入看单
                
7权力的游戏第五季
加入看单
                
8琅琊榜
加入看单
                
9那年青春我们正好
加入看单
                
10乡村受情8（上）
加入看单