【考证代码】主页 index.html
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>江西科睿新材料有限公司</title>
<meta name="viewport" content="width=1200">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="header">
<div>
<div class="logo">
<img src="img/logo_cn.png" alt="江西科睿新材料有限公司logo">
</div>
<div style="display:flex;flex-direction:column;align-items:flex-end;gap:8px;padding-right:40px;">
<div class="topbar-links">
<span>中文 | <a href="#" style="color:#0066b3;text-decoration:underline;">English</a></span>
<a href="#">加入收藏</a>
<a href="#">设为首页</a>
</div>
<div class="search-bar">
<input type="text" placeholder="Google站内搜索..." />
</div>
</div>
</div>
</div>
<nav class="nav">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">公司简介</a></li>
<li><a href="#">产品展示</a></li>
<li><a href="index2.html">企业展示</a></li>
<li><a href="#">新闻中心</a></li>
<li><a href="#">科睿文摘</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</nav>
<div class="main-banner" id="carousel">
<img src="img/slide_cn_1.jpg" class="carousel-img active" alt="科睿新材料-全心呵护健康成长" />
<img src="img/slide_cn_2.jpg" class="carousel-img" alt="产品生产基地" />
<img src="img/slide_cn_3.jpg" class="carousel-img" alt="研发团队" />
<div class="carousel-dots">
<span class="carousel-dot active"></span>
<span class="carousel-dot"></span>
<span class="carousel-dot"></span>
</div>
</div>
<div class="container">
<!-- 新闻中心：标题在左侧，内容在右侧，无间隔且文字居中 -->
<div class="full-width">
<!-- 左侧标题区域 -->
<div class="news-title-column">
<div class="vertical-title">
新闻中心
</div>
</div>
<!-- 右侧内容区域 -->
<div class="news-content-column module">
<div class="module-content">
<ul class="news-list">
<li>
<span>[2014-3-6]</span>
江西科睿新材料有限公司网站正式上线：通过不懈努力，公司官方网站已完成建设并正式上线
</li>
</ul>
</div>
</div>
</div>
<!-- 三栏布局：公司简介、产品推荐、联系我们 -->
<div class="three-columns">
<!-- 公司简介 -->
<div class="module">
<div class="module-title">
<span>公司简介</span>
<a href="#" class="more-link">More></a>
</div>
<div class="module-content">
<img src="img/about.jpg" alt="公司厂区" style="width:100%;border-radius:4px;box-shadow:0 1px 4px #eee;margin-bottom:10px;">
<div style="font-size:15px;color:#444;line-height:1.8;">
江西科睿新材料有限公司成立于2014年初，是一家专业从事有机硅系列产品研发、生产及销售的高新技术企业。公司位于江西昌九工业走廊中段、素有"洪都之门"的江西永修云山经济开发区星火工业园，交通十分便利。公司拥有先进生产设备和检测仪器，技术力量雄厚，产品质量稳定可靠。
</div>
</div>
</div>
<!-- 产品推荐 -->
<div class="module">
<div class="module-title">
<span>产品推荐</span>
<a href="#" class="more-link">More></a>
</div>
<div class="module-content">
<ul class="product-list">
<li>六甲基二硅氧烷 <span class="cas">(CAS No.：107-46-0)</span></li>
<li>1,1,3,3-四甲基二硅氧烷 <span class="cas">(CAS No.：3277-26-7)</span></li>
<li>1,1,1,3,5,5,5-七甲基三硅氧烷 <span class="cas">(CAS No.：1873-88-7)</span></li>
<li>硅氧封头剂(MDM) <span class="cas">(CAS No.：63148-62-9)</span></li>
<li>四甲基二乙烯基二硅氧烷 <span class="cas">(CAS No.：2627-95-4)</span></li>
<li>六甲基二硅氨烷 <span class="cas">(CAS No.：63148-57-2)</span></li>
<li>含氢硅油 <span class="cas">(CAS No.：999-97-3)</span></li>
</ul>
</div>
</div>
<!-- 联系我们 -->
<div class="module">
<div class="module-title">
<span>联系我们</span>
</div>
<div class="module-content">
<div class="contact-info">
<p><b>联系人：</b>饶先生</p>
<p><b>地址：</b>江西省永修县 星火工业园希望大道</p>
<p><b>邮编：</b>330319</p>
<p><b>电话：</b>12345678901</p>
<p><b>邮箱：</b>example@example.com</p>
</div>
</div>
</div>
</div>
<!-- 企业展示区块 -->
<div class="module" style="margin-top:20px;">
<div class="module-title">
<span>企业展示</span>
<a href="#" class="more-link">More></a>
</div>
<div class="gallery-container">
<div class="gallery">
<img src="img/8.jpg" alt="" />
<img src="img/9.jpg" alt="生产车间" />
<img src="img/10.jpg" alt="办公区域" />
<img src="img/2.jpg" alt="产品检测" />
<img src="img/4.jpg" alt="产品检测" />
<img src="img/6.jpg" alt="产品检测" />
</div>
<!-- 左按钮 -->
<button class="gallery-btn prev-btn">←</button>
<!-- 右按钮 -->
<button class="gallery-btn next-btn">→</button>
</div>
</div>
</div>
<div class="footer">
Copyright © 2015 江西科睿新材料有限公司 · 保留所有权利 | 技术支持：萨摩网络<br>
<img src="img/gn.png" alt="备案图标" style="vertical-align: middle;height: 18px;">
<a href="#">赣公网安备</a> | <a href="#">赣ICP备</a> |
<a href="#">首页</a> | <a href="#">联系我们</a> | <a href="#">邮箱登录</a> |
<a href="#">管理登录</a> |
<img src="img/21.gif" alt="百度图标" style="vertical-align: middle;height: 18px;">
<a href="#">百度站内</a> | <a href="#">百度地图</a> | <a href="#">Google地图</a>
</div>
<script>
// 轮播图逻辑
const imgs = document.querySelectorAll('.carousel-img');
const dots = document.querySelectorAll('.carousel-dot');
let idx = 0;
function show(idxNew) {
imgs.forEach((img, i) => {
img.classList.toggle('active', i === idxNew);
dots[i].classList.toggle('active', i === idxNew);
});
idx = idxNew;
}
function next() {
show((idx + 1) % imgs.length);
}
let timer = setInterval(next, 3500);
dots.forEach((dot, i) => {
dot.onclick = () => {
show(i);
clearInterval(timer);
timer = setInterval(next, 3500);
};
});
// 企业展示图片切换逻辑
const gallery = document.querySelector('.gallery');
const galleryImgs = gallery.querySelectorAll('img');
const prevBtn = document.querySelector('.prev-btn');
const nextBtn = document.querySelector('.next-btn');
let imgIndex = 0;
const imgCount = galleryImgs.length;
const visibleCount = 4; // 每次显示4张图片
// 计算可切换的总页数
const totalPages = Math.ceil(imgCount / visibleCount);
// 切换图片函数
function showGalleryImg(index) {
// 限制索引范围
if (index < 0) index = 0;
if (index >= totalPages) index = totalPages - 1;
// 计算偏移量（每次切换显示4张图片）
const offset = -index * 100; // 100%为一组图片的宽度
gallery.style.transform = `translateX(${offset}%)`;
imgIndex = index;
}
// 上一张按钮事件
prevBtn.addEventListener('click', () => {
showGalleryImg(imgIndex - 1);
});
// 下一张按钮事件
nextBtn.addEventListener('click', () => {
showGalleryImg(imgIndex + 1);
});
</script>
</body>
</html>
打赏
网站运行不易·求打赏QAQ
