欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

简书导航栏实现

程序员文章站 2022-03-07 22:57:25
效果图 简书官网效果图图 实现效果图 未实现的功能 1.响应式布局未完成 2.个人二级菜单图标未完成 3.导航中消息数量提示未完成 实现步骤 1.css 2.html ......

效果图

简书官网效果图图

简书导航栏实现

实现效果图

简书导航栏实现

未实现的功能

1.响应式布局未完成
2.个人二级菜单图标未完成
3.导航中消息数量提示未完成

实现步骤

1.css

*{
    padding: 0px;
    margin: 0px;
}
ul,li{
   list-style: none
}
a{
    text-decoration: none;
}
.flex-v-h-center{
    display: flex;
    justify-content: center;
    align-items: center;
}
.height100{
    height: 100%;
}
#header{
    position: fixed;
    top: 0px;
    right: 0;
    left: 0;
    z-index: 9999;
    background-color: #fff;
    border-color: #f0f0f0;
    border-bottom: 1px #ebebeb solid;
}
.header-inner{
    min-width: 768px;
    max-width: 1440px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
}
nav .logo{
    height: 58px;
}
.flex-layout{
    display: flex;
}
nav .write-btn{
    width: 100px;
    height: 40px;
    line-height: 24px;
    margin: 8px 12px 0;
    border-radius: 20px;
    font-size: 15px;
    color: #fff;
    background-color: #ea6f5a;
    text-align: center;
}

.header-inner .container{
    flex: 1;
    margin-left: 106px;
    display: flex;
}

