做一个页面，首先我们要先规划好怎样布局，我做的时候，先用div标签将页面的每个部分做好了布局，之后通过position来设置具体的盒子布局，之后再添加盒子的内容。
话不多说，上源码。
HTML部分
<!DOCTYPE html><html lang="en"><head><link rel="stylesheet" href="main.css" type="text/css"><script type="text/javascript" src="lunbot.js"></script><meta charset="UTF-8"><title>天堂电影院</title></head><body><div class="aaa"><div class="top"><ul><li><a href="#">登录/注册</a></li><li><a href="#">热门推荐</a></li><li><a href="#">电影</a></li>.<li><a href="#">电视剧</a></li><li><a href="#">综艺</a></li><li><a href="#">动漫</a></li><li><input type="text" placeholder="请输入名字进行搜索"/></li><li><input type="submit" value="搜索"></li></ul></div><div class="main"><div class="shouye"><ul class="lunbo" id="banner"></ul></div><div class="movie"><div><span style="font-style: italic;color: darkred;font-weight: bold;font-size: 18px">热门电影</span><a href="#" style="text-decoration: none"><p>更多</p></a></div><table><tr><td><img src="picture/R-C.jpg"><div class="wordStyle"><p>《肖申克的救赎》是由弗兰克·德拉邦特编剧并执导的美国剧情片，由蒂姆·罗宾斯、摩根·弗里曼领衔主演。</p></div></td><td><img src="picture/movie1.jpg"><div class="wordStyle"><p>《肖申克的救赎》是由弗兰克·德拉邦特编剧并执导的美国剧情片，由蒂姆·罗宾斯、摩根·弗里曼领衔主演。</p></div></td><td><img src="picture/R-C.jpg"><div class="wordStyle"><p>《肖申克的救赎》是由弗兰克·德拉邦特编剧并执导的美国剧情片，由蒂姆·罗宾斯、摩根·弗里曼领衔主演。</p></div></td><td><img src="picture/R-C.jpg"><div class="wordStyle"><p>《肖申克的救赎》是由弗兰克·德拉邦特编剧并执导的美国剧情片，由蒂姆·罗宾斯、摩根·弗里曼领衔主演。</p></div></td><td><img src="picture/R-C.jpg"><div class="wordStyle"><p>《肖申克的救赎》是由弗兰克·德拉邦特编剧并执导的美国剧情片，由蒂姆·罗宾斯、摩根·弗里曼领衔主演。</p></div></td><td><img src="picture/R-C.jpg"><div class="wordStyle"><p>《肖申克的救赎》是由弗兰克·德拉邦特编剧并执导的美国剧情片，由蒂姆·罗宾斯、摩根·弗里曼领衔主演。</p></div></td></tr></table></div><div class="dsj"><div><p style="font-style: italic;color: darkred;font-weight: bold;font-size: 18px">热门电视剧</p><a href="#" style="text-decoration: none"><p>更多</p></a></div><ul><li><img src="picture/0723104326705543.jpg"><div class="wordStyle"><p>《肖申克的救赎》是由弗兰克·德拉邦特编剧并执导的美国剧情片，由蒂姆·罗宾斯、摩根·弗里曼领衔主演。</p></div></li><li><img src="picture/0723104326705543.jpg"><div class="wordStyle"><p>《肖申克的救赎》是由弗兰克·德拉邦特编剧并执导的美国剧情片，由蒂姆·罗宾斯、摩根·弗里曼领衔主演。</p></div></li><li><img src="picture/0723104326705543.jpg"><div class="wordStyle"><p>《肖申克的救赎》是由弗兰克·德拉邦特编剧并执导的美国剧情片，由蒂姆·罗宾斯、摩根·弗里曼领衔主演。</p></div></li><li><img src="picture/0723104326705543.jpg"><div class="wordStyle"><p>《肖申克的救赎》是由弗兰克·德拉邦特编剧并执导的美国剧情片，由蒂姆·罗宾斯、摩根·弗里曼领衔主演。</p></div></li><li><img src="picture/e4222e1810e6dc56ba5f4af3120ecfa2.jpg"><div class="wordStyle"><p>《肖申克的救赎》是由弗兰克·德拉邦特编剧并执导的美国剧情片，由蒂姆·罗宾斯、摩根·弗里曼领衔主演。</p></div></li><li><img src="picture/dcdf65b774c31215daf457f4817b77af.jpg"><div class="wordStyle"><p>《肖申克的救赎》是由弗兰克·德拉邦特编剧并执导的美国剧情片，由蒂姆·罗宾斯、摩根·弗里曼领衔主演。</p></div></li></ul></div><div class="dm"><div><p style="font-style: italic;color: darkred;font-weight: bold;font-size: 18px">高分动漫</p><a href="#" style="text-decoration: none"><p>更多</p></a></div><ul><li><img src="picture/dm1.webp"><div class="wordStyle"><p>《肖申克的救赎》是由弗兰克·德拉邦特编剧并执导的美国剧情片，由蒂姆·罗宾斯、摩根·弗里曼领衔主演。</p></div></li><li><img src="picture/dm2.jpg"><div class="wordStyle"><p>《肖申克的救赎》是由弗兰克·德拉邦特编剧并执导的美国剧情片，由蒂姆·罗宾斯、摩根·弗里曼领衔主演。</p></div></li><li><img src="picture/0723104326705543.jpg"><div class="wordStyle"><p>《肖申克的救赎》是由弗兰克·德拉邦特编剧并执导的美国剧情片，由蒂姆·罗宾斯、摩根·弗里曼领衔主演。</p></div></li><li><img src="picture/0723104326705543.jpg"><div class="wordStyle"><p>《肖申克的救赎》是由弗兰克·德拉邦特编剧并执导的美国剧情片，由蒂姆·罗宾斯、摩根·弗里曼领衔主演。</p></div></li><li><img src="picture/e4222e1810e6dc56ba5f4af3120ecfa2.jpg"><div class="wordStyle"><p>《肖申克的救赎》是由弗兰克·德拉邦特编剧并执导的美国剧情片，由蒂姆·罗宾斯、摩根·弗里曼领衔主演。</p></div></li><li><img src="picture/dcdf65b774c31215daf457f4817b77af.jpg"><div class="wordStyle"><p>《肖申克的救赎》是由弗兰克·德拉邦特编剧并执导的美国剧情片，由蒂姆·罗宾斯、摩根·弗里曼领衔主演。</p></div></li></ul></div><div class="phb"><p style="font-weight: bold;font-size: 20px;color: brown;font-style: italic">热门点播排行</p><ol><li><p style="font-weight: bolder;color: firebrick;font-size: 20px">TOP1</p><a href="#" style="text-decoration: none"><strong><i>浴血黑帮</i></strong></a></li><li><p style="font-weight: bolder;color: firebrick;font-size: 20px">TOP2</p><a href="#" style="text-decoration: none"><strong><i>星游记</i></strong></a></li><li><p style="font-weight: bolder;color: firebrick;font-size: 20px">TOP3</p><a href="#" style="text-decoration: none"><strong><em>战士</em></strong></a></li><li><a href="#" style="text-decoration: none"><em><b>阿甘正传</b></em></a></li></ol></div></div><div class="Dbottom">版权所有：.....</div></div></body></html>
CSS部分
*{margin: 0;padding: 0;}.top{/* 设置宽度高度背景颜色 */height: auto; /*高度改为自动高度*/width:100%;margin-left: 0;background:rgb(189, 181, 181);position: fixed; /*固定在顶部*/top: 0;/*离顶部的距离为0*/margin-bottom: 5px;z-index: 10;}.top ul{/* 清除ul标签的默认样式 */width: auto;/*宽度也改为自动*/list-style-type: none;white-space:nowrap;overflow: hidden;margin-left: 5%;/* margin-top: 0;*/padding: 0;}.top li {float:left; /* 使li内容横向浮动，即横向排列 */margin-right:2%; /* 两个li之间的距离*/position: relative;overflow: hidden;}.top li a{/* 设置链接内容显示的格式*/display: block; /* 把链接显示为块元素可使整个链接区域可点击 */color:white;text-align: center;padding: 3px;overflow: hidden;text-decoration: none; /* 去除下划线 */}.top li a:hover{/* 鼠标选中时背景变为黑色 */background-color: palevioletred;}/*.top ul li ul{*//* !* 设置二级菜单 *!*//* margin-left: -0.2px;*//* background:rgb(189, 181, 181);*//* position: relative;*//* display: none; !* 默认隐藏二级菜单的内容 *!*//*}*//*.top ul li ul li{*//* !* 二级菜单li内容的显示 *!*//* float:none;*//* text-align: center;*//*}*//*.top ul li:hover ul {*//* !* 鼠标选中二级菜单内容时 *!*//* display: block;*//*}*/.main{width: 100%;min-height: 2000px;background-color: skyblue;}.Dbottom{width: 100%;height: 40px;background-color: seashell;text-align: center;}.shouye{width: 100%;height: 450px;background-image: url("picture/beij2.jpg");position: relative;z-index: 9;}.movie{width: 78%;height: 280px;}.movie div:first-child {display: flex;align-items: center;justify-content: space-between;/*两端对齐*/border: 1px solid rgb(189, 181, 181);background-color: paleturquoise;}.movie img{height: 240px;}.movie table {width: 100%;border: 1px solid rgb(189, 181, 181);/*边框*/background-color: darkolivegreen;}.movie table tr {display: flex;}.movie table td {width: 20%;display: flex;align-items: center;/*居中*/justify-content: space-around;/*拉手对齐*/position: relative;}.wordStyle {width: 160px;position: absolute;display: none;top: 0px;}.wordStyle p{color: white;font-weight: bold;}.movie img:hover {filter: blur(2px);}.movie img:hover + div {display: block;}.dsj img:hover {filter: blur(2px);}.dsj img:hover + div {display: block;}.dm img:hover {filter: blur(2px);/*虚化*/}.dm img:hover + div {display: block;}.dsj{width: 78%;height: 280px;}.dsj div:first-child/*防止选到文字div*/ {display: flex;align-items: center;justify-content: space-between;border: 1px solid rgb(189, 181, 181);background-color: paleturquoise;}.dsj img{height: 240px;}.dsj ul{display: flex;border: 1px solid rgb(189, 181, 181);background-color: darkolivegreen;}.dsj ul li{width: 20%;display: flex;align-items: center;justify-content: space-around;position: relative;/*让文字用positio定位到这一格*/}.dm{width: 78%;height: 280px;}.dm div:first-child{display: flex;align-items: center;justify-content: space-between;border: 1px solid rgb(189, 181, 181);background-color: paleturquoise;}.dm img{height: 240px;}.dm ul{display: flex;border: 1px solid rgb(189, 181, 181);background-color: darkolivegreen;}.dm ul li{width: 20%;display: flex;align-items: center;justify-content: space-around;position: relative;/*让文字用positio定位到这一格*/}.phb{width: 20%;position: absolute;/*相对于上一个使用position属性的标签根据top,right,left,bottom进行定位，如果没有父类则相对于整个浏览器*/right: 0;top: 450px;}.main li a:hover{background-color: pink;}.lunbo {height: 200px;width: 1000px;padding: 0;position: absolute;/* 水平居中 */left: 50%;margin-left: -500px;/* 垂直居中 */top: 50%;margin-top: -130px;list-style: none;}/* 移入到轮播图区域把鼠标形状变成‘手’ */.lunbo:hover {cursor: pointer;}.lunbo li {position: absolute;left: 0;/* 过渡属性，让轮播图切换更自然 */transition: 0.4s;}
JavaScript部分
window.onload = () => {lunBo();}/*页面加载时要执行的函数*/function lunBo(){//1.获取ulvar cur_ul = document.getElementById('banner')// 2.创建一个数组实例var arr = new Array();// 用js来创建li、img元素，有多少张图片要轮播就循环多少次for (i = 1; i <= 3; i++) {// 创建li元素var cur_li = document.createElement('li')// 创建img元素var cur_img = document.createElement('img')// 给img元素设置src、width、height属性// 这里src是轮播图的路径// 在img文件夹下的图片命名为1.jpg、2.jpg、3.jpg....才可以这样写cur_img.src = 'picture/' + i + '.jpg';cur_img.style.width = '600px';cur_img.style.height = '280px';// 把img元素插入到创建的li里面cur_li.appendChild(cur_img);// 然后在把li插入到ul里面cur_ul.appendChild(cur_li);// 然后给ul元素设置事件，鼠标移进来停止轮播cur_ul.onmouseenter = function () {// 停止setInterval执行的代码clearInterval(timer)}// 鼠标移出ul又继续轮播图片cur_ul.onmouseleave = function () {// 指定时间执行代码timer = setInterval(get_next, 2000)}// 当创建完一个li（li里已经有img元素）就把li添加到arr数组里// arr里存的li 相当于一个对象，在其他地方在把arr里的li取出来，还是指向原来那个，并不是一个新的li// 相当于对象的浅拷贝，指针指向问题arr.push(cur_li)}// 因为所写的轮播图是中间图片放大大，左右两边图片正常，所以要进行下面的操作// 如果你只需要那种一张张图片轮播，即没有左右两边的轮播图，可以去掉下面代码// 我们要三张图片进行展示， 左 中 右var len = arr.length - 1;imgLocation();// 封装轮播图函数// 然后开始进行轮播，原理就是换arr里的li元素的位置，越靠后的li元素z-index越大// z-index越大，就会叠在其他li元素上面，所以换arr里的li位置就可以实现轮播function get_next() {var give_up = arr[arr.length - 1];//获取arr数值里最后一个li元素arr.pop();//删除掉最后一个li元素arr.unshift(give_up);//最后把最后一个元素插入到arr数组的前面// 然后重新给arr数组里的li元素设置z-index和scalefor (var i = 0; i < arr.length; i++) {arr[i].style.zIndex = 1;arr[i].style.transform = 'scale(1)';}// 这步就是展示arr的后两张图片，和前一个步骤的一样imgLocation();}// 用js创建左箭头var pre_img = document.createElement('img');pre_img.src = 'picture/左箭头.jpg';//左箭头图片pre_img.style.position = 'absolute';pre_img.style.top = "30px";pre_img.style.left = "-400px";pre_img.style.margin = "0";pre_img.style.zIndex = "100";cur_ul.appendChild(pre_img);// 用js创建右箭头var next_img = document.createElement('img')next_img.src = 'picture/右箭头.jpg';//右箭头的图片next_img.style.position = 'absolute';next_img.style.top = "30px";next_img.style.right = "-400px";next_img.style.margin = "0";next_img.style.zIndex = "100";cur_ul.appendChild(next_img);// 给左箭头点击绑定事件pre_img.onclick = function () {get_pre();}// 右箭头的作用就是向前轮播一直图片，和我们上面写的get_next()方法要实现的功能一样，直接引用next_img.onclick = function () {get_next();}// 左箭头的绑定事件 和get_next()思路一样，就是要改一下就行。// 先取出arr数组第一个li，在把这个li放到最后即可function get_pre() {var give_up = arr[0];arr.shift();//取出来最后一张图片arr.push(give_up);//把最后一张图片放到第一张for (var i = 0; i < arr.length; i++) {arr[i].style.zIndex = 1;arr[i].style.transform = 'scale(1)'}imgLocation();}function imgLocation() {// 这是取得左边图片并调整位置arr[len - 2].style.left = '-200px';// 这是取得中间图片并调整位置arr[len - 1].style.left = '200px';// 这是取得右边图片并调整位置arr[len].style.left = '600px';// 然后中间图片调用scale使其变大arr[len - 1].style.transform = 'scale(1.3)';// 使中间图片覆盖两边图片arr[len - 1].style.zIndex = "2";}}
总结
以上就是我的网页代码，第一次写，可能界面不怎么样，有些地方也是学习别人的，需要可以拿去用。
