首页技术为王JavascriptJS入门到精通 第21章 仿豆瓣电影网

JS入门到精通 第21章 仿豆瓣电影网

分类Javascript时间2026-07-17 17:09:00发布信义之树浏览5
导读：一、首页1. index.html 静态页：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>周星驰</title> &...

一、首页

1. index.html 静态页：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
<title>周星驰</title>
    
<link rel="stylesheet" href="css/index.css" />
    
<script type="text/javascript" src="js/jquery-3.5.1.min.js"></script>    

      
    
</head>
<body>
    
<div id="nav">
    <div><a href="index.html">豆瓣电影</a></div>
    <div>
        <ul>
            <li><a href="javascript:;">影讯 & 购票</a></li>
            <li><a href="javascript:;">选电影</a></li>
            <li><a href="javascript:;">电视剧</a></li>
            <li><a href="javascript:;">排行榜</a></li>
            <li><a href="javascript:;">分类</a></li>
            <li><a href="javascript:;">影评</a></li>
            <li><a href="javascript:;">2020年度榜单</a></li>
        </ul>
    </div>
</div>
    
<div id="main">
    <div id="left">
        <div>

            <div>
                <h2>正在热映</h2>
                
                <div>
                    <span>1/3</span>
                    <a href="javascript:;"></a>
                    <a href="javascript:;"></a>
                </div>
            </div>

            
            <div>
               <div>
                  <ul>
                    <li>
                        <a href="detail/mnyys.html"><img src="images/1.jpg" alt="" /></a>
                        <p><a href="detail/mnyys.html">美女与野兽</a></p>
                        <div>
                            <span><span></span></span>
                            <span>7.2</span>
                        </div>
                        <a href="javascript:;">选座购票</a>
                    </li>
                    <li>
                        <a href="detail/thwj.html"><img src="images/2.jpg" alt="" /></a>
                        <p><a href="detail/thwj.html">头号玩家</a></p>
                        <div>
                            <span><span></span></span>
                            <span>8.7</span>
                        </div>
                        <a href="javascript:;">选座购票</a>
                    </li>
                    <li>
                        <a href="detail/fwhyj.html"><img src="images/3.jpg" alt="" /></a>
                        <p><a href="detail/fwhyj.html">飞屋环游记</a></p>
                        <div>
                            <span><span></span></span>
                            <span>8.9</span>
                        </div>
                        <a href="javascript:;">选座购票</a>
                    </li>
                    <li>
                        <a href="detail/mtyj.html"><img src="images/4.jpg" alt="" /></a>
                        <p><a href="detail/mtyj.html">摩天营救</a></p>
                        <div>
                            <span><span></span></span>
                            <span>6.4</span>
                        </div>
                        <a href="javascript:;">选座购票</a>
                    </li>
                    <li>
                        <a href="detail/yhhwd.html"><img src="images/5.jpg" alt="" /></a>
                        <p><a href="detail/yhhwd.html">银河护卫队</a></p>
                        <div>
                            <span><span></span></span>
                            <span>8.0</span>
                        </div>
                        <a href="javascript:;">选座购票</a>
                    </li>
                    <li>
                        <a href="detail/crzdy2.html"><img src="images/6.jpg" alt="" /></a>
                        <p><a href="detail/crzdy2.html">超人总动员2</a></p>
                        <div>
                            <span><span></span></span>
                            <span>8.1</span>
                        </div>
                        <a href="javascript:;">选座购票</a>
                    </li>
                    <li>
                        <a href="detail/jqrzdy.html"><img src="images/7.jpg" alt="" /></a>
                        <p><a href="detail/jqrzdy.html">机器人总动员</a></p>
                        <div>
                            <span><span></span></span>
                            <span>9.3</span>
                        </div>
                        <a href="javascript:;">选座购票</a>
                    </li>
                    <li>
                        <a href="detail/jtmdt.html"><img src="images/8.jpg" alt="" /></a>
                        <p><a href="detail/jtmdt.html">惊天魔盗团</a></p>
                        <div>
                            <span><span></span></span>
                            <span>7.5</span>
                        </div>
                        <a href="javascript:;">选座购票</a>
                    </li>
                    <li>
                        <a href="detail/cmdsj.html"><img src="images/9.jpg" alt="" /></a>
                        <p><a href="detail/cmdsj.html">楚门的世界</a></p>
                        <div>
                            <span><span></span></span>
                            <span>9.2</span>
                        </div>
                        <a href="javascript:;">选座购票</a>
                    </li>
                    <li>
                        <a href="detail/dmkj.html"><img src="images/10.jpg" alt="" /></a>
                        <p><a href="detail/dmkj.html">盗梦空间</a></p>
                        <div>
                            <span><span></span></span>
                            <span>9.3</span>
                        </div>
                        <a href="javascript:;">选座购票</a>
                    </li>
                    <li>
                        <a href="detail/fkdwc.html"><img src="images/11.jpg" alt="" /></a>
                        <p><a href="detail/fkdwc.html">疯狂动物城</a></p>
                        <div>
                            <span><span></span></span>
                            <span>9.1</span>
                        </div>
                        <a href="javascript:;">选座购票</a>
                    </li>
                    <li>
                        <a href="detail/fczlm.html"><img src="images/12.jpg" alt="" /></a>
                        <p><a href="detail/fczlm.html">复仇者联盟</a></p>
                        <div>
                            <span><span></span></span>
                            <span>8.1</span>
                        </div>
                        <a href="javascript:;">选座购票</a>
                    </li>
                    <li>
                        <a href="detail/hxjy.html"><img src="images/13.jpg" alt="" /></a>
                        <p><a href="detail/hxjy.html">火星救援</a></p>
                        <div>
                            <span><span></span></span>
                            <span>8.4</span>
                        </div>
                        <a href="javascript:;">选座购票</a>
                    </li>
                    <li>
                        <a href="detail/jcs.html"><img src="images/14.jpg" alt="" /></a>
                        <p><a href="detail/jcs.html">巨齿鲨</a></p>
                        <div>
                            <span><span></span></span>
                            <span>5.9</span>
                        </div>
                        <a href="javascript:;">选座购票</a>
                    </li>
                    <li>
                        <a href="detail/tqyj.html"><img src="images/15.jpg" alt="" /></a>
                        <p><a href="detail/tqyj.html">通勤营救</a></p>
                        <div>
                            <span><span></span></span>
                            <span>6.6</span>
                        </div>
                        <a href="javascript:;">选座购票</a>
                    </li>

                  </ul>
                </div>
            </div>
            

        </div>
        
        <div>
            <a href="javascript:;"><img src="images/banner1.jpg" /></a>
            <a href="javascript:;"><img src="images/banner2.jpg" /></a>
        </div>        

        
        <div>
            <div>
                <h2>最近热门的电影</h2>
                <ul>
                    <li><a>热门</a></li>
                    <li><a>最新</a></li>
                </ul>
            </div>
            
            <div>
              <div>
                <ul>
                    <li>
                        <a href="detail/thwj.html">
                            <img src="images/2.jpg" alt="" />
                        </a>
                        <p><a href="detail/thwj.html">头号玩家</a>
                        <span>8.7</span></p>
                    </li>
                    <li>
                        <a href="detail/fwhyj.html">
                            <img src="images/3.jpg" alt="" />
                        </a>
                        <p><a href="detail/fwhyj.html">飞屋环游记</a>
                        <span>8.9</span></p>
                    </li>
                    <li>
                        <a href="detail/yhhwd.html">
                            <img src="images/5.jpg" alt="" />
                        </a>
                        <p><a href="detail/yhhwd.html">银河护卫队</a>
                        <span>8.0</span></p>
                    </li>
                    <li>
                        <a href="detail/crzdy2.html">
                            <img src="images/6.jpg" alt="" />
                        </a>
                        <p><a href="detail/crzdy2.html">超人总动员2</a>
                        <span>8.1</span></p>
                    </li>
                    <li>
                        <a href="detail/jtmdt.html">
                            <img src="images/8.jpg" alt="" />
                        </a>
                        <p><a href="detail/jtmdt.html">惊天魔盗团</a>
                        <span>7.5</span></p>
                    </li>
                </ul>
              </div>
                
              <div>
                <ul>
                    <li>
                        <a href="detail/cmdsj.html">
                            <img src="images/9.jpg" alt="" />
                        </a>
                        <p><a href="detail/cmdsj.html">楚门的世界</a>
                        <span>9.2</span></p>
                    </li>
                    <li>
                        <a href="detail/dmkj.html">
                            <img src="images/10.jpg" alt="" />
                        </a>
                        <p><a href="detail/dmkj.html">盗梦空间</a>
                        <span>9.3</span></p>
                    </li>
                    <li>
                        <a href="detail/fkdwc.html">
                            <img src="images/11.jpg" alt="" />
                        </a>
                        <p><a href="detail/fkdwc.html">疯狂动物城</a>
                        <span>9.1</span></p>
                    </li>
                    <li>
                        <a href="detail/fczlm.html">
                            <img src="images/12.jpg" alt="" />
                        </a>
                        <p><a href="detail/fczlm.html">复仇者联盟</a>
                        <span>8.1</span></p>
                    </li>
                    <li>
                        <a href="detail/hxjy.html">
                            <img src="images/13.jpg" alt="" />
                        </a>
                        <p><a href="detail/hxjy.html">火星救援</a>
                        <span>8.4</span></p>
                    </li>
                </ul>
            </div>
                
                
                
        
        </div>
            
            
            
            
            
            
        </div>
        
        
  </div>
    
    
    
  <div id="aside">
    <div>
        <div><h2>一周口碑榜</h2></div>
        <div>
            <ul>
                <li><span>1</span>
                    <span><a href="detail/fczlm.html">复仇者联盟</a></span>
                </li>
                <li><span>2</span>
                    <span><a href="detail/thwj.html">头号玩家</a></span></li>
                <li><span>3</span><span><a href="detail/mnyys.html">美女与野兽</a></span></li>
                <li><span>4</span><span><a href="detail/yhhwd.html">银河护卫队</a></span></li>
                <li><span>5</span><span><a href="detail/dmkj.html">盗梦空间</a></span></li>
                <li><span>6</span><span><a href="detail/fwhyj.html">飞屋环游记</a></span></li>
                <li><span>7</span><span><a href="detail/hxjy.html">火星救援</a></span></li>
                <li><span>8</span><span><a href="detail/jqrzdy.html">机器人总动员</a></span></li>
                <li><span>9</span><span><a href="detail/cmdsj.html">楚门的世界</a></span></li>
                <li><span>10</span><span><a href="detail/fkdwc.html">疯狂动物城</a></span></li>
            </ul>
        </div>
    </div>
      
      
    <div>
        <div><h2>合作联系</h2></div>
        <div>
            <ul>
                <li>电影合作邮箱：movie@mr.com</li>
                <li>电视剧合作邮箱：tv@mr.com</li>
            </ul>
        </div>
    </div>
