博客基层架构代码

Gaz ing

于 2024-03-21 20:47:43 发布

阅读量237

点赞数 3

分类专栏：博客基层代码分享文章标签： javascript css html

本文链接：https://blog.youkuaiyun.com/m0_50436577/article/details/136920024

版权

博客基层代码分享专栏收录该内容

1 篇文章

订阅专栏

本文展示了HTML的基本结构，包括头部、主体和页脚，以及CSS用于定义样式和布局，JavaScript实现了一个点击按钮跳转邮件的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

展示全部HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Blog</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="blog-post">
        <h2>My First Blog Post</h2>
        <p>This is the content of my first blog post. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ultricies metus quis placerat tincidunt.</p >
    </div>
    <button id="contactButton">Contact Me via Email</button>
    <footer>
        <p>&copy; 2024 My Blog. All rights reserved.</p >
    </footer>
    <script src="script.js"></script>
</body>
</html>

展示全部CSS (styles.css)代码

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

header {
    background-color: #333;
    color: #fff;
    padding: 20px;
    text-align: center;
}

nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    text-align: center;
}

nav ul li {
    display: inline;
    margin: 0 10px;
}

nav ul li a {
    color: #333;
    text-decoration: none;
}

section {
    padding: 20px;
}

footer {
    background-color: #333;
    color: #fff;
    padding: 20px;
    text-align: center;
}

button {
    background-color: #007bff;
    border: none;
    color: #fff;
    padding: 10px 20px;
    margin: 10px;
    text-decoration: none;
    cursor: pointer;
}

button a {
    color: #fff;
    text-decoration: none;
}

展示全部 JavaScript代码

document.getElementById("contactButton").addEventListener("click", function() {
    window.location.href = "mailto:info@example.com";
});