<!DOCTYPE html>
<html lang="zh
-CN">
<head>
<meta charset="UTF
-8">
<meta name="viewport" content="width=device
-width, initial
-scale=
1.0">
<title>SSS服饰公司企业网站</title>
<style>
/* 全局样式 */
body {
font
-family: Arial, sans
-serif;
margin: 0;
padding: 0;
background
-color: #f
4f
4f
4;
}
/* 导航栏样式 */
nav {
background
-color: #
2c
3e50;
color: white;
text
-align: center;
padding:
15px;
}
nav ul {
list
-style
-type: none;
margin: 0;
padding: 0;
display: flex;
justify
-content: center;
}
nav ul li {
cursor: pointer;
margin: 0
15px;
font
-size:
18px;
}
/* 页面内容容器样式 */
.page
-content {
padding:
40px;
display: none;
text
-align: center;
background
-color: white;
margin:
20px auto;
max
-width: 800px;
box
-shadow: 0 0
10px rgba(0, 0, 0, 0
.1);
}
/* 用于填充的纯色图片样式 */
.fake
-img {
width:
350px;
height:
250px;
background
-color: #ccc;
display: flex;
justify
-content: center;
align
-items: center;
font
-size:
24px;
margin:
20px auto;
}
h
1 {
color: #
34495e;
}
p {
color: #777;
}
</style>
</head>
<body>
<!
-- 导航栏
-->
<nav>
<ul>
<li onclick="showPage(&#
39;home&#
39;)">首页</li>
<li onclick="showPage(&#
39;about&#
39;)">关于我们</li>
<li onclick="showPage(&#
39;products&#
39;)">产品展示</li>
<li onclick="showPage(&#
39;news&#
39;)">新闻动态</li>
<li onclick="showPage(&#
39;contact&#
39;)">联系我们</li>
<li onclick="showPage(&#
39;careers&#
39;)">加入我们</li>
</ul>
</nav>
<!
-- 首页内容
-->
<div id="home" class="page
-content">
<!
-- 这里显示首页的文字和图片，你可以自行替换
-->
<h
1>欢迎来到 SSS 服饰公司</h
1>
<p>这是首页的一些介绍文字，展示公司的品牌理念等。</p>
<div class="fake
-img">首页示例图片</div>
</div>
<!
-- 关于我们内容
-->
<div id="about" class="page
-content">
<h
1>关于我们</h
1>
<p>这里是关于 SSS 服饰公司的详细介绍，包括公司历史、团队等。</p>
<div class="fake
-img">关于我们示例图片</div>
</div>
<!
-- 产品展示内容
-->
<div id="products" class="page
-content">
<h
1>产品展示</h
1>
<p>展示公司的各类服饰产品。</p>
<div class="fake
-img">产品展示示例图片</div>
</div>
<!
-- 新闻动态内容
-->
<div id="news" class="page
-content">
<h
1>新闻动态</h
1>
<p>发布公司的最新新闻和活动信息。</p>
<div class="fake
-img">新闻动态示例图片</div>
</div>
<!
-- 联系我们内容
-->
<div id="contact" class="page
-content">
<h
1>联系我们</h
1>
<p>这里是公司的联系方式，包括地址、电话、邮箱等。</p>
<div class="fake
-img">联系我们示例图片</div>
</div>
<!
-- 加入我们内容
-->
<div id="careers" class="page
-content">
<h
1>加入我们</h
1>
<p>介绍公司的招聘信息和职业发展机会。</p>
<div class="fake
-img">加入我们示例图片</div>
</div>
<script>
function showPage(pageId) {
// 隐藏所有页面内容
const pages = document
.querySelectorAll(&#
39;
.page
-content&#
39;);
pages
.forEach(page => {
page
.style
.display = &#
39;none&#
39;;
});
// 显示指定页面内容
const targetPage = document
.getElementById(pageId);
targetPage
.style
.display = &#
39;block&#
39;;
}
</script>
</body>
</html>将原有的六大板块每个板块进行扩充扩充长度。需要添加图片的部分。用注释标注以便更改。
最低0.47元/天 解锁文章
扫一扫
5万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
