关于我学了6天CSS写的导航页这件事

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>导航</title>
    <!-- <link rel="stylesheet" href="style.css"> -->
    <style>
        * {
            /* 清除内外边距 */
            margin: 0;
            padding: 0;
        }

        body {
            /* 全局字体家族 */
            font-family: 'Montserrat', sans-serif, Arial, 'Microsoft Yahei';
            /* 背景颜色 */
            background-color: #fcfcfc;
        }

        /* 导航栏 */
        .nav {
            /* 盒子高度 */
            height: 60px;
            /* 背景颜色 */
            background-color: #fcfcfc;
            /* 行高,水平居中对齐 */
            line-height: 60px;
            /* 文字居中 */
            text-align: center;
        }

        /* 导航栏  a标签*/
        .nav a {
            /* a属于行内元素,此时必须要转换:行内块元素 */
            display: inline-block;
            height: 60px;
            /* 盒子内边距(padding),0上下禁用,左右各20px */
            padding: 0 20px;
            /* 字体大小 */
            font-size: 16px;
            /* 文字颜色 */
            color: #484848;
            /* 禁止下划线 */
            text-decoration: none;
        }

        /* 导航鼠标悬停 */
        .nav a:hover {
            /* 悬停背景色 */
            background-color: #e9f8ff;
            /* 悬停文字色 */
            color: #78beff;
        }
    </style>
</head>

<body>
    <div class="nav">
        <a href="/nav/" target="_blank">🗂️首页</a>
        <a href="https://goojoe.cc" target="_blank">📟博客</a>
        <a href="https://goojoe.cc/about" target="_blank">👋关于</a>
        <a href="https://goojoe.cc/links" target="_blank">🔗小伙伴</a>
        <a href="https://goojoe.cc/leaving" target="_blank">💬留言</a>
    </div>
</body>

</html>

预览https://test.goojoe.cc/nav/

