9603
孙军玲1
已更新 793篇
勤奋鸟旗下 软件定制开发 安全交付平台！一次合作，终身售后！全程项目经理一对一跟进测试！公司以自研团队结合搭档圈，为用户提供安全快速稳定的软件源码开发服务！
勤奋鸟旗下 软件定制开发 安全交付平台！一次合作，终身售后！全程项目经理一对一跟进测试！公司以自研团队结合搭档圈，为用户提供安全快速稳定的软件源码开发服务！
1、Bootstrap 需要为页面内容包裹一个 container容器(用于固定宽度并支持响应式布局的容器。)
2、给顶部设置适度的宽高，加上position:fixed,来固定顶部的位置(根据开发需要来确定加不加)
3、最主要汉堡按钮： 条件，当页面的宽度小于一定的值时出现，
4、代码的复用率，可以把顶部的样式独立出来，在下个页面里直接用
5、引入jq 来获取汉堡按钮的点击功能
html:
<header class="container header">
<div class="container inner">
<div class="left">
<div class="left-1">
<p>圖書網名稱</p>
这里可以放log
</div>
<div class="left-list">
<ul class="ul" data-in="fadeInDown" data-out="fadeOutUp">
<li class="active"><a href="index.html">首页</a></li>
<li><a href="%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D.html">产品介绍</a></li>
<li><a href="%E6%96%B0%E9%97%BB%E5%8A%A8%E6%80%81.html">新闻动态</a></li>
<li><a href="%E5%85%AC%E5%8F%B8%E7%AE%80%E4%BB%8B.html">公司简介</a></li>
<li><a href="%E8%81%94%E7%B3%BB%E6%88%91%E4%BB%AC.html">联系我们</a></li>
</ul>
</div>
</div>
<div class="right">
<input type="text" placeholder="请输入搜索关键字" name="" id="" value="">
<span><img src="../img/%E6%94%BE%E5%A4%A7%E9%95%9C.jpg"></span>
<div class="txt-box">
<ul class="search_ul">
<li><a href="index.html">永乐大典|</a></li>
<li> <a href="%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D.html">钦定四库全书真本|</a> </li>
<li> <a href="%E6%96%B0%E9%97%BB%E5%8A%A8%E6%80%81.html">红楼梦|</a> </li>
<li> <a href="%E5%85%AC%E5%8F%B8%E7%AE%80%E4%BB%8B.html">印谱|</a> </li>
<li> <a href="%E8%81%94%E7%B3%BB%E6%88%91%E4%BB%AC.html">耕織圖|</a> </li>
<li> <a href="%E8%81%94%E7%B3%BB%E6%88%91%E4%BB%AC.html">战国策|</a> </li>
</ul>
</div>
</div>
<a href="javascript:void(0)" id="navToggle">
<span></span>
</a>
<a href="javascript:void(0)" id="imgButton">
<img class="img" src="../img/%E6%94%BE%E5%A4%A7%E9%95%9C.jpg">
</a>
</div>
</header>
<div class="m_nav">
<div class="nav">
<ul class="ul" data-in="fadeInDown" data-out="fadeOutUp">
<li class="active"><a href="index.html">首页</a></li>
<li><a href="%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D.html">产品介绍</a></li>
<li><a href="%E6%96%B0%E9%97%BB%E5%8A%A8%E6%80%81.html">新闻动态</a></li>
<li><a href="%E5%85%AC%E5%8F%B8%E7%AE%80%E4%BB%8B.html">公司简介</a></li>
<li><a href="%E8%81%94%E7%B3%BB%E6%88%91%E4%BB%AC.html">联系我们</a></li>
</ul>
</div>
<div class="navbar_inp" data-in="fadeInDown" data-out="fadeOutUp">
<input type="text" placeholder="请输入搜索关键字" name="" id="" value="">
<div class="txt-box">
<ul class="search_ul">
<li><a href="index.html">永乐大典</a></li>
<li> <a href="%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D.html">钦定四库全书真本|</a> </li>
<li> <a href="%E6%96%B0%E9%97%BB%E5%8A%A8%E6%80%81.html">红楼梦|</a> </li>
<li> <a href="%E5%85%AC%E5%8F%B8%E7%AE%80%E4%BB%8B.html">印谱|</a> </li>
<li> <a href="%E8%81%94%E7%B3%BB%E6%88%91%E4%BB%AC.html">耕織圖|</a> </li>
<li> <a href="%E8%81%94%E7%B3%BB%E6%88%91%E4%BB%AC.html">战国策|</a> </li>
</ul>
</div>
</div>
<div class="top clearfix">
<!-- <img src="img/closed.png" alt="" class="closed" /> -->
<img src="img/closed.png" class="closed">
</div>
</div>
css:
ul{list-style: none;padding: 0px;}
.header{width: 100%;background: url(../img/顶部bg.png) no-repeat; position: fixed;top: 0%;z-index: 999;}
.header .top div p{font-size: 13px;font-weight: 400;line-height: 30px;color: #5F4122;text-align: left;}
.header .top div a{text-decoration: none; color: #5F4122;display: inline-block; font-size: 13px;line-height: 30px; font-weight: 400;float: right;}
.header a img{display: none;}
.inner .right{float: right;}
.left .left-1{width: 200px;float: left;padding: 10px 0px;}
.left .left-1 p{width: 100%; line-height: 30px;font-size: 28px;font-weight: bold;font-family: "microsoft yahei";color: #5F4122;}
.left .left-list{float: left; transition: 0.5s;height: 100%;line-height: 80px;}
.left .left-list li{float: left;position: relative;display: block;}
.left .left-list li a{text-decoration: none;color: #5F4122; height: 100%;display: block;transition: 0.5s;font-size: 18px;line-height: 40px; padding: 0px 20px;}
.right{position: relative;}
.right input{width: 369px; border: 0px; border-radius: 18px;}
.right span img{width: 30px; height: 23px; position: absolute;top:1px;right: 1px;border-radius: 8px;}
.right .search_ul li{float: left;display: block;position: relative;}
.right .search_ul li a{color: #5F4122;display: block;text-decoration: none;height: 100%;transition: 0.5s;font-size: 12px; line-height: 30px;font-weight: 400;color: #8B745A;}
#navToggle{display: none;}
.m_nav{position:fixed;width:100%;height:100%;background:#E5DDCF; transition:all ease 0.5s;-webkit-transition:all ease 0.5s;z-index:1000;opacity:1;visibility:visible;margin-top:0;overflow-y:auto;transition:all .6s cubic-bezier(.77,0,.175,1) 0ms;top: -100%;}
.open{top:0%;}
.m_nav .top{height: 60px;padding: 20px;box-sizing: border-box;}
.m_nav .top .closed{width: 30px;height:30px; vertical-align:middle;float:right;cursor:pointer}
.m_nav .ul{margin-top: 30px;}
.m_nav .search_ul{padding-left: 40px;}
.m_nav .ul li{padding:0 20px;width: 100%; -webkit-transition:all .6s cubic-bezier(.77,0,.175,1) 0ms;transition:all .6s cubic-bezier(.77,0,.175,1) 0ms;opacity:0;}
.open .ul li {opacity: 1;}
.m_nav .ul li a {display:block;text-decoration:none;color:#5F4122;font-size:14px; height:45px;line-height:45px;width:100%;font-family: SourceHanSansCN-Light;}
.m_nav{display: flex;justify-content: space-between;}
.m_nav .nav{width: 200px;}
.m_nav .navbar_inp{padding-top: 40px;}
.m_nav .navbar_inp input{width: 420px;border-radius: 18px;}
.m_nav .navbar_inp .txt-box{width: 100%;height: 20px; margin-top: -10px;margin-left: -30px;}
.m_nav .navbar_inp .txt-box .search_ul li{float: left;display: block;position: relative; padding: 10px 0px;width: 100%;}
.m_nav .navbar_inp .txt-box .search_ul li a{color: #5F4122;}
响应式布局：
@media screen and (max-width:992px) {
.warp .first .fs{width: ;}
.warp .correlation .title{padding-top: 40px;}
.correlation .correlation-list .list-item .img-box p{text-align: left;}
.correlation .correlation-list .list-item .img-box{margin-right: 0;}
.header .inner .left .left-1{width: 160px;}
.header .inner .left .left-1{ padding:8px 0px;}
.header .top{width: 160px;}
.header a img{display: block; width: 30px; height: 30px;float: right;margin-top: 10px;}
.header #navToggle {height:100%;padding:7px 15px;margin-right:-15px;display:inline-block;float:right;}
.header #navToggle span {position:relative;width:25px;height:1px;margin-top:19px;}
.header #navToggle span:before,.header #navToggle span:after {content:'';position:relative;width:100%;height:1px;left:0;}
.header #navToggle span,.header #navToggle span:before,.header #navToggle span:after {-webkit-transition:0.3s;-moz-transition:0.3s;-o-transition:0.3s;transition:0.3s;display:block;background:#000;}
.header #navToggle span:before {top:8px;}
.header #navToggle span:after {bottom:10px;}
.header #navToggle.open span:before {top:10px;-webkit-transform:translateY(-11px) rotate(-45deg);-moz-transform:translateY(-11px) rotate(-45deg);-ms-transform:translateY(-11px) rotate(-45deg);-o-transform:translateY(-11px) rotate(-45deg);transform:translateY(-11px) rotate(-45deg);}
.header #navToggle.open span:after {bottom:12px;-webkit-transform:translateY(10px) rotate(45deg);-moz-transform:translateY(10px) rotate(45deg);-ms-transform:translateY(10px) rotate(45deg);-o-transform:translateY(10px) rotate(45deg);transform:translateY(10px) rotate(45deg);}
.header #navToggle.open span {background:none;}
.header #navToggle.open span:before,.header #navToggle.open span:after {background:#4f4f4f;}
.header .inner .left .left-list,.header .right,.header .top {display:none;}
} 
多线程同步开发
项目经理1v1跟进
源码定制交付
一次合作/终身售后
微信扫码登录/注册
您的诉求已经提交请等待工作人员联系，快速通过请联系管理员！
欢迎访问我们的网站！我们非常重视用户的隐私权和信息安全，因此制定了以下用户协议，以明确我们与您之间的关系以及您在使用本网站时应遵守的条款。请您仔细阅读并同意本协议的所有条款，以便您能够合法、安全地使用本网站。如果您不同意本协议的任何内容，请立即停止使用本网站。
服务说明：本网站是一个提供定制软件开发服务和在线找技术搭档的互联网平台。我们保留随时更改、更新或暂停本网站的权利。我们会尽力确保网站的正常运行，但对于因技术问题、系统维护或其他原因导致的网站暂时不可用，我们不承担任何责任。
用户注册：用户需要通过提供手机号、微信扫码和其他必要信息来注册一个账户。您有责任保护您的用户名和密码，不得将其透露给任何第三方。对于因您的用户名和密码被泄露而导致的任何损失或损害，我们将不承担责任。
用户行为规范：用户应遵守中华人民共和国相关法律法规，不得发布或传播违法信息、侵犯他人权益的内容。用户应对其发布的内容负责，并承担因发布不当内容而引起的任何法律责任。
版权声明：本网站所包含的所有文字、图片、音频、视频等素材的著作权均归本网站所有（会员用户上传的默认承诺为不侵权的合法自有技术成果，本网站审核信息后可展示，所有权不归本网站）。未经本网站书面许可，任何单位或个人不得以任何形式复制、转载、修改或传播本网站的任何内容。对于侵犯本网站知识产权的行为，将依法追究其法律责任。
免责声明：本网站不对因使用本网站而引起的任何直接、间接、偶然、特殊或后果性的损害承担责任。包括但不限于利润损失、数据丢失、业务中断等。
适用法律和争议解决：本协议的签订、履行、解释及争议解决均适用中华人民共和国法律。如发生争议，双方应首先协商解决；协商不成的，任何一方均有权向有管辖权的人民法院提起诉讼。
本协议的解释权归本网站所有。如有未尽事宜，本网站保留最终解释权。
本协议自用户点击“同意”或“接受”按钮时生效。
欢迎访问我们的网站！我们致力于为您提供一个安全、可靠的在线环境。本隐私政策旨在说明我们在您使用我们的网站时如何收集、使用和保护您的个人信息。请仔细阅读以下内容，以了解我们的隐私政策。
在使用我们的网站时，我们可能会收集以下类型的信息：
a) 个人识别信息：如姓名、电子邮件地址、电话号码等。 b) 非个人识别信息：如浏览器类型、操作系统、设备类型、IP地址等。 c) 用户行为信息：如访问页面、点击链接、搜索查询等。
我们收集的信息将用于以下目的：
a) 提供、改进和个性化我们的服务。 b) 与您联系，回应您的询问和请求。 c) 发送您请求的或我们认为对您有帮助的信息。 d) 进行市场调研和分析，以改进我们的产品和服务。 e) 防止欺诈和其他非法活动。
我们不会出售、出租或以其他方式与第三方共享您的个人信息，除非：
a) 获得您的明确同意。 b) 与可信赖的合作伙伴共享，以提供您请求的服务。 c) 根据法律要求或政府机关的要求。 d) 为保护我们的权利、财产或安全。
我们采取合理的安全措施，以保护您的个人信息不受未经授权的访问、披露、更改或破坏。然而，请注意，没有任何一种电子存储方法是100%安全的。
我们的网站使用Cookie和类似的跟踪技术来收集有关您使用我们网站的信息。这些信息有助于我们分析和改进我们的网站，以及提供个性化的内容和广告。您可以通过浏览器设置拒绝接受Cookie，但这可能会影响您使用我们网站的能力。
我们的网站可能包含指向其他网站的链接。请注意，我们对其他网站的隐私政策和实践不承担任何责任。我们建议您在访问这些网站时查看其隐私政策。
我们可能会不时更新本隐私政策。请定期查看此页面，以确保您了解我们对个人信息的最新政策。
如果您对我们的隐私政策有任何疑问或建议，请通过以下联系方式与我们联系：
电子邮件：[wangye-101@163.com]
电话：+86-173-3019-6230
地址：中国石家庄市长安区吾悦广场2010室
感谢您的信任和支持！我们将竭诚为您提供更优质的服务。
