绳结网的小总结

本文主要是介绍绳结网的小总结，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

考虑到其他页面基本与主页大同小异，本篇文章主要剖析主要前端所用到的技术**

注释 :本文主要介绍前端的css技术少量的js，jQuery操作和极少量的bootstrap框架，后端使用了django简单的实现，项目还未上线。

接下来直奔主题

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

前端（正文）☕☕☕☕

header部分

html代码：

<header role="banner" title="欢迎来到绳结网"><span class="h3"><a href="mailto:ffrreeman@outlook.com">contact me</a> if you have any questions. Let's look through this website now!</span>
</header>

css代码：

body > header {display: grid;padding: 0 20px;grid-template-columns: 2fr 10fr 2fr;border-bottom: 1px solid #797480;height: 60px;background-color: #e2dde9;opacity: 0.6;
}body > header > span.h3 {grid-column: 2/3;text-align: center;font-size: 20px;line-height: 60px;
}header > span.h3 i {margin-left: 10px;
}header > span.h3 a {margin-left: 5px;color: #968059;text-decoration: none;
}header > span.h3 a:hover {text-decoration: underline;
}

亮点： 🌶🌶🌶

header部分我选择了grid网格模式，使用到了grid-template-columns属性将header设置为3部分，在使用grid-column进行分配，达到的效果和居中显示相同。另外的亮点是a标签的mailto属性，用于发送邮箱的需要。

nav部分

html代码：

<nav class="nav-banner" role="navigation"><div class="my-container"><div class="logo"><div class="logo-div"><img src="../static/img/svg/User%20Interface_user%20check.svg" alt="无法加载" style="margin-top: 10px; margin-right: 20px; margin-left: 10px"><img src="../static/video/fac_gif6.gif" height="40px" width="40px" alt="无法加载动图"></div></div><div class="main-nav"><div class="left-nav"><div class="container"><div class="row"><div class="col-md-2 relative-nav"><a href="" class="first-a">References<div class="absolute-box box1"><div class="small-box"><ul class="list"><li><div class="list-content"><span>HTML</span><p>Structure of content on the web</p></div></li><li><div class="list-content"><span>CSS</span><p>Code used to describe document style</p></div></li><li><div class="list-content"><span>JavaScript</span><p>General-purpose scripting language</p></div></li></ul></div></div></a></div><div class="col-md-2 relative-nav"><a href="" class="first-b">Guides<div class="absolute-box box2"><div class="small-box"><ul class="list"><li><div class="list-content"><span>HTML</span><p>Structure of content on the web</p></div></li><li><div class="list-content"><span>CSS</span><p>Code used to describe document style</p></div></li><li><div class="list-content"><span>JavaScript</span><p>General-purpose scripting language</p></div></li></ul></div></div></a></div><div class="col-md-2 relative-nav"><a href="" class="first-c">Plus<div class="absolute-box box3"><div class="small-box"><ul class="list"><li><div class="list-content"><span>HTML</span><p>Structure of content on the web</p></div></li><li><div class="list-content"><span>CSS</span><p>Code used to describe document style</p></div></li><li><div class="list-content"><span>JavaScript</span><p>General-purpose scripting language</p></div></li></ul></div></div></a></div><div class="col-md-2"><a href="">Blog</a></div><div class="col-md-2"><a href="">Play</a></div><div class="col-md-2"><a href="">Help</a></div></div></div></div><div id='this' class="right-nav"><div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel"><div class="carousel-indicators"><button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0"class="active" aria-current="true" aria-label="Slide 1"></button><button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1"aria-label="Slide 2"></button><button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2"aria-label="Slide 3"></button><button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="3"aria-label="Slide 4"></button></div><div class="carousel-inner"><div class="carousel-item active" data-bs-interval='500'><img src="../static/img/图片1.png" class="d-block w-100" alt="..."></div><div class="carousel-item" data-bs-interval='500'><img src="../static/img/图片2.png" class="d-block w-100" alt="..."></div><div class="carousel-item" data-bs-interval='500'><img src="../static/img/图片3.png" class="d-block w-100" alt="..."></div><div class="carousel-item" data-bs-interval='500'><img src="../static/img/图片4.png" class="d-block w-100" alt="..."></div></div><button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators"data-bs-slide="prev"><span class="carousel-control-prev-icon" aria-hidden="true"></span><span class="visually-hidden">Previous</span></button><button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators"data-bs-slide="next"><span class="carousel-control-next-icon" aria-hidden="true"></span><span class="visually-hidden">Next</span></button></div></div></div></div><div class="article-container">{% block breadcrumb %}<ul class="breadcrumb"><li class="breadcrumb-item"><a href="#">首页</a></li></ul>{% endblock %}</div></nav>

css部分：

.nav-banner {position: sticky;top: 0;
}.nav-banner > .my-container > div.logo > div{width: 120px;display: block;/*background-color: #2b669a;*/height: 60px;
}.nav-banner > .my-container > div.logo > div > svg{display: inline-block;margin: 10px 20px 10px 10px;
}.nav-banner > .my-container > div.logo > div > img{/*background-color: #2b669a;*/
}.nav-banner > .my-container {background-color: #e3dbe6;display: flex;padding: 0 10px;justify-content: space-between;
}.nav-banner > .my-container > .main-nav {width: 1260px;background-color: #e3dbe6;display: flex;justify-content: space-between;height: 60px;
}.nav-banner > .my-container > .main-nav > .left-nav {width: 750px;background-color: #e3dbe6;padding-right: 100px;
}.nav-banner > .my-container > .main-nav > .left-nav .row div {text-align: center;padding-left: 0;/*line-height: 60px;*/
}.nav-banner > .my-container > .main-nav > .left-nav .row div a {text-decoration: none;color: #92909c;display: inline-block;width: 90px;line-height: 50px;margin: 5px 0;
}.nav-banner .main-nav .relative-nav{position: relative;
}.nav-banner .main-nav .relative-nav .absolute-box{position: absolute;height: 300px;width: 300px;/*z-index: 3;*//*background-color: #666666;*/box-shadow: 0 0 20px #78747a;display: none;background-color: white;z-index: 1000;
}.nav-banner .main-nav .relative-nav .absolute-box.box1{top:55px;left: 5px;
}.nav-banner .main-nav .relative-nav .absolute-box.box2{top:55px;left: 20px;
}.nav-banner .main-nav .relative-nav .absolute-box.box3{top:55px;left: 30px;
}.nav-banner .main-nav .relative-nav .absolute-box .list{list-style-type: none;
}.nav-banner .main-nav .relative-nav .absolute-box .list div{margin-top: 35px;margin-left: 20px;border-left: 2px solid #7a773e;font-size: 16px;height: 60px;text-align: left;padding-left: 10px;
}.nav-banner .main-nav .relative-nav .absolute-box .list div span{font-weight: bolder;color: #9f99aa;display: block;line-height: 30px;
}.nav-banner .main-nav .relative-nav .absolute-box .list div p{font-size: 12px;margin-top: 0;margin-bottom: 0;line-height: 30px;color: #d7cbd4;
}.nav-banner .main-nav .relative-nav .absolute-box .list div:hover{background-color: #edbde0;
}.nav-banner .main-nav .left-nav .row .relative-nav a.first-a:hover .box1{display: block;
}.nav-banner .main-nav .left-nav .row .relative-nav a.first-b:hover .box2{display: block;
}.nav-banner .main-nav .left-nav .row .relative-nav a.first-c:hover .box3{display: block;
}.nav-banner > .my-container > .main-nav > .left-nav .row div a:hover {background-color: #e461aa;color: cyan;border-radius: 5px 5px 5px 5px;
}.nav-banner > .my-container > .main-nav > .right-nav{height: 60px;width: 400px;
}.nav-banner > .my-container > .main-nav > .right-nav .carousel{background-color: white;
}#carouselExampleIndicators .carousel-item{width: 400px;
}.carousel-indicators{bottom: -20px;
}#carouselExampleIndicators img{height: 60px;
}/*article-container部分*/
.nav-banner > .article-container {height: 40px;box-shadow: 0 1px 4px #94959c;background-color: #f9f9fb;
}.breadcrumb{margin-left: 10px;
}.breadcrumb-item + .breadcrumb-item{padding-left: 1.5rem;
}.breadcrumb li a{line-height: 30px;color: #bdbd99;text-decoration: none;display: inline-block;margin-left: 1rem;
}.breadcrumb li a:hover{text-decoration: underline;
}