</div>
    
    
    
    
</div>    
    
<div style="clear:both"></div>
    
<div id="bottom">
    <span>@ 2001 - 2021 mingrisoft.com all rights reserved 吉林省明日科技有限公司</span>
    
    <span>
        <ul>
            <li>关于明日</li>
            <li>联系我们</li>
            <li>免责声明</li>
            <li>帮助中心</li>
            <li>移动应用</li>
            <li>明日广告</li>
            <li>合作共赢</li>
        </ul>
    </span>
</div>
    
    
</body>
</html>

   

2. index.css ：

*{
            margin: 0;
            padding: 0;
}

a {text-decoration: none;}

ul{list-style: none;}

#nav{
width:100%;
height:120px;
background:#DBD8FE}

.nav-logo{
width:1200px;
height:80px;
line-height:80px;
margin:0 auto;
}

.nav-logo a{
font-size:36px;
color:#3399FF;
font-weight:bold;
font-family:"微软雅黑"}

.nav-items{
width:1200px;
height:40px;
line-height:40px;
border-top:1px solid #CCCCCC;
margin:0 auto;
}

.nav-items ul li{
float:left;
margin-right:40px;
font-family:"微软雅黑"}
.nav-items ul li a{color:#0080FF;}







#main{
width:1200px;
margin:40px auto;}

