当前位置 博文首页 > 向往的那片海洋：超好看的导航页面（静态页面）

最大化 缩小

    向往的那片海洋：超好看的导航页面（静态页面）

    作者：[db:作者] 时间：2021-08-20 21:43

    可通过此链接查看：http://project_almanac.gitee.io/mayday-navigation/

    页面效果

    在这里插入图片描述

    代码部分

    结构层：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>蚍蜉导航</title>
    <link rel="icon" href="image/adp5r-ajqx6-001.ico">
    <link rel="stylesheet" href="style/style.css">
    <link rel="stylesheet" href="swiper/swiper.css">
</head>
<body>
    <!-- 导航栏 -->
    <div class="head">
        <div class="top">
            <!-- logo 区域 -->
            <div class="logo_container">
                <a class="logo" href="#">
                    <img src="image/logo2.png">
                  
                </a>
            </div>
            <!-- 列表 -->
            <div class="list">
                <ul class="list_ul">
                    <li class="list_li">
                        <a href="#" class="menu">首页导航</a>
                    </li>
                    <li class="list_li">
                        <a href="https://www.louisx.top/" target="_blank" class="menu">个人博客</a>
                    </li>
                    <li class="list_li">
                        <a href="#" class="menu">关于本站</a>
                    </li>
                    <li class="list_li">
                        <a href="#" class="menu">有待开发 ...</a>
                    </li>
                </ul>
            </div>
            <div class="search">
                <form action="http://www.baidu.com/baidu" target="_blank">
                    <input class="search_input" type=text name=word size=30>
                    <div class="search_baidu">
                        <input class="search_key" type="submit" value="百度">
                    </div>
                </form>
            </div>
        </div>
    </div>
    <!-- 内容区 -->
    <div class="container ">
        <div class="container_lunbo swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <a target="_blank" href="#">
                        <img class="swiper-slide_img" src="image/logo.png">
                    </a>
                </div>
                <div class="swiper-slide">
                    <a target="_blank" href="http://www.change.tm">
                        <img class="swiper-slide_img" src="image/change.png" >
                    </a>
                </div>
                <div target="_blank" class="swiper-slide">
                    <a href="#">
                        <img class="swiper-slide_img" src="image/smartisan.png" >
                    </a>
                </div>
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>                
            <!-- 如果需要导航按钮 -->
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>    
        </div>
        <div class="container_row">
            <div class="row">
                <div class="row_one">
                    <div class="row_xs">
                        <strong class="xs_title">常用 . 工作</strong>
                    </div>
                    <div class="link_list">
                        <a target="_blank" class="link_list_a" href="https://docs.qq.com/desktop?_from=1">腾讯文档</a>
                    </div>
    上一篇：向往的那片海洋：CSS 实现毛玻璃效果
    下一篇：没有了