.dropdown-menu{
    display: none;
}
.dropdown img{
    width: 40px;
    height: 40px;
    border-radius: 100px;
    border: 1px #e0e0e0 solid;
}
.dropdown{
    display: flex;
    position: relative;
}
.right-box .user{
    position: relative;
}
.dropdown a::after{
    content: "";
    position: absolute;
    top: 18px;
    right: -14px;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid #999;
}
.right-item{
    margin-right: 23px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.dropdown-menu li{
    line-height: 31px;
    padding: 0px 15px;
    padding: 10px 28px 4px 20px;
}
.dropdown-menu li a{
    color: #000000;
}
.dropdown-menu li:hover{
    background: #fafafa
}
.right-box .user:hover .dropdown-menu {
    display: block;
    position: absolute;
    background: #ffffff;
    top: 50px;
    white-space: nowrap;
    box-shadow: 0px 3px 3px #d9d9d9;
    padding: 10px 0px;
    border-radius: 2px;

}

.jianshu a img{
    height: 25px;
}
.mode label{
    font-weight: 500;
    color: #818184;
    font-size: 21px;
}

.nav-ul li{
    height: 100%;
    padding: 0px 11px;
}
.nav-ul li:hover{
    background: #fafafa;
}
.nav-ul .nav-item span{
    color: #000;
    margin: 0 6px;

}
.secrch form{
    display: flex;
    position: relative;
}
.secrch{
    align-self: center;
    margin: 0 17px;
}
.secrch input{
    padding: 0 40px 0 20px;
    width: 160px;
    height: 38px;
    font-size: 14px;
    border: 1px solid #eee;
    border-radius: 40px;
    background: #eee;
    outline: none;
    transition: width 0.4s;
}
.secrch input:focus{
    width: 270px
}
.search-img{
    position: absolute;
    align-self: center;
    right: 7px;
}

2.html

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

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>简书</title>
    <link rel="stylesheet" href="css/index.css">
</head>

<body>
    <header id="header">
        <nav>
            <div class="header-inner">
                <a class="logo" href="/"><img class="height100"
                        src="https://cdn2.jianshu.io/assets/web/nav-logo-4c7bbafe27adc892f3046e6978459bac.png"
                        alt="nav logo"></a>
                <div class="container">
                    <ul class="nav-ul flex-layout height100 ">
                        <li class="flex-v-h-center">
                            <a href="">
                                <div class="nav-item flex-v-h-center">
                                    <i><svg t="1560917977828" class="icon" style="" viewbox="0 0 1024 1024"
                                            version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5216"
                                            xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20">
                                            <defs>
                                                <style type="text/css"></style>
                                            </defs>
                                            <path
                                                d="m513.16508445 951.23683555c-9.32067555 0-18.05880889-0.58254222-27.37948445-1.16508444h-1.74762667c-43.10812445-2.91271111-84.46862222-11.65084445-122.91640888-25.63185778-121.16878222-46.60337778-207.96757333-131.072-257.48366223-251.07569778-15.72864-39.61287111-25.63185778-81.55591111-29.12711111-125.24657777 0-2.33016889-0.58254222-4.66033778-0.58254222-6.99050667 0-2.91271111-0.58254222-5.24288-0.58254222-8.15559111l-0.58254222-6.99050667v-27.37948444l0.58254222-5.82542222c0-3.49525333 0.58254222-6.99050667 1.16508444-10.48576 0.58254222-3.49525333 1.16508445-7.57304889 1.16508444-11.06830222 0.58254222-3.49525333 0.58254222-6.40796445 1.16508445-9.90321778 1.16508445-12.23338667 2.33016889-25.63185778 5.24288-37.86524445 13.98101333-69.32252445 43.69066667-131.65454222 87.38133333-185.83096889 47.18592-58.83676445 107.18776889-103.69251555 177.09283556-132.23708444 41.94304-17.47626667 86.21624889-27.96202667 131.072-30.87473778 2.91271111-0.58254222 5.24288-0.58254222 8.15559111-0.58254222 2.33016889 0 5.24288-0.58254222 7.57304889-0.58254222l6.99050666-0.58254222h29.12711112c1.16508445 0 1.74762667 0.58254222 2.33016888 0.58254222 40.77795555 1.74762667 79.80828445 8.73813333 117.09098667 20.97152 80.97336889 26.79694222 149.13080889 73.40032 202.72469333 138.64504888 57.08913778 69.32252445 90.29404445 150.29589333 98.44963556 240.58993778 3.49525333 43.69066667 1.16508445 85.63370667-6.99050666 125.24657778-8.73813333 46.02083555-26.2144 92.04167111-51.84625778 136.31488-41.94304 70.48760889-99.03217778 125.82912-170.10232889 164.27690667-65.82727111 34.36999111-135.73233778 51.84625778-207.96757333 51.84625777z m-1.16508445-821.38453333c-210.88028445 0-382.14769778 171.84995555-382.14769778 382.73024 0 101.94488889 39.61287111 198.06435555 111.84810667 270.29959111 72.23523555 72.23523555 168.35470222 112.43064889 270.29959111 112.43064889 210.88028445-0.58254222 382.73024-172.43249778 382.73024-382.73024-0.58254222-210.88028445-172.43249778-382.73024-382.73024-382.73024z"
                                                p-id="5217" fill="#333000"></path>
                                            <path
                                                d="m292.38158222 758.99790222c-9.32067555-0.58254222-17.47626667-5.24288-22.71914667-13.39847111-5.24288-8.15559111-5.82542222-18.64135111-1.74762666-27.96202666 4.66033778-10.48576 9.90321778-21.55406222 14.56355556-32.03982223l0.58254222-1.74762667c4.66033778-10.48576 9.32067555-20.38897778 13.98101333-30.87473777l34.36999111-75.73048889c23.88423111-51.84625778 47.76846222-104.8576 70.48760889-155.53877334 4.07779555-9.32067555 10.48576-16.31118222 20.38897778-20.38897777 32.62236445-14.56355555 64.66218667-29.12711111 97.28455111-44.27320889l8.73813333-4.07779556c35.53507555-15.72864 70.48760889-32.03982222 106.02268445-47.76846222l82.13845333-37.28270222c4.66033778-2.33016889 9.32067555-3.49525333 14.56355555-3.49525334 13.39847111 0 24.46677333 8.73813333 27.37948445 22.13660445 1.16508445 6.40796445 0.58254222 13.39847111-3.49525333 20.97152-26.79694222 58.25422222-55.34151111 121.75132445-89.71150222 198.06435555l-31.45728 69.32252445-4.07779556 9.32067555c-2.91271111 6.40796445-5.82542222 12.81592889-8.73813334 19.80643556-3.49525333 8.15559111-9.32067555 13.39847111-16.31118222 16.89372444-44.85575111 20.38897778-89.71150222 40.77795555-135.14979555 61.16693334-26.79694222 12.23338667-54.17642667 24.46677333-81.55591111 36.70016-27.37948445 12.23338667-54.75896889 25.04931555-81.55591112 37.28270222h-0.58254222c-0.58254222 0.58254222-1.74762667 0.58254222-3.49525333 1.16508444l-3.49525333-9.90321777 2.91271111 9.90321777-3.49525333 1.16508445h294.71175111l-1.16508444 0.58254222h-1.16508445z m121.16878223-225.44384c-9.90321778 22.13660445-19.80643555 43.69066667-29.70965334 65.82727111l-33.20490666 72.81777778 2.33016888-1.16508444h1.16508445l18.64135111-8.73813334c52.4288-23.88423111 111.84810667-50.68117333 170.10232889-77.47811555l-104.8576-104.8576c-6.99050667 15.14609778-24.46677333 53.59388445-24.46677333 53.59388444z m171.84995555 9.90321778c10.48576-22.71914667 20.38897778-44.85575111 30.29219555-67.57489778l58.25422223-125.82912-15.14609778 6.40796445c-32.62236445 14.56355555-65.24472889 29.70965333-97.86709333 44.27320888 0 0-55.34151111 25.04931555-81.55591112 36.70016l106.02268445 106.02268445z"
                                                p-id="5218" fill="#333000"></path>
                                        </svg></i>
                                    <span>发现</span>

                                </div>
                            </a>
                        </li>
                        <li class="flex-v-h-center">
                            <a href="">
                                <div class="nav-item flex-v-h-center">
                                    <i><svg t="1560918348682" class="icon" style="" viewbox="0 0 1024 1024"
                                            version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7667"
                                            xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20">
                                            <defs>
                                                <style type="text/css"></style>
                                            </defs>
                                            <path
                                                d="m931.1 264h-69.6v-19.7l-23.7-9.3c-4.7-1.9-117.3-45.6-215.8-45.6-46.1 0-83 9.5-110.2 28.3-27.2-18.8-64.1-28.3-110.2-28.3-98.5 0-211.1 43.7-215.8 45.6l-23.6 9.3v264h94c-15.4 0-28 12.5-28 28v515c0 15.4 12.5 28 28 28h837.1c15.4 0 28-12.5 28-28v292c-0.1-15.5-12.6-28-28-28z m-106.9 5.7v408.7c-57.7-19.8-211.1-64.6-293.8-16.3v250.5c23.3-17.4 56.2-23.8 91.6-23.8 92.5-0.1 202.2 43 202.2 43z m-42.3 434.1h536.2c47.9-45.4 166.7-23.6 245.7 0zm401.5 226.6c35.4 0 68.3 6.4 91.6 23.8v662c-82.8-48.3-236.1-3.5-293.8 16.3v269.7s109.6-43.1 202.2-43.1z m85.7 477.2h241.4c79.1-23.6 197.9-45.5 245.8 0zm903.1 779h122v319.9h40v421.2h699.6v319.9h41.7v779z"
                                                fill="#333000" p-id="7668"></path>
                                        </svg></i>
                                    <span>消息</span>

                                </div>
                            </a>
                        </li>
                        <li class="flex-v-h-center">
                            <a href="">
                                <div class="nav-item flex-v-h-center">
                                    <i><svg t="1560918376668" class="icon" style="" viewbox="0 0 1024 1024"
                                            version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8513"
                                            xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20">
                                            <defs>
                                                <style type="text/css"></style>
                                            </defs>
                                            <path
                                                d="m69.917767 773.739163v4.357953c0.500093-3.929302 1.476465-5.405767 2.500466-6.429767a18.360558 18.360558 0 0 0-2.500466 2.976744 12.04986 12.04986 0 0 0-1.57172 3.453023 15.312372 15.312372 0 0 0-0.500094 4.096h11.906977l-10.168558-6.191628c62.106791 789.194419 59.534884 800.720372 59.534884 814.98493c0 47.246884 38.221395 85.706419 84.587163 85.706419h208.467348c17.574698 69.346233 82.967814 120.927256 157.02921 120.927256 76.252279 0 139.787907-49.93786 157.100651-120.927256h208.372093c46.389581 0 84.610977-38.459535 84.610977-85.706419 0-11.740279-2.190884-19.837023-8.358698-35.244651a11.668837 11.668837 0 0 0-1.500279-4.977116c-1.071628-2.143256-1.524093-2.619535-4.048372-5.143814l-89.921489-106.567442v-176.00893c0-161.506233-109.972837-301.413209-261.096186-339.968 6.429767-12.930977 9.811349-26.719256 9.811349-41.269582c604.588651 54.105302 561.842605 11.906977 509.618605 11.906977s-94.970047 42.198326-94.970047 93.898418c0 14.597953 3.381581 28.43386 9.858977 41.388652a350.160372 350.160372 0 0 0 163.363721 487.042977v176.00893l69.917767 773.739163z m824.034233 35.316093c0.309581 1.095442 0.404837 2.667163 0.404837 5.953488 0 11.621209-8.97786 20.861023-19.241674 20.861023h144.122047c-10.263814 0-19.241674-9.239814-19.241675-20.884837 0-3.262512 0.095256-4.834233 0.404837-5.929674l221.660279 697.748837c3.953116-3.834047 7.04893-13.050047 7.04893-20.075163v-188.582697c0-157.600744 125.690047-285.291163 280.909396-285.291163s280.909395 127.690419 280.909395 285.291163v188.582697c0 8.858791 1.333581 14.336 7.334698 20.408559l96.089302 110.973023z"
                                                fill="#333000" p-id="8514"></path>
                                        </svg></i>
                                    <span>消息</span>

                                </div>
                            </a>
                        </li>
                    </ul>
                    <div class="secrch">
                        <form action="">
                            <input type="text" placeholder="搜索" name="" id="">
                            <div class="search-img">
                                <i><svg t="1560920711254" class="icon" style="" viewbox="0 0 1024 1024" version="1.1"
                                        xmlns="http://www.w3.org/2000/svg" p-id="11828"
                                        xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16">
                                        <defs>
                                            <style type="text/css"></style>
                                        </defs>
                                        <path
                                            d="m704 649.6c29.196-35.146 51.045-74.405 64.572-117.62 10.516-33.594 16.002-69.577 16.002-107.878 0-199.076-161.184-360.435-360.045-360.435-198.826 0-360.049 161.359-360.049 360.435 0 199.04 161.223 360.437 360.05 360.437 87.494 0 162.668-28.591 225.07-80.539l228.603 228.41c15.131 15.117 39.922 14.806 54.399 0.281 14.913-14.962 14.673-39.438-0.352-54.487l704 649.6zm115.2 422.4c0-169.394 137.787-307.2 307.2-307.2 169.376 0 307.2 137.806 307.2 307.2 0 169.395-137.824 307.2-307.2 307.2-169.411 0-307.2-137.805-307.2-307.2z"
                                            fill="#8a8a8a" p-id="11829"></path>
                                    </svg></i>
                            </div>
                        </form>
                    </div>
                </div>
                <div class="right-box flex-layout">
                    <div class="mode right-item">
                        <label for="">aa</label>
                    </div>
                    <div class="jianshu right-item">
                        <a class=""><img
                                src="https://cdn2.jianshu.io/assets/web/nav_jsds_beta-eeb44d165b8ba37680fdb7e65ae17ae4.png"
                                class=""></a>
                    </div>
                    <div class="user right-item">
                        <div class="dropdown">
                            <a class="avatar" href=""><img
                                    src="http://upload.jianshu.io/users/upload_avatars/6481861/35e9a803-bcdc-477f-ac76-79ff2697f7fd.jpg?imagemogr2/auto-orient/strip|imageview2/1/w/120/h/120"
                                    alt="120"></a>
                        </div>
                        <ul class="dropdown-menu">
                            <li>
                                <a href="">
                                    <i class="iconfont "></i><span>我的主页</span>
                                </a> </li>
                            <li>
                                
                                <a href="/bookmarks">
                                    <i class="iconfont"></i><span>收藏的文章</span>
                                </a> </li>
                            <li>
                                <a href="/users/b0be6834c0e1/liked_notes">
                                    <i class="iconfont"></i><span>喜欢的文章</span>
                                </a> </li>
                            <li>
                                <a href="/my/paid_notes">
                                    <i class="iconfont ic-paid"></i><span>已购内容</span>
                                </a> </li>
                            <li>
                                <a href="/wallet">
                                    <i class="iconfont"></i><span>我的钱包</span>
                                </a> </li>
                            <li>
                                <a href="/settings">
                                    <i class="iconfont"></i><span>设置</span>
                                </a> </li>
                            <li>
                                <a href="/faqs">
                                    <i class="iconfont"></i><span>帮助与反馈</span>
                                </a> </li>
                            <li>
                                <a  href="/sign_out">
                                    <i class="iconfont "></i><span>退出</span>
                                </a> </li>
                        </ul>
                    </div>
                    <a class="write-btn flex-v-h-center" href="">
                        <i><svg t="1560915145487" class="icon" style="" viewbox="0 0 1024 1024" version="1.1"
                                xmlns="http://www.w3.org/2000/svg" p-id="2076"
                                xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20">
                                <defs>
                                    <style type="text/css"></style>
                                </defs>
                                <path
                                    d="m440.884637 459.164925c-8.08146 13.873751-16.058866 27.470026-23.758798 41.413146a1202.437973 1202.437973 0 0 0-56.570218 118.377777c-7.803985 18.729563-16.093551 37.251021-24.279064 55.841847l1.595481 2.185116a398.419436 398.419436 0 0 1 51.818459-19.319198c4.959866-1.456744 6.936875-5.133288 9.156676-8.844516a627.787219 627.787219 0 0 1 41.517199-58.477859c6.763453-8.601725 16.232288-15.05302 21.365576-26.290758a71.276394 71.276394 0 0 0-27.747502 10.093154c-2.705381 1.491428-5.202657 3.468438-7.942722 4.786444a3.988703 3.988703 0 0 1-4.890497-0.589635c-1.526113-1.595481-0.763056-3.295016 0.450897-4.647706a60.871081 60.871081 0 0 1 5.618869-5.618869 358.601771 358.601771 0 0 1 38.152814-28.822717c4.162125-2.670697 9.43415-4.404916 12.070163-9.919732a14.844913 14.844913 0 0 0-9.676941 0.728372c-6.173819 2.358538-12.278269 4.890497-18.452088 7.249035-3.468438 1.352691-7.942722 5.063919-10.578735 0.624318s2.566644-6.936875 5.237341-9.642256a85.774464 85.774464 0 0 1 7.977406-6.936876 165.409793 165.409793 0 0 1 28.649296-19.111091c10.405313-5.30671 18.764248-12.139532 23.307901-23.620061a135.824019 135.824019 0 0 1 12.625113-21.781789c7.249035-11.445844 14.775544-22.752951 23.273217-35.828961a364.185956 364.185956 0 0 0-85.635726 23.724114c-6.694085 2.705381-9.919732 8.740463-13.284117 14.428701zm326.460878 699.805131a333.524967 333.524967 0 0 1 45.852746-16.058867c12.52106-3.017541 13.07601-4.19681 15.261126-18.833616a351.734265 351.734265 0 0 0-49.390552 18.382719 17.51561 17.51561 0 0 0-11.72332 16.509764zm457.463769 434.920545c4.266178 0.624319 7.283719-1.456744 10.405313-2.46259 21.816473-6.936875 43.632946-13.873751 66.351213-16.71787 11.237738-1.352691 16.856607-6.936875 22.198001-16.71787a528.589902 528.589902 0 0 0-79.323169 17.342189 27.331289 27.331289 0 0 0-19.631358 18.556141zm327.015828 707.054165c-6.10445 2.913488-8.913885 7.977407-11.65395 13.873751-17.342188 36.418596-30.834411 74.397988-46.997331 111.267481a4.404916 4.404916 0 0 0 0 4.959865c0.797741 0 1.872956 0 2.393222-0.416212 23.342586-19.804779 49.113077-36.279858 73.77367-54.315734a25.631754 25.631754 0 0 0 10.405313-17.689032c3.88465-22.475476 11.445844-43.771683 19.492619-64.894469 1.179269-3.08691 4.023388-5.896344 2.289169-10.093154-17.897138 2.670697-33.782583 9.74631-49.702712 17.307504zm720.510083 178.325526c-18.278667 2.913488-36.626702 5.341394-54.731947 9.503519a36.037067 36.037067 0 0 0-19.076407 10.717473c-25.701123 26.915076-50.708559 54.350418-75.889416 81.716391-36.730755 39.852349-67.565166 83.936192-96.942833 130.170466a658.378839 658.378839 0 0 1 82.652869-18.001191 25.770492 25.770492 0 0 0 15.365179-8.913885c22.787636-24.001589 43.945105-49.945503 74.189882-65.553472 0.971163-0.520266 2.427906-1.179269 1.595481-4.023388-17.134082-0.242791-34.684377-1.283322-52.026565 1.005847a111.371534 111.371534 0 0 1-11.862056 0.659003 4.162125 4.162125 0 0 1-4.127441-2.809434 3.815281 3.815281 0 0 1 2.185115-4.370232q5.237341-2.809435 10.405313-5.480131c17.342188-8.63641 34.406902-17.342188 52.304041-24.938067-14.220594 0.901794-28.233083 2.462591-42.280256 3.780597-2.358538 0.208106-5.792291 1.352691-6.728769-2.115747s2.150431-4.543653 4.613022-5.30671c28.579926-8.844516 55.044106-24.48717 85.73978-26.464179a7.630563 7.630563 0 0 0 7.353088-4.543653c10.197207-21.504314 21.018732-42.696468 32.742051-62.952144a5.341394 5.341394 0 0 0-5.480131-2.081063z"
                                    fill="#ffffff" p-id="2077"></path>
                                <path
                                    d="m841.523873 0.429358a552.487437 552.487437 0 0 1-65.900316 14.18591c-24.279064 3.156278-46.962646 12.451691-70.894866 16.509763a28.718664 28.718664 0 0 0-23.37727 18.729564 130.413257 130.413257 0 0 0-5.584184 14.879597c-3.052225 10.613419-5.410763 21.469629-8.63641 32.01368-2.705381 8.844516-6.173819 17.342188-9.538204 26.117336a3.988703 3.988703 0 0 1-5.202656 2.878803c-1.942325-0.693688-2.2198-2.636013-2.185116-4.370231 0.346844-10.405313-2.115747-20.810626-0.55495-31.666836 1.803588-12.312954 0.416213-25.076804 0.416212-38.67308-20.60252 12.52106-39.401452 25.631754-58.96344 37.56318a56.431481 56.431481 0 0 0 563.459225 126.957964c-0.277475 1.283322-0.485581 2.601328-0.832425 3.88465q-7.699932 28.822717-15.399864 57.61075c-0.659003 2.497275-1.075216 5.757607-4.68239 5.029235-2.323853-0.450897-3.121594-3.017541-3.190963-5.30671v-9.295413c-0.589634-8.358935 2.393222-16.683185 0.242791-26.533548-4.682391 9.260729-4.925181 18.348035-8.012091 26.533548s-1.803588 17.966507-11.515214 26.811023c-1.318006-21.989895 2.566644-41.621252-0.624318-61.599453-15.261126 11.723319-30.106039 21.365576-43.008628 33.609161a597.958655 597.958655 0 0 0 410.15428 250.087502a35.759592 35.759592 0 0 0-7.28372 22.128632 208.314367 208.314367 0 0 0 3.468438 35.551486c0.450897 2.913488 1.66485 6.624716-2.497275 7.734616-3.260331 0.901794-4.266178-2.358538-5.618869-4.543653a143.801426 143.801426 0 0 1-14.844913-31.215939l365.758277 299.824898c-42.55773 48.350021-74.085829 103.428811-99.682898 162.21883a156.079695 156.079695 0 0 0-9.850363 97.324361 258.918872 258.918872 0 0 1 3.468437 27.747502c0.208106 2.185116 0 4.578338-2.809434 5.341394a4.99455 4.99455 0 0 1-4.821129-1.42206 44.77753 44.77753 0 0 1-10.85621-15.261126c-3.954019-8.601725-8.532357-16.925976-12.867903-25.388963a111.198112 111.198112 0 0 0 0.416212 29.412351c2.844119 22.579529 2.948172 22.544845-0.901794 28.857401-9.43415-10.127838-8.775147-25.354279-18.001191-36.522648a284.619996 284.619996 0 0 0 175.757261 645.142553a13.873751 13.873751 0 0 0 0.416213 10.405313c6.936875 15.226441 13.041326 30.834411 23.030426 44.708161 17.342188 24.070957 33.470424 48.904971 43.771684 77.068686 4.058072 11.029632 9.260729 21.643051 14.98365 34.857798 2.358538-5.722922 3.745913-8.913885 4.994551-12.2089 16.301657-42.072149 32.429892-84.283035 52.477462-124.863757 40.788827-81.993867 82.999714-163.467468 133.326744-240.189309 32.048364-48.835602 64.096728-97.775258 102.735124-141.893785 45.08969-51.332878 92.607286-100.133796 139.292457-149.836507a1237.503878 1237.503878 0 0 1 123.580434-112.758909c11.584582-9.399466 22.926373-19.076407 34.684377-28.857402a8.358935 8.358935 0 0 0-7.52651-1.144584z"
                                    fill="#ffffff" p-id="2078"></path>
                                <path
                                    d="m664.217339 181.065592c20.04757-2.878803 37.112283-7.838669 54.801315-8.150829a18.590826 18.590826 0 0 0 736.881108 161.989185c28.68398-51.853143 65.345366-97.705889 106.134193-140.437042a18.313351 18.313351 0 0 0 6.000397-10.405313c783.496911 62.445024 720.128554 115.928332 664.217339 181.065592zm268.22581 820.957659c1.491428-3.468438 4.543653-12.208901 4.99455-13.249432 10.717472-26.533548 73.704301-171.999824 86.710942-209.042739-19.73541 22.857004-100.029743 215.043136-102.353596 220.662005 0-0.346844-7.873354-18.38272-10.682788-22.579529-0.971163-1.491428-18.868301-44.361318-40.268561-63.992676-2.046378-1.872956-3.468438-5.341394-7.52651-3.052225 0 5.202657 4.231494 7.699932 6.936875 10.994948a200.441013 200.441013 0 0 1 39.158662 76.305629 25.111489 25.111489 0 0 1-3.260332 22.544844c-5.757607-12.000794-11.099001-23.030426-16.40571-34.094742a92.364495 92.364495 0 0 0-20.116938-29.412351c-2.185116-1.977009-4.543653-4.578338-8.428304-1.005847 18.105245 16.821923 25.735808 39.817665 35.828961 61.356662 3.88465 8.32425 6.10445 17.342188-1.595481 26.568233-1.456744-3.468438-2.705381-6.347241-3.711228-9.19136-3.017541-8.775147-5.688238-17.689032-9.017938-26.325442-1.942325-4.959866-4.335547-10.405313-13.596276-10.786841 11.099001 14.289963 12.729166 30.001986 18.243982 44.291949a30.106039 30.106039 0 0 1-1.040531 25.458332 506.045057 506.045057 0 0 0-34.892483 98.399577c-3.468438 13.457538 1.456744 24.279064 7.144981 35.135274 1.213953 2.323853 2.948172 4.647706 6.208504 3.919334s2.809435-3.468438 3.260331-6.173819c6.41661-39.921718 20.463782-77.727688 32.429893-116.123293a56.917062 56.917062 0 0 1 5.618869-11.96611 128.644353 128.644353 0 0 1 49.355868-47.136068c2.878803-1.595481 6.936875-1.768903 8.150828-6.936875-10.613419-1.768903-17.342188 5.584185-24.279064 10.405313-7.803985 5.029235-14.74086 11.41116-22.995741 18.001191 0.242791-8.358935 15.434548-41.343777 16.128235-42.973942z"
                                    fill="#ffffff" p-id="2079"></path>
                            </svg></i>
                        写文章
                    </a>
                </div>
            </div>
        </nav>
    </header>
</body>

</html>