第二百五十三节，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">
<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项目实战-资讯的更多相关文章
- 第二百五十二节，Bootstrap项目实战-首页
Bootstrap项目实战-首页 html <!DOCTYPE html> <html lang="zh-cn"> <head> <met ...
- 第二百五十五节，Bootstrap项目实战--关于
Bootstrap项目实战--关于 html <!DOCTYPE html> <html lang="zh-cn"> <head> <me ...
- 第二百五十四节，Bootstrap项目实战--案例
Bootstrap项目实战--案例 html <!DOCTYPE html> <html lang="zh-cn"> <head> <me ...
- 第二百五十节，Bootstrap项目实战--响应式导航
Bootstrap项目实战--响应式导航 学习要点: 1.响应式导航 一．响应式导航 基本导航组件+响应式 第一步,声明导航区域,设置导航默认样式,设置导航条固定在顶部navbar样式class类,写 ...
- 第二百五十一节，Bootstrap项目实战--响应式轮播图
Bootstrap项目实战--响应式轮播图 学习要点: 1.响应式轮播图 本节课我们要在导航条的下方做一张轮播图,自动播放最新的重要动态. 一．响应式轮播图 响应式轮播图 第一步,设置轮播器区域car ...
- AngularJS进阶(三十九)基于项目实战解析ng启动加载过程
基于项目实战解析ng启动加载过程 前言 在AngularJS项目开发过程中,自己将遇到的问题进行了整理.回过头来总结一下angular的启动过程. 下面以实际项目为例进行简要讲解. 1.载入ng库 2 ...
- Solr集群、KI分词、项目实战
Solr是一个高性能,采用Java开发,基于Lucene的全文搜索服务器.同时对其进行了扩展,提供了比Lucene更为丰富的查询语言,同时实现了可配置.可扩展并对查询性能进行了优化,并且提供了一个完善 ...
- Bootstrap 学习笔记 项目实战 首页内容介绍 下
最终效果: HTML代码 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset ...
- Bootstrap 学习笔记 项目实战 首页内容介绍 上
效果图: HTML代码: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset ...
随机推荐
- cocos2d-x 音乐与音效
1.背景音乐 要使用一个音乐,首先要预加载这个音乐,预加载的方法如下 SimpleAudioEngine::sharedEngine()->preloadBackgroundMusic( CCF ...
- LeetCode Linked List Cycle 解答程序
Linked List Cycle Given a linked list, determine if it has a cycle in it. Follow up: Can you solve i ...
- Google开源单元測试框架Google Test：VS2012 配置
由题目可知,Google Test(简称gtest)是Google公布的一个开源C/C++測试框架,被应用于多个开源项目及Google内部项目中,包括Chrome浏览器.LLVM编译器架构.Proto ...
- android安装应用程序工具类
/** * 安装APK文件 *@param APK文件 *Version: *author:YangQuanqing */ private void installAPK(File file){ // ...
- selenium webdriver 的三种等待方式
1.显式等待 一个显式等待是你定义的一段代码,用于等待某个条件发生然后再继续执行后续代码. from selenium import webdriver from selenium.webdriver ...
- PHP文件系统处理
文件系统概述 文件类型 PHP是以UNIX的文件系统为模型的,因此Windows系统中我们只能获得"file"."dir"或者"unk ...
- javascript 获取页面尺寸/位置
************************************************************************//ie中如果全部不给定值则会都为零(宽和高在设置一个的 ...
- 【centos6.5】安装LNMP（linux公社）
1:查看环境: 1 2 [root@10-4-14-168 html]# cat /etc/redhat-release CentOS release 6.5 (Final) 2:关掉防火墙 1 [r ...
- 卡特兰数（Catalan数）
首先奉上高中的排列组合公式,防止某些人忘记了 卡特兰数: 规定h(0)＝1,而h(1)＝1,h(2)＝2,h(3)＝5,h(4)＝14,h(5)＝42,h(6)＝132,h(7)＝C(14,7)-C( ...
- JavaScript 中 substr 和 substring的区别
http://www.cnblogs.com/meil/archive/2007/01/05/598528.htmlString.substr(N1,N2) 这个就是我们常用的从指定的位置(N1)截取 ...