亮点: 🚒🚒🚒

首先是定位中的sticky属性，是fixed和relative的结合体，布局较为灵活，其中的top值表示离浏览器的顶部的距离。

使用了flex布局，其中左边为logo部分，设计了动图，用ps消除了动图的背景颜色。

使用了相对和绝对定位，用于hover时显示的内容。

右侧使用bootstrap框架的轮播，提供轮播效果。

其次是，使用breadcrumb，每个页面的breadcrumb都不一样，因此需要使用django的block来实现重写。注意面包屑的元素使用a链接。

并且添加了一些阴影的效果，box-shadow属性。

main部分

html部分

<div class="container"><p class="text-muted text-center h1">欢<span></span>迎<span></span>来<span></span>到<span></span>绳<span></span>结<span></span>网</p>
</div><main class="main-wrapper" role="main"><div class="sidebar-content"><aside class="sidebar" id="left-sidebar"><nav class="left-sidebar-nav"><header id="left-sidebar-header"><button class="btn btn-secondary btn-sm" type="button" id="left-sidebar-btn">目录栏</button></header><div class="inner-left-sidebar"><p id="inner-left-sidebar-header"><a href="" style="text-decoration: none; color: inherit">首页</a></p><ol><li><details><summary>固定类绳结</summary><ol><li><a href="/eight_knot/">8字结</a></li><li><a href="/bu_lin_knot/">布林结</a></li><li><a href="/hu_die_knot/">蝴蝶结</a></li><li><a href="/shuang_tao_knot">双套结</a></li></ol></details></li><li><details><summary>连接类绳结</summary><ol><li><a href="/ping_knot/">平结</a></li><li><a href="/shuang_yu_knot/">双渔人结</a></li><li><a href="/shui_knot/">水结</a></li></ol></details></li></ol></div></nav></aside>{% block right-sidebar %}<aside class="sidebar" id='right-sidebar'><nav><section id="right-sidebar-nav"><header><h4 style="text-align: center;margin-top: 3px">In this article</h4></header></section><ul class="main-nav-list"><li style="position: relative"><span class="absolute-pos"><svg t="1695265030176" class="icon" viewBox="0 0 1024 1024" version="1.1"xmlns="http://www.w3.org/2000/svg" p-id="1541" width="20" height="20"><path d="M896 256h42.688v42.688H896zM896 213.312h42.688V256H896zM938.688 256h42.688v42.688h-42.688z"fill="#F0E9B6" p-id="1542"></path><path d="M384 256h42.688v42.688H384zM426.688 256h42.688v42.688h-42.688z" fill="#DA8002"p-id="1543"></path><path d="M469.312 256H512v42.688h-42.688zM298.688 298.688h42.688v42.688h-42.688z"fill="#DA8002" p-id="1544"></path><path d="M341.312 298.688H384v42.688h-42.688z" fill="#DA8002" p-id="1545"></path><path d="M384 298.688h42.688v42.688H384zM426.688 298.688h42.688v42.688h-42.688z"fill="#F49F00" p-id="1546"></path><path d="M469.312 298.688H512v42.688h-42.688z" fill="#F49F00" p-id="1547"></path><path d="M512 256h42.688v42.688H512z" fill="#DA8002" p-id="1548"></path><path d="M512 298.688h42.688v42.688H512z" fill="#F49F00" p-id="1549"></path><path d="M554.688 256h42.688v42.688h-42.688z" fill="#DA8002" p-id="1550"></path><path d="M768 298.688h42.688v42.688H768z" fill="#F49F00" p-id="1551"></path><path d="M810.688 298.688h42.688v42.688h-42.688z" fill="#DA8002" p-id="1552"></path><path d="M682.688 384h42.688v42.688h-42.688zM682.688 426.688h42.688v42.688h-42.688z"fill="#F49F00" p-id="1553"></path><path d="M682.688 469.312h42.688V512h-42.688zM725.312 384H768v42.688h-42.688z"fill="#F49F00" p-id="1554"></path><path d="M725.312 426.688H768v42.688h-42.688z" fill="#F49F00" p-id="1555"></path><path d="M725.312 469.312H768V512h-42.688zM682.688 512h42.688v42.688h-42.688z"fill="#F49F00" p-id="1556"></path><path d="M725.312 512H768v42.688h-42.688z" fill="#DA8002" p-id="1557"></path><path d="M768 384h42.688v42.688H768z" fill="#F49F00" p-id="1558"></path><path d="M768 426.688h42.688v42.688H768z" fill="#DA8002" p-id="1559"></path><path d="M768 469.312h42.688V512H768zM682.688 554.688h42.688v42.688h-42.688z"fill="#DA8002" p-id="1560"></path><path d="M682.688 597.312h42.688V640h-42.688z" fill="#DA8002" p-id="1561"></path><path d="M725.312 597.312H768V640h-42.688zM682.688 640h42.688v42.688h-42.688z"fill="#DA8002" p-id="1562"></path><path d="M725.312 640H768v42.688h-42.688zM768 554.688h42.688v42.688H768z" fill="#DA8002"p-id="1563"></path><path d="M768 597.312h42.688V640H768zM768 640h42.688v42.688H768zM810.688 384h42.688v42.688h-42.688zM810.688 512h42.688v42.688h-42.688zM810.688 554.688h42.688v42.688h-42.688z"fill="#DA8002" p-id="1564"></path><path d="M810.688 597.312h42.688V640h-42.688z" fill="#DA8002" p-id="1565"></path><path d="M853.312 597.312H896V640h-42.688zM213.312 384H256v42.688h-42.688z"fill="#DA8002" p-id="1566"></path><path d="M256 384h42.688v42.688H256zM298.688 384h42.688v42.688h-42.688z" fill="#F49F00"p-id="1567"></path><path d="M341.312 384H384v42.688h-42.688zM384 384h42.688v42.688H384zM426.688 384h42.688v42.688h-42.688z"fill="#F49F00" p-id="1568"></path><path d="M213.312 426.688H256v42.688h-42.688z" fill="#DA8002" p-id="1569"></path><path d="M256 426.688h42.688v42.688H256zM426.688 426.688h42.688v42.688h-42.688z"fill="#F49F00" p-id="1570"></path><path d="M469.312 426.688H512v42.688h-42.688zM213.312 469.312H256V512h-42.688zM298.688 469.312h42.688V512h-42.688z"fill="#F49F00" p-id="1571"></path><path d="M426.688 469.312h42.688V512h-42.688zM512 384h42.688v42.688H512zM512 426.688h42.688v42.688H512z"fill="#F49F00" p-id="1572"></path><path d="M512 469.312h42.688V512H512z" fill="#F49F00" p-id="1573"></path><path d="M298.688 512h42.688v42.688h-42.688z" fill="#DA8002" p-id="1574"></path><path d="M384 512h42.688v42.688H384zM426.688 512h42.688v42.688h-42.688zM554.688 384h42.688v42.688h-42.688zM554.688 426.688h42.688v42.688h-42.688z"fill="#F49F00" p-id="1575"></path><path d="M597.312 384H640v42.688h-42.688zM597.312 426.688H640v42.688h-42.688z"fill="#F49F00" p-id="1576"></path><path d="M597.312 469.312H640V512h-42.688zM554.688 512h42.688v42.688h-42.688z"fill="#F49F00" p-id="1577"></path><path d="M597.312 512H640v42.688h-42.688zM213.312 554.688H256v42.688h-42.688zM298.688 554.688h42.688v42.688h-42.688zM426.688 554.688h42.688v42.688h-42.688z"fill="#F49F00" p-id="1578"></path><path d="M213.312 597.312H256V640h-42.688zM298.688 597.312h42.688V640h-42.688zM426.688 597.312h42.688V640h-42.688zM512 554.688h42.688v42.688H512z"fill="#F49F00" p-id="1579"></path><path d="M512 597.312h42.688V640H512zM213.312 640H256v42.688h-42.688zM256 640h42.688v42.688H256z"fill="#F49F00" p-id="1580"></path><path d="M298.688 640h42.688v42.688h-42.688z" fill="#DA8002" p-id="1581"></path><path d="M341.312 640H384v42.688h-42.688z" fill="#DA8002" p-id="1582"></path><path d="M384 640h42.688v42.688H384zM426.688 640h42.688v42.688h-42.688z" fill="#F49F00"p-id="1583"></path><path d="M469.312 640H512v42.688h-42.688zM512 640h42.688v42.688H512zM597.312 554.688H640v42.688h-42.688z"fill="#F49F00" p-id="1584"></path><path d="M597.312 597.312H640V640h-42.688zM554.688 640h42.688v42.688h-42.688z"fill="#F49F00" p-id="1585"></path><path d="M597.312 640H640v42.688h-42.688zM256 341.312h42.688V384H256z" fill="#DA8002"p-id="1586"></path><path d="M298.688 341.312h42.688V384h-42.688z" fill="#F49F00" p-id="1587"></path><path d="M341.312 341.312H384V384h-42.688zM384 341.312h42.688V384H384zM426.688 341.312h42.688V384h-42.688z"fill="#F49F00" p-id="1588"></path><path d="M469.312 341.312H512V384h-42.688zM554.688 341.312h42.688V384h-42.688z"fill="#F49F00" p-id="1589"></path><path d="M597.312 341.312H640V384h-42.688zM640 341.312h42.688V384H640zM640 384h42.688v42.688H640zM640 426.688h42.688v42.688H640z"fill="#F49F00" p-id="1590"></path><path d="M640 469.312h42.688V512H640zM640 512h42.688v42.688H640zM640 554.688h42.688v42.688H640z"fill="#F49F00" p-id="1591"></path><path d="M640 597.312h42.688V640H640zM640 640h42.688v42.688H640z" fill="#DA8002"p-id="1592"></path><path d="M682.688 341.312h42.688V384h-42.688z" fill="#F49F00" p-id="1593"></path><path d="M725.312 341.312H768V384h-42.688zM768 341.312h42.688V384H768z" fill="#F49F00"p-id="1594"></path><path d="M810.688 341.312h42.688V384h-42.688zM170.688 469.312h42.688V512h-42.688zM341.312 469.312H384V512h-42.688z"fill="#DA8002" p-id="1595"></path><path d="M469.312 469.312H512V512h-42.688zM170.688 512h42.688v42.688h-42.688zM256 512h42.688v42.688H256zM469.312 512H512v42.688h-42.688zM512 512h42.688v42.688H512zM554.688 469.312h42.688V512h-42.688zM170.688 554.688h42.688v42.688h-42.688zM256 554.688h42.688v42.688H256z"fill="#F49F00" p-id="1596"></path><path d="M341.312 554.688H384v42.688h-42.688z" fill="#DA8002" p-id="1597"></path><path d="M469.312 554.688H512v42.688h-42.688zM170.688 597.312h42.688V640h-42.688zM256 597.312h42.688V640H256zM341.312 597.312H384V640h-42.688z"fill="#F49F00" p-id="1598"></path><path d="M384 597.312h42.688V640H384z" fill="#DA8002" p-id="1599"></path><path d="M469.312 597.312H512V640h-42.688zM554.688 554.688h42.688v42.688h-42.688z"fill="#F49F00" p-id="1600"></path><path d="M554.688 597.312h42.688V640h-42.688z" fill="#F49F00" p-id="1601"></path><path d="M682.688 725.312h42.688V768h-42.688z" fill="#FFFFFF" p-id="1602"></path><path d="M725.312 725.312H768V768h-42.688zM768 725.312h42.688V768H768zM810.688 682.688h42.688v42.688h-42.688z"fill="#FFFFFF" p-id="1603"></path><path d="M810.688 725.312h42.688V768h-42.688zM896 640h42.688v42.688H896zM938.688 640h42.688v42.688h-42.688z"fill="#FFFFFF" p-id="1604"></path><path d="M853.312 682.688H896v42.688h-42.688zM896 682.688h42.688v42.688H896zM938.688 682.688h42.688v42.688h-42.688zM42.688 640h42.688v42.688H42.688z"fill="#FFFFFF" p-id="1605"></path><path d="M85.312 640H128v42.688h-42.688zM42.688 682.688h42.688v42.688H42.688z"fill="#FFFFFF" p-id="1606"></path><path d="M85.312 682.688H128v42.688h-42.688zM128 682.688h42.688v42.688H128zM170.688 682.688h42.688v42.688h-42.688z"fill="#FFFFFF" p-id="1607"></path><path d="M170.688 725.312h42.688V768h-42.688zM341.312 725.312H384V768h-42.688zM384 725.312h42.688V768H384zM426.688 725.312h42.688V768h-42.688z"fill="#FFFFFF" p-id="1608"></path><path d="M469.312 725.312H512V768h-42.688z" fill="#FFFFFF" p-id="1609"></path><path d="M384 768h42.688v42.688H384zM426.688 768h42.688v42.688h-42.688z" fill="#C7C8C8"p-id="1610"></path><path d="M469.312 768H512v42.688h-42.688z" fill="#C7C8C8" p-id="1611"></path><path d="M512 725.312h42.688V768H512z" fill="#FFFFFF" p-id="1612"></path><path d="M512 768h42.688v42.688H512z" fill="#C7C8C8" p-id="1613"></path><path d="M554.688 725.312h42.688V768h-42.688z" fill="#FFFFFF" p-id="1614"></path><path d="M597.312 768H640v42.688h-42.688z" fill="#C7C8C8" p-id="1615"></path><path d="M554.688 768h42.688v42.688h-42.688z" fill="#C7C8C8" p-id="1616"></path><path d="M597.312 725.312H640V768h-42.688zM640 725.312h42.688V768H640z" fill="#FFFFFF"p-id="1617"></path><path d="M640 768h42.688v42.688H640z" fill="#C7C8C8" p-id="1618"></path><path d="M213.312 725.312H256V768h-42.688zM256 725.312h42.688V768H256zM298.688 725.312h42.688V768h-42.688z"fill="#FFFFFF" p-id="1619"></path><path d="M341.312 768H384v42.688h-42.688z" fill="#C7C8C8" p-id="1620"></path><path d="M384 213.312h42.688V256H384zM426.688 213.312h42.688V256h-42.688z"p-id="1621"></path><path d="M469.312 213.312H512V256h-42.688zM298.688 256h42.688v42.688h-42.688z"p-id="1622"></path><path d="M341.312 256H384v42.688h-42.688zM256 298.688h42.688v42.688H256zM512 213.312h42.688V256H512zM554.688 213.312h42.688V256h-42.688zM554.688 298.688h42.688v42.688h-42.688zM597.312 256H640v42.688h-42.688z"p-id="1623"></path><path d="M597.312 298.688H640v42.688h-42.688zM682.688 298.688h42.688v42.688h-42.688z"p-id="1624"></path><path d="M725.312 298.688H768v42.688h-42.688zM768 256h42.688v42.688H768zM810.688 256h42.688v42.688h-42.688zM853.312 213.312H896V256h-42.688z"p-id="1625"></path><path d="M853.312 256H896v42.688h-42.688zM853.312 298.688H896v42.688h-42.688zM896 298.688h42.688v42.688H896zM938.688 298.688h42.688v42.688h-42.688zM768 512h42.688v42.688H768zM725.312 554.688H768v42.688h-42.688zM682.688 682.688h42.688v42.688h-42.688z"p-id="1626"></path><path d="M725.312 682.688H768v42.688h-42.688zM768 682.688h42.688v42.688H768zM725.312 768H768v42.688h-42.688zM768 768h42.688v42.688H768zM810.688 426.688h42.688v42.688h-42.688z"p-id="1627"></path><path d="M810.688 469.312h42.688V512h-42.688zM810.688 640h42.688v42.688h-42.688zM810.688 768h42.688v42.688h-42.688zM853.312 384H896v42.688h-42.688zM853.312 512H896v42.688h-42.688zM853.312 554.688H896v42.688h-42.688zM896 597.312h42.688V640H896z"p-id="1628"></path><path d="M853.312 640H896v42.688h-42.688zM938.688 597.312h42.688V640h-42.688zM853.312 725.312H896V768h-42.688zM896 725.312h42.688V768H896zM170.688 384h42.688v42.688h-42.688zM469.312 384H512v42.688h-42.688zM170.688 426.688h42.688v42.688h-42.688zM298.688 426.688h42.688v42.688h-42.688z"p-id="1629"></path><path d="M341.312 426.688H384v42.688h-42.688zM384 426.688h42.688v42.688H384z"p-id="1630"></path><path d="M384 469.312h42.688V512H384zM213.312 512H256v42.688h-42.688zM128 554.688h42.688v42.688H128zM384 554.688h42.688v42.688H384zM42.688 597.312h42.688V640H42.688z"p-id="1631"></path><path d="M128 597.312h42.688V640H128zM128 640h42.688v42.688H128zM170.688 640h42.688v42.688h-42.688zM213.312 682.688H256v42.688h-42.688zM256 682.688h42.688v42.688H256zM298.688 682.688h42.688v42.688h-42.688z"p-id="1632"></path><path d="M341.312 682.688H384v42.688h-42.688zM384 682.688h42.688v42.688H384zM426.688 682.688h42.688v42.688h-42.688z"p-id="1633"></path><path d="M469.312 682.688H512v42.688h-42.688zM512 682.688h42.688v42.688H512zM554.688 682.688h42.688v42.688h-42.688z"p-id="1634"></path><path d="M597.312 682.688H640v42.688h-42.688zM42.688 725.312h42.688V768H42.688z"p-id="1635"></path><path d="M85.312 725.312H128V768h-42.688zM128 725.312h42.688V768H128zM426.688 810.688h42.688v42.688h-42.688z"p-id="1636"></path><path d="M469.312 810.688H512v42.688h-42.688zM213.312 768H256v42.688h-42.688zM256 768h42.688v42.688H256zM298.688 768h42.688v42.688h-42.688zM341.312 810.688H384v42.688h-42.688zM554.688 810.688h42.688v42.688h-42.688z"p-id="1637"></path><path d="M597.312 810.688H640v42.688h-42.688zM512 810.688h42.688v42.688H512zM682.688 768h42.688v42.688h-42.688zM938.688 725.312h42.688V768h-42.688zM213.312 341.312H256V384h-42.688zM512 341.312h42.688V384H512zM640 298.688h42.688v42.688H640zM0 640h42.688v42.688H0zM896 170.688h42.688v42.688H896z"p-id="1638"></path><path d="M938.624 170.688h42.688v42.688h-42.688z" p-id="1639"></path><path d="M938.624 213.312h42.688V256h-42.688zM981.312 256H1024v42.688h-42.688zM0 682.688h42.688v42.688H0zM640 682.688h42.688v42.688H640zM640 810.688h42.688v42.688H640zM853.312 341.312H896V384h-42.688zM981.312 298.688H1024v42.688h-42.688zM981.312 640H1024v42.688h-42.688zM981.312 682.688H1024v42.688h-42.688zM128 469.312h42.688V512H128zM256 469.312h42.688V512H256zM128 512h42.688v42.688H128zM341.312 512H384v42.688h-42.688zM85.312 597.312H128V640h-42.688zM170.688 768h42.688v42.688h-42.688zM384 810.688h42.688v42.688H384z"p-id="1640"></path></svg></span><details style="margin-left: 40px" class="relative-pos"><summary>固定类绳结</summary><ol><li>😜<a href="#8字结">8字结</a></li><li>😜<a href="#布林结">布林结</a></li><li>😜<a href="#蝴蝶结">蝴蝶结</a></li><li>😜<a href="#双套结">双套结</a></li></ol></details></li><li style="position:relative"><span class="absolute-pos1"><svg t="1695265030176" class="icon" viewBox="0 0 1024 1024" version="1.1"xmlns="http://www.w3.org/2000/svg" p-id="1541" width="20" height="20"><path d="M896 256h42.688v42.688H896zM896 213.312h42.688V256H896zM938.688 256h42.688v42.688h-42.688z"fill="#F0E9B6" p-id="1542"></path><path d="M384 256h42.688v42.688H384zM426.688 256h42.688v42.688h-42.688z" fill="#DA8002"p-id="1543"></path><path d="M469.312 256H512v42.688h-42.688zM298.688 298.688h42.688v42.688h-42.688z"fill="#DA8002" p-id="1544"></path><path d="M341.312 298.688H384v42.688h-42.688z" fill="#DA8002" p-id="1545"></path><path d="M384 298.688h42.688v42.688H384zM426.688 298.688h42.688v42.688h-42.688z"fill="#F49F00" p-id="1546"></path><path d="M469.312 298.688H512v42.688h-42.688z" fill="#F49F00" p-id="1547"></path><path d="M512 256h42.688v42.688H512z" fill="#DA8002" p-id="1548"></path><path d="M512 298.688h42.688v42.688H512z" fill="#F49F00" p-id="1549"></path><path d="M554.688 256h42.688v42.688h-42.688z" fill="#DA8002" p-id="1550"></path><path d="M768 298.688h42.688v42.688H768z" fill="#F49F00" p-id="1551"></path><path d="M810.688 298.688h42.688v42.688h-42.688z" fill="#DA8002" p-id="1552"></path><path d="M682.688 384h42.688v42.688h-42.688zM682.688 426.688h42.688v42.688h-42.688z"fill="#F49F00" p-id="1553"></path><path d="M682.688 469.312h42.688V512h-42.688zM725.312 384H768v42.688h-42.688z"fill="#F49F00" p-id="1554"></path><path d="M725.312 426.688H768v42.688h-42.688z" fill="#F49F00" p-id="1555"></path><path d="M725.312 469.312H768V512h-42.688zM682.688 512h42.688v42.688h-42.688z"fill="#F49F00" p-id="1556"></path><path d="M725.312 512H768v42.688h-42.688z" fill="#DA8002" p-id="1557"></path><path d="M768 384h42.688v42.688H768z" fill="#F49F00" p-id="1558"></path><path d="M768 426.688h42.688v42.688H768z" fill="#DA8002" p-id="1559"></path><path d="M768 469.312h42.688V512H768zM682.688 554.688h42.688v42.688h-42.688z"fill="#DA8002" p-id="1560"></path><path d="M682.688 597.312h42.688V640h-42.688z" fill="#DA8002" p-id="1561"></path><path d="M725.312 597.312H768V640h-42.688zM682.688 640h42.688v42.688h-42.688z"fill="#DA8002" p-id="1562"></path><path d="M725.312 640H768v42.688h-42.688zM768 554.688h42.688v42.688H768z" fill="#DA8002"p-id="1563"></path><path d="M768 597.312h42.688V640H768zM768 640h42.688v42.688H768zM810.688 384h42.688v42.688h-42.688zM810.688 512h42.688v42.688h-42.688zM810.688 554.688h42.688v42.688h-42.688z"fill="#DA8002" p-id="1564"></path><path d="M810.688 597.312h42.688V640h-42.688z" fill="#DA8002" p-id="1565"></path><path d="M853.312 597.312H896V640h-42.688zM213.312 384H256v42.688h-42.688z"fill="#DA8002" p-id="1566"></path><path d="M256 384h42.688v42.688H256zM298.688 384h42.688v42.688h-42.688z" fill="#F49F00"p-id="1567"></path><path d="M341.312 384H384v42.688h-42.688zM384 384h42.688v42.688H384zM426.688 384h42.688v42.688h-42.688z"fill="#F49F00" p-id="1568"></path><path d="M213.312 426.688H256v42.688h-42.688z" fill="#DA8002" p-id="1569"></path><path d="M256 426.688h42.688v42.688H256zM426.688 426.688h42.688v42.688h-42.688z"fill="#F49F00" p-id="1570"></path><path d="M469.312 426.688H512v42.688h-42.688zM213.312 469.312H256V512h-42.688zM298.688 469.312h42.688V512h-42.688z"fill="#F49F00" p-id="1571"></path><path d="M426.688 469.312h42.688V512h-42.688zM512 384h42.688v42.688H512zM512 426.688h42.688v42.688H512z"fill="#F49F00" p-id="1572"></path><path d="M512 469.312h42.688V512H512z" fill="#F49F00" p-id="1573"></path><path d="M298.688 512h42.688v42.688h-42.688z" fill="#DA8002" p-id="1574"></path><path d="M384 512h42.688v42.688H384zM426.688 512h42.688v42.688h-42.688zM554.688 384h42.688v42.688h-42.688zM554.688 426.688h42.688v42.688h-42.688z"fill="#F49F00" p-id="1575"></path><path d="M597.312 384H640v42.688h-42.688zM597.312 426.688H640v42.688h-42.688z"fill="#F49F00" p-id="1576"></path><path d="M597.312 469.312H640V512h-42.688zM554.688 512h42.688v42.688h-42.688z"fill="#F49F00" p-id="1577"></path><path d="M597.312 512H640v42.688h-42.688zM213.312 554.688H256v42.688h-42.688zM298.688 554.688h42.688v42.688h-42.688zM426.688 554.688h42.688v42.688h-42.688z"fill="#F49F00" p-id="1578"></path><path d="M213.312 597.312H256V640h-42.688zM298.688 597.312h42.688V640h-42.688zM426.688 597.312h42.688V640h-42.688zM512 554.688h42.688v42.688H512z"fill="#F49F00" p-id="1579"></path><path d="M512 597.312h42.688V640H512zM213.312 640H256v42.688h-42.688zM256 640h42.688v42.688H256z"fill="#F49F00" p-id="1580"></path><path d="M298.688 640h42.688v42.688h-42.688z" fill="#DA8002" p-id="1581"></path><path d="M341.312 640H384v42.688h-42.688z" fill="#DA8002" p-id="1582"></path><path d="M384 640h42.688v42.688H384zM426.688 640h42.688v42.688h-42.688z" fill="#F49F00"p-id="1583"></path><path d="M469.312 640H512v42.688h-42.688zM512 640h42.688v42.688H512zM597.312 554.688H640v42.688h-42.688z"fill="#F49F00" p-id="1584"></path><path d="M597.312 597.312H640V640h-42.688zM554.688 640h42.688v42.688h-42.688z"fill="#F49F00" p-id="1585"></path><path d="M597.312 640H640v42.688h-42.688zM256 341.312h42.688V384H256z" fill="#DA8002"p-id="1586"></path><path d="M298.688 341.312h42.688V384h-42.688z" fill="#F49F00" p-id="1587"></path><path d="M341.312 341.312H384V384h-42.688zM384 341.312h42.688V384H384zM426.688 341.312h42.688V384h-42.688z"fill="#F49F00" p-id="1588"></path><path d="M469.312 341.312H512V384h-42.688zM554.688 341.312h42.688V384h-42.688z"fill="#F49F00" p-id="1589"></path><path d="M597.312 341.312H640V384h-42.688zM640 341.312h42.688V384H640zM640 384h42.688v42.688H640zM640 426.688h42.688v42.688H640z"fill="#F49F00" p-id="1590"></path><path d="M640 469.312h42.688V512H640zM640 512h42.688v42.688H640zM640 554.688h42.688v42.688H640z"fill="#F49F00" p-id="1591"></path><path d="M640 597.312h42.688V640H640zM640 640h42.688v42.688H640z" fill="#DA8002"p-id="1592"></path><path d="M682.688 341.312h42.688V384h-42.688z" fill="#F49F00" p-id="1593"></path><path d="M725.312 341.312H768V384h-42.688zM768 341.312h42.688V384H768z" fill="#F49F00"p-id="1594"></path><path d="M810.688 341.312h42.688V384h-42.688zM170.688 469.312h42.688V512h-42.688zM341.312 469.312H384V512h-42.688z"fill="#DA8002" p-id="1595"></path><path d="M469.312 469.312H512V512h-42.688zM170.688 512h42.688v42.688h-42.688zM256 512h42.688v42.688H256zM469.312 512H512v42.688h-42.688zM512 512h42.688v42.688H512zM554.688 469.312h42.688V512h-42.688zM170.688 554.688h42.688v42.688h-42.688zM256 554.688h42.688v42.688H256z"fill="#F49F00" p-id="1596"></path><path d="M341.312 554.688H384v42.688h-42.688z" fill="#DA8002" p-id="1597"></path><path d="M469.312 554.688H512v42.688h-42.688zM170.688 597.312h42.688V640h-42.688zM256 597.312h42.688V640H256zM341.312 597.312H384V640h-42.688z"fill="#F49F00" p-id="1598"></path><path d="M384 597.312h42.688V640H384z" fill="#DA8002" p-id="1599"></path><path d="M469.312 597.312H512V640h-42.688zM554.688 554.688h42.688v42.688h-42.688z"fill="#F49F00" p-id="1600"></path><path d="M554.688 597.312h42.688V640h-42.688z" fill="#F49F00" p-id="1601"></path><path d="M682.688 725.312h42.688V768h-42.688z" fill="#FFFFFF" p-id="1602"></path><path d="M725.312 725.312H768V768h-42.688zM768 725.312h42.688V768H768zM810.688 682.688h42.688v42.688h-42.688z"fill="#FFFFFF" p-id="1603"></path><path d="M810.688 725.312h42.688V768h-42.688zM896 640h42.688v42.688H896zM938.688 640h42.688v42.688h-42.688z"fill="#FFFFFF" p-id="1604"></path><path d="M853.312 682.688H896v42.688h-42.688zM896 682.688h42.688v42.688H896zM938.688 682.688h42.688v42.688h-42.688zM42.688 640h42.688v42.688H42.688z"fill="#FFFFFF" p-id="1605"></path><path d="M85.312 640H128v42.688h-42.688zM42.688 682.688h42.688v42.688H42.688z"fill="#FFFFFF" p-id="1606"></path><path d="M85.312 682.688H128v42.688h-42.688zM128 682.688h42.688v42.688H128zM170.688 682.688h42.688v42.688h-42.688z"fill="#FFFFFF" p-id="1607"></path><path d="M170.688 725.312h42.688V768h-42.688zM341.312 725.312H384V768h-42.688zM384 725.312h42.688V768H384zM426.688 725.312h42.688V768h-42.688z"fill="#FFFFFF" p-id="1608"></path><path d="M469.312 725.312H512V768h-42.688z" fill="#FFFFFF" p-id="1609"></path><path d="M384 768h42.688v42.688H384zM426.688 768h42.688v42.688h-42.688z" fill="#C7C8C8"p-id="1610"></path><path d="M469.312 768H512v42.688h-42.688z" fill="#C7C8C8" p-id="1611"></path><path d="M512 725.312h42.688V768H512z" fill="#FFFFFF" p-id="1612"></path><path d="M512 768h42.688v42.688H512z" fill="#C7C8C8" p-id="1613"></path><path d="M554.688 725.312h42.688V768h-42.688z" fill="#FFFFFF" p-id="1614"></path><path d="M597.312 768H640v42.688h-42.688z" fill="#C7C8C8" p-id="1615"></path><path d="M554.688 768h42.688v42.688h-42.688z" fill="#C7C8C8" p-id="1616"></path><path d="M597.312 725.312H640V768h-42.688zM640 725.312h42.688V768H640z" fill="#FFFFFF"p-id="1617"></path><path d="M640 768h42.688v42.688H640z" fill="#C7C8C8" p-id="1618"></path><path d="M213.312 725.312H256V768h-42.688zM256 725.312h42.688V768H256zM298.688 725.312h42.688V768h-42.688z"fill="#FFFFFF" p-id="1619"></path><path d="M341.312 768H384v42.688h-42.688z" fill="#C7C8C8" p-id="1620"></path><path d="M384 213.312h42.688V256H384zM426.688 213.312h42.688V256h-42.688z"p-id="1621"></path><path d="M469.312 213.312H512V256h-42.688zM298.688 256h42.688v42.688h-42.688z"p-id="1622"></path><path d="M341.312 256H384v42.688h-42.688zM256 298.688h42.688v42.688H256zM512 213.312h42.688V256H512zM554.688 213.312h42.688V256h-42.688zM554.688 298.688h42.688v42.688h-42.688zM597.312 256H640v42.688h-42.688z"p-id="1623"></path><path d="M597.312 298.688H640v42.688h-42.688zM682.688 298.688h42.688v42.688h-42.688z"p-id="1624"></path><path d="M725.312 298.688H768v42.688h-42.688zM768 256h42.688v42.688H768zM810.688 256h42.688v42.688h-42.688zM853.312 213.312H896V256h-42.688z"p-id="1625"></path><path d="M853.312 256H896v42.688h-42.688zM853.312 298.688H896v42.688h-42.688zM896 298.688h42.688v42.688H896zM938.688 298.688h42.688v42.688h-42.688zM768 512h42.688v42.688H768zM725.312 554.688H768v42.688h-42.688zM682.688 682.688h42.688v42.688h-42.688z"p-id="1626"></path><path d="M725.312 682.688H768v42.688h-42.688zM768 682.688h42.688v42.688H768zM725.312 768H768v42.688h-42.688zM768 768h42.688v42.688H768zM810.688 426.688h42.688v42.688h-42.688z"p-id="1627"></path><path d="M810.688 469.312h42.688V512h-42.688zM810.688 640h42.688v42.688h-42.688zM810.688 768h42.688v42.688h-42.688zM853.312 384H896v42.688h-42.688zM853.312 512H896v42.688h-42.688zM853.312 554.688H896v42.688h-42.688zM896 597.312h42.688V640H896z"p-id="1628"></path><path d="M853.312 640H896v42.688h-42.688zM938.688 597.312h42.688V640h-42.688zM853.312 725.312H896V768h-42.688zM896 725.312h42.688V768H896zM170.688 384h42.688v42.688h-42.688zM469.312 384H512v42.688h-42.688zM170.688 426.688h42.688v42.688h-42.688zM298.688 426.688h42.688v42.688h-42.688z"p-id="1629"></path><path d="M341.312 426.688H384v42.688h-42.688zM384 426.688h42.688v42.688H384z"p-id="1630"></path><path d="M384 469.312h42.688V512H384zM213.312 512H256v42.688h-42.688zM128 554.688h42.688v42.688H128zM384 554.688h42.688v42.688H384zM42.688 597.312h42.688V640H42.688z"p-id="1631"></path><path d="M128 597.312h42.688V640H128zM128 640h42.688v42.688H128zM170.688 640h42.688v42.688h-42.688zM213.312 682.688H256v42.688h-42.688zM256 682.688h42.688v42.688H256zM298.688 682.688h42.688v42.688h-42.688z"p-id="1632"></path><path d="M341.312 682.688H384v42.688h-42.688zM384 682.688h42.688v42.688H384zM426.688 682.688h42.688v42.688h-42.688z"p-id="1633"></path><path d="M469.312 682.688H512v42.688h-42.688zM512 682.688h42.688v42.688H512zM554.688 682.688h42.688v42.688h-42.688z"p-id="1634"></path><path d="M597.312 682.688H640v42.688h-42.688zM42.688 725.312h42.688V768H42.688z"p-id="1635"></path><path d="M85.312 725.312H128V768h-42.688zM128 725.312h42.688V768H128zM426.688 810.688h42.688v42.688h-42.688z"p-id="1636"></path><path d="M469.312 810.688H512v42.688h-42.688zM213.312 768H256v42.688h-42.688zM256 768h42.688v42.688H256zM298.688 768h42.688v42.688h-42.688zM341.312 810.688H384v42.688h-42.688zM554.688 810.688h42.688v42.688h-42.688z"p-id="1637"></path><path d="M597.312 810.688H640v42.688h-42.688zM512 810.688h42.688v42.688H512zM682.688 768h42.688v42.688h-42.688zM938.688 725.312h42.688V768h-42.688zM213.312 341.312H256V384h-42.688zM512 341.312h42.688V384H512zM640 298.688h42.688v42.688H640zM0 640h42.688v42.688H0zM896 170.688h42.688v42.688H896z"p-id="1638"></path><path d="M938.624 170.688h42.688v42.688h-42.688z" p-id="1639"></path><path d="M938.624 213.312h42.688V256h-42.688zM981.312 256H1024v42.688h-42.688zM0 682.688h42.688v42.688H0zM640 682.688h42.688v42.688H640zM640 810.688h42.688v42.688H640zM853.312 341.312H896V384h-42.688zM981.312 298.688H1024v42.688h-42.688zM981.312 640H1024v42.688h-42.688zM981.312 682.688H1024v42.688h-42.688zM128 469.312h42.688V512H128zM256 469.312h42.688V512H256zM128 512h42.688v42.688H128zM341.312 512H384v42.688h-42.688zM85.312 597.312H128V640h-42.688zM170.688 768h42.688v42.688h-42.688zM384 810.688h42.688v42.688H384z"p-id="1640"></path></svg></span><details style="margin-left: 40px" class="relative-pos"><summary>链接类绳结</summary><ol><li>&#128540;<a href="#平结">平结</a></li><li>&#128540;<a href="#双渔人结">双渔人结</a></li><li>&#128540;<a href="#水结">水结</a></li></ol></details></li></ul></nav></aside>{% endblock %}</div>{% block main %}<div class="main-content"><article class="main-page-conntent"><header><h1 style="font-weight: bolder;margin-bottom: 10px; text-align: center; margin-top: 10px">简介</h1></header><div class="section-content"><ul class="prev-next"><li><a href="" class="btn">上一页</a></li><li><a href="" class="btn">下一页</a></li></ul><p class="main-content-indent">该网站是本人的第一个网站制作，如有任何问题，欢迎留言到我的邮箱。希望你们会喜欢，这个网站主要用于学习常见的绳结使用，结合了户外运动老师给的ppt里的内容，旨在学习最为常见的绳结技术。</p></div><section class="homepage-section"><h2 style="margin:20px 0">主要的内容概览如下所示</h2><div class="section-content"><p style="margin-bottom: 25px; ">通过学习下面的章节，你将从零变成一个绳结高手！</p><dl><dt id="固定类">固定类绳结</dt><dd><h3 id="8字结"><a href="#8字结">8字节</a></h3><p class="top-indent">通常使用8字结连接攀登者，攀登时用于攀登或与保护点的连接。在正式攀岩比赛中，保护绳必须用8字结直接与安全带相连接。</p><p>优点：简单易学，容易辨认正误，强度相对较大，不易松开；<br>缺点：大强度受力后不易解开。</p></dd><dd><h3 id="布林结"><a href="#布林结">布林结</a></h3><p class="top-indent">在攀登中经常需要设置保护点，我们常见的天然保护点通常是树、石头或者横杆等。布林结在攀登中是被广泛使用的一个绳结，多用于保护点和绳子的连接。</p><p>优点：方便快捷，大强度受力后依然容易解开；<br>缺点：在一松一紧受力不稳定时容易松动以至完全脱开，比较难辨认正误。谨记，一定要打绳尾结。</p></dd><dd><h3 id="双套结"><a href="#双套结">双套结</a></h3><p class="top-indent">可以连接中间开放性固定点的绳结（树桩、铁锁等），也可以打在封闭的物体上，在登山的修路和先锋攀登中应用广泛。</p></dd><dd><h3 id="蝴蝶结"><a href="#蝴蝶结">蝴蝶结</a></h3><p class="top-indent">蝴蝶结无论在登山还是户外活动中都可以使用，其主要用途如下：<span class="font-red">1、在登山（冰川多人结组行进）中连接中间的攀登者；</span><span class="font-red">2、高空作业人员可用其做成脚踏环；</span><span class="font-red">3、在野外需要拉路绳做临时保护时，此绳结可以作为抓手；</span><span class="font-red">4、如出现绳子破损，也可用此绳结把破损部位隔离开；</span></p><p>特点：安全性高，方便快捷，用途广泛，可以三向受力，可以打在绳子的任何部位。</p></dd><dt id="连接类">连接类绳结</dt><dd><h3 id="平结"><a href="#平结">平结</a></h3><p class="top-indent">用途:主要用于绳子之间的连接。适用于连结同样粗细、同样质材的绳索；但不适用在较粗、表面光滑的绳索上。但平结只得捆扎物体，决不能用来进行攀登。</p><p>特征:缠绕方法一旦发生错误，结果可能会变成个不完全的活用力一拉结果就会散开。其结如果拉得太紧，就不太容易解开；不过如果双手握住绳头，朝中间用力一推，就可轻松解开。</p></dd><dd><h3 id="双渔人结"><a href="#双渔人结">双渔人结</a></h3><p class="top-indent"><span class="font-red">1、连接一根绳子的绳头，形成绳套使用；</span><span class="font-red">2、连接直径相同的绳子后做双绳下降；</span><span class="font-red">3、连接小绳套做抓结；</span><span class="font-red">4、连接辅绳（直径>7mm）做保护站用绳；</span></p><p>优点：强度大、结实，安全性高。缺点：受力后不易解开，尤其是湿的、细的和变软的绳子，抓接在使用几次后几乎是无法解开的。</p></dd><dd><h3 id="水结"><a href="#水结">水结</a></h3><p class="top-indent">水结是用于连接散扁带两端并使之形成一个绳套。但是打上水结的扁带套也容易松脱，强度也没有机械缝制的扁带大，机械缝制的扁带强度通常为22KN，而打结后的扁带往往达不到。但这样制作出来的扁带长度可任意调节，可以固定在较大的保护点上，如大树、大石头等等。</p><p>优点：长度可任意调节，并与树、岩石等固定点连接形成保护点。缺点：强度没有机械缝制的大，使用时不到位容易松脱。</p></dd></dl></div></section></article></div>{% endblock %}
</main>

