写一个纯HTML+CSS的网页内容多一点
<!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>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
margin: 0;
padding: 0;
}
<pre><code>header {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
h1 {
margin: 0;
font-size: 36px;
}
nav {
background-color: #666;
color: #fff;
padding: 10px;
text-align: center;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
nav ul li {
display: inline-block;
margin: 0 10px;
}
main {
padding: 20px;
}
section {
margin-bottom: 20px;
}
section h2 {
margin-top: 0;
}
footer {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
</code></pre>
</style>
</head>
<body>
<header>
<h1>Welcome to My Webpage</h1>
</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<main>
<section>
<h2>About Us</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ut nunc quis nunc mattis accumsan. Sed eget tristique nisl. Curabitur et quam quam. Integer tincidunt tellus in purus varius, vitae finibus nunc mattis. Phasellus nec suscipit nisi. Aliquam at arcu interdum, posuere nunc in, porta ligula.</p>
</section>
<pre><code><section>
<h2>Our Services</h2>
<ul>
<li>Web Design</li>
<li>Graphic Design</li>
<li>App Development</li>
<li>SEO Optimization</li>
</ul>
</section>
<section>
<h2>Contact Us</h2>
<p>Email: info@example.com</p>
<p>Phone: 123-456-7890</p>
</section>
</code></pre>
</main>
<footer>
<p>© 2021 My Webpage. All rights reserved.</p>
</footer>
</body>
</html
原文地址: https://www.cveoy.top/t/topic/hIeo 著作权归作者所有。请勿转载和采集!