第二百五十三节，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>
    
    <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">                                            
        <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 / 11p>
                        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 / 11p>
                        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 / 11p>
                        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 / 11p>
                        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 / 11p>
                        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 / 11p>
                        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 / 11p>
                        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 / 11p>
                        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     13096006150p>
                <p>座机:0813-8287339p>
                <p>Q Q:350016919p>
                <p>邮箱:350016919@qq.comp>
                <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>


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

<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;
}

重点：用栅格系统布局

Python

相关

学习《Python编程从入门到实践》PDF+代码训练

python-----面向对象简单理解

python多线程控制

Sublime 的安装、汉化、配置、Python环境和插件

python——time strftime() 函数表示当地时间

python 初识函数

python 函数对象 嵌套 闭包

Python栈溢出——设置python栈大小

python-面向对象-01课堂笔记

python爬虫

Python 之父的解析器系列之五：左递归 PEG 语法

Python 为了提升性能，竟运用了共享经济

标签