<!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: #f4f4f4;
}
/
* 导航栏样式
*/
nav {
background
-color: #
2c3e
50;
color: white;
text
-align: center;
padding: 1
5px;
}
nav ul {
list
-style
-type: none;
margin: 0;
padding: 0;
display: flex;
justify
-content: center;
}
nav ul li {
cursor: pointer;
margin: 0 1
5px;
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: 3
50px;
height:
250px;
background
-color: #ccc;
display: flex;
justify
-content: center;
align
-items: center;
font
-size:
24px;
margin:
20px auto;
}
h1 {
color: #3449
5e;
}
p {
color: #777;
}
</style>
</head>
<body>
<!
-- 导航栏
-->
<nav>
<ul>
<li onclick="showPage('home')">首页</li>
<li onclick="showPage('about')">关于我们</li>
<li onclick="showPage('products')">产品展示</li>
<li onclick="showPage('news')">新闻动态</li>
<li onclick="showPage('contact')">联系我们</li>
<li onclick="showPage('careers')">加入我们</li>
</ul>
</nav>
<!
-- 首页内容
-->
<div id="home" class="page
-content">
<!
-- 这里显示首页的文字和图片，你可以自行替换
-->
<h1>欢迎来到 SSS 服饰公司</h1>
<p>这是首页的一些介绍文字，展示公司的品牌理念等。</p>
<div class="fake
-img">首页示例图片</div>
</div>
<!
-- 关于我们内容
-->
<div id="about" class="page
-content">
<h1>关于我们</h1>
<p>这里是关于 SSS 服饰公司的详细介绍，包括公司历史、团队等。</p>
<div class="fake
-img">关于我们示例图片</div>
</div>
<!
-- 产品展示内容
-->
<div id="products" class="page
-content">
<h1>产品展示</h1>
<p>展示公司的各类服饰产品。</p>
<div class="fake
-img">产品展示示例图片</div>
</div>
<!
-- 新闻动态内容
-->
<div id="news" class="page
-content">
<h1>新闻动态</h1>
<p>发布公司的最新新闻和活动信息。</p>
<div class="fake
-img">新闻动态示例图片</div>
</div>
<!
-- 联系我们内容
-->
<div id="contact" class="page
-content">
<h1>联系我们</h1>
<p>这里是公司的联系方式，包括地址、电话、邮箱等。</p>
<div class="fake
-img">联系我们示例图片</div>
</div>
<!
-- 加入我们内容
-->
<div id="careers" class="page
-content">
<h1>加入我们</h1>
<p>介绍公司的招聘信息和职业发展机会。</p>
<div class="fake
-img">加入我们示例图片</div>
</div>
<script>
function showPage(pageId) {
// 隐藏所有页面内容
const pages = document
.querySelectorAll('
.page
-content');
pages
.forEach(page => {
page
.style
.display = 'none';
});
// 显示指定页面内容
const targetPage = document
.getElementById(pageId);
targetPage
.style
.display = 'block';
}
</script>
</body>
</html>将原有的六大板块每个板块进行扩充扩充长度。需要添加图片的部分。用注释标注以便更改。
这篇博客主要介绍了C/C++编程中的函数使用，包括题目描述、输入输出的处理以及样例的输入和输出展示。
最低0.47元/天 解锁文章
扫一扫
639
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