#left{
float:left;}







.is-on{width: 760px;}


.is-on .hd{border: solid 1px green}

.is-on .hd h2{
    float: left;
    width: 100px;
    height:40px;
    border: solid 1px #8CE8F0;
}

.is-on .hd .right{
    float: right;
    width: 100px;margin-top: 5px;
    border: solid 1px #8CE8F0;
}

.is-on .hd .right span{
    float: left;
    margin-right: 10px;
    font-family:"微软雅黑";
    border: solid 1px #8CE8F0;
}

.is-on .hd .right a{
    float: left;
    width: 18px;
    height: 18px;
    background: url(../images/slide_swithc_2.png) no-repeat;
    margin-right: 10px;
    margin-top:2px;
    border: solid 1px #769CDD;    
}

.is-on .hd .right a.rightBtn{
    background-position: -18px 0;
}

.is-on .bd{
    clear: both;
    border-top: 1px solid #ccc;
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 330px;
    margin-top:30px;
}

.is-on .bd .container{
    position: absolute;
    top: 0;
    left: 0;

    padding-top: 20px;
}

.is-on .bd .container ul{
    width: 4000px;
}

.is-on .bd .container ul li{
    float: left;
    margin-right: 15px;
}

.is-on .bd .container ul li p{
    text-align: center;
    line-height: 20px;
    padding-top: 20px;
    font-family: "微软雅黑", "宋体";
    color:#000000;
}

