Bootstrap项目实战-资讯

html

<!DOCTYPE html>

<html lang="zh-cn">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">

    <title>Bootstrap 介绍</title>

    <!--引入bootstrap样式文件-->

    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">

    <link rel="stylesheet" href="css/ceshi.css">

    <link rel="stylesheet" href="css/zix.css">

</head>

<body>

<!--导航-->

<nav class="navbar navbar-default navbar-fixed-top">                <!--声明导航区域，设置导航默认样式，设置导航条固定在顶部-->

    <div class="container">                                            <!--设置固定布局，最大宽度1140-->

        <div class="navbar-header">                                    <!--设置导航标题区域-->

            <a href="#" class="navbar-brand logo">自贡瑞佳财务咨询有限公司</a>    <!--设置导航标内容-->

            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">    <!--设置导航按钮-->

                <span class="icon-bar"></span>        <!--设置导航按钮样式-->

                <span class="icon-bar"></span>

                <span class="icon-bar"></span>

            </button>

        </div>

        <div class="collapse navbar-collapse" id="navbar-collapse">                <!--设置导航折叠区域，设置导航折叠样式-->

            <ul class="nav navbar-nav navbar-right dhul">        <!--设置列表区域，导航列表默认样式，导航列表右浮动-->

                <li class="active"><a href="ceshi.html"><span class="glyphicon glyphicon-home"></span> 首页</a></li>    <!--设置当前列表首先-->

                <li><a href="zix.html"><span class="glyphicon glyphicon-list"></span> 资讯</a></li>                    <!--设置当前列表图标-->

                <li><a href="#"><span class="glyphicon glyphicon-fire"></span> 案例</a></li>

                <li><a href="#"><span class="glyphicon glyphicon-question-sign"></span> 关于</a></li>

            </ul>

        </div>

    </div>

</nav>

<!--轮播图-->

<div id="myCarousel" class="carousel slide">                        <!--设置轮播器区域样式，设置轮播器滚动样式-->

    <ol class="carousel-indicators">                                <!--设置轮播器列表区域样式，就是小圆点区域样式-->

        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>    <!--设置当前列表首选-->

        <li data-target="#myCarousel" data-slide-to="1"></li>

        <li data-target="#myCarousel" data-slide-to="2"></li>

    </ol>

    <div class="carousel-inner">                                    <!--设置轮播器图片区域-->

        <div class="item active tp1">                                <!--设置轮播器图片样式-->

            <a href="#"><img src="img/1.jpg" alt="第一张"></a>

        </div>

        <div class="item tp2">

            <a href="#"><img src="img/2.jpg" alt="第二张"></a>

        </div>

        <div class="item tp3">

            <a href="#"><img src="img/3.jpg" alt="第三张"></a>

        </div>

    </div>

    <!--设置轮播器箭头区域-->

    <a href="#myCarousel" data-slide="prev" class="carousel-control left">

        <span class="glyphicon glyphicon-chevron-left"></span>

    </a>

    <a href="#myCarousel" data-slide="next" class="carousel-control right">

        <span class="glyphicon glyphicon-chevron-right"></span>

    </a>

</div>

<!--资讯内容-->

