跳转到主内容
思享编程网：思考分享，玩转编程世界！
📁 网站地图

想做个网址汇总页？这样写HTML最简单！

姚思瀚
姚思瀚
• 👁 0人浏览过

嘿，小伙伴们！有没有想过，把常用的网址都汇总到一个页面上，方便随时访问呢？今天就来和大家分享如何用HTML制作一个简单的网址汇总页！读完这篇文章，你就能轻松创建一个属于自己的网址导航啦！

项目构建

首先，创建一个项目，新建一个HTML页面即可。

添加背景图片

<style>
    body {
        background-image: url('images/background/背景图片.jpg'); /* 替换为你的图片URL */
        background-size: cover; /* 背景图片覆盖整个页面 */
        background-position: center; /* 背景图片居中 */
        background-repeat: no-repeat; /* 不重复背景图片 */
        height: 100vh; /* 设置高度为视口高度 */
        margin: 0; /* 清除默认边距 */
    }
</style>

设置标题

<h2 style="color: #ffffff; margin-left: 20px; margin-bottom: 0; font-family: '楷体','华文行楷', sans-serif;
            text-shadow: -1px -1px 0 #1a1a1a, 1px -1px 0 #1a1a1a, -1px 1px 0 #1a1a1a, 1px 1px 0 #1a1a1a;">
    Java
</h2>

创建div元素

是HTML中的一个元素，代表“文档中的一个区块”。它通常用于将页面内容分组或布局。

<div style="display: inline-block; margin: 15px; margin-left: 50px; margin-top: 0; background-color: white;">
    <a href="https://www.csdn.net/" target="_blank"
       style="display: inline-block; text-align: center; border: 2px solid #dfdddd; padding: 10px; text-decoration: none;">
        
        <br>
        <span style="line-height: 20px; pointer-events: none;">CSDN</span>
    </a>
</div>

写完后，页面 Ctrl+S 保存下来即可。

完整HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的网页</title>
</head>

<style>
    body {
        background-image: url('images/background/背景图片.jpg'); /* 替换为你的图片URL */
        background-size: cover; /* 背景图片覆盖整个页面 */
        background-position: center; /* 背景图片居中 */
        background-repeat: no-repeat; /* 不重复背景图片 */
        height: 100vh; /* 设置高度为视口高度 */
        margin: 0; /* 清除默认边距 */
    }
</style>

<body>

<h2 style="color: #ffffff; margin-left: 20px; margin-bottom: 0; font-family: '楷体','华文行楷', sans-serif;
            text-shadow: -1px -1px 0 #1a1a1a, 1px -1px 0 #1a1a1a, -1px 1px 0 #1a1a1a, 1px 1px 0 #1a1a1a;">
    Java
</h2>

<div style="display: inline-block; margin: 15px; margin-left: 50px; margin-top: 0; background-color: white;">
    <a href="https://www.csdn.net/" target="_blank"
       style="display: inline-block; text-align: center; border: 2px solid #dfdddd; padding: 10px; text-decoration: none;">
        
        <br>
        <span style="line-height: 20px; pointer-events: none;">CSDN</span>
    </a>
</div>

<!-- 自己要什么，就添加什么即可 -->

</body>
</html>

ps：这只是随手写的一个简单示例，有写错的地方，欢迎指点。

好了，今天的分享就到这里啦！如果你喜欢我的文章，别忘了点赞、关注哦！我是「思享编程网」（www.sxgpb.com）的陆砚码，更多精彩内容等你来发现！

相关文章