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

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">

</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="#"><span class="glyphicon glyphicon-home"></span> 首页</a></li>    <!--设置当前列表首先-->

                <li><a href="#"><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>

<!--内容1-->

<div class="tab1">

    <div class="container">

        <h2 class="tab-h2">「 为什么选择瑞佳商务 」</h2>

        <p class="tab-p">20年经验，专人专办，上面服务，后续记账业务多！</p>

        <div class="row">

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

                <div class="media">

                    <div class="media-left media-top">

                        <a href="#">

                            <img class="media-object" src="img/zhzhao.png" alt="...">

                        </a>

                    </div>

                    <div class="media-body">

                        <h4 class="media-heading">代办证照</h4>

                        <p>工商代办、工商注册、执照代办、公司注册、资质代理、年检等 ！</p>

                    </div>

                </div>

            </div>

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

                <div class="media">

                    <div class="media-left media-top">

                        <a href="#">

                            <img class="media-object" src="img/shb.png" alt="...">

                        </a>

                    </div>

                    <div class="media-body">

                        <h4 class="media-heading">商标注册</h4>

                        <p>代理注册各种商标！</p>

                    </div>

                </div>

            </div>

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

                <div class="media">

                    <div class="media-left media-top">

                        <a href="#">

                            <img class="media-object" src="img/jzhshw.png" alt="...">

                        </a>

                    </div>

                    <div class="media-body">

                        <h4 class="media-heading">记账税务</h4>

                        <p>代理公司账务，税务申报！</p>

                    </div>

                </div>

            </div>

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

                <div class="media">

                    <div class="media-left media-top">

                        <a href="#">

                            <img class="media-object" src="img/qt.png" alt="...">

                        </a>

                    </div>

                    <div class="media-body">

                        <h4 class="media-heading">其他业务</h4>

                        <p>其他各种业务！</p>

                    </div>

                </div>

            </div>

        </div>

    </div>

</div>

<!--两段内容-->

<div class="tab2">

    <div class="container">

        <div class="row">

            <div class="col-md-6 col-sm-6 tab2-img">

                <img src="img/tab2.png" alt="" class="auto img-responsive center-block">

            </div>

            <div class="text col-md-6 col-sm-6 tab2-text">

                <h3>强大的学习体系</h3>

                <p>经过管理学大师层层把关、让您的企业突飞猛进。</p>

            </div>

        </div>

    </div>

</div>

<div class="tab3">

    <div class="container">

        <div class="row">

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

                <img src="img/tab3.png" alt="" class="auto img-responsive center-block">

            </div>

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

                <h3>完美的管理方式</h3>

                <p>最新的管理培训方案，让您的企业赶超同行。</p>

            </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";

/*通用----------------------------------------------------------------------------------------------------------------*/

/*将a标签去掉点击后的虚线边框*/

body {

    font-family: "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei UI", "Microsoft YaHei", SimHei, "\5B8B\4F53", simsun, sans-serif;

}

a:focus {

    outline: none;

}

/*导航部分-------------------------------------------------------------------------------------------------------------*/

/*导航区域背景色*/

.navbar{

    background-color: #2056AC;

}

/*导航a首选标签，聚集光标和鼠标放上去背景色*/

.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:focus, .navbar-default .navbar-nav > .active > a:hover{

    background-color: #FE7C19;

    color: #FFFFFF;

}

/*网站名称*/

.navbar-default .navbar-brand:focus, .navbar-default .navbar-brand:hover, .navbar-default .navbar-brand {

    color: #FFFFFF;

    font-size:15px;

}

/*去除导航ul头部内边距*/

.dhul{

    margin-top:;

}

/*导航a标签，聚集光标和鼠标放上去背景色*/

.navbar-default .navbar-nav > li > a:focus, .navbar-default .navbar-nav > li > a:hover{

    background-color: #FE7C19;

    color: #FFFFFF;

}

/*导航条文字颜色*/

.navbar-default .navbar-nav > li > a{

    color: #FFFFFF;

}

