网页首页设计代码

admin 2024年01月18日 03:19 34 0

创建一个简单的网页首页需要HTML、CSS和JavaScript等语言，以下是一个简单的示例：

HTML代码：

<!DOCTYPE html>
<html>
<head>
    <title>首页</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <header>
        <h1>欢迎来到我的首页</h1>
    </header>
    <nav>
        <ul>
            <li><a href="#section1">部分1</a></li>
            <li><a href="#section2">部分2</a></li>
            <li><a href="#section3">部分3</a></li>
        </ul>
    </nav>
    <section id="section1">
        <h2>部分1</h2>
        <p>这是部分1的内容。</p>
    </section>
    <section id="section2">
        <h2>部分2</h2>
        <p>这是部分2的内容。</p>
    </section>
    <section id="section3">
        <h2>部分3</h2>
        <p>这是部分3的内容。</p>
    </section>
    <footer>
        <p>&copy; 2023 我的网站. 版权所有.</p>
    </footer>
</body>
</html>

CSS代码 (保存为style.css)：

body {
    font-family: Arial, sans-serif;
}
header {
    background-color: #f8f9fa;
    text-align: center;
    padding: 20px;
}
nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    background-color: #343a40;
}
nav ul li {
    display: inline-block;
    position: relative;
}
nav ul li a {
    display: block;
    padding: 10px 20px;
    color: #fff;
    text-decoration: none;
}
nav ul li a:hover {
    background-color: #17a278;
}
section {
    padding: 20px;
}
footer {
    background-color: #f8f9fa;
    text-align: center;
    padding: 10px;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
}