综合应用

2023-07-01

webEnrollment

字数统计: 425 | 阅读时长≈ 2 分钟

对html css js的综合应用

文件

学校官网复刻
- css
  - defaut.css
- images
  - bg-top.png
  - logo.png
- script
  - jax.js
- index.html

代码

html代码

桂林电子科技大学

css代码

/*清屏*/ *{ margin: 0; padding: 0; } body{ background-image: url("../images/bg-top.png"); /* background-size: 100%; */ background-repeat: no-repeat; background-position: center; background-position-y: 0; } #wrapper { width: 1280px; height: 1000px; border: 1px solid red; margin: 0 auto; position: relative; background-image: url("../images/logo.png"); background-size: 32%; background-repeat: no-repeat; /* background-position: 30px 19px; */ z-index: 0; } .f-level>li{ list-style: none; height: 35px; width: 99px; background-color: rgba(255, 255, 255, 0); box-sizing: border-box; float: left; /* display: inline-block; */ position: relative; top: 120px; } .s-level{ list-style: none; height: 35px; width: 240px; float: left; display: none; position: absolute; top: 100%; left: 0; } .s-level>li a { background-color: rgba(9,83,147,0.85); text-align: left; padding-left: 10px; padding-right: 10px; display: block; } .s-level>li a:hover { color: yellow; } .f-level > li:hover > .s-level { display: block; } li a{ text-decoration: none; line-height: 35px; color: white; text-align: center; display: block; } li a:hover { background-color: #1a436f; } .headtool { position: absolute; right: 0px; /* top: 40px; */ width: 360px; height: 100px; border: 1px solid red; z-index: 1; } .big-loopimg { position: absolute; top: 155px; /* left: 0; */ width: 1280px; height: 431px; overflow: hidden; border: 1px solid red; /* position: relative; */ /* margin: auto; */ z-index: -1; } .limg { /* display: block; */ width: 1280px; } .slides { display: block; }

js代码(有误待修正)

showSlides(); var i=0; function showSlides() { var slides = document.getElementsByClassName("slides") while(slides[i+1]!=0) { slides[i+1].style.left=1; slides[i].style.left=slides[i].style.left-0.05; slides[i+1].style.left=slides[i+1].style.left-0.05; } i++; setTimeout(showSlides, 3000); // 切换时间间隔为3秒 }

打赏

版权声明： 本博客所有文章除特别声明外，著作权归作者所有。转载请注明出处！