前端模板代码

最新推荐文章于 2024-06-15 21:29:25 发布

Y·彳亍

最新推荐文章于 2024-06-15 21:29:25 发布

阅读量358

点赞数

文章标签：前端 css javascript html

本文链接：https://blog.csdn.net/qq_57662137/article/details/129635210

版权

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Frontend Page</title>
  
  <!-- CSS stylesheets -->
  <link rel="stylesheet" href="style.css">
  
  <!-- JavaScript scripts -->
  <script src="script.js"></script>
</head>
<body>
  <!-- HTML content goes here -->
  <header>
    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
  </header>
  
  <main>
    <section>
      <h1>Welcome to my page</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod quam vel venenatis consequat. Quisque sed odio ut sapien luctus laoreet a in justo. In ultrices aliquam risus, sed vulputate nulla eleifend eget.</p>
      <button id="my-button">Click me!</button>
    </section>
  </main>
  
  <footer>
    <p>&copy;2023 My Website. All Rights Reserved.</p>
  </footer>
</body>
</html>

/* CSS stylesheet */

/* Set default styles and font */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Arial, sans-serif;
}

/* Add styles for nav menu */
nav {
  background-color: #333;
  height: 50px;
}

nav ul {
  list-style-type: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
}

nav li {
  height: 100%;
}

nav li a {
  color: white;
  text-decoration: none;
  padding: 0 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

nav li a:hover {
  background-color: #555;
}

/* Add more styles as needed */

// JavaScript script

// Get button element by ID
const button = document.getElementById("my-button");

// Add event listener to button
button.addEventListener("click", function() {
  alert("Button was clicked!");
});

这是一个非常基本的带有CSS和JavaScript的前端页面模板。可以根据需要添加自己的CSS样式和JavaScript代码来定制页面。注意，CSS样式应该放在 `<head>` 标签里面，而JavaScript代码应该尽可能地放在 `<body>` 标签底部，为了确保页面加载速度和性能。