网站首页代码优化：美化网页设计
<!DOCTYPE html>
<html>
<head>
<title>网站首页</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
<pre><code> header {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
nav {
background-color: #666;
padding: 10px;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
text-align: center;
}
nav ul li {
display: inline;
margin: 0 10px;
}
nav ul li a {
color: #fff;
text-decoration: none;
}
main {
margin: 20px;
}
h1 {
font-size: 36px;
text-align: center;
}
p {
font-size: 18px;
text-align: center;
}
</style>
</code></pre>
</head>
<body>
<header>
<h1>Welcome to My Website!</h1>
</header>
<nav>
<ul>
<li><a href='index.html'>Home</a></li>
<li><a href='photos.html'>Photos</a></li>
<li><a href='info.html'>Personal Info</a></li>
<li><a href='login.html'>User Login</a></li>
</ul>
</nav>
<main>
<h1>Discover Something Amazing</h1>
<p>Explore the world through captivating photographs, learn about fascinating people and their stories, and connect with our community.</p>
</main>
</body>
</html>
<p>在这个示例中，我添加了一些样式规则来改变页面的外观：</p>
<ul>
<li>为'header'元素添加了一个背景颜色和文字颜色，以突出网站标题。</li>
<li>设置了导航栏的背景颜色，并使其居中显示。</li>
<li>调整了标题和段落的字体大小和对齐方式，使其更加突出和易读。</li>
</ul>
<p>您可以根据自己的喜好和需求进行调整和优化。通过更改样式规则，您可以自定义颜色、字体、大小等，以满足您的设计目标。</p>
<p>希望这个示例对您有所帮助！如果您有任何进一步的问题，请随时提问。</p>
原文地址: https://www.cveoy.top/t/topic/XG5 著作权归作者所有。请勿转载和采集!