css部分：

/*标题区域*/
body > .container {height: 50px;margin: 20px 20px 20px 60px;border: 1px solid #9c907f;border-left: 10px solid #6b8b9c;
}body > .container > p{line-height: 50px;/*text-align: center;*/font-style: italic;font-weight: bolder;text-shadow: 0 0 5px #868b74;
}body > .container > p span{display: inline-block;width: 105px;
}/*main区域*/
body > main {margin-top: 10px;/*border: silver 2px solid;*/display: grid;grid-template-areas: "left-sidebar main right-sidebar";grid-template-columns: minmax(0, 1fr) minmax(0, 2.5fr) minmax(0, 1fr);gap: 20px;
}main > .sidebar-content{position: sticky;display: contents;
}/*左边栏*/
main > .sidebar-content > aside#left-sidebar{grid-area: left-sidebar;/*background-color: #0dcaf0;*/position: sticky;height: 300px;top: 100px;margin-left: 2rem;margin-top: 2rem;display: flex;width: 100%;
}main > .sidebar-content > aside#left-sidebar .left-sidebar-nav{width: 100%;
}main > .sidebar-content > aside#left-sidebar #left-sidebar-header > button{margin-top: 1rem;width: 100%;
}main > .sidebar-content > aside#left-sidebar button{border-radius: 15px 15px 15px 15px;display: inline-block;width: 100%;font-size: 20px;}main > .sidebar-content > aside#left-sidebar > .left-sidebar-nav > .inner-left-sidebar > ol{list-style-type: none;
}main > .sidebar-content > aside#left-sidebar > .left-sidebar-nav > .inner-left-sidebar > ol > li > details {margin-top: 20px;
}.left-sidebar-nav > .inner-left-sidebar{border: 1px solid #87878b;margin-top: 5px;
}details > ol {list-style-type: none;padding-left: 1rem;
}details > ol >li{margin-top: 5px;
}details > ol >li > a{color: #333333;text-decoration: none;
}details > ol >li > a:hover{color: #3dd5f3;text-decoration: underline;
}#inner-left-sidebar-header{padding-left: 2rem;padding-top: 1rem;color: #666666;font-weight: bolder;
}/*右边栏*/
main > .sidebar-content > aside#right-sidebar{grid-area: right-sidebar;/*background-color: #2b669a;*//*border: 2px solid #8b896b;*/position: sticky;height: 400px;top: 120px;margin-top: 2rem;margin-right: 2rem;
}#right-sidebar > nav > .main-nav-list{border-left: 1px solid #777377;padding-left: 1rem;
}#right-sidebar > nav > .main-nav-list > li{list-style-type: none;margin-top: 20px;
}#right-sidebar > nav > .main-nav-list > li li.bg-color{background-color: #ccc3ad;
}/*主要内容区域*/
main > div.main-content{grid-area: main;margin-left: 29px;margin-top: 2rem;border: 1px solid darkred;
}main > .main-content .prev-next{display: flex;justify-content: space-between;padding-right: 2rem;margin-top: 20px;
}main > .main-content .prev-next li{list-style-type: none;
}main > .main-content .prev-next li a{text-decoration: none;border: 1px solid #ccc789;color: #333333;
}main > .main-content .prev-next li a:hover{text-decoration: underline;
}.main-content > .main-page-conntent > header > h1{color: #666666;
}.main-content > .main-page-conntent .main-content-indent{padding-left: 2rem;/*color: #3dd5f3;*/margin-top: 20px;line-height: 30px;
}.main-content .homepage-section{padding-left: 2rem;margin-top: 50px;
}

