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

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">
    <script src="scripts.js" defer></script>
</head>
<body>
    <!-顶部导航栏 -->
    <nav class="navbar">
        <div class="logo">品牌名称</div>
        <ul class="nav-links">
            <li><a href="#home">首页</a></li>
            <li><a href="#about">关于我们</a></li>
            <li><a href="#services">服务</a></li>
            <li><a href="#contact">联系</a></li>
        </ul>
    </nav>
    <!-轮播图区域 -->
    <section id="home" class="carousel">
        <div class="carousel-item">
            <img src="banner1.jpg" alt="轮播图1">
            <div class="carousel-caption">宣传语1</div>
        </div>
        <div class="carousel-item">
            <img src="banner2.jpg" alt="轮播图2">
            <div class="carousel-caption">宣传语2</div>
        </div>
    </section>
    <!-内容区域 -->
    <section id="about" class="content-section">
        <h2>关于我们</h2>
        <p>公司简介文本...</p>
    </section>
    <section id="services" class="content-section">
        <h2>核心服务</h2>
        <div class="service-grid">
            <div class="service-item">
                <img src="service1.png" alt="服务图标1">
                <h3>服务名称1</h3>
                <p>服务描述文本...</p>
            </div>
            <!-更多服务项 -->
        </div>
    </section>
    <!-合作伙伴展示 -->
    <section class="partners">
        <h2>合作伙伴</h2>
        <div class="partner-logos">
            <img src="partner1.png" alt="合作伙伴1">
            <img src="partner2.png" alt="合作伙伴2">
            <!-更多合作伙伴 -->
        </div>
    </section>
    <!-页脚 -->
    <footer>
        <p>版权所有 &copy; 2023 公司名称</p>
        <div class="footer-links">
            <a href="#">隐私政策</a>
            <a href="#">使用条款</a>
        </div>
    </footer>
</body>
</html>

结构说明

模块 功能描述 技术实现
导航栏 网站主导航 <nav> 包含 logo 和导航链接，使用 flex 布局对齐
轮播图 首页宣传图片轮换 <section> 配合 CSS 动画实现轮播，含图片和文字说明
服务网格 多服务并列展示 <div> 容器配合 CSS Grid 布局实现多列排列
合作伙伴 展示合作企业 logo 图片列表水平排列，添加悬停效果
页脚 版权信息和底部链接 <footer> 包含文本和超链接，使用常规流排版

样式设计要点

样式属性 具体实现
响应式布局 使用媒体查询适配不同屏幕尺寸
颜色主题 主色#007BFF，辅色#F8F9FA，文字色#333
字体方案 中文使用思源黑体，英文使用Roboto
交互效果 导航栏悬停变色，按钮点击动画，轮播图自动切换
间距系统 基于8px基数的倍数间距（如16px, 24px）

相关问题与解答

问题1：如何修改导航栏的链接地址？
解答：在<nav>标签内的<a>标签中修改href属性，例如将<a href="#home">首页</a>改为<a href="/index.html">首页</a>即可指向具体页面。

问题2：怎样调整服务网格的列数？
解答：通过修改.service-grid的CSS样式实现。 

.service-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); / 改为3列 /
    gap: 20px;
}
首页
0

相关文章