网站基层代码

最新推荐文章于 2024-09-29 23:41:25 发布

Gaz ing

最新推荐文章于 2024-09-29 23:41:25 发布

阅读量290

点赞数 7

分类专栏：网站基层代码分享文章标签： html css angular.js

本文链接：https://blog.csdn.net/m0_50436577/article/details/136911900

版权

网站基层代码分享专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Show only the full html code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Company Website</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>Welcome to Our Company</h1>
    </header>
    <nav>
        <ul>
            <li>Home</li>
            <li>About Us</li>
            <li>Services</li>
            <li>Contact Us</li>
        </ul>
    </nav>
    <section>
        <h2>About Us</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ultricies metus quis placerat tincidunt.</p >
    </section>
    <section>
        <h2>Our Services</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ultricies metus quis placerat tincidunt.</p >
    </section>
    <footer>
        <button id="contactEmail">Contact Us via Email</button>
        <button id="copyright">
            Copyright © 2024, Your Company Name. All rights reserved.
        </button>
    </footer>
    <script src="script.js"></script>
</body>
</html>

Show only the complete JavaScript code

document.addEventListener("DOMContentLoaded", function() {
    // Button click event to open email client
    document.getElementById("contactEmail").addEventListener("click", function() {
        window.location.href = "mailto:access@lingzhx.cn";
    });

    // Button click event to do something else (if needed)
    document.getElementById("someOtherButton").addEventListener("click", function() {
        // Your code here
    });
});

Only show the complete CSS (styles.css) code

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;
}