js部分：

$('.img-show img:eq(0)').after('<span style="display: inline-block; height: 20px">&#10149;</span>')$('.img-show img:eq(1)').after('<span style="display: inline-block; height: 20px">&#10149;</span>')// // 实现视频播放效果
// $('.video-show iframe').on('click', function () {
//     $(this).removeProp('sandbox');
// })$('a[href="#8字结介绍"]').click(function () {var target = $(this).attr('href');$('html, body').animate({scrollTop: $(target).offset().top - 100}, 300);}
)$('a[href="#注意事项"]').click(function () {var target = $(this).attr('href');$('html, body').animate({scrollTop: $(target).offset().top - 100}, 300);}
)$('a[href="#流程介绍"]').click(function () {var target = $(this).attr('href');$('html, body').animate({scrollTop: $(target).offset().top - 100}, 300);}
)$('a[href="#视频区域"]').click(function () {var target = $(this).attr('href');$('html, body').animate({scrollTop: $(target).offset().top - 100}, 300);}
)$('.main-nav-list > li a').on('click', function () {// console.log($(this).parent().parent().find('li'));// console.log($(this).hasClass('bg-color'));var li_list = $(this).parent().parent().parent().find('li');for (let i=0; i<li_list.length; i++){if ($(li_list[i]).children('div').hasClass('bg-color')){$(li_list[i]).children('div').removeClass('bg-color');}else{console.log('yes');}console.log(li_list[i]);}$(this).parent().addClass('bg-color');
})