vesion2

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入favicon -->
    <link rel="icon" type="image/png" href="https://fl.goojoe.cc/img/logo.png">
    <title>咕咕导航</title>
    <!-- <link rel="stylesheet" href="style.css"> -->
    <style>
        * {
            /* 清除内外边距 */
            margin: 0;
            padding: 0;
        }

        body {
            /* 全局字体家族 */
            font-family: 'Montserrat', sans-serif, Arial, 'Microsoft Yahei';
            /* 背景颜色 */
            /* background-color: skyblue; */
            /* 背景图片 */
            background-image: url(https://img.goojoe.cc/2022/04/14/H4EVwRvA.webp);
            background-size: cover;
            background-repeat: no-repeat;
        }

        /* 导航栏 */
        .nav {
            /* 盒子高度 */
            height: 60px;
            /* 背景颜色 */
            background-color: rgba(255, 255, 255, 0.8);
            /* 行高,水平居中对齐 */
            line-height: 60px;
            /* 文字居中 */
            text-align: center;
        }

        /* 导航栏  a标签*/
        .nav a {
            /* a属于行内元素,此时必须要转换:行内块元素 */
            display: inline-block;
            height: 60px;
            /* 盒子内边距(padding),0上下禁用,左右各20px */
            padding: 0 20px;
            /* 字体大小 */
            font-size: 16px;
            /* 文字颜色 */
            color: #484848;
            /* 禁止下划线 */
            text-decoration: none;
            /* 解决盒子塌陷问题 */
            overflow: hidden;
        }

        /* 导航鼠标悬停 */
        .nav a:hover {
            /* 悬停背景色 */
            background-color: #e9f8ff;
            /* 悬停文字色 */
            color: #78beff;
        }

        /* LOGO */
        .nav a img {
            width: 40px;
            /* height: 30px; */
            margin-top: 10px
        }

        /* 主页 */
        .page {
            /* 盒子高度 */
            height: 600px;
            /* 上下左右间距 */
            margin: 50px 100px;
            background-color: rgba(255, 255, 255, 0.8);
            /* 盒子圆角 */
            border-radius: 50px;
        }

        /* 悬停阴影 */
        .page:hover {
            box-shadow: 10px 10px 20px 0px rgba(0, 0, 0, .3);
        }

        .page h1 {
            /* display: inline-block;
            /* 文字对齐 */
            height: 100px;
            line-height: 100px;
            color: #b5b095;
            display: block;
            /* 文字大小 */
            font-size: 2em;
            /* 文字粗细 */
            font-weight: 400;
            /* 文字居中 */
            text-align: center;
        }

        .page h2 {
            /* 左右50px间距 */
            margin-left: 50px;
            /* 文字靠左对齐 */
            text-align: left;
            /* 文字颜色 */
            color: #353535;
            font-size: 1.5em;
        }

        .page p {
            margin: 10px 50px;
            /* 文字颜色 */
            color: #353535;
            /* 文字靠左 */
            text-align: left;
            /* 文字大小,em为相对单位1em=font-size*1 */
            font-size: 1em;
        }

        /* 禁用无序列表圆点 */
        li {
            list-style: none;
        }

        .page a {
            /* 禁用下滑线 */
            text-decoration: none;
        }

        /* a标签默认效果 */
        a {
            color: #65b4ff;
        }

        /* a标签悬停效果 */
        a:hover {
            color: #4299ec;
        }

        /* 底部 */
        .footer {
            /* 盒子高度 */
            height: 100px;
            /* 上下左右间距 */
            margin: 50px 100px;
            /* 盒子背景颜色 */
            background-color: rgba(255, 255, 255, 0.8);
            /* 盒子圆角 */
            border-radius: 50px;
        }

        /* 和上面一样的 */
        .footer:hover {
            box-shadow: 10px 10px 20px 0px rgba(0, 0, 0, .3);
        }

        .footer h2 {
            display: inline-block;
            /* 左右50px间距 */
            margin: 35px 50px;
            /* 文字靠左对齐 */
            text-align: left;
            /* 文字颜色 */
            color: #353535;
            font-size: 1.5em;
        }
    </style>
</head>

<body>
    <!-- 导航栏 -->
    <div class="nav">
        <a href="/nav/"><img src="https://fl.goojoe.cc/img/logo.png"></a>
        <a href="/nav/" target="_blank">🗂️首页</a>
        <a href="https://goojoe.cc" target="_blank">📟博客</a>
        <a href="https://goojoe.cc/about" target="_blank">👋关于</a>
        <a href="https://goojoe.cc/links" target="_blank">🔗小伙伴</a>
        <a href="https://goojoe.cc/leaving" target="_blank">💬留言</a>
    </div>

    <!-- 正文 -->
    <div class="page">
        <h1>首页</h1>
        <p>Hi,我是咕咕乔,很高兴可以在茫茫人海中认识你</p>
        <h2>找到我</h2>
        <ul>
            <li>
                <p><a href='https://space.bilibili.com/43143228' target="_blank">bilibili</a></p>
            </li>
            <li>
                <p><a href='https://github.com/Goojoe' target="_blank">Github</a></p>
            </li>
            <li>
                <p><a href='https://goojoe.cc/feed' target="_blank">博客RSS</a></p>
            </li>
            <li>
                <p><a href='mailto://goojoer@gmail.com' target="_blank">Mail(邮箱)</a></p>
            </li>
            <li>
                <p><a href='https://www.penpalworld.com/profile.asp?uid=11988416' target="_blank">Penpal(笔友)</a></p>
            </li>
            <li>
                <h2>即时通讯</h2>
            <li>
                <p>QQ:1162943921</p>
            </li>
            <li>
                <p><a href='https://t.me/Goojoe' target="_blank">Telegram</a></p>
            </li>

            </li>
        </ul>
        <h2 id='技术'>技术</h2>
        <p>你不会真的以为我会有啥技术吧... ╮(╯▽╰)╭</p>
        <p>如果Git也算的话,那姑且算一个Git吧</p>
    </div>
    <!-- 底部 -->
    <div class="footer">
        <h2>©咕咕乔|2022/04/14</h2>
    </div>
</body>

</html>

更新日志

  • 增加导航图标
  • 增加Favicon
  • 增加LOGO
  • 增加正文