/*导航条按钮背景色*/

.navbar-toggle, .navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover{

    background-color: #ddd;

}

/*导航条按钮文字三横背景和文字颜色*/

.navbar-default .navbar-toggle .icon-bar{

    background-color: #f5f5f5;

    border-radius: 1px;

    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);

    display: block;

    height: 2px;

    width: 18px;

}

/*轮播器--------------------------------------------------------------------------------------------------------------*/

/*将轮播器头部外边距设置50像素*/

#myCarousel {

    margin: 50px 0 0 0;

}

.carousel-inner .item img {

    margin: 0 auto;

}

.tp1{

    background:#D6E5EA;

}

.tp2{

    background:#F4F3F1;

}

.tp3{

    background:#E2E1E7;

}

/*经营业务-------------------------------------------------------------------------------------------------------------*/

.tab-h2 {

    font-size: 20px;

    color: #0059B2;

    text-align: center;

    letter-spacing: 1px;

}

.tab-p {

    font-size: 15px;

    color: #999;

    text-align: center;

    letter-spacing: 1px;

    margin: 20px 0 40px 0;

}

.tab1 {

    margin: 30px 0;

    color: #666;

}

.tab1 .media-heading {

    margin: 5px 0 20px 0;

}

.tab1 .text-muted {

    color: #999;

    text-decoration: line-through;

}

.tab1 .media-heading {

    margin: 5px 0 20px 0;

}

.tab1 .text-muted {

    color: #999;

    text-decoration: line-through;

}

.tab1 .col {

    padding: 20px;

}

.media {

    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);

}

/*两段内容部分*/

.tab2 {

    background: #eee;

    padding: 60px 20px;

    text-align: center;

}

.tab2 img {

    width: 40%;

    height: 40%;

}

.tab3 {

    padding: 40px 0;

    text-align: center;

}

.tab3 img {

    width: 65%;

    height: 65%;

}

.text h3 {

    font-size: 20px;

}

.text p {

    font-size: 14px;

}

/*底部-----------------------------------------------------------------------------------------------------------------*/

.dibu{

    background-color:#222222;

}

.dibu .row{

    color: #FFFFFF;

}

.dibu .row h4{

    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.97);

    padding:10px 0;

}

/*版权*/

.banq{

    background-color: #000000;

}

.banq .banq{

    padding: 10px 0 0 0;

}

.banq p{

    color: #777777;

}

/* 小屏幕（平板，大于等于 768px） */

@media (min-width: 768px) {

    /*网站名称*/

    .navbar-default .navbar-brand:focus, .navbar-default .navbar-brand:hover, .navbar-default .navbar-brand {

        color: #FFFFFF;

        font-size: 20px;

    }

    .tab-h2 {

        font-size: 26px;

    }

    .tab-p {

        font-size: 16px;

    }

}

/* 中等屏幕（桌面显示器，大于等于 992px） */

@media (min-width: 992px) {

    /*网站名称*/

    .navbar-default .navbar-brand:focus, .navbar-default .navbar-brand:hover, .navbar-default .navbar-brand {

        color: #FFFFFF;

        font-size: 23px;

    }

    .tab-h2 {

        font-size: 28px;

    }

    .tab-p {

        font-size: 17px;

    }

}

/* 大屏幕（大桌面显示器，大于等于 1200px） */

@media (min-width: 1200px) {

    .tab-h2 {

        font-size: 30px;

    }

    .tab-p {

        font-size: 18px;

    }

}

/**

 * Created by admin on 2017/5/2.

 */

$(function () {

    $('#myCarousel').carousel({

        //设置自动播放/3 秒

        interval: 3000,

    });

});

总结：主要用到，导航条组件，轮播器组件，栅格系统，和媒体对象组件

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

