第二百五十三節，Bootstrap項目實戰-資訊

阿新 • • 發佈：2017-05-09

question images 需要按鈕 targe initial rip 座機 con

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>郵箱:[email protected]</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: 0;
    margin: 0;
}

.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項目實戰-資訊

question images 需要按鈕 targe initial rip 座機 con Bootstrap項目實戰-資訊 html <!DOCTYPE html> <html lang="zh-cn"> <head> &l

第二百五十節，Bootstrap項目實戰--響應式導航

char play color home bar rgba -c fire add Bootstrap項目實戰--響應式導航學習要點：　　1.響應式導航一．響應式導航基本導航組件+響應式第一步，聲明導航區域，設置導航默認樣式，設置導航條固定在頂部na

第三百五十三節，Python分布式爬蟲打造搜索引擎Scrapy精講—scrapy的暫停與重啟

ctrl+ 裏的 dir 其中重啟 requests 引擎 image .cn 第三百五十三節，Python分布式爬蟲打造搜索引擎Scrapy精講—scrapy的暫停與重啟 scrapy的每一個爬蟲，暫停時可以記錄暫停狀態以及爬取了哪些url，重啟時可以從暫停狀態開始

第二百八十節，MySQL數據庫-外鍵鏈表之一對多

一個 -1 blog logs bsp com span 連接 col MySQL數據庫-外鍵鏈表之一對多外鍵鏈表之一對多外鍵鏈表：就是a表通過外鍵連接b表的主鍵，建立鏈表關系一對多：就是b表的某一個字段值對應a表外鍵裏的多個值，前提是a表要與b表鏈表第二百

第二百八十八節，MySQL數據庫-索引

創建 mysql數據庫組合 logs pan 找到根據存放位置全表掃描 MySQL數據庫-索引索引，是數據庫中專門用於幫助用戶快速查詢數據的一種數據結構。類似於字典中的目錄，查找字典內容時可以根據目錄查找到數據的存放位置，然後直接獲取即可。如果沒有創建索引查

第二百九十節，MySQL數據庫-MySQL命令行導出導入數據庫，數據庫備份還原

mman tro 建立 pro lena ont mysq 提示 sql數據庫 MySQL命令行導出導入數據庫，數據庫備份還原 MySQL命令行導出數據庫：1，進入MySQL目錄下的bin文件夾：cd MySQL中到bin文件夾的目錄如我輸入的命令行：cd C:\Pro

第三百三十三節，web爬蟲講解2—Scrapy框架爬蟲—Scrapy模擬瀏覽器登錄—獲取Scrapy框架Cookies

pid 設置 ade form 需要 span coo decode firefox 第三百三十三節，web爬蟲講解2—Scrapy框架爬蟲—Scrapy模擬瀏覽器登錄模擬瀏覽器登錄 start_requests()方法，可以返回一個請求給爬蟲的起始網站，這個返回的請求相

第三百五十八節，Python分布式爬蟲打造搜索引擎Scrapy精講—將bloomfilter(布隆過濾器)集成到scrapy-redis中

分布式爬蟲 times 操作加載 ger 目錄需要 ini space 第三百五十八節，Python分布式爬蟲打造搜索引擎Scrapy精講—將bloomfilter(布隆過濾器)集成到scrapy-redis中，判斷URL是否重復布隆過濾器(Bloom Filte

第三百八十三節，Django+Xadmin打造上線標準的在線教育平臺—路由映射與靜態文件配置

是否操作數列表 errors ner rate 郵箱 scrip user 第三百八十四節，Django+Xadmin打造上線標準的在線教育平臺—路由映射與靜態文件配置以及會員註冊基於類的路由映射 from django.conf.urls import url

HTML5視頻教程，HTML5項目實戰，HTML5中文指南，HTML5使用手冊

項目實戰手冊核心編程涵蓋 nbsp 表達式 PE 下載數組 HTML5視頻教程，HTML5項目實戰，HTML5中文指南，HTML5使用手冊。超過2G 的 HTML5 視頻教程免費分享，免費下載！尚矽谷前端HTML5視頻_HTML & C

第二百四十六節，Bootstrap彈出框和警告框插件

popover 事件 png div 數字 ott hid strong selector Bootstrap彈出框和警告框插件學習要點：　　1.彈出框　　2.警告框本節課我們主要學習一下 Bootstrap 中的彈出框和警告框插件。一．彈出框彈

第二百六十五節，xss腳本攻擊介紹

服務器端引號能夠需要當前意思什麽模型留言 xss腳本攻擊介紹 Cross-Site Scripting（XSS）是一類出現在 web 應用程序上的安全弱點，攻擊者可以通過 XSS 插入一些代碼，使得訪問頁面的其他用戶都可以看到，XSS 通常是可以被看作

第二百七十五節，MySQL數據庫安裝和介紹

關閉離線 har 內存 query 命令臨時 rdb 執行文件 MySQL數據庫安裝一、概述 1、什麽是數據庫？　答：數據的倉庫，稱其為數據庫 2、什麽是 MySQL、Oracle、SQLite、Access、MS SQL Server等？　答：他們均是一

第二百八十五節，MySQL數據庫-MySQL函數

制度 blog logs 當前 cell ews 取字符 art date() MySQL數據庫-MySQL函數 1、MySQL內置函數 SELECT執行函數，後面跟要執行的函數 CHAR_LENGTH(str)函數：返回字符串的字符長度 -- CHAR_LENG

第二百六十二節，Tornado框架-cookie

導入 self. spa 修改詳情 url submit -c ati Tornado框架-cookie Cookie 是網站用來在客戶端保存識別用戶的一種小文件。一般來用庫可以保存用戶登錄信息、購物數據信息等一系列微小信息。 self.set_cookie()方法，創

第二百六十九節，Tornado框架-Session登錄判斷

獲取系統當前時間 __main__ 參數 art emp exp 登錄密碼字典 cnblogs Tornado框架-Session登錄判斷 Session需要結合cookie來實現 Session的理解　　1、用戶登錄系統時，服務器端獲取系統當前時間，進行nd5加密

第二百七十四節，同源策略和跨域訪問

ron 使用 outlook 是否 secure .com 相對 100% wid 同源策略和跨域訪問什麽是同源策略盡管瀏覽器的安全措施多種多樣，但是要想黑掉一個Web應用，只要在瀏覽器的多種安全措施中找到某種措施的一個漏洞或者繞過一種安全措施的方法即可。瀏覽器

第二百七十六節，MySQL數據庫常用命令

query 相關數 tinc man 配置服務器性能 lai 用戶管理常用命令 MySQL數據庫常用命令 1、顯示數據庫 SHOW DATABASES;顯示數據庫 SHOW DATABASES; mysql - 用戶權限相關數據sys - 數據庫的相關配置存放

第二百九十一節，RabbitMQ多設備消息隊列

ble man 添加 protocol jpg 工具賬號數據 http RabbitMQ多設備消息隊列-安裝與簡介 RabbitMQ簡介解釋RabbitMQ，就不得不提到AMQP（Advanced Message Queuing Protocol）協議。 AMQP

第二百九十四節，Redis緩存-Redis安裝

ron window下 down spa 區別 ash make emca 原子性 redis簡介 redis是一個key-value存儲系統。和Memcached類似，它支持存儲的value類型相對更多，包括string(字符串)、list(鏈表)、set(集合)、zse

第二百五十三節，Bootstrap項目實戰-資訊

相關推薦