Register
> 博客>

前端代码模板

新星源码网 3月 4日 2 0

前端代码模板可以根据具体的项目和框架而异，

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Webpage</title>

    <!-- External CSS -->
    <link rel="stylesheet" href="styles.css">

    <!-- External JavaScript -->
    <script defer src="script.js"></script>
</head>
<body>

    <header>
        <h1>Welcome to My Webpage</h1>
    </header>

    <nav>
        <ul>
            <li><a href="#home">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
        </ul>
    </nav>

    <main>
        <section id="home">
            <h2>Home Section</h2>
            <p>This is the main content of the home section.</p>
        </section>

        <section id="about">
            <h2>About Section</h2>
            <p>This is the main content of the about section.</p>
        </section>

        <section id="contact">
            <h2>Contact Section</h2>
            <p>This is the main content of the contact section.</p>
        </section>
    </main>

    <footer>
        <p>&copy; 2024 My Webpage. All rights reserved.</p>
    </footer>

</body>
</html>

上述模板包含了一个基本的HTML结构，外部引用了一个样式表和一个脚本文件。这是一个简单的静态网页模板，你可以根据实际需求和项目框架进行修改和扩展。如果你使用了特定的前端框架，例如React、Vue.js或Angular，模板的结构将会有所不同。

当使用特定的前端框架时，代码结构会有所不同。

jsx
// App.js

import React from 'react';
import './App.css';

function App() {
    return (
        <div className="App">
            <header>
                <h1>Welcome to My React App</h1>
            </header>

            <nav>
                <ul>
                    <li><a href="#home">Home</a></li>
                    <li><a href="#about">About</a></li>
                    <li><a href="#contact">Contact</a></li>
                </ul>
            </nav>

            <main>
                <section id="home">
                    <h2>Home Section</h2>
                    <p>This is the main content of the home section.</p>
                </section>

                <section id="about">
                    <h2>About Section</h2>
                    <p>This is the main content of the about section.</p>
                </section>

                <section id="contact">
                    <h2>Contact Section</h2>
                    <p>This is the main content of the contact section.</p>
                </section>
            </main>

            <footer>
                <p>&copy; 2024 My React App. All rights reserved.</p>
            </footer>
        </div>
    );
}

export default App;

css
/* App.css */

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

.App {
    text-align: center;
}

header, nav, main, footer {
    margin: 20px;
}

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

nav ul {
    display: flex;
    justify-content: space-around;
    background-color: #f0f0f0;
    padding: 10px;
}

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

nav a:hover {
    font-weight: bold;
}

上述代码是一个简单的React应用示例，包括了基本的组件结构和样式表。

Related

热门文章

微海报