简书导航栏实现
效果图
简书官网效果图图
实现效果图
未实现的功能
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>
