以下是一个非常好看的友情链接的网页HTML代码示例:
<!DOCTYPE html>
<html lang="zh">
<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;
background-color: #f2f2f2;
margin: 0;
padding: 0;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
background-color: #fff;
box-sizing: border-box;
}
.link-list {
list-style-type: none;
padding: 0;
}
.link-item {
margin-bottom: 15px;
}
.link-name {
font-size: 18px;
font-weight: bold;
}
.link-desc {
font-size: 14px;
color: #666;
}
</style>
</head>
<body>
<div class="container">
<h1>友情链接</h1>
<ul class="link-list">
<!-- 添加友情链接列表 -->
<li class="link-item">
<a href="https://www.example1.com" class="link-name" target="_blank">链接名称1</a>
<p class="link-desc">链接描述1</p>
</li>
<li class="link-item">
<a href="https://www.example2.com" class="link-name" target="_blank">链接名称2</a>
<p class="link-desc">链接描述2</p>
</li>
<!-- 更多友情链接... -->
</ul>
</div>
</body>
</html>
以上HTML代码包含一个友好的网页结构,其设计特点如下:
- 标题和容器:页面包含一个标题
h1
和一个div
容器,用于包裹整个页面的内容。容器设置了最大宽度、内边距和背景色,使其在各种设备上都能良好地显示。 - 样式定义:在
<style>
标签中定义了页面的基本样式,包括字体、颜色、边距等。特别是针对友情链接的样式进行了特别设计,如.link-name
用于设置链接名称的字体大小和粗细,.link-desc
用于设置链接描述的文字大小和颜色。 - 友情链接列表:使用
<ul>
标签创建了一个无序列表,用于存放友情链接。每个链接都是一个<li>
项,包含链接名称和描述。每个链接都使用了<a>
标签,并设置了target="_blank"
属性,以便在新窗口中打开链接。 - 可扩展性:此代码结构可轻松添加更多友情链接。只需在
<ul>
标签内添加更多的<li>
项即可。每个项都遵循相同的结构,方便维护和扩展。 - 美观性:通过合理的颜色、字体和布局设计,使整个页面看起来既美观又易于阅读。背景色与文字颜色的搭配,以及适当的内边距和外边距,都使得页面具有良好的视觉效果。
将此HTML代码保存为一个.html
文件,并在浏览器中打开,即可看到一个漂亮的友情链接网页。