主页面

1.index.html展示页面结构

<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Java Web 主页面模板</title> <link rel="stylesheet" href="style.css"> </head> <body> <!-- 页面头部 --> <header> <h1>欢迎来到主页面</h1> </header> 
<!-- 导航栏 -->
<nav>
    <ul>
        <li><a href="#">首页</a></li>
    </ul>
</nav>

<!-- 主内容区域 -->
<main>
    <section id="hero">
        <h2>探索无限可能</h2>
        <p>这里是一个简单的 Java Web 主页面模板，可以根据自己的需求进行修改和扩展。</p>
        <a href="#" class="btn">了解更多</a>
    </section>

    <section id="features">
        <h2>主要特性</h2>
        <div class="feature">
            <img src="https://via.placeholder.com/150" alt="Feature 1">
            <h3>特性 1</h3>
            <p>这里可以描述特性 1 的详细信息。</p>
        </div>
        <div class="feature">
            <img src="https://via.placeholder.com/150" alt="Feature 2">
            <h3>特性 2</h3>
            <p>这里可以描述特性 2 的详细信息。</p>
        </div>
        <div class="feature">
            <img src="https://via.placeholder.com/150" alt="Feature 3">
            <h3>特性 3</h3>
            <p>这里可以描述特性 3 的详细信息。</p>
        </div>
    </section>
</main>

<!-- 页脚 -->
<footer>
    <p>&copy; 2025 Java Web 主页面模板. 保留所有权利.</p>
</footer>

<script>
    // 可以在这里添加 JavaScript 交互逻辑
    window.onload = function () {
        console.log('页面加载完成');
    };
</script>
</body>
  1. style.css用于美化页面

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

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

nav {
background-color: #444;
}

nav ul {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
}

nav ul li {
margin: 0 10px;
}

nav ul li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

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

main {
padding: 20px;
}

hero {

text-align: center;
padding: 50px 0;

}

.btn {
display: inline-block;
background-color: #333;
color: white;
padding: 10px 20px;
text-decoration: none;
border-radius: 5px;
}

.btn:hover {
background-color: #555;
}

features {

display: flex;
justify-content: center;
flex-wrap: wrap;

}

.feature {
text-align: center;
margin: 20px;
max-width: 300px;
}

footer {
background-color: #333;
color: white;
text-align: center;
padding: 10px;
}

posted @ 2025-01-24 21:40  霸王鸡  阅读(32)  评论(0)    收藏  举报