一个简单的网页设计代码示例

程序猿经理

于 2024-06-11 00:30:00 发布

阅读量284

点赞数 9

文章标签： html

本文链接：https://blog.csdn.net/weixin_44337480/article/details/139527290

版权

网页设计通常涉及HTML、CSS和JavaScript（可选）的使用。以下是一个简单的网页设计代码示例：

HTML (结构)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的网页</title>
    <link rel="stylesheet" href="styles.css">
</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>
    
    <main>
        <section>
            <h2>欢迎消息</h2>
            <p>这里是一些欢迎的信息...</p>
        </section>
        
        <section>
            <h2>最新文章</h2>
            <article>
                <h3>文章标题</h3>
                <p>这里是文章内容...</p>
            </article>
        </section>
    </main>
    
    <footer>
        <p>版权所有 &copy; 2023 我的网页</p>
    </footer>
    
    <!-- 可选的JavaScript文件 -->
    <script src="script.js"></script>
</body>
</html>

CSS (样式) (`styles.css`)

/* 基本样式 */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

header, nav, main, footer {
    padding: 20px;
    text-align: center;
}

nav ul {
    list-style-type: none;
    padding: 0;
}

nav li {
    display: inline-block;
    margin-right: 10px;
}

/* 其他样式... */

JavaScript (交互) (`script.js`) (可选)

// 示例：在点击某个元素时改变其颜色
document.querySelector('header h1').addEventListener('click', function() {
    this.style.color = 'red';
});

// 其他JavaScript代码...