原创一分钟教会你制作字节跳动官网
一分钟教会你
2025-11-17 12:17
发布于：成都
HTML部分
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<div class="header-wrapper">
<a href="" class="logo"><img src="images/logo.png" alt=""></a>
<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>
</ul>
</div>
</header>
<div class="slide">
<div id="mission">
<p class="mission">使命</p>
<p class="desc">激发创造<br>丰富生活</p>
</div>
<ul>
<li><a href="#"><img src="images/slide1.png" alt=""></a></li>
<li><a href="#"><img src="images/slide2.png" alt=""></a></li>
<li><a href="#"><img src="images/slide3.png" alt=""></a></li>
<li><a href="#"><img src="images/slide4.png" alt=""></a></li>
</ul>
<div class="indicators" id="indicators"></div>
</div>
<section class="culture">
<div class="left">
<p class="title">企业文化</p>
<p class="desc">字节范是字节跳动企业文化的重要组成部分，是我们共同认可的行为准则。</p>
</div>
<div class="right">
<img src="images/culture.jpg" alt="">
</div>
</section>
<section class="criterion culture">
<div class="left">
<p class="title">行为准则</p>
<p class="desc">字节跳动相信，在企业发展过程中，高道德标准和诚信文化发挥着关键作用。因此，我们制定了字节跳动行为准则和字节跳动合作伙伴行为准则。</p>
</div>
<div class="right">
<img src="images/criterion.png" alt="">
</div>
</section>
<footer>
<div class="footer-wrapper">
<a href="" class="logo"><img src="images/logo.png" alt=""></a>
<ul>
<li>
<p class="title"><a href="">关于我们</a></p>
<p><a href="">企业文化</a></p>
<p><a href="">行为准则</a></p>
<p><a href="">大事记</a></p>
<p><a href="">我们的产品</a></p>
<p><a href="">联系我们</a></p>
</li>
<li>
<p class="title"><a href="">新闻动态</a></p>
<p><a href="">公司新闻</a></p>
<p><a href="">数据报告</a></p>
</li>
<li>
<p class="title"><a href="">企业社会责任</a></p>
<p><a href="">社会责任动态</a></p>
<p><a href="">字节跳动公益官网</a></p>
</li>
<li>
<p class="title"><a href="">加入我们</a></p>
<p><a href="">招聘官网</a></p>
</li>
</ul>
</div>
</footer>
<script src="js/index.js"></script>
</body>
</html>
CSS部分
@charset "utf-8";*{margin:0;padding:0;box-sizing:border-box}
body{font-size:16px}
ul{list-style:none}
a{color:#333;text-decoration:none}
header{width:100%;height:100px;background-color:#3c8cff}
header .header-wrapper{width:1400px;margin:0 auto}
header .header-wrapper .logo{display:block;padding-top:25px;float:left}
header .header-wrapper .logo img{height:50px}
header .header-wrapper ul{float:right}
header .header-wrapper ul li{padding:0 30px;line-height:100px;float:left}
header .header-wrapper ul li a{color:#fff}
header .header-wrapper ul li a:hover{color:#78e6dc}
.slide{width:100%;overflow:hidden;position:relative;height:800px}
.slide ul{display:flex;margin:0;padding:0;list-style:none;transition:transform .5s ease-in-out}
.slide li{flex:0 0 100%;height:800px}
.slide img{width:100%;height:auto;display:block}
.slide .indicators{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);display:flex;gap:8px}
.slide .indicator{width:24px;height:24px;border-radius:50%;background:rgba(255,255,255,.5);cursor:pointer;transition:background .3s}
.slide .indicator.active{background:#fff}
.slide #mission{position:absolute;top:0;left:8vw;width:380px;height:329px;padding:81px 42px 0 39px;background-color:#fff;border-radius:0 0 135px;z-index:1}
.slide #mission>.mission{font-weight:500;font-size:26px;line-height:31px;color:#828282}
.slide #mission>.desc{margin-top:22px;font-weight:500;font-size:52px;line-height:1.25;text-align:left}
.culture{width:1400px;margin:200px auto;overflow:hidden}
.culture .left{float:left;width:30%}
.culture .left .title{font-size:48px;line-height:56px;font-weight:700;margin-top:30px}
.culture .left .desc{font-size:22px;margin-top:100px;line-height:40px}
.culture .right{float:right;width:60%}
.culture .right img{width:100%;border-radius:10px;height:27vw}
.criterion .left{float:right}
.criterion .right{float:left}
footer{height:300px;background-color:#3c8cff;padding-top:30px}
footer .footer-wrapper{width:1200px;margin:30px auto auto}
footer .logo{height:43px;float:left}
footer .logo img{height:100%}
footer ul{float:right}
footer ul li{float:left;margin-left:60px}
footer ul li p{font-size:16px;line-height:28px}
footer ul li p.title{margin-bottom:16px;font-size:18px}
footer ul li p a{color:#fff}
JS部分
class Carousel {
constructor() {
this.currentIndex = 0;
this.slides = document.querySelectorAll('.slide li');
this.totalSlides = this.slides.length;
this.slideContainer = document.querySelector('.slide ul');
this.indicatorsContainer = document.getElementById('indicators');
this.initIndicators();
this.startAutoPlay();
this.addEventListeners();
}
initIndicators() {
for (let i = 0; i < this.totalSlides; i++) {
const indicator = document.createElement('div');
indicator.classList.add('indicator');
if (i === 0) indicator.classList.add('active');
indicator.addEventListener('click', () => this.goToSlide(i));
this.indicatorsContainer.appendChild(indicator);
}
}
updateIndicators() {
const indicators = document.querySelectorAll('.indicator');
indicators.forEach((indicator, index) => {
indicator.classList.toggle('active', index === this.currentIndex);
});
}
goToSlide(index) {
this.currentIndex = index;
this.slideContainer.style.transform = `translateX(-${this.currentIndex * 100}%)`;
this.updateIndicators();
}
nextSlide() {
this.currentIndex = (this.currentIndex + 1) % this.totalSlides;
this.goToSlide(this.currentIndex);
}
prevSlide() {
this.currentIndex = (this.currentIndex - 1 + this.totalSlides) % this.totalSlides;
this.goToSlide(this.currentIndex);
}
startAutoPlay() {
this.autoPlayInterval = setInterval(() => {
this.nextSlide();
}, 3000);
}
addEventListeners() {
// 鼠标悬停时暂停自动播放
const slideContainer = document.querySelector('.slide');
slideContainer.addEventListener('mouseenter', () => {
clearInterval(this.autoPlayInterval);
});
slideContainer.addEventListener('mouseleave', () => {
this.startAutoPlay();
});
}
}
// 初始化轮播图
document.addEventListener('DOMContentLoaded', () => {
new Carousel();
});
阅读 (70)