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

html做简单网站实例

简易网页欢迎访问这是一个基础HTML页面示例点击这里

项目结构说明

文件/文件夹 说明
index.html 网站首页文件
styles.css 存放CSS样式表
images/ 图片资源文件夹

基础代码解析

HTML基本结构

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">个人博客</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>我的个人网站</h1>
        <nav>
            <ul>
                <li><a href="#home">首页</a></li>
                <li><a href="#about">关于我</a></li>
                <li><a href="#portfolio">作品集</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <section id="home">
            <img src="images/profile.jpg" alt="个人头像">
            <h2>欢迎来到我的网站</h2>
            <p>这是一段简短的自我介绍...</p>
        </section>
        <section id="about">
            <h3>关于我</h3>
            <p>这里是个人经历和技能介绍...</p>
        </section>
        <section id="portfolio">
            <h3>作品展示</h3>
            <div class="gallery">
                <img src="images/work1.jpg" alt="作品1">
                <img src="images/work2.jpg" alt="作品2">
            </div>
        </section>
    </main>
    <footer>
        <p>&copy; 2023 个人网站版权所有</p>
    </footer>
</body>
</html>

CSS样式示例

body {
    font-family: 'Microsoft YaHei', sans-serif;
    margin: 0;
    padding: 0;
}
header {
    background-color: #4CAF50;
    color: white;
    padding: 20px;
    text-align: center;
}
nav ul {
    list-style-type: none;
    padding: 0;
}
nav li {
    display: inline-block;
    margin: 0 15px;
}
nav a {
    color: white;
    text-decoration: none;
}
.gallery img {
    width: 200px;
    margin: 10px;
    border-radius: 5px;
}

页面效果说明

  1. 顶部导航栏：固定显示网站名称和导航菜单
  2. 轮播图区域：展示个人头像和欢迎语区块：包含”关于我”和”作品集”两个主要板块
  3. 底部版权栏：显示版权信息和备案号

扩展功能建议

功能模块 实现方式
响应式布局 添加@media查询实现手机适配
图片轮播 使用JavaScript或CSS动画
联系表单 添加form元素和后端处理
访问统计 集成Google Analytics代码

相关问题与解答

Q1：如何给网站添加新的页面？
A：在项目目录下创建新HTML文件（如contact.html），在导航栏添加对应链接： 

<li><a href="contact.html">联系方式</a></li>

需确保新页面的结构和样式与现有页面保持一致。

Q2：怎样修改网站的主题颜色？
A：通过修改CSS中的颜色变量：

  1. 在styles.css顶部定义变量： 
    :root {
    --primary-color: #4CAF50;
    --text-color: #333;
}
  2. 替换原有颜色值： 
    header {
    background-color: var(--primary-color);
    color: white;
}
body {
    color: var(--text-color);
}
  3. 修改变量值即可全局更新配色
实例简单网站
0

相关文章