亮点 🧀🧀🧀🧀

1.text-shadow属性

2.display: contents属性。左右边栏都为固定栏，但为了css的一致性，将左右边框的内容写在了一起。但同时不影响布局。

3.grid布局， grid-template-areas 和 grid-template-columns

4.details标签和summary配套标签

5.给图片定位position：absolute和relative

6.a标签的#锚点的使用。配合id使用。

7.dl,dt,dd标签的使用。

8.由于顶部固定导航栏的影响，所以使用a标签锚点时会出现问题，所以使用js进行调整，具体使用animate的scrolltop属性进行设置。

footer部分

html部分：

<footer class="main-footer"><div class="page-footer-grid"><div class="page-footer-col-1"><a href="" target="_blank">百度</a><p>Your blueprint for a better internet.</p><ul class="social-icons"><li><a href="https://twitter.com/mozdevnet" target="_blank" class="icon icon-twitter"></a></li><li><a href="https://github.com/mdn/" target="_blank" class="icon icon-github-mark-small"></a></li><li><a href="https://developer.mozilla.org/en-US/blog/rss.xml" target="_blank" class="icon icon-feed"></a></li></ul></div><div class="page-footer-col-2"><h3>MDN</h3><ul class="footer-nav-list"><li class="footer-nav-item"><a href="#">About</a></li><li class="footer-nav-item"><a href="#">Blog</a></li><li class="footer-nav-item"><a href="#">Career</a></li><li class="footer-nav-item"><a href="#">Advertise with me</a></li></ul></div><div class="page-footer-col-3"><h3>Support</h3><ul class="footer-nav-list"><li class="footer-nav-item"><a href="#">MDN Community</a></li><li class="footer-nav-item"><a href="#">MDN Forum</a></li><li class="footer-nav-item"><a href="#">MDN Chat</a></li></ul></div></div>
</footer>

