简单写一个html网页，汇总常用网址

最新推荐文章于 2025-03-20 08:39:54 发布

_L_J_H_

最新推荐文章于 2025-03-20 08:39:54 发布

阅读量3.2k

点赞数 18

分类专栏：通用工具类或功能代码块文章标签： html 前端

本文链接：https://blog.csdn.net/weixin_44411039/article/details/143189876

版权

通用工具类或功能代码块专栏收录该内容

3 篇文章

订阅专栏

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>

标题


<!-- sans-serif：这是一个通用字体族，作为最后的后备选择，确保即使前两种字体不可用，也会有一种无衬线字体显示; margin-left: 20px 表示左移一点距离  -->
<!-- 为了减少h2和div之间的上下距离，用margin-bottom减少h2的下边距，margin-top减少div的上边距 -->
<!-- text-shadow 设置文字轮廓是另一种颜色 -->
<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

< div > 是HTML中的一个元素，代表“文档中的一个区块”。它通常用于将页面内容分组或布局。
使用< div >可以方便地对多个元素进行样式设置或布局调整，特别是在结合CSS时。
它本身没有特定的语义，只是一个通用的容器。

<!--  inline-block表示允许多个div在同一行中显示；margin表示div之间的间隔; margin-left 表示左边留多少位置；margin-top 表示减少div的上边距 -->
<div style="display: inline-block; margin: 15px; margin-left: 50px; margin-top: 0; background-color: white;">
    <!-- target="_blank" 表示连接在新窗口打开，不会失去当前页面；border 表示给内容添加一个边框；padding: 10px 表示内容和边框的内边距 ； text-decoration: none 移除超链接的下划线 -->
    <a href="https://www.csdn.net/" target="_blank"
       style="display: inline-block; text-align: center; border: 2px solid #dfdddd; padding: 10px; text-decoration: none;">
        <img src="images/technology/CSDN.jpg" alt="CSDN图标"
             style="width: 80px; height: 50px; vertical-align: top;">
        <br>
        <!-- <span>: 这是一个行内元素，通常用于对文本进行样式处理或分组，但不会对布局产生影响 ；line-height: 控制文本行的高度-->
        <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>

<!-- sans-serif：这是一个通用字体族，作为最后的后备选择，确保即使前两种字体不可用，也会有一种无衬线字体显示; margin-left: 20px 表示左移一点距离  -->
<!-- 为了减少h2和div之间的上下距离，用margin-bottom减少h2的下边距，margin-top减少div的上边距 -->
<!-- text-shadow 设置文字轮廓是另一种颜色 -->
<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>

<!--  inline-block表示允许多个div在同一行中显示；margin表示div之间的间隔; margin-left 表示左边留多少位置；margin-top 表示减少div的上边距 -->
<div style="display: inline-block; margin: 15px; margin-left: 50px; margin-top: 0; background-color: white;">
    <!-- target="_blank" 表示连接在新窗口打开，不会失去当前页面；border 表示给内容添加一个边框；padding: 10px 表示内容和边框的内边距 ； text-decoration: none 移除超链接的下划线 -->
    <a href="https://www.csdn.net/" target="_blank"
       style="display: inline-block; text-align: center; border: 2px solid #dfdddd; padding: 10px; text-decoration: none;">
        <img src="images/technology/CSDN.jpg" alt="CSDN图标"
             style="width: 80px; height: 50px; vertical-align: top;">
        <br>
        <!-- <span>: 这是一个行内元素，通常用于对文本进行样式处理或分组，但不会对布局产生影响 ；line-height: 控制文本行的高度-->
        <span style="line-height: 20px; pointer-events: none;">CSDN</span>
    </a>
</div>

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


</body>
</html>