HTML动漫壁纸静态网页
今天给大家分享一个我在实训中自己做的一个动漫壁纸的静态网页的代码
软件：HBuilderX
不多说了，直接放代码
HTML部分
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>次元WallPaper</title><link rel="stylesheet" type="text/css" href="css/menu.css" /><link rel="stylesheet" type="text/css" href="css/main.css" /><link rel="stylesheet" type="text/css" href="css/sousuo.css" /><link rel="stylesheet" type="text/css" href="css/lunbo-2.css" /></head><body><div id="container"><div id="Header"><!--页面头部--><div id="tit"><a href="index.html"><font color="#FFFFFF"><h1>次元WallPaper</h1></font></a></div><div id="dh"><ul><li><a href="index.html">首页</a></li><li><a href="4kbz.html">4K壁纸</a><!-- <ul><!-- <li><a href="4kfj.html">风景</a></li>//二级菜单<li><a href="4kdm.html">动漫</a></li><li><a href="4kyx.html">游戏</a></li></ul> --></li><li><a href="dtbz.html">动态壁纸</a><!-- <ul><li><a href="dtfj.html">风景</a></li><li><a href="dtdm.html">动漫</a></li><li><a href="dtyx.html">游戏</a></li></ul> --></li><li><a href="guwm.html">关于我们</a><!-- <ul><li><a href="zzwm.html">赞助我们</a></li><li><a href="lxfs.html">联系方式</a></li></ul> --></li></ul></div><div class="search"><input type="text" placeholder="请输入..." name="" id="" value="" /><button><i>搜索</i></button></div><div id="an"><a href="du.html"><button class="be">登录</button></a></div> </div><div id="cit"><div id="banner"><div id="content"><ul id="ul"><li><a href="###"><img src="img/m1.jpg" /></a> </li><li><a href="###"><img src="img/s2.png" /></a> </li><li><a href="###"><img src="img/3.jpg" /></a> </li><li><a href="###"><img src="img/2.jpg" /></a> </li><li><a href="###"><img src="img/6.jpg" /></a> </li><li><a href="###"><img src="img/m3.jpg" /></a> </li><li><a href="###"><img src="img/1.jpg" /></a> </li><li><a href="###"><img src="img/m2.jpg" /></a> </li><li><a href="###"><img src="img/s1.jpg" /></a> </li><li><a href="###"><img src="img/s3.jpg" /></a> </li></ul><div class="dot" id="dot"><ul id="dotul"><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul></div></div><div id="btn"><div id="left" class="b"><img src="img/left.png"/></div><div id="right" class="b"><img src="img/right.png"/></div></div></div></div> <div id="bt"><i style="color:white; size:宋体;font-size: 80px;">140000+</i><h1 style="color: white; font-size: 40px;">超清无水印动静态壁纸</h1></div><div id="PageBody"><!--页面主体--><div id="im"><img src="img/t1.png" /></div><div id="im"><img src="img/t2.png" /></div><div id="im"><img src="img/t3.png" /></div><div id="im"><img src="img/t4.jpg" /></div><div id="im"><img src="img/t5.jpg" /></div><div id="im"><img src="img/t6.jpg" /></div><div id="im"><img src="img/t7.jpg" /></div><div id="im"><img src="img/t8.png" /></div><div id="im"><img src="img/t9.png" /></div></div><div id="xr"><h2 style="color: white;">特效渲染引擎，释放无限创意</h2><h3 style="color: white;">内置游戏渲染引擎，真实还原雨雪光特效和各种粒子效果，让动态壁纸效果栩栩如真</h3><h3 style="color: white;">每张壁纸内置专属背景音和鼠标效果，为你打造桌面壁纸的绝美盛宴</h3><video id="v1" autoplay loop muted controls><source src="vb2-1.mp4" type="video/mp4"></video><video id="v1" autoplay loop muted controls><source src="vb2-2.mp4" type="video/mp4"></video></div><div id="Footer"><!--页面底部--><div id="bit"><p style="color: #FFFFFF;">4K 4K壁纸 高清壁纸 电脑壁纸 www.cywallpaper.com-次元WallPaper</p></div></div></div><script src="js/lunbo.js"></script></body>
</html>CSS部分
/*基本信息*//* body {font:12px Tahoma;margin:0px;text-align:center;background:#FFF;} *//*页面层容器*/#container {width:100%;height: 100%;background-position: center center;background-repeat: no-repeat;background-attachment: fixed;background-size: cover;background-image: url(../img/5.jpg); } /*页面头部*/#Header {width:100%;margin:0 auto;height:100px;/* background:black; */line-height:100px;top:0 ;left: 0;position: fixed;z-index:1001;background: rgba(255,255,255,0.6);}/*页面主体*/#PageBody {width:1300px;margin:0 auto;height:820px;/* background:#FFFFFF; */background: rgba(0,0,0,0);margin-top: 80px;margin-left: 156px;margin-bottom: 100px;/* background: rgba(0,0,0,0.3); */}#xr{width:1300px;margin:0 auto;height:500px;/* background:#FFFFFF; */background: rgba(0,0,0,0);margin-top: 20px;margin-left: 156px;margin-bottom: 100px;text-align: center;/* background: rgba(0,0,0,0.3); */ }/*页面底部*/#Footer {width:100%;margin:0 auto;height:50px;background:black;line-height: 100%;}#im img{/* transform: scale(0.2); */display: block;width: 100%;height: 100%;margin: 0 auto;/* background: rgba(0,0,0,0); */}#im {/* float: left; */float: left; width: 378px;height: 250px;margin: 10px;/* background: #FFFFFF; */border: 5px solid #FFFFFF;display: block;z-index: 1;position: relative;text-align: center;}#im:hover{border: #FF6700 solid 5px;z-index: 2;}#mit{width:1200px;margin:10px auto;height:500px;background:black;background: rgba(0,0,0,0.3); text-align: center;line-height: 50%;} #tit {width:300px;margin:0 auto;height: 100px;/* background:black; */line-height:100px;float: left;margin-left: 160px;background: rgba(0,0,0,0);}#bit{width:800px;margin:0 auto;height: 50px;background:black; line-height:50px;float: left;margin-left: 160px;/* background: rgba(0,0,0,0); */}#an{width: 80px;height: 80px;margin: 0 auto;display: table-cell;float: left;margin-left: 150px;background: rgba(0,0,0,0);}#cit{background-position: center center;background-repeat: no-repeat;/* background-attachment: fixed; */background-size:cover;background-image: url(../img/jin.png);width:100%;margin:10px auto;height:450px;/* background:black;background: rgba(0,0,0,0.3); */ text-align: center;line-height: 50%;margin-top: 145px;}#lit img{width: 880px;height: 500px;margin: 40px auto;background: rgba(0,0,0,0);display: table-cell;}#kit img{width: 360px;height: 500px;margin: 40px auto;background: rgba(0,0,0,0);display: table-cell;}#gq{}.be {width: 50px;height: 50px;border-radius:50%;border: none;color: #778899; }.be:focus {background-color: white;}.be:active {background-color: #6699FF;}#tit a{text-decoration: none;}#v1{width: 500px;height: 281px;margin-right: 100px;margin-top: 100px;}#bt{width: 1000px;height: 150px;text-align: center;background: #000000;background: rgba(0,0,0,0);margin-left: 250px;}#bt1{width: 1000px;height: 150px;text-align: center;background: #000000;background: rgba(0,0,0,0);margin-left: 250px;margin-top: 150px;}span{color:red;}#dl{width: 500px;height: 500px;background: white;background: rgba(255,255,255,0.3);text-align: center;margin-top: 150px;}#dljm{width: 1000px;height: 800px;background: white;background: rgba(255,255,255,0);}#guw{width: 1000px;height: 1000px;background: white;background: rgba(255,255,255,0.3);margin-top: 100px;margin-left: 250px;text-align: center;}#guw img{width: 800px;height: 450px;}菜单导航CSS（内含二级菜单，我在HTML部分里注释了）
*{margin:0px; padding: 0px; }#dh{position: relative;margin-top: 0px;width: 400px;height:100px;border: 0px;/* background-color: black; */float: left;background: rgba(0,0,0,0);}#dh ul{padding: 0px;}#dh a{color: #FFF;width: 100px;height: 100px;display: block;text-decoration: none;text-align: center;/* line-height: 40px; */font-family: Microsoft Yahei;font-weight: 2px;line-height:100px;}#dh {margin:0px auto; }#dh ul li {list-style: none;float: left;}#dh ul li a:hover{background-color: #6699FF;}#dh ul:hover{display: block;}#dh ul li ul{background-color: #0099CC;position: absolute;display: none;}#dh ul li ul li{float: none;background-color: #6688EE;}#dh ul li ul li a{font-size: 13px;font-weight: 0px;}#dh ul li:hover ul{ /*二级菜单的触发点*/display: block;}
轮播图CSS
#banner{width: 705px;height: 407px;margin: auto;}#content{width: 705px; height: 407px; overflow: hidden; position: relative;}#ul{height: 407px;position: absolute;left: 0;top: 23px;}#ul li{list-style: none;width: 705px;height: 407px;float: left;}#ul img{width: 705px;height: 407px;margin-left: 3px;}.b{width: 50px;height: 50px;position: absolute;cursor: pointer;}.b img{width: 100%;height: 100%;}#left{top: 300px;left: 200px;}#right{top: 300px;right: 200px;}#dotul{width: 500px;position: relative;left: 280px;top: 450px;}#dotul li{list-style: none;float: left;width: 10px;height: 10px;border-radius: 20px;background-color: white;margin-left: 20px;cursor: pointer;}.active_1{background-color: #00FFFF !important;}
轮播图JS部分
//定义所有需要用到的数据var animationSpeed = 1;//一次切换的图片数（就是下一张图片的间隔）var minSpeed = 5;//就是每次left增加或减少的数var stopTime = 2000;//要隔多少秒开始切换下一张图片//页面元素var prev = document.getElementById("left");var next = document.getElementById("right");var banner = document.getElementById("banner");var content = document.getElementById("content");var imgul = document.getElementById("ul");var imgli = document.getElementById("ul").getElementsByTagName("li");var liwidth = document.getElementById("ul").getElementsByTagName("li")[0].offsetWidth;var dot = document.getElementById("dot");var dotul = document.getElementById("dotul");var dotli = document.getElementById("dotul").getElementsByTagName('li');var length = document.getElementById("dotul").getElementsByTagName('li').length;var type = true;//是否可以渲染var nextTimer = null;var prevTimer = null;var mainTimer = null;imgul.style.width = liwidth*length+"px";//将ul的宽度设置为所有照片宽度的总和//给每一个dotli添加一个index属性，方便改变小圆点的背景颜色for (var i = 0;i<length;i++){imgli[i].index = i;dotli[i].index = i;}//给第一个小圆点加上背景changeColor(imgli[0]);next.onclick = function (ev) {if (type){liwidth = 0;clearInterval(nextTimer);//先把上一次留下来的定时器清除（确保清除干净—）nextTimer = setInterval(nextImg,animationSpeed);type = false;changeColor(imgli[1]);//改变原点颜色}};function nextImg() {imgul.style.left = "-"+liwidth+"px";liwidth += minSpeed;if (liwidth >= imgli[0].offsetWidth){clearInterval(nextTimer);imgul.appendChild(imgli[0]);//先删除imgli[0],然后加到末尾来，这样实现了循环imgul.style.left = 0;type = true;}}prev.onclick = function (ev) {if (type){//如果可以渲染imgul.insertBefore(imgli[length-1],imgli[0]);//因为当前图片的位置一直都是imgli[0]，所以按照循环的思想，上一张就是imli[length-1]clearInterval(prevTimer);liwidth = imgli[0].offsetWidth;prevTimer = setInterval(prevImg,animationSpeed);type = false;//因为设置了定时器，定时器在渲染，所以这时不能被渲染changeColor(imgli[1]);//改变原点颜色}};function prevImg() {imgul.style.left = "-"+liwidth+"px";liwidth -= minSpeed;if (liwidth <=-1){clearInterval(prevTimer);imgul.style.left = 0;type = true;//定时器已经完成渲染了，所以此时可以渲染}} mainTimer = setInterval(next.onclick,2000);function changeColor(target) {for (var j = 0;j<length;j++){dotli[j].className = "";}dotli[target.index].className = "active_1";}//为每个小圆点添加点击事件dot.onclick = function(ev){var ev = ev || window.event;var target = ev.target || ev.srcElement;if(target.nodeName.toLowerCase() == "li"){if(type){showImg(target.index);changeColor(target);type = true;}}};//根据参数显示对应的图片。function showImg(inde){var this_li = imgli[0].index;//把第一个元素放到最后面。if(inde>this_li){var x = inde-this_li;for(var y = 0;y<x;y++){imgul.appendChild(imgli[0]);}}//把最后一个元素放到第一的位置if(inde<this_li){var x_x = this_li-inde;for(var g = 0;g<x_x;g++){imgul.insertBefore(imgli[length-1],imgli[0]);}}}//当鼠标移入图片区域时，清除定时器。鼠标移出时恢复定时器content.onmouseover = function (ev) {clearInterval(mainTimer);};content.onmouseout = function (ev) {mainTimer = setInterval(next.onclick,stopTime);};
由于代码太多，只能把主页部分展示出来
呈现效果如下
转载请注明转自处，谢谢！