基于html的静态网页制作项目

这篇文章距离上次修改已过435天，其中的内容可能已经有所变动。

由于提供完整的项目源代码不适合在这里展示，我将提供一个简单的HTML静态网页示例，包含了一些常见的元素，如图片、链接、表格和布局。




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>静态网页示例</title>
    <style>
        body { font-family: Arial, sans-serif; }
        header { background-color: #4CAF50; color: white; padding: 10px; text-align: center; }
        nav { float: left; width: 200px; }
        nav ul { list-style-type: none; padding: 0; }
        nav ul li { padding: 8px; margin-bottom: 7px; background-color: #dddddd; }
        nav ul li:hover { background-color: #cccccc; }
        section { margin-left: 210px; padding: 10px; }
        footer { background-color: #4CAF50; color: white; text-align: center; padding: 10px; margin-top: 10px; clear: both; }
    </style>
</head>
<body>
 
<header>
    <h1>我的静态网站</h1>
</header>
 
<nav>
    <ul>
        <li><a href="#">主页</a></li>
        <li><a href="#">产品</a></li>
        <li><a href="#">关于</a></li>
        <li><a href="#">联系</a></li>
    </ul>
</nav>
 
<section>
    <h2>欢迎来到我的网站</h2>
    <p>这是一个示例段落。</p>
    <img src="example.jpg" alt="示例图片" style="float: right; width: 200px; margin: 10px;">
    <p>这里是更多的文字内容。</p>
    <!-- 表格示例 -->
    <table style="width: 100%;">
        <tr>
            <th>头部1</th>
            <th>头部2</th>
            <th>头部3</th>
        </tr>
        <tr>
            <td>数据1</td>
            <td>数据2</td>
            <td>数据3</td>
        </tr>
        <tr>
            <td>数据4</td>
            <td>数据5</td>
            <td>数据6</td>
        </tr>
    </table>
</section>
 
<footer>
    <p>版权所有 &copy; 2023</p>
</footer>
 
</body>
</html>

这个示例包含了一些基本的HTML元素，例如标题(h1, h2), 段落(p), 图片(img), 链接(a), 列表(ul和li)以及表格(table, tr, td, th). 样式是通过内联的style属性提供的，以保持示例的简洁性。这个示例可以作为创建静态网页的起点，并可以根据需要添加更多的功能和样式。

基于html的静态网页制作项目

评论已关闭

推荐阅读