一个简单漂亮的网址导航HTML5源码
以下是一个简单而漂亮的网址导航HTML5代码实例，它包含了导航栏、链接列表和页面的基本结构：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>网址导航</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
.navbar {
background-color: #333;
overflow: hidden;
}
.navbar a {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.navbar a:hover {
background-color: #ddd;
color: black;
}
.content {
padding: 16px;
}
.links {
max-width: 600px;
margin: auto;
padding: 16px;
background-color: white;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.links a {
display: block;
margin-bottom: 5px;
}
</style>
</head>
<body>
<div class="navbar">
<a href="#home">首页</a>
<a href="#contact">联系我们</a>
<a href="#about">关于我们</a>
</div>
<div class="content">
<div class="links">
<h2>常用网址</h2>
<a href="https://www.example1.com" target="_blank">示例网站1</a>
<a href="https://www.example2.com" target="_blank">示例网站2</a>
<a href="https://www.example3.com" target="_blank">示例网站3</a>
<!-- 更多链接 -->
</div>
</div>
</body>
</html>这段代码展示了如何使用CSS样式来增强一个简单的HTML结构，使其看起来更加漂亮和用户友好。同时，它也演示了如何通过HTML结构和CSS样式来创建一个导航栏和链接列表，这对于初学者来说是一个很好的教学示例。
评论已关闭