divcss布局模板代码
Sure, here's a simple example of a basic HTML and CSS layout using the "div" and CSS for styling. This layout consists of a header, a navigation bar, a main content area, and a footer. This is a common structure for many websites.
html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Div CSS Layout</title>
<style>
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
header {
background-color: #333;
color: #fff;
text-align: center;
padding: 10px;
}
nav {
background-color: #eee;
padding: 10px;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
justify-content: space-around;
}
nav li {
margin: 0;
padding: 0;
}
main {
padding: 20px;
}
footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 10px;
position: fixed;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<header>
<h1>My Website</h1>
</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<main>
<h2>Welcome to my website!</h2>
<p>This is the main content area.</p>
</main>
<footer>
© 2024 My Website. All rights reserved.
</footer>
</body>
</html>
You can customize the styles and content according to your needs. This is just a starting point for a basic layout.
Certainly! Let's continue with a more complex example featuring a two-column layout. In this layout, we'll have a main content area and a sidebar.
html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Two Column Layout</title>
<style>
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
header {
background-color: #333;
color: #fff;
text-align: center;
padding: 10px;
}
nav {
background-color: #eee;
padding: 10px;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
justify-content: space-around;
}
nav li {
margin: 0;
padding: 0;
}
.container {
display: flex;
flex-wrap: wrap;
}
main {
flex: 1;
padding: 20px;
}
sidebar {
flex-basis: 300px;
background-color: #f0f0f0;
padding: 20px;
}
footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 10px;
width: 100%;
}
</style>
</head>
<body>
<header>
<h1>Two Column Layout</h1>
</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<div class="container">
<main>
<h2>Main Content</h2>
<p>This is the main content area.</p>
</main>
<sidebar>
<h2>Sidebar</h2>
<p>This is the sidebar content.</p>
</sidebar>
</div>
<footer>
© 2024 Two Column Layout. All rights reserved.
</footer>
</body>
</html>
In this example, the .container class is used to create a flex container, and the main and sidebar elements are flex items. This results in a two-column layout where the main content area takes up the remaining space, and the sidebar has a fixed width. Feel free to adjust the styles and content to fit your specific requirements.
