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/zix.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="#"><span class="glyphicon glyphicon-fire"></span> 案例</a></li>
  29.                 <li><a href="#"><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="information">
  63.     <div class="container">
  64.         <div class="row">
  65.             <div class="col-md-8 info-left">
  66.                 <div class="container-fluid" style="padding:0;">
  67.                     <div class="row info-content">
  68.                         <div class="col-md-5 col-sm-5 col-xs-5">
  69.                             <img src="img/info1.jpg" class="img-responsive" alt="">
  70.                         </div>
  71.                         <div class="col-md-7 col-sm-7 col-xs-7">
  72.                             <h4>广电总局发布 TVOS2.0 华为阿里参与研发</h4>
  73.                             <p class="hidden-xs">TVOS2.0 是在 TVOS1.0 与华
  74.                                 为 MediaOS 及阿里巴巴 YunOS 融合的基础上，打造的新一代智能电视操作系统。华为主要
  75.                                 承担开发工作，内置的电视购物商城由阿里方面负责。</p>
  76.                             <p>admin 15 / 10 / 11</p>
  77.                         </div>
  78.                     </div>
  79.                     <div class="row info-content">
  80.                         <div class="col-md-5 col-sm-5 col-xs-5">
  81.                             <img src="img/info1.jpg" class="img-responsive" alt="">
  82.                         </div>
  83.                         <div class="col-md-7 col-sm-7 col-xs-7">
  84.                             <h4>广电总局发布 TVOS2.0 华为阿里参与研发</h4>
  85.                             <p class="hidden-xs">TVOS2.0 是在 TVOS1.0 与华
  86.                                 为 MediaOS 及阿里巴巴 YunOS 融合的基础上，打造的新一代智能电视操作系统。华为主要
  87.                                 承担开发工作，内置的电视购物商城由阿里方面负责。</p>
  88.                             <p>admin 15 / 10 / 11</p>
  89.                         </div>
  90.                     </div>
  91.                     <div class="row info-content">
  92.                         <div class="col-md-5 col-sm-5 col-xs-5">
  93.                             <img src="img/info1.jpg" class="img-responsive" alt="">
  94.                         </div>
  95.                         <div class="col-md-7 col-sm-7 col-xs-7">
  96.                             <h4>广电总局发布 TVOS2.0 华为阿里参与研发</h4>
  97.                             <p class="hidden-xs">TVOS2.0 是在 TVOS1.0 与华
  98.                                 为 MediaOS 及阿里巴巴 YunOS 融合的基础上，打造的新一代智能电视操作系统。华为主要
  99.                                 承担开发工作，内置的电视购物商城由阿里方面负责。</p>
  100.                             <p>admin 15 / 10 / 11</p>
  101.                         </div>
  102.                     </div>
  103.                     <div class="row info-content">
  104.                         <div class="col-md-5 col-sm-5 col-xs-5">
  105.                             <img src="img/info1.jpg" class="img-responsive" alt="">
  106.                         </div>
  107.                         <div class="col-md-7 col-sm-7 col-xs-7">
  108.                             <h4>广电总局发布 TVOS2.0 华为阿里参与研发</h4>
  109.                             <p class="hidden-xs">TVOS2.0 是在 TVOS1.0 与华
  110.                                 为 MediaOS 及阿里巴巴 YunOS 融合的基础上，打造的新一代智能电视操作系统。华为主要
  111.                                 承担开发工作，内置的电视购物商城由阿里方面负责。</p>
  112.                             <p>admin 15 / 10 / 11</p>
  113.                         </div>
  114.                     </div>
  115.                     <div class="row info-content">
  116.                         <div class="col-md-5 col-sm-5 col-xs-5">
  117.                             <img src="img/info1.jpg" class="img-responsive" alt="">
  118.                         </div>
  119.                         <div class="col-md-7 col-sm-7 col-xs-7">
  120.                             <h4>广电总局发布 TVOS2.0 华为阿里参与研发</h4>
  121.                             <p class="hidden-xs">TVOS2.0 是在 TVOS1.0 与华
  122.                                 为 MediaOS 及阿里巴巴 YunOS 融合的基础上，打造的新一代智能电视操作系统。华为主要
  123.                                 承担开发工作，内置的电视购物商城由阿里方面负责。</p>
  124.                             <p>admin 15 / 10 / 11</p>
  125.                         </div>
  126.                     </div>
  127.                 </div>
  128.             </div>
  129.  
  130.             <div class="col-md-4 info-right hidden-xs hidden-sm">
  131.                 <blockquote>
  132.                     <h2>热门资讯</h2>
  133.                 </blockquote>
  134.                 <div class="container-fluid">
  135.                     <div class="row">
  136.                         <div class="col-md-5 col-sm-5 col-xs-5"
  137.                              style="margin:12px 0;padding:0;">
  138.                             <img src="img/info3.jpg" class="img-responsive" alt="">
  139.                         </div>
  140.                         <div class="col-md-7 col-sm-7 col-xs-7"
  141.                              style="padding-right:0">
  142.                             <h4>标题</h4>
  143.                             <p>admin 15 / 10 / 11</p>
  144.                         </div>
  145.                     </div>
  146.                      <div class="row">
  147.                         <div class="col-md-5 col-sm-5 col-xs-5"
  148.                              style="margin:12px 0;padding:0;">
  149.                             <img src="img/info3.jpg" class="img-responsive" alt="">
  150.                         </div>
  151.                         <div class="col-md-7 col-sm-7 col-xs-7"
  152.                              style="padding-right:0">
  153.                             <h4>标题</h4>
  154.                             <p>admin 15 / 10 / 11</p>
  155.                         </div>
  156.                     </div>
  157.                      <div class="row">
  158.                         <div class="col-md-5 col-sm-5 col-xs-5"
  159.                              style="margin:12px 0;padding:0;">
  160.                             <img src="img/info3.jpg" class="img-responsive" alt="">
  161.                         </div>
  162.                         <div class="col-md-7 col-sm-7 col-xs-7"
  163.                              style="padding-right:0">
  164.                             <h4>标题</h4>
  165.                             <p>admin 15 / 10 / 11</p>
  166.                         </div>
  167.                     </div>
  168.                 </div>
  169.             </div>
  170.         </div>
  171.     </div>
  172.  
  173.     <!--底部-->
  174. <div class="dibu">
  175.     <div class="container">
  176.         <div class="row">
  177.             <div class="col-md-6">
  178.                 <h4 class="text-center">联系方式</h4>
  179.                 <p>联系人:游先生</p>
  180.                 <p>手机:18681395066     13096006150</p>
  181.                 <p>座机:0813-8287339</p>
  182.                 <p>Q Q:350016919</p>
  183.                 <p>邮箱:350016919@qq.com</p>
  184.                 <p>地址:自贡市自流井区丹桂东段泰丰大厦1区8层7号 </p>
  185.             </div>
  186.             <div class="col-md-6">
  187.                 <h4 class="text-center">友情链接</h4>
  188.                 <ul class="list-unstyled">
  189.                     <li><a href="http://www.scaic.gov.cn/" target="_blank">四川工商局</a></li>
  190.                     <li><a href="http://www.baidu.com" target="_blank">百度</a></li>
  191.                 </ul>
  192.             </div>
  193.         </div>
  194.     </div>
  195. </div>
  196. <div class="banq">
  197.     <div class="container text-center banq">
  198.         <p>版权所有 © 自贡瑞佳财务咨询有限公司 未经许可 严禁复制</p>
  199.         <p><a href="http://www.jxiou.com/" target="_blank">自贡玉秀文化传播技术支持</a></p>
  200.         <p>蜀ICP备16022718号-1 </p>
  201.     </div>
  202. </div>
  203.  
  204. <!--引入jquery文件-->
  205. <script src="jquery/jquery.min.js"></script>
  206. <!--引入bootstrap里的js-->
  207. <script src="bootstrap/js/bootstrap.min.js"></script>
  208. <script src="ceshi.js"></script>
  209. </body>
  210. </html>

