$（document）.ready（function（））{ //单击项目时关闭响应菜单 $（'.navbar-collapse li a:not（.dropdown-toggle）'）.bind（'单击touchstart'，函数（）{ $（'.navbar-toggle:可见'）.click（）； }); //如果单击导航栏中的项目，请滚动 $（'.navbar-collapse lia'）.click（函数（e）{ e.停止传播（）； var eid=$（this）.attr（'href'）； var top=$（eid）.offset（）.top； $（'html，body'）.animate（{scrollTop:top}，800）； }); $（函数（）{ $（“form[name='needs-validation']”）.validate({ 规则：{ 名字：{ 图案：“[a-zA-Z]+”， 必需：true }, 姓氏：{ 必需：“true”， 图案：“[a-zA-Z]+” }, 电子邮件：{ 必需：true， 电子邮件：true }, 邮编：{ 图案：“[0-9，]”， 必需：true， 最小长度：5 } }, 状态：{ 必需：true， }, //消息错误 消息：{ firstname:“请输入您的名字”， lastname:“请输入您的姓氏”， zipCode：“请提供您的邮政编码”， 密码：{ required:“请提供密码”， minlength:“密码长度必须至少为5个字符” }, 电子邮件：“请输入有效的电子邮件地址” }, submitHandler:函数（表单）{ form.submit（）； } }); }); }); * { 盒大小：border-box； } 正文，html{ 边距：0自动； 边距：70px； 填充：0； font-family:'Nunito Sans'，Sans-serif； 字体大小：16px； } .navbar-默认{ 背景色：白色！ 重要； 盒子阴影：2像素1像素rgba（75，108，183，0.82）！ 重要； } .navbar-标头{ 高度：80px； 背景色：透明； } .徽标{ 高度：60px； 宽度：60px； 边缘顶部：-5px； 边框：1个实体； 边框颜色：透明； 边距：4px； } 一个{ text-decoration：无！ 重要； } .btn1、.btn2{ 字体大小：20px； font-family:'Nunito Sans'，Sans-serif； 字体宽度：600； 填充：1px； 边距：2px； 边距：10px； 边框：5px纯色透明； } .btn1：悬停，.btn2：悬停{ border-bottom:5px纯色； 边框底部颜色：#4b6cb7；/* 旧浏览器的回退*/ border-bottom-color:-webkit-linear渐变（向右，#182848，#4b6cb7）；/* 铬10-25，Safari 5.1-6*/ border-bottom-color：线性渐变（向右，#182848，#4b6cb7）；/* W3C、IE 10+/Edge、Firefox 16+、Chrome 26+、Opera 12+、Safari 7+*/ } .容器-截面{ 显示：网格； 颜色：白色； 网格模板列：80px 80px； 网格模板：80px 80px； 宽度：100%； 高度：620px； 最大宽度：1500px 2fr； 背景尺寸：封面； 背景重复：无重复； 背景位置：中心；； } .text-on-hero格式{ 显示：网格； 网格柱：1/4； 网格：3/5； 文本对齐：居中； 字体大小：40px； font-family:'Alegreya'，衬线； 字体重量：500； } .main内容{ 边距：70px； 宽度：100%； 文本对齐：对齐； 填充：30px； font-stretch：正常； font-family:“Nunito Sans”，无衬线； 字体宽度：600； } 小时1{ font-family:'深红文本'，衬线； 字体宽度：600； } .iframe容器{ 边距顶部：40px； } .表单控制器{ 边距：70px； 边距-底部：20px； } .text居中{ 边距-底部：40px； } .形状标签{ 字体大小：8px； 颜色：#434C5F； 字母间距：0.8px； 填充：10px； 边距-底部：20px； 边距：20px； } .form-组{ text-transform：大写； padding-top：1px； padding-bottom:1px； 边距-右：1px； 左边边距：1px； 宽度：90%； } .表单-文本{ 文本转换：无； } 输入：悬停{ 边框：0； 轮廓：实体； 轮廓颜色：蓝色； } .btn-继续{ 字体大小：10px； 大纲：0； 边框：1px实心； border-color:#4b6cb7； 边距：18px； 边缘颜色：浅灰色； 填充：3vmin； 颜色：白色； 背景色：#4b6cb7；/* 旧浏览器的回退*/ 背景颜色：-webkit-linear渐变（向右，#182848，#4b6cb7）；/* 铬10-25，Safari 5.1-6*/ 背景颜色：线性渐变（向右，#1182848，#4b6cb7）；/* W3C、IE 10+/Edge、Firefox 16+、Chrome 26+、Opera 12+、Safari 7+/； 宽度：124px； text-transform：大写； font-weight：粗体； 边距顶部：40px； 底边：70px； } .btn-continue：悬停{ 光标：指针； 方框阴影：0 5px 10px rgba（0，0，0和0.1）； } .页脚记录器{ 显示：块； 宽度：100%； 背景：#74ebd5；/* 旧浏览器的回退*/ 背景：-webkit-linear gradient（向右，#ACB6E5，#74ebd5）；/* 铬10-25，Safari 5.1-6*/ 背景：线性渐变（向右，#ACB6E5，#74ebd5）；/* W3C、IE 10+/Edge、Firefox 16+、Chrome 26+、Opera 12+、Safari 7+*/ 高度：150px； 填充：10px； } .footer记录器li{ 浮动：右； 列表样式：无； 颜色：#337ab7； 光标：指针； 字体大小：12px； } .footer-wrapper跨度{ 浮动：左； 边距-右：12px； 左边边距：12px； 字体大小：24px； } @媒体（最大宽度：800px）{ .徽标{ 高度：40px； 宽度：40px； } .text-on-hero格式{ 网格柱：1/4； 网格：3/4； 文本对齐：居中； 字体大小：20px； 字体重量：400； } .容器-截面{ 高度：420px； } html，正文{ 边距顶部：50px； } .nav-header-right-collapse（.nav-header右碰撞）{ 背景色：白色； } } @媒体（最大宽度：485px）{ .footer记录器li{ 位置：相对； 顶部：20像素； 右侧：50像素； 文本对齐：对齐； } .页脚记录器span i{ 位置：相对； 右：-90px； } } @媒体（最小宽度：1300px）{ 正文，html，h1{ 边距：0自动； } .容器-截面{ 边距：120px； } .navbar-默认{ 高度：100px； 盒子阴影：没有！ 重要； } .btn1、.btn2{ 边距：30px； 字体大小：30px； } .徽标{ 宽度：80px； 高度：80px； } } <script src=“ https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js “></script> <script src=“ https://cdn.jsdeliver.net/jquery.validation/1.15.1/jquery验证.min.js “></script> <script src=“ https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/.3.7/js/bootstrap.min.js “></script> <link href=“ https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css “rel=”stylesheet“/> <div class=“wrapper”> <nav class=“navbar-navbar-default-navbar-fixed-top”id=“banner”> <div class=“container navbar-container”> <div class=“navbar-header”> <a class=“navbar-brand”href=“#”> <img alt=“Brand”src=“ https://cdn.dribbble.com/users/2790/creenshots/1678559/ab_omonogram.gif “class=”logo“> </a> <button class=“navbar-togle”data-toggle=“collapse”data-target=“.nav-header-right-collapse“> 切换导航</span> <span class=“icon-bar”></span> <span class=“icon-bar”></span> <span class=“icon-bar”></span> </按钮> </div> <div> <ul class=“nav-navbar-nav navbar-right collapse nav-header-right-collapse”role=“navigation”> 关于我们</a></li> 联系方式</a></li> </ul> </div> </div> </nav> <div class=“container-hero-section”style=“background-image:url( https://static.tumblr.com/4aa2cd12cad2b611779826ebb25800842/9nimsoa/4Hymox5z5/tumblr_static_mistyforestagain.jpg ); “><p class=”text-on-hero“>Lorem ipsum dolor sit amet，consectetur adipiscing elit，sed do eiusmod tempo incididunt ut labour et dolore magna aliqua公司</ p＞ </div><-- 关闭英雄部分--> <div id=“about-us”> <节class=“main”> <div class=“main-content col-lg-12”> 关于我们</h1> <p>Lorem ipsum悲哀坐amet，consectetur adipiscing elit。 Cras tellus purus，consequat et intermum sed，maximus vitae justo。 Nam finibus enim nec enim调味品luctus。 Pellentesque居民morbi tristique senectus et netus et malesuada fames ac turpis egestas。 杜伊斯ac rutrum libero。 Suspendisse sed tincidunt mauris，vel finibus tellus。 前庭坐着一张天鹅绒。 Aliquam Aliquam urna vel tristique faucibus公司。 杜伊斯·马提斯调味品。 普雷森特鸡尾酒无节制的修女和厨师。 Curabitur velit velit，scelerisque vel urna sed，fermentum dignissim sem。Pellentsque居住者morbi tristique senectus et netus et malesuada fames ac turbis egestas。 悬浮电势</ p＞ <p>伊普苏姆水蛭，时间ut sollicitudin at，bibendum nec turpis。 水平放置弧。 埃涅安·阿库姆桑·罗恩库斯（Aenean accumsan rhoncus consequat）。 Nullam vel faucibus tellus公司。 大鲵酊中的大鲵。 Crash tellus sapien，suscipit sed fringilla id，iaculis eu ex.Morbi metus dolor，sodales non-dictum eget，gravida a enim。 地球引力门</ p＞ <p>Maecenas rutrum erat nisi，在bibendum ex sollicitudin eget。 Fusce augue purus，efficitur nec malesuada eget，scelerisque vel metus。 Nam sed rutrum弧。 Aliquam vel nunc ante公司。 修女convallis libero vel aliquam convallis。 Orci varius natoque penatibus et magnis dis partulient montes，nascetur simpus mus。 前庭</p> <!-- 16:9纵横比--> <div class=“embed-responsive embed-responsive-16by9 iframe-container”> <iframe width=“80%”height=“240px”src=“ https://www.youtube.com/embed/QijH4UAqGD8 “class=”embed-responsive-item“></iframe> </div> </div> </节> </br> <div id=“contact-us”> <章节> <div class=“container form-container col-lg-12”> <form class=“contact-form”role=“form”name=“needs-validation”action=“none”data-toggle=“validator”> <h1 class=“text-center”>联系我们</h1> <div class=“form-group center-block”> 电子邮件地址 <input type=“email”class=“form-control-form-control-lg”placeholder=“ [电子邮件保护] "> </div> <div class=“表单组中心块”> <label for=“input--name”id=“input--name”class=“form-labels control-label”>name</label> <input type=“text”name=“firstname”pattern=“[a-zA-Z]+”class=“form-control-form-control-lg”placeholder=“您的名字在这里”> </div> <div class=“form-group center-block”> 姓氏 <input type=“text”name=“lastname”pattern=“[a-zA-Z]+”class=“form-control-form-control-lg”placeholder=“您的姓氏在这里”> </div> <div class=“form-group center-block”> 邮政编码 <input type=“number”name=“zipCode”class=“form-control-form-control-lg”placeholder=“美国邮政编码”> </div> <div class=“form-group center-block has-feedback”> <label for=“select state”name=“state”class=“form labels control label”>选择状态</label> <select class=“form-control”> 请选择您所在的州 阿拉巴马州 阿拉斯加 亚利桑那州 阿肯色州 加利福尼亚州 科罗拉多州</option> 康涅狄格州 特拉华州 哥伦比亚特区 佛罗里达州 格鲁吉亚 夏威夷 爱达荷州 伊利诺伊州 印第安纳州 爱荷华州 堪萨斯州 肯塔基州 路易斯安那州 缅因州 马里兰州 马萨诸塞州 密歇根州 明尼苏达州 密西西比州 密苏里州</option> 蒙大拿州 内布拉斯加州 内华达州 新罕布什尔州 新泽西州 新墨西哥州 纽约 北卡罗来纳州 北达科他州 俄亥俄州</option> 俄克拉荷马州 俄勒冈州 宾夕法尼亚州 罗得岛州 南卡罗来纳州 南达科他州 田纳西州 <option value=“TX”>德克萨斯州</option> 犹他州 佛蒙特州 弗吉尼亚州 华盛顿 西弗吉尼亚州 威斯康星州 怀俄明州 </选择> </div> 继续 </form> </div> </节> ＜页脚＞ <div class=“footer-wrapper container-fluid col-lg-12”> <ul> <span><a href=“#”><i class=“fa-fa-rss-square”aria-hidden=“true”></i></a></span> <span><a href=“#”><i class=“fa-fa-youtube”aria-hidden=“true”></i></a></span> <span><a href=“#”><i class=“fa fa-twitter”aria-hidden=“true”></i></a></span> <li>隐私和信息处理政策等</a></li> <li>法律信息|</a></li> <li><a href=“#”>使用条款|</a></li> </br> <li>2018年Lorem Impsum Corporation</li> <li>Lorem Impsum Advanced Media，L.I.保留所有权利</ li> </ul> </div> </footer> </div> 