第二百五十五节，Bootstrap项目实战--关于
Bootstrap项目实战--关于 html <!DOCTYPE html> <html lang="zh-cn"> <head> <me ...
第二百五十四节，Bootstrap项目实战--案例
Bootstrap项目实战--案例 html <!DOCTYPE html> <html lang="zh-cn"> <head> <me ...
第二百五十三节，Bootstrap项目实战-资讯
Bootstrap项目实战-资讯 html <!DOCTYPE html> <html lang="zh-cn"> <head> <met ...
第二百五十节，Bootstrap项目实战--响应式导航
Bootstrap项目实战--响应式导航学习要点: 1.响应式导航一．响应式导航基本导航组件+响应式第一步,声明导航区域,设置导航默认样式,设置导航条固定在顶部navbar样式class类,写 ...
第二百五十一节，Bootstrap项目实战--响应式轮播图
Bootstrap项目实战--响应式轮播图学习要点: 1.响应式轮播图本节课我们要在导航条的下方做一张轮播图,自动播放最新的重要动态. 一．响应式轮播图响应式轮播图第一步,设置轮播器区域car ...
Bootstrap 学习笔记项目实战首页内容介绍下
最终效果: HTML代码 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset ...
Bootstrap 学习笔记项目实战首页内容介绍上
效果图: HTML代码: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset ...
Bootstrap 学习笔记项目实战响应式轮播图
左右两个箭头可以随浏览器缩放进行移动保持在图片中间 Html代码: <!DOCTYPE html> <html lang="zh-cn"> <hea ...
Bootstrap 学习笔记项目实战响应式导航栏
导航代码HTML: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset=&q ...

随机推荐

JUnit 3.8 通过反射测试私有方法
测试私有(private)的方法有两种: 1)把目标类的私有方法(修饰符:private)修改为(public),不推荐,因为修改了源程序不佳 2)通过反射 (推荐) 代码演示: 目标程序 Priva ...
oracle 存储过程返回结果集
oracle 存储过程返回结果集 CreationTime--2018年8月14日09点50分 Author:Marydon 1.情景展示 oracle存储过程如何返回结果集 2.解决方案最简 ...
java FileI(O)nputStream为什么比BufferedI(O)utputStream慢？
因为buffered多了一个缓冲区,读和写都是先把硬盘或者内存中的数据放到内存中一块缓存区域,到一定大小读写到硬盘或者内存 package io; import java.io.*; public ...
easyui框架Date日期类型以json形式显示到前台datagrid时，显示为[object Object]
如下图,easyui当后台把时间数据返回转换成json然后加载在easyui的datagrid里面,显示为[object Object] 需要对时间格式添加格式的显示方法 /** * 时间格 ...
ubuntu12.04(64位）下安装Adobe Flash Player
2012-06-14 10:10:37 第一步,去adobe官方网站就可以,使用方便,打开网站:http://get.adobe.com/cn/flashplayer/根据自己的版本下载需要的.本 ...
神经网络中 BP 算法的原理与 Python 实现源码解析
最近这段时间系统性的学习了 BP 算法后写下了这篇学习笔记,因为能力有限,若有明显错误,还请指正. 什么是梯度下降和链式求导法则假设我们有一个函数 J(w),如下图所示. 梯度下降示意图现在,我们 ...
Python 列表 max() 方法
描述 Python 列表 max() 方法返回列表元素中的最大值. 语法 max() 方法语法: max(L) 参数 L -- 要返回最大值的列表. 返回值返回列表元素中的最大值. 实例以下实例展 ...
用Reflector for .NET反编译dll文件(.net)，把整个dll导出个cs插件
Reflector for .NET 下载地址: http://www.aisto.com/roeder/dotnet/ Reflector.FileDisassembler.zip下载地址: htt ...
C# BackgroundWorker的Bug？？？
废话不多说,上代码: public partial class Form1 : Form { BackgroundWorker _bgWorker; int count; public Form1() ...
AutoFac文档9（转载）
目录开始 Registering components 控制范围和生命周期用模块结构化Autofac xml配置与.net集成深入理解Autofac 指导关于词汇表关系类型 Autofa ...

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

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

随机推荐

热门专题