css

  1. @charset "utf-8";
  2. /*资讯内容 CSS*/
  3. #information {
  4.     padding: 40px 0;
  5.     background: #eee;
  6. }
  7.  
  8. .info-right {
  9.     background-color: #fff;
  10.     box-shadow: 2px 2px 3px #ccc;
  11. }
  12.  
  13. .info-right blockquote {
  14.     padding:;
  15.     margin:;
  16. }
  17.  
  18. .info-right h2 {
  19.     font-size: 20px;
  20.     padding: 5px;
  21. }
  22.  
  23. .info-right h4 {
  24.     line-height: 1.6;
  25. }
  26.  
  27. .info-content {
  28.     background-color: #fff;
  29.     box-shadow: 2px 2px 3px #ccc;
  30.     margin: 0 0 20px 0;
  31. }
  32.  
  33. .info-content img {
  34.     margin: 12px 0;
  35. }
  36.  
  37. .info-content h4 {
  38.     font-size: 14px;
  39.     padding: 2px 0 0 0;
  40. }
  41.  
  42. .info-content p {
  43.     line-height: 1.6;
  44.     color: #666;
  45. }
  46.  
  47. /*对于.info-content h4，在中屏和大屏需要保持一行。*/
  48. .info-content h4 {
  49.     overflow: hidden;
  50.     white-space: nowrap;
  51.     text-overflow: ellipsis;
  52. }
  53. blockquote{
  54.     border-left:5px solid #0f68ee;
  55. }

