Bootstrap项目实战--关于

html

  1. <!DOCTYPE html>
  2. <html lang="zh-cn">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
  6.     <title>Bootstrap 介绍</title>
  7.     <!--引入bootstrap样式文件-->
  8.     <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
  9.     <link rel="stylesheet" href="css/ceshi.css">
  10.     <link rel="stylesheet" href="css/gyu.css">
  11. </head>
  12. <body>
  13. <!--导航-->
  14. <nav class="navbar navbar-default navbar-fixed-top">                <!--声明导航区域，设置导航默认样式，设置导航条固定在顶部-->
  15.     <div class="container">                                            <!--设置固定布局，最大宽度1140-->
  16.         <div class="navbar-header">                                    <!--设置导航标题区域-->
  17.             <a href="#" class="navbar-brand logo">自贡瑞佳财务咨询有限公司</a>    <!--设置导航标内容-->
  18.             <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">    <!--设置导航按钮-->
  19.                 <span class="icon-bar"></span>        <!--设置导航按钮样式-->
  20.                 <span class="icon-bar"></span>
  21.                 <span class="icon-bar"></span>
  22.             </button>
  23.         </div>
  24.         <div class="collapse navbar-collapse" id="navbar-collapse">                <!--设置导航折叠区域，设置导航折叠样式-->
  25.             <ul class="nav navbar-nav navbar-right dhul">        <!--设置列表区域，导航列表默认样式，导航列表右浮动-->
  26.                 <li class="active"><a href="ceshi.html"><span class="glyphicon glyphicon-home"></span> 首页</a></li>    <!--设置当前列表首先-->
  27.                 <li><a href="zix.html"><span class="glyphicon glyphicon-list"></span> 资讯</a></li>                    <!--设置当前列表图标-->
  28.                 <li><a href="anl.html"><span class="glyphicon glyphicon-fire"></span> 案例</a></li>
  29.                 <li><a href="gyu.html"><span class="glyphicon glyphicon-question-sign"></span> 关于</a></li>
  30.             </ul>
  31.         </div>
  32.     </div>
  33. </nav>
  34. <!--轮播图-->
  35. <div id="myCarousel" class="carousel slide">                        <!--设置轮播器区域样式，设置轮播器滚动样式-->
  36.     <ol class="carousel-indicators">                                <!--设置轮播器列表区域样式，就是小圆点区域样式-->
  37.         <li data-target="#myCarousel" data-slide-to="0" class="active"></li>    <!--设置当前列表首选-->
  38.         <li data-target="#myCarousel" data-slide-to="1"></li>
  39.         <li data-target="#myCarousel" data-slide-to="2"></li>
  40.     </ol>
  41.     <div class="carousel-inner">                                    <!--设置轮播器图片区域-->
  42.         <div class="item active tp1">                                <!--设置轮播器图片样式-->
  43.             <a href="#"><img src="img/1.jpg" alt="第一张"></a>
  44.         </div>
  45.         <div class="item tp2">
  46.             <a href="#"><img src="img/2.jpg" alt="第二张"></a>
  47.         </div>
  48.         <div class="item tp3">
  49.             <a href="#"><img src="img/3.jpg" alt="第三张"></a>
  50.         </div>
  51.     </div>
  52.     <!--设置轮播器箭头区域-->
  53.     <a href="#myCarousel" data-slide="prev" class="carousel-control left">
  54.         <span class="glyphicon glyphicon-chevron-left"></span>
  55.     </a>
  56.     <a href="#myCarousel" data-slide="next" class="carousel-control right">
  57.         <span class="glyphicon glyphicon-chevron-right"></span>
  58.     </a>
  59. </div>
  60.  
  61. <!--左右两栏即可-->
  62. <div id="about">
  63.     <div class="container">
  64.         <div class="row">
  65.             <div class="col-md-3 hidden-sm hidden-xs">
  66.                 <div class="list-group">
  67.                     <a class="list-group-item" href="#1">1.机构介绍</a>
  68.                     <a class="list-group-item" href="#2">2.加入我们</a>
  69.                     <a class="list-group-item" href="#3">3.联系方式</a>
  70.                 </div>
  71.             </div>
  72.             <div class="col-md-9 about">
  73.                 <a name="1"></a>
  74.                 <h3>机构简介</h3>
  75.                 <p>瓢城企业培训有限公司是一家专业以智能化弱电工程为主的高科技民营企业，公司自创立以来一直专业致力于智能化弱电工程；始终坚持发扬"诚信、创新、沟通"为企业宗旨，以"技术、服务"为立业之本的团体精神，并形成一套完整的设计、安装、调试、培训、维护一站式服务体系。</p>
  76.                 <a name="2"></a>
  77.                 <h3>加入我们</h3>
  78.                 <p>网络已深刻改变着人们的生活，本地化生活服务市场前景巨大，生活半径团队坚信本地化生活服务与互联网的结合将会成就一家梦幻的公司，我们脚踏实地的相信梦想，我们相信你的加入会让生活半径更可能成为那家梦幻公司！生活半径人有梦想，有魄力，强执行力，但是要实现这个伟大的梦想，需要更多的有创业精神的你一路前行。公司将提供有竞争力的薪酬、完善的福利（五险一金）、期权、广阔的上升空间。只要你有能力、有激情、有梦想，愿意付出，愿意与公司共同成长，请加入我们！</p>
  79.                 <p>请发送您的简历到：hr@xxx.com，我们会在第一时间联系您！</p>
  80.                 <a name="3"></a>
  81.                 <h3>联系方式</h3>
  82.                 <p>地址：江苏省盐城市亭湖区大庆中路1234 号</p>
  83.                 <p>邮编：1234567</p>
  84.                 <p>电话：010-88888888</p>
  85.                 <p>传真：010-88666666</p>
  86.             </div>
  87.         </div>
  88.     </div>
  89. </div>
  90.  
  91.     <!--底部-->
  92. <div class="dibu">
  93.     <div class="container">
  94.         <div class="row">
  95.             <div class="col-md-6">
  96.                 <h4 class="text-center">联系方式</h4>
  97.                 <p>联系人:游先生</p>
  98.                 <p>手机:18681395066     13096006150</p>
  99.                 <p>座机:0813-8287339</p>
  100.                 <p>Q Q:350016919</p>
  101.                 <p>邮箱:350016919@qq.com</p>
  102.                 <p>地址:自贡市自流井区丹桂东段泰丰大厦1区8层7号 </p>
  103.             </div>
  104.             <div class="col-md-6">
  105.                 <h4 class="text-center">友情链接</h4>
  106.                 <ul class="list-unstyled">
  107.                     <li><a href="http://www.scaic.gov.cn/" target="_blank">四川工商局</a></li>
  108.                     <li><a href="http://www.baidu.com" target="_blank">百度</a></li>
  109.                 </ul>
  110.             </div>
  111.         </div>
  112.     </div>
  113. </div>
  114. <div class="banq">
  115.     <div class="container text-center banq">
  116.         <p>版权所有 © 自贡瑞佳财务咨询有限公司 未经许可 严禁复制</p>
  117.         <p><a href="http://www.jxiou.com/" target="_blank">自贡玉秀文化传播技术支持</a></p>
  118.         <p>蜀ICP备16022718号-1 </p>
  119.     </div>
  120. </div>
  121.  
  122. <!--引入jquery文件-->
  123. <script src="jquery/jquery.min.js"></script>
  124. <!--引入bootstrap里的js-->
  125. <script src="bootstrap/js/bootstrap.min.js"></script>
  126. <script src="ceshi.js"></script>
  127. </body>
  128. </html>

