当前位置：首页 > 行业动态 > 正文

htm企业网站代码

admin
行业动态
2025-04-27
4096

页面结构

企业网站通常包含头部导航、主体内容（如公司简介、产品展示）、侧边栏（如联系方式）和底部版权信息,以下为基本HTML框架：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">企业名称</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <!-头部导航 -->
    <header>
        <nav>
            <ul>
                <li><a href="#home">首页</a></li>
                <li><a href="#about">关于我们</a></li>
                <li><a href="#products">产品服务</a></li>
                <li><a href="#contact">联系我们</a></li>
            </ul>
        </nav>
    </header>
    <!-主体内容 -->
    <main>
        <section id="home">
            <h1>欢迎访问企业名称</h1>
            <p>企业简介内容...</p>
        </section>
        <section id="products">
            <h2>产品与服务</h2>
            <div class="product-list">
                <div class="product-item">产品1</div>
                <div class="product-item">产品2</div>
            </div>
        </section>
    </main>
    <!-底部信息 -->
    <footer>
        <p>© 2023 企业名称. 保留所有权利</p>
    </footer>
    <script src="scripts.js"></script>
</body>
</html>

样式设计（CSS）

通过外部样式表（styles.css）控制布局和视觉风格：

htm企业网站代码第1张

样式属性	说明	示例代码
`body`	全局字体和背景色	`font-family: Arial, sans-serif; background-color: #f4f4f4;`
`header`	头部导航背景和高度	`background-color: #003366; height: 60px;`
`nav ul`	导航菜单水平排列	`list-style: none; display: flex; justify-content: center;`
`.product-list`	产品列表网格布局	`display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;`

交互功能（JavaScript）

通过外部脚本（scripts.js）实现动态效果：

// 导航栏滚动效果
window.onscroll = function() {
    const header = document.querySelector('header');
    if (window.scrollY > 50) {
        header.style.boxShadow = '0 2px 5px rgba(0,0,0,0.3)';
    } else {
        header.style.boxShadow = 'none';
    }
};
// 平滑滚动到锚点
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function(e) {
        e.preventDefault();
        document.querySelector(this.getAttribute('href')).scrollIntoView({ behavior: 'smooth' });
    });
});