<div id="information">

    <div class="container">

        <div class="row">

            <div class="col-md-8 info-left">

                <div class="container-fluid" style="padding:0;">

                    <div class="row info-content">

                        <div class="col-md-5 col-sm-5 col-xs-5">

                            <img src="img/info1.jpg" class="img-responsive" alt="">

                        </div>

                        <div class="col-md-7 col-sm-7 col-xs-7">

                            <h4>广电总局发布 TVOS2.0 华为阿里参与研发</h4>

                            <p class="hidden-xs">TVOS2.0 是在 TVOS1.0 与华

                                为 MediaOS 及阿里巴巴 YunOS 融合的基础上，打造的新一代智能电视操作系统。华为主要

                                承担开发工作，内置的电视购物商城由阿里方面负责。</p>

                            <p>admin 15 / 10 / 11</p>

                        </div>

                    </div>

                    <div class="row info-content">

                        <div class="col-md-5 col-sm-5 col-xs-5">

                            <img src="img/info1.jpg" class="img-responsive" alt="">

                        </div>

                        <div class="col-md-7 col-sm-7 col-xs-7">

                            <h4>广电总局发布 TVOS2.0 华为阿里参与研发</h4>

                            <p class="hidden-xs">TVOS2.0 是在 TVOS1.0 与华

                                为 MediaOS 及阿里巴巴 YunOS 融合的基础上，打造的新一代智能电视操作系统。华为主要

                                承担开发工作，内置的电视购物商城由阿里方面负责。</p>

                            <p>admin 15 / 10 / 11</p>

                        </div>

                    </div>

                    <div class="row info-content">

                        <div class="col-md-5 col-sm-5 col-xs-5">

                            <img src="img/info1.jpg" class="img-responsive" alt="">

                        </div>

                        <div class="col-md-7 col-sm-7 col-xs-7">

                            <h4>广电总局发布 TVOS2.0 华为阿里参与研发</h4>

                            <p class="hidden-xs">TVOS2.0 是在 TVOS1.0 与华

                                为 MediaOS 及阿里巴巴 YunOS 融合的基础上，打造的新一代智能电视操作系统。华为主要

                                承担开发工作，内置的电视购物商城由阿里方面负责。</p>

                            <p>admin 15 / 10 / 11</p>

                        </div>

                    </div>

                    <div class="row info-content">

                        <div class="col-md-5 col-sm-5 col-xs-5">

                            <img src="img/info1.jpg" class="img-responsive" alt="">

                        </div>

                        <div class="col-md-7 col-sm-7 col-xs-7">

                            <h4>广电总局发布 TVOS2.0 华为阿里参与研发</h4>

                            <p class="hidden-xs">TVOS2.0 是在 TVOS1.0 与华

                                为 MediaOS 及阿里巴巴 YunOS 融合的基础上，打造的新一代智能电视操作系统。华为主要

                                承担开发工作，内置的电视购物商城由阿里方面负责。</p>

                            <p>admin 15 / 10 / 11</p>

                        </div>

                    </div>

                    <div class="row info-content">

                        <div class="col-md-5 col-sm-5 col-xs-5">

                            <img src="img/info1.jpg" class="img-responsive" alt="">

                        </div>

                        <div class="col-md-7 col-sm-7 col-xs-7">

                            <h4>广电总局发布 TVOS2.0 华为阿里参与研发</h4>

                            <p class="hidden-xs">TVOS2.0 是在 TVOS1.0 与华

                                为 MediaOS 及阿里巴巴 YunOS 融合的基础上，打造的新一代智能电视操作系统。华为主要

                                承担开发工作，内置的电视购物商城由阿里方面负责。</p>

                            <p>admin 15 / 10 / 11</p>

                        </div>

                    </div>

                </div>

            </div>

            <div class="col-md-4 info-right hidden-xs hidden-sm">

                <blockquote>

                    <h2>热门资讯</h2>

                </blockquote>

                <div class="container-fluid">

                    <div class="row">

                        <div class="col-md-5 col-sm-5 col-xs-5"

                             style="margin:12px 0;padding:0;">

                            <img src="img/info3.jpg" class="img-responsive" alt="">

                        </div>

                        <div class="col-md-7 col-sm-7 col-xs-7"

                             style="padding-right:0">

                            <h4>标题</h4>

                            <p>admin 15 / 10 / 11</p>

                        </div>

                    </div>

                     <div class="row">

                        <div class="col-md-5 col-sm-5 col-xs-5"

                             style="margin:12px 0;padding:0;">

                            <img src="img/info3.jpg" class="img-responsive" alt="">

                        </div>

                        <div class="col-md-7 col-sm-7 col-xs-7"

                             style="padding-right:0">

                            <h4>标题</h4>

                            <p>admin 15 / 10 / 11</p>

                        </div>

                    </div>

                     <div class="row">

                        <div class="col-md-5 col-sm-5 col-xs-5"

                             style="margin:12px 0;padding:0;">

                            <img src="img/info3.jpg" class="img-responsive" alt="">

                        </div>

                        <div class="col-md-7 col-sm-7 col-xs-7"

                             style="padding-right:0">

                            <h4>标题</h4>

                            <p>admin 15 / 10 / 11</p>

                        </div>

                    </div>

                </div>

            </div>

        </div>

    </div>

    <!--底部-->

