JavaWeb第二章:HTML和CSS的知识制作静态网页
在JavaWeb的第二章中,我们通常会学习HTML和CSS来创建静态网页。以下是一个简单的HTML页面示例,它包含了基本的HTML结构和一些CSS样式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>示例静态页面</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
.header {
background-color: #333;
color: #fff;
padding: 10px 0;
text-align: center;
}
.content {
margin: 15px;
padding: 20px;
background-color: #fff;
}
.footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 10px 0;
position: absolute;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<div class="header">
<h1>我的网站</h1>
</div>
<div class="content">
<h2>欢迎来到我的网页</h2>
<p>这是一个示例网页,展示了基本的HTML和CSS用法。</p>
</div>
<div class="footer">
<p>版权所有 © 2023</p>
</div>
</body>
</html>
这个示例包含了一个简单的页面结构,其中包括头部(Header)、内容区(Content)和底部(Footer)。CSS样式被放在了<head>
标签内的<style>
标签中,以内联的方式应用于整个页面。这是一个入门级的静态网页示例,展示了基本的布局和样式设置。在实际开发中,会涉及到更复杂的HTML标签、CSS样式和交互式JavaScript代码。
评论已关闭