简单的html5网页设计模板html网页设计制作教程

货源人·学电商2个月前 (07-31)跨境平台

简单的html5网页设计模板 html网页设计制作教程

以下是一个简单的HTML5网页设计模板：

<!DOCTYPE html><html lang="zh"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>简单的HTML5网页</title>    <style>        body {            font-family: Arial, sans-serif;            background-color: #f0f0f0;        }        header {            background-color: #333;            color: white;            text-align: center;            padding: 1em;        }        nav {            display: flex;            justify-content: space-around;            background-color: #444;        }        nav a {            color: white;            text-decoration: none;            padding: 0.5em 1em;        }        nav a:hover {            background-color: #555;        }        #content {            margin: 2em;            padding: 1em;            background-color: #fff;            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);        }        footer {            background-color: #333;            color: white;            text-align: center;            padding: 1em;            position: fixed;            bottom: 0;            width: 100%;        }    </style></head><body>    <header>        <h1>欢迎来到我的网站</h1>    </header>    <nav>        <a href="#">首页</a>        <a href="#">关于我们</a>        <a href="#">联系我们</a>    </nav>    <div id="content">        <h2>欢迎来到我的网站</h2>        <p>这里是一些关于我的网站的基本信息。</p>    </div>    <footer>        <p>&copy; 2022 我的网站</p>    </footer></body></html>

这个模板包含了一个标题、导航栏、内容区和页脚。你可以根据需要修改和扩展这个模板，例如添加更多的内容、样式和功能。