美化标题和导航栏HTML代码并且居中
时间: 2024-06-03 09:08:22 浏览: 94
网页代码美化
<!DOCTYPE html>
<html>
<head>
<title>美化标题和导航栏</title>
<style>
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #333;
padding: 20px;
color: #fff;
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.logo {
font-size: 24px;
font-weight: bold;
text-transform: uppercase;
}
.nav {
display: flex;
align-items: center;
}
.nav li {
list-style: none;
margin-left: 20px;
}
.nav a {
color: #fff;
text-decoration: none;
font-size: 16px;
font-weight: bold;
padding: 10px;
border-radius: 5px;
transition: background-color 0.3s ease;
}
.nav a:hover {
background-color: #ddd;
color: #333;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
h1 {
font-size: 36px;
font-weight: bold;
text-align: center;
margin-bottom: 40px;
}
</style>
</head>
<body>
<header class="header">
<div class="logo">LOGO</div>
<nav class="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>
</header>
<div class="container">
<h1>Welcome to our website</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales dolor vel nibh scelerisque, non mattis mauris bibendum. Nulla ut sollicitudin quam, nec ullamcorper purus.</p>
</div>
</body>
</html>
阅读全文