重点：用栅格系统布局

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

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

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

  2. 第二百五十五节，Bootstrap项目实战--关于

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

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

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

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

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

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

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

  6. AngularJS进阶(三十九)基于项目实战解析ng启动加载过程

    基于项目实战解析ng启动加载过程 前言 在AngularJS项目开发过程中,自己将遇到的问题进行了整理.回过头来总结一下angular的启动过程. 下面以实际项目为例进行简要讲解. 1.载入ng库 2 ...

  7. Solr集群、KI分词、项目实战

    Solr是一个高性能,采用Java开发,基于Lucene的全文搜索服务器.同时对其进行了扩展,提供了比Lucene更为丰富的查询语言,同时实现了可配置.可扩展并对查询性能进行了优化,并且提供了一个完善 ...

  8. Bootstrap 学习笔记 项目实战 首页内容介绍 下

    最终效果: HTML代码 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset ...

  9. Bootstrap 学习笔记 项目实战 首页内容介绍 上

    效果图: HTML代码: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset ...

随机推荐

  1. Java版 数字金额大写转换

    需求:读入一个浮点数值,将其转化为中文金额的大写形式.如123.45,转化为:壹佰贰拾叁元肆角伍分. 以下是各种情况要完善: 1. 当金额为整数,只表示整数部分,省略小数部分,并添加“整”字.如123 ...

  2. MVC里使用JSON方法集锦

    //一般处理,无参数示例 public JsonResult Test() { Something... return Json{new{Success=true,Msg="Error!&q ...

  3. Apple Watch 会再一次改变世界么？

    这一次苹果发布会,苹果推出了Apple Watch.他会像iPhone系列一样,去改变大家对于手表的理解么?会像iPhone一样受到大家的追捧么? 我觉得第一代的产品只可能是试探性的,真正能去引爆市场 ...

  4. js 不固定传参

      js 不固定传参 CreationTime--2018年7月2日15点18分 Author:Marydon /** * 声明一个函数 * @explain 传参个数不确定 */ function ...

  5. ajax提交gb2312的中文，出现乱码

    解决方案:

  6. iOS多线程常用类说明

    iOS的多线程,涉及到如下一些类,这里集中做个介绍,免得混淆. 1.NSTimer 很显然,这是定时器类 2.NSTask iOS 不支持 NSTask 在很多并发操作的时候,多线程太耗资源,也太危险 ...

  7. 10 分钟实现一个自己的server监控器

    需求 近期须要给自己的server加入监控器.目的是监控server的内存.CPU.磁盘占用率,资源占用率过高的话能给自己发个提醒.当前主流的平台通常会提供邮件.短息.甚至会提供微信提醒,只是这类提醒 ...

  8. mydate97时间插件集成jquery插件

    1.初始化JS: //把mydate97时间插件集成jquery插件 (function ($) { $.fn.mydatePicker = function (options) { return t ...

  9. Decoration3：增删改的实现

    下面我们完成数据的增加.删除.修改,这里的主要知识就是前端Angularjs,遇到的问题 1.路由组件采用ui.router,链接的写法有两种: <a href="#/coach/cr ...

  10. Spring学习10-SpringMVC原理及核心组件1

    一.SpringMVC原理     请求到来时,第一个接受这个请求的前端控制器叫DispatcherServlet(这个需要在web.xml中配置), 后端控制器叫Controller.负责处理请求U ...