前言：各位csdn的源员们，大家好。我是小刘，初来乍到请大家多多指教，这是第14次发表博客，如有错误请大家观看后谅解，并在评论区留下您宝贵的意见，小刘将会用最大的努力去改正以及认真对待每一次代码的编写，请大家一定要多多包涵，你们的支持是我继续努力的最大动力，当然大家觉得不错可以关注我喔，带你走遍代码的每一个角落，让你感受代码的神奇之处。
首先我向大家透露一点点小方法，一定要认真观看喔！
本次用到的编程软件：DW
本次涉及到的内容：html,css以及javaScript
第一步:编写代码
1.首先写源代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>电影排行榜</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<h2 class="title">电影排行榜</h2>
<ul id="list">
</ul>
</div>
<script src="js/script.js"></script>
</body>
</html>
这些都是html的代码，起着不可或缺的作用。看起来是非常的简单，但是呢却不是那么的简单，因为他的作用是非常的大呢，如果缺少的话，整个项目将会崩溃，无法运行，在浏览器中也会显示空白的出现，这就是html的作用之处，代码的神奇无法想象呢，开局简单 首先前面就是开头的部分，然后在body里面就给它设置了页面布局的开头部分
*{
margin:0;
padding: 0;
}这个* 代表这所有的布局样式，只要自己没设置的全部自动设置为这个样式
.container{
width:600px;
margin: 30px auto 0;
border:1px solid #ccc;
}
.title{
padding:10px;
color: #F8BFBF;
}这些css布局，主要给这个网页设置高度，宽度和边框，后面的那个title主要给标题设置内边距和颜色样式。
ul>li {
list-style: none;
padding: 5px 10px;
border: 1px dashed #ccc;
font-size: 18px;
overflow: hidden;
}
ul li>span{
font-size: 24px;
font-style: italic;
margin-right: 10px;
}现在此时此刻代码就用到了选择器了 ，它所用到的应该就是直接子选择器了吧，他的属性就是选择下一个子元素，进行设置css的样式
.red{
color:#E62326;
}
.content{
padding-top: 10px;
/* display: none;*/
}
.content div{
width:40%;
height:140px;
float: left;
}
.content img{
width:100%;
height: 100%;
}
.content p{
width:56%;
font-size: 12px;
padding: 4px 10px;
float: left;
}这些就是一些样式的基本设置了，给一些代码设置基本的样式，来起到把网页更加完美好看的布局，使人在视觉上和感官上非常的完美，这样就起到了css布局页面设置的作用了。
var movieList=[
{
number:1,
movieName:"狙击手",
imgsrc:"images/m1.jpg",
introduce:"地处东非资源富饶的萨基亚，是21世纪初非洲大陆屈指可数的增长经济体。因为政治利益，3年前的总统大选结果遭到军方否认，国家陷入了战争的深渊。 萨基亚被由总统的秩序军和军阀的自由军一分为二。常年的战争使得人民的生活陷入水深火热之中，滥用的生化武器让原本肥沃的土地变得贫瘠。 战争也带来了外国军队、恐怖分子、军火公司、私人武装……这里变成了角逐利益与生死的竞技场。"
},
{
number:2,
movieName:"叶问4：完结篇",
imgsrc:"images/m2.jpg",
introduce:"因故来到美国唐人街的叶问，意外卷入一场当地军方势力与华人武馆的纠纷，面对日益猖狂的民族歧视与压迫，叶问挺身而出，在美国海军陆战队军营拼死一战，以正宗咏春，向世界证明了中国功夫。"
},
{
number:3,
movieName:"肥龙过江",
imgsrc:"images/m3.jpg",
introduce:"港警察朱福龙(甄子丹 饰)因一次工作失误惨被降级，万般无奈之际又遭未婚妻可儿(周励淇 饰)悔婚，事业爱情的双重打击令他一蹶不振，暴饮暴食六个月后体重猛增到200斤!上司黄警官不忍其继续堕落，委派朱福龙前往日本押送一名犯人，并承诺只要完成任务就可以为他恢复职位。可惜来到日本，倒霉的事件便接连在他身上发生，不仅财物尽失，连犯人也在押送途中逃脱了。幸好得到前香港警察潇洒哥(王晶 饰)的帮助才得以暂时解困，为了完成任务找回犯人，朱福龙与潇洒哥共同行动，不料在查找真相的过程中发现了日本黑帮的惊天阴谋......"
},
{
number:4,
movieName:"哪吒之魔童降世",
imgsrc:"images/m4.jpg",
introduce:"天地灵气孕育出一颗能量巨大的混元珠，元始天尊将混元珠提炼成灵珠和魔丸，灵珠投胎为人，助周伐纣时可堪大用；而魔丸则会诞出魔王，为祸人间。元始天尊启动了天劫咒语，3年后天雷将会降临，摧毁魔丸。太乙受命将灵珠托生于陈塘关李靖家的儿子哪吒身上。然而阴差阳错，灵珠和魔丸竟然被掉包。本应是灵珠英雄的哪吒却成了混世大魔王。调皮捣蛋顽劣不堪的哪吒却徒有一颗做英雄的心。然而面对众人对魔丸的误解和即将来临的天雷的降临，哪吒是否命中注定会立地成魔？他将何去何从？"
},
{
number:5,
movieName:"汉时关",
imgsrc:"images/m5.jpg",
introduce:"东汉末年，忠良之后刘契为避乱世，在大漠之中守护着一座破败的关隘——汉时关，并且宣称汉时关是一个乱世之中的“避难所”，凡是进来的人，都能保证他的安全。各种势力聚集于此达到了一种奇异的平衡。 直到某天为求援军的汉军将领耿忠的到来，打破了这个江湖规矩，从此刘契被一系列事件推着做出关于死亡，亲情，友情，爱情，家国等一系列抉择。当刘契最后披上父亲传承给他的甲胄，带着极少的人和大胡军队奋勇拼杀的时候，完成了侠之大者为国为民的灵魂觉醒！"
},
{
number:6,
movieName:"捉仙记",
imgsrc:"images/m6.jpg",
introduce:"天意是天界出了名的留级生，因为前世孽缘未了始终无法成仙，只能在仙书阁做一名小仙童，一次无意释放了被囚的雪妖，天意下凡捉妖失去法力，以凡人身份与雪妖周旋，无意却产生了感情。天意得知自己前世犯错导致了雪女成妖，自愿在黄泉路上徘徊千年，最终雪妖为救回天意牺牲了自己。"
},
{
number:7,
movieName:"大漠江湖",
imgsrc:"images/m7.jpg",
introduce:"心怀江湖梦的小铁匠吕三思偶遇自己崇拜的大侠百里无忧，替大侠押送西厂女鹰犬何青缨，可何青缨却说出另一个版本，她其实是受西厂迫害的义士，那百里无忧才是出卖义士的走狗！疑点越来越多，孰是孰非需要吕三思做出判断。女鹰犬可能不是鹰犬，而大侠可能也不是大侠，忠奸难辨，从未涉足江湖的吕三思发现，这个江湖与自己想象的全然不同。"
}
];这些原本可以在html源代码中可以实现的布局，为什么非要要在js中编写呢？？很多人就会问，这是为什么啊，在html中编写不是更加的方便嘛，这样多麻烦啊，其实你们要想到在js编码中，布局会使得布局更加的完美，因为在js中有些动态的编码，会使得代码更加灵活的运用，这些代码就是页面的内容部分，只是把源代码中的代码窃过来了而已。其中代码中设置页面的页数，名称，还有图片的路径，以及通过电影名称的来介绍电影的具体内容。
window.onload=function(){
creatLi();
var lis=document.getElementById("list").getElementsByTagName("li");
// console.log(typeof lis);
// console.log(lis);
for(var i=0;i<lis.length;i++){
lis[i].onmouseover=function(){
// console.log(this);
this.querySelector(".content").style.display="block";
};
lis[i].onmouseout=function(){
this.querySelector(".content").style.display="none";
}
}
}
//console.log(movieList);
function creatLi(){
var li=null;
var list=document.getElementById("list");
console.log(typeof movieList);
for(var i in movieList){
li=document.createElement("li");
li.innerHTML='<span class="red">'+movieList[i].number+'</span>'+movieList[i].movieName+'<div class="content"><div><img src="'+movieList[i].imgsrc+'" alt=""></div><p>简介：'+movieList[i].introduce+'</p></div>';
list.appendChild(li);
}
li=null;
//for in...
}
这些代码主要的作用，就是给它设置动态的一种效果，js的代码简介不用多说吧，主要作用就是点击这个标题会显示一些内容部分。
这些就是代码所表现的视图效果，当鼠标触碰到了网页标题时，他会出来的就是内容部分
3308
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