.is-on .bd .container ul li p a{
    color:#000000;
}

.rating{ width:100px;height:20px;margin:8px auto;text-align:center}

.is-on .bd .container ul li span{
    float: left;
}

.starrating{display:block;width:75px;height:20px;background: url('../images/starrating.gif') top left repeat-x;}

.star40{display:block;background:url('../images/starrating.gif') 0px -26px repeat-x;width:60px;height:20px;}
        .star45{display:block;background:url('../images/starrating.gif') 0px -26px repeat-x;width:67px;height:20px;}
        .star35{display:block;background:url('../images/starrating.gif') 0px -26px repeat-x;width:52px;height:20px;}
        .star30{display:block;background:url('../images/starrating.gif') 0px -26px repeat-x;width:45px;height:20px;}

.is-on .bd .container ul li .score{ margin-left:5px;color:green;font-family:Arial;font-weight:bold;font-size:14px;}

.is-on .bd .container ul li .goupiao{ clear:both;
            display: block;
            width: 120px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            background-color:#6699FF;
            color:white;
            border-radius: 4px;
            margin: 0 auto;
            
        }


.banner{margin-top:50px;}
.banner>a:not(:first-child){display:none;}

.hot-film{margin-top:10px;}
.hot-film-top{
    height:40px;
    line-height:40px;}
.hot-film-top h2{
float:left;}
.hot-film-top ul li{
float:left;
margin-left:20px;
}
.hot-film-top ul li a{cursor:pointer;font-family:"微软雅黑";color:#999999;height:20px;line-height:20px;}
.hot-film-top ul li a.active{color:#000000;}
.hot-film-top ul li a:not(.active):hover{
background:#6699FF;
color:#FFFFFF;
}


.hot-film-main{
clear:both;
width:760px;
border-top:1px solid #CCCCCC;
}

.hot-film-list,.new-film-list{
    padding-top: 20px;
}

.hot-film-list ul li:not(:last-child),.new-film-list ul li:not(:last-child){
            float: left;
            margin-right: 15px;
}

.hot-film-list ul li p,.new-film-list ul li p{
            text-align: center;
            line-height: 20px;
            padding-top: 20px;
            font-family: "微软雅黑", "宋体";
}

.hot-film-list ul li p a,.new-film-list ul li p a{
            color:#000000;
}
.hot-film-list ul li p span,.new-film-list ul li p span{ margin-left:5px;color:green;font-family:Arial;font-weight:bold;font-size:14px;}


#aside{
float:right;
width:360px;
margin-left:80px;}

#aside .billboard .billboard-title{
height:50px;
line-height:50px;
border-bottom:1px solid #CCCCCC;}

#aside .billboard .billboard-content{
margin-top:3px;}

#aside .billboard .billboard-content ul li{
height:40px;
line-height:40px;
border-bottom:1px solid #CCCCCC;
font-family:"微软雅黑";
padding-left:10px;
}

#aside .billboard .billboard-content ul li .order{
font-size:10px;
margin-right:10px;}

#aside .billboard .billboard-content ul li .title a{color:#0080FF}


#aside .contact{margin-top:50px;}

#aside .contact .contact-title{
height:50px;
line-height:50px;
border-bottom:1px solid #CCCCCC;}

#aside .contact .contact-content{margin-top:20px;}

#aside .contact .contact-content ul li{
height:30px;
line-height:30px;
font-family:"微软雅黑";}


#bottom{
margin:30px auto 0px auto;
width:1200px;
height:40px;
line-height:40px;
border-top:1px solid #CCCCCC;
}

#bottom .copyright{
float:left;
color:#999999;
font-family:"微软雅黑";
font-size:14px;}

#bottom .about{float:right;}

#bottom .about ul li{
float:left;
margin-left:20px;
font-size:14px;
color:#0080FF;
font-family:"微软雅黑";
}


3. jquery代码：

<script type="text/javascript">    
    
$(document).ready(function() {    
    var screenAmount = $(".container ul li").length / 5;//计算正在热映数量
    $(".container ul li:lt(5)").clone().appendTo(".container ul");//复制前5个元素
    
    
    
    
    
    
    
    
    
    
    
    
});    
    
</script>


4.Tips

   2026.7.17 先把静态页和css做出来，jQuery再一点点往上写。










 三、项目地址

    https://www.xinyizhishu.top/jsC/sc/21/

 
















JS入门到精通 第18章 Javascript的安全

相关内容

更多

游客 回复需填写必要信息
↑