重点：栅格系统布局

第二百五十五节，Bootstrap项目实战--关于的更多相关文章

  1. 第二百五十三节，Bootstrap项目实战-资讯

    Bootstrap项目实战-资讯 html <!DOCTYPE html> <html lang="zh-cn"> <head> <met ...

  2. 第二百五十节，Bootstrap项目实战--响应式导航

    Bootstrap项目实战--响应式导航 学习要点: 1.响应式导航 一．响应式导航 基本导航组件+响应式 第一步,声明导航区域,设置导航默认样式,设置导航条固定在顶部navbar样式class类,写 ...

  3. 第二百五十四节，Bootstrap项目实战--案例

    Bootstrap项目实战--案例 html <!DOCTYPE html> <html lang="zh-cn"> <head> <me ...

  4. 第二百五十一节，Bootstrap项目实战--响应式轮播图

    Bootstrap项目实战--响应式轮播图 学习要点: 1.响应式轮播图 本节课我们要在导航条的下方做一张轮播图,自动播放最新的重要动态. 一．响应式轮播图 响应式轮播图 第一步,设置轮播器区域car ...

  5. 第二百五十二节，Bootstrap项目实战-首页

    Bootstrap项目实战-首页 html <!DOCTYPE html> <html lang="zh-cn"> <head> <met ...

  6. Ext JS学习第十六天 事件机制event（一） DotNet进阶系列(持续更新) 第一节：.Net版基于WebSocket的聊天室样例 第十五节：深入理解async和await的作用及各种适用场景和用法 第十五节：深入理解async和await的作用及各种适用场景和用法 前端自动化准备和详细配置(NVM、NPM/CNPM、NodeJs、NRM、WebPack、Gulp/Grunt、G

    code&monkey   Ext JS学习第十六天 事件机制event(一) 此文用来记录学习笔记: 休息了好几天,从今天开始继续保持更新,鞭策自己学习 今天我们来说一说什么是事件,对于事件 ...

  7. 风炫安全web安全学习第三十五节课 文件下载和文件读取漏洞

    风炫安全web安全学习第三十五节课 文件下载和文件读取漏洞 0x03 任意文件下载漏洞 一些网站由于业务需求,往往需要提供文件下载功能,但若对用户下载的文件不做限制,则恶意用户就能够下载任意敏感文件, ...

  8. 第四百一十五节，python常用排序算法学习

    第四百一十五节,python常用排序算法学习 常用排序 名称 复杂度 说明 备注 冒泡排序Bubble Sort O(N*N) 将待排序的元素看作是竖着排列的“气泡”,较小的元素比较轻,从而要往上浮 ...

  9. 大白话5分钟带你走进人工智能-第十五节L1和L2正则几何解释和Ridge，Lasso，Elastic Net回归

    第十五节L1和L2正则几何解释和Ridge,Lasso,Elastic Net回归 上一节中我们讲解了L1和L2正则的概念,知道了L1和L2都会使不重要的维度权重下降得多,重要的维度权重下降得少,引入 ...

随机推荐

  1. 从CM刷机过程和原理分析Android系统结构

    前面101篇文章都是分析Android系统源代码,似乎不够接地气. 假设能让Android系统源代码在真实设备上跑跑看效果,那该多好.这不就是传说中的刷ROM吗?刷ROM这个话题是老罗曾经一直避免谈的 ...

  2. 推荐算法——非负矩阵分解(NMF)

    一.矩阵分解回想 在博文推荐算法--基于矩阵分解的推荐算法中,提到了将用户-商品矩阵进行分解.从而实现对未打分项进行打分. 矩阵分解是指将一个矩阵分解成两个或者多个矩阵的乘积.对于上述的用户-商品矩阵 ...

  3. C#指南，重温基础，展望远方！（12）C#特性

    C# 程序中的类型.成员和其他实体支持使用修饰符来控制其行为的某些方面. 例如,方法的可访问性是由 public.protected.internal 和 private 修饰符控制. C# 整合了这 ...

  4. php简单混淆类加密文件如何解密？

    最近在整理单位购买的源码时,发现源码里好多文件都混淆加密了.虽然不解密也不影响使用,但是心里总觉得有些别扭,便试着将加密的文件解密. 首先,百度了一下,看网上是否有现成的混淆类解密工具,搜到了一个ht ...

  5. Ubuntu下利用vim搭建python开发环境

    1. 安装vim $ sudo apt-get install vim 2. 安装ctags,ctags用于支持taglist,必需! $ sudo apt-get install ctags 3. ...

  6. Repository模式（转载）

    近来发现很多ASP.NET MVC的例子中都使用了Repository模式,比如Oxite,ScottGu最近发布的免费的ASP.NET MVC教程都使用了该模式.就简单看了下. 在<企业架构模 ...

  7. 没有msdtc服务的解决方法（sql server分布式事务挂掉的解决方法）

    没有msdtc服务的解决方法如下:1.删除注册表中的键:  开始 运行 regedit  打开注册表HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Servic ...

  8. NTP Reply Flood Attack （NTP反射型DDos攻击）

    简介 NTP Reply Flood Attack (NTP射型Ddos攻击)以下简称NTP_Flood是一种利用网络中NTP服务器的脆弱性(无认证,不等价数据交换,UDP协议),来进行DDos行为的 ...

  9. Linux下让进程在后台可靠运行的几种方法

    想让进程在断开连接后依然保持运行?如果该进程已经开始运行了该如何补救? 如果有大量这类需求如何简化操作? 我们经常会碰到这样的问题,用 telnet/ssh 登录了远程的 Linux 服务器,运行了一 ...

  10. 利用ngModel相关属性及方法自定义表单验证指令

    这是一个只能输入偶数的验证指令