<div class="dibu">

    <div class="container">

        <div class="row">

            <div class="col-md-6">

                <h4 class="text-center">联系方式</h4>

                <p>联系人:游先生</p>

                <p>手机:18681395066     13096006150</p>

                <p>座机:0813-8287339</p>

                <p>Q Q:350016919</p>

                <p>邮箱:350016919@qq.com</p>

                <p>地址:自贡市自流井区丹桂东段泰丰大厦1区8层7号 </p>

            </div>

            <div class="col-md-6">

                <h4 class="text-center">友情链接</h4>

                <ul class="list-unstyled">

                    <li><a href="http://www.scaic.gov.cn/" target="_blank">四川工商局</a></li>

                    <li><a href="http://www.baidu.com" target="_blank">百度</a></li>

                </ul>

            </div>

        </div>

    </div>

</div>

<div class="banq">

    <div class="container text-center banq">

        <p>版权所有 © 自贡瑞佳财务咨询有限公司 未经许可 严禁复制</p>

        <p><a href="http://www.jxiou.com/" target="_blank">自贡玉秀文化传播技术支持</a></p>

        <p>蜀ICP备16022718号-1 </p>

    </div>

</div>

<!--引入jquery文件-->

<script src="jquery/jquery.min.js"></script>

<!--引入bootstrap里的js-->

<script src="bootstrap/js/bootstrap.min.js"></script>

<script src="ceshi.js"></script>

</body>

</html>

css

@charset "utf-8";

/*资讯内容 CSS*/

#information {

    padding: 40px 0;

    background: #eee;

}

.info-right {

    background-color: #fff;

    box-shadow: 2px 2px 3px #ccc;

}

.info-right blockquote {

    padding:;

    margin:;

}

.info-right h2 {

    font-size: 20px;

    padding: 5px;

}

.info-right h4 {

    line-height: 1.6;

}

.info-content {

    background-color: #fff;

    box-shadow: 2px 2px 3px #ccc;

    margin: 0 0 20px 0;

}

.info-content img {

    margin: 12px 0;

}

.info-content h4 {

    font-size: 14px;

    padding: 2px 0 0 0;

}

.info-content p {

    line-height: 1.6;

    color: #666;

}

/*对于.info-content h4，在中屏和大屏需要保持一行。*/

.info-content h4 {

    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;

}

blockquote{

    border-left:5px solid #0f68ee;

}

重点：用栅格系统布局

第二百五十三节，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. springmvc 入门（1）

    1.1 Springmvc 本套课程基于spring4.X来讲解的 SpringMVC 概述 Spring 为展现层提供的基于 MVC 设计理念的优秀的 Web 框架,是目前最主流的 MVC 框架之一 ...

  2. 【转】使用python进行多线程编程

    1. python对多线程的支持 1)虚拟机层面 Python虚拟机使用GIL(Global Interpreter Lock,全局解释器锁)来互斥线程对共享资源的访问,暂时无法利用多处理器的优势.使 ...

  3. ios开发之-继承的实现运用

    // // main.m // 继承 // // #import <Foundation/Foundation.h> #import "Animal.h" #impor ...

  4. ACM 刷题错误总结 持续更新并持续回想中o(╯□╰)o

    一.段错误/RE 1.& 变量取地址 2.数组越界 3.爆栈, 非常可能是死循环,ruturn的边界没有处理好,或者是递归的内容里有死循环的部分. 4.线段树 逢写必错,都是build(i*2 ...

  5. QtGui.QGridLayout

    The most universal layout class is the grid layout. This layout divides the space into rows and colu ...

  6. 前端project与性能优化（长文）

    原文链接:http://fex.baidu.com/blog/2014/03/fis-optimize/ 每一个參与过开发企业级 web 应用的前端project师也许都曾思考过前端性能优化方面的问题 ...

  7. kong 插件开发分析

    1.安装开发环境:(我这里用IntelliJ IDEA) 先安装lua 5.1和luarocks 因为kong基于openresty,openresty使用luajit luajit支持的是lua5. ...

  8. Java Persistence with MyBatis 小结2

    MyBatis 最关键的组成部分是 SqlSessionFactory,我们可以从中获取 SqlSession,并执行映射的 SQL 语句.SqlSessionFactory 对象可以通过基于 XML ...

  9. Redis(十八)：Redis和队列

    概要 Redis不仅可作为缓存服务器,还可用作消息队列.它的列表类型天生支持用作消息队列.如下图所示: 由于Redis的列表是使用双向链表实现的,保存了头尾节点,所以在列表头尾两边插取元素都是非常快的 ...

  10. 绕过IE10直接安装VS2013

    参考资料:http://blog.163.com/qimo601%40126/blog/static/1582209320143354446462/ 这SB设定我就懒得说了,安个IE10要安装N多WI ...