css部分

.main-footer{height: 250px;background-color: #f9f9fb;padding-bottom: 50px;border-bottom: 1px solid #a59da8;padding-left: 1rem;padding-top: 1rem;margin-bottom: 20px;
}.main-footer .page-footer-grid{display: grid;grid-template-areas:'logo nav1 nav2';gap: 2rem;grid-template-columns: minmax(260px, 1.7fr) repeat(2, minmax(0, 1fr));
}.main-footer .page-footer-col-1{grid-area: logo;/*background-color: #3dd5f3;*/height: 200px;border-right: 1px solid #bbb0b8;
}.main-footer .page-footer-col-1 a{text-decoration: none;font-size: 25px;font-weight: bolder;color: #666666;display: block;padding-left: 25px;padding-top: 10px;
}.main-footer .page-footer-col-1 p{margin-top: 20px;padding-left: 25px;
}.main-footer .page-footer-col-1 ul{list-style-type: none;display: flex;gap: 2rem;margin-top: 40px;
}.main-footer .page-footer-col-1 ul li a{display: block;height: 50px;width: 50px;
}.main-footer .page-footer-col-1 ul li .icon-twitter{background-repeat: no-repeat;background-image: url(https://developer.mozilla.org/static/media/twitter.cc5b37feab537ddbf701.svg);
}.main-footer .page-footer-col-1 ul li .icon-github-mark-small{background-repeat: no-repeat;background-image: url(https://developer.mozilla.org/static/media/github-mark-small.348586b8904b950b8ea8.svg);
}.main-footer .page-footer-col-1 ul li .icon-feed{background-position: center center;background-repeat: no-repeat;background-image: url(https://developer.mozilla.org/static/media/feed.566a60406f1ae82b0738.svg);
}.main-footer .page-footer-col-2{grid-area: nav1;/*background-color: #333333;*/height: 200px;border-right: 1px solid #bbb0b8;
}.main-footer .page-footer-col-2 h3{padding-top: 10px;
}.main-footer .page-footer-col-2 .footer-nav-list{list-style-type: none;display: flex;flex-direction: column;gap: 0.5rem;padding-left: 0;margin-top: 22px;
}.main-footer .page-footer-col-2 .footer-nav-list .footer-nav-item a{text-decoration: none;color: #666666;
}.main-footer .page-footer-col-2 .footer-nav-list .footer-nav-item a:hover{text-decoration: underline;
}.main-footer .page-footer-col-3{grid-area: nav2;/*background-color: #0c4128;*/height: 200px;
}.main-footer .page-footer-col-3 h3{padding-top: 10px;
}.main-footer .page-footer-col-3 .footer-nav-list{list-style-type: none;display: flex;flex-direction: column;gap: 0.5rem;padding-left: 0;margin-top: 22px;
}.main-footer .page-footer-col-3 .footer-nav-list .footer-nav-item a{text-decoration: none;color: #666666;
}.main-footer .page-footer-col-3 .footer-nav-list .footer-nav-item a:hover{text-decoration: underline;
}

亮点：🌭🌭🌭

flex-direction:column，使用gap进行调整距离。

后端框架

网站使用django框架，通过命令创建项目时，没有手动生成的template文件夹，需要手动建立，存储前端的html文件。

static静态文件中，存储css文件，js文件和img，video的文件夹。当然，使用的一些框架，如bootstrap和jQuery也单独存储在这里。

接下是后端最为主要的url层和view层，由于是静态网站，所以，涉及到的这两个模块的相对简单。没有涉及到model层和数据库的迁移等。

反思

静态网站，后续的改进：通过模态框显示视频，白嫖b站的视频一点不香。
可以适当添加一个用户注册和登录功能，不过对于这个网站用途不大。
导航栏的内容不够丰富
可以将轮播图设计为广告图，单独一排
正文部分还不够丰富，可能是内容本身的问题，但是排版布局对视觉的影响很重要。其中还要设计出响应式布
还需要更加注重动画的流利性，涉及css的transition-duration或者js的animate动画，尽量减少css的hover和active等的使用，没有可塑性。
正文部分可以在添加一个paganition分页。
代码优化
静态文件
1. css文件，一个公用的css文件和每个文件单独的css文件
2. js文件和css文件一样

or: #666666;
}

.main-footer .page-footer-col-2 .footer-nav-list .footer-nav-item a:hover{
text-decoration: underline;
}

.main-footer .page-footer-col-3{
grid-area: nav2;
/background-color: #0c4128;/
height: 200px;
}

.main-footer .page-footer-col-3 h3{
padding-top: 10px;
}

.main-footer .page-footer-col-3 .footer-nav-list{
list-style-type: none;
display: flex;
flex-direction: column;
gap: 0.5rem;
padding-left: 0;
margin-top: 22px;
}

.main-footer .page-footer-col-3 .footer-nav-list .footer-nav-item a{
text-decoration: none;
color: #666666;
}

.main-footer .page-footer-col-3 .footer-nav-list .footer-nav-item a:hover{
text-decoration: underline;
}

### 亮点：&#127789;&#127789;&#127789;1. flex-direction:column，使用gap进行调整距离。# 后端框架网站使用django框架，通过命令创建项目时，没有手动生成的template文件夹，需要手动建立，存储前端的html文件。static静态文件中，存储css文件，js文件和img，video的文件夹。当然，使用的一些框架，如bootstrap和jQuery也单独存储在这里。接下是后端最为主要的url层和view层，由于是静态网站，所以，涉及到的这两个模块的相对简单。没有涉及到model层和数据库的迁移等。## 反思* 静态网站，后续的改进：通过模态框显示视频，白嫖b站的视频一点不香。
* 可以适当添加一个用户注册和登录功能，不过对于这个网站用途不大。
* 导航栏的内容不够丰富
* 可以将轮播图设计为广告图，单独一排
* 正文部分还不够丰富，可能是内容本身的问题，但是排版布局对视觉的影响很重要。其中还要设计出响应式布
* **<font color="#FF0000">还需要更加注重动画的流利性，涉及css的transition-duration或者js的animate动画，尽量减少css的hover和active等的使用，没有可塑性。</font>**
* 正文部分可以在添加一个paganition分页。
* ***代码优化***
* 静态文件1. css文件，一个公用的css文件和每个文件单独的css文件2. js文件和css文件一样

这篇关于绳结网的小总结的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

绳结网的小总结

前端（正文）☕☕☕☕

header部分

html代码：

css代码：

亮点： 🌶🌶🌶

nav部分

html代码：

css部分：

亮点: 🚒🚒🚒

main部分

html部分

css部分：

js部分：

亮点 🧀🧀🧀🧀

footer部分

html部分：

css部分

亮点：🌭🌭🌭

后端框架

反思

相关文章

Python中连接不同数据库的方法总结

Git提交代码详细流程及问题总结

Kubernetes常用命令大全近期总结

Python中实现进度条的多种方法总结

Android数据库Room的实际使用过程总结

Java向kettle8.0传递参数的方式总结

C# Task Cancellation使用总结

HarmonyOS学习(七)——UI（五）常用布局总结

学习hash总结

git使用的说明总结