<!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></title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<style>
body { font-family: "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei UI", "Microsoft YaHei", SimHei, "\5B8B\4F53", simsun, sans-serif; }
.tab2 {
background-color: #eee;
padding: 60px 20px;
text-align: center;
}
.tab2 img {
width: 40%;
height: 40%;
}
.tab3 {
padding: 60px 20px;
text-align: center;
}
.tab3 img {
width: 65%;
height: 65%;
}
.text h3 {
font-size: 20px;
}
.text p {
font-size: 14px;
}
#footer {
background-color: #eee;
border-top: 1px solid #ccc;
padding: 20px;
text-align: center;
}
/*没有小于768px，是因为Bootstrap3以移动端优先设计*/
/* 小屏幕（平板，大于等于768px） */
@media (min-width: 768px) {
.text h3 {
font-size: 22px;
}
.text p {
font-size: 15px;
}
.tab2-text {
float: left;
}
.tab2-img {
float: right;
}
}
/* 中等屏幕（桌面显示器，大于等于992px） */
@media (min-width: 992px) {
.text h3 {
font-size: 24px;
}
.text p {
font-size: 16px;
}
}
/* 大屏幕（大桌面显示器，大于等于1200px） */
@media (min-width: 1200px) {
.text h3 {
font-size: 26px;
}
.text p {
font-size: 18px;
}
}
</style>
</head>
<body>
<div class="tab2">
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-6 tab2-img">
<img src="img/tab2.png" class="auto img-responsive center-block" alt="">
</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" class="auto img-responsive center-block" alt="">
</div>
<div class="text col-md-6 col-sm-6">
<h3>阅谁问君诵</h3>
<p>阅谁问君诵，水落清香浮。阅谁问君诵，水落清香浮。</p>
</div>
</div>
</div>
</div>
<div style="height: 10000px;"></div>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
$(function () {
//设置文字垂直居中
$('.text').eq(0).css('margin-top', ($('.auto').eq(0).height() - $('.text').eq(0).height()) / 2 + 'px');
$(window).resize(function () {
$('.text').eq(0).css('margin-top', ($('.auto').eq(0).height() - $('.text').eq(0).height()) / 2 + 'px');
});
$('.text').eq(1).css('margin-top', ($('.auto').eq(1).height() - $('.text').eq(1).height()) / 2 + 'px');
$(window).resize(function () {
$('.text').eq(1).css('margin-top', ($('.auto').eq(1).height() - $('.text').eq(1).height()) / 2 + 'px');
});
});
</script>
</body>
</html>
效果图：
相关推荐
第一章 bootstrap介绍 ...第三章 表格和按钮 第四章 表单和图片 第五章 栅格系统 第六章 辅助类和响应式工具 第七章 图标菜单按钮组件 第八章 输入框和导航组件 .............共二十章，后面带开发实例！
第23章 重温概率：随机过程 第24章 模拟方法 英文版目录 Chapter 1 Probability. Chapter 2 Random Variables. Chapter 3 Expectation Chapter 4 Inequalities Chapter 5 Convergence of Random Variables Chapter ...
浙大版《概率论与数理统计》（第四版）第十一章实验数据、实验步骤与实验结果 内容包括： 1、概述（这个略过没有实验） 2、箱线图 3、假设实验 （一）假设检验问题p值的求法 （二）两个等方差正态总体的均值差的检验...
------------------------课程介绍------------------------ 第1章 HTML、CSS、布局 第2章 JavaScript 介绍 ...第23章 架构、分布式、性能、聊天室项目 第24章 简历和工作、工作后的计划、学习的计划
第23章 01 re模块之转义字符 02 re模块之分组 03 re模块之方法 04 re模块总结 05 logging模块 06 re模块补充 07 configparse模块 08 hashlib模块 09 计算器作业以及思路 10 模块导入补充 第24章 01 面向对象设计 ...
第二章 相关技术介绍 10 2.1 Javascript 10 2.2 Ajax 10 2.3 MySQL 10 2.4 SSM框架 10 2.5 Maven框架 11 2.6 JSP 12 2.7 B/S模式 12 2.8 BootStrap 13 2.9系统开发平台及运行环境 14 2.9.1系统开发平台 14 2.9.2运行...
第二章 相关技术介绍 10 2.1 Javascript 10 2.2 Ajax 10 2.3 MySQL 10 2.4 SSM框架 10 2.5 Maven框架 11 2.6 JSP 12 2.7 B/S模式 12 2.8 BootStrap 13 2.9系统开发平台及运行环境 14 2.9.1系统开发平台 14 2.9.2运行...
第二篇 俯视Spring MVC 第8章 Spring MVC之初体验84 8.1 环境搭建84 8.2 Spring MVC最简单的配置84 8.2.1 在web.xml中配置Servlet85 8.2.2 创建Spring MVC的xml配置文件85 8.2.3 创建Controller和view86 8.3...
第十三章 附表 196 13.1 PXE启动芯片出错代码表 196 13.1.1 初始化/引导/载入Bootstrap错误代码 196 13.1.2 ARP错误代码 196 13.1.3 BIOS和BIS错误代码 197 13.1.4 TFTP/MTFTP错误代码 197 13.1.5 BOOTP/DHCP错误...
第十三章 附表 196 13.1 PXE启动芯片出错代码表 196 13.1.1 初始化/引导/载入Bootstrap错误代码 196 13.1.2 ARP错误代码 196 13.1.3 BIOS和BIS错误代码 197 13.1.4 TFTP/MTFTP错误代码 197 13.1.5 BOOTP/DHCP错误...
第十三章 附表 196 13.1 PXE启动芯片出错代码表 196 13.1.1 初始化/引导/载入Bootstrap错误代码 196 13.1.2 ARP错误代码 196 13.1.3 BIOS和BIS错误代码 197 13.1.4 TFTP/MTFTP错误代码 197 13.1.5 BOOTP/DHCP错误...
第3章 Node.js快速入门 23 3.1 开始用 Node.js编程 24 3.1.1 Hello World 24 3.1.2 Node.js命令行工具 25 3.1.3 建立HTTP服务器 26 3.2 异步式I/O与事件式编程 29 3.2.1 阻塞与线程 29 3.2.2 回调...
第3章 Node.js快速入门 23 3.1 开始用 Node.js编程 24 3.1.1 Hello World 24 3.1.2 Node.js命令行工具 25 3.1.3 建立HTTP服务器 26 3.2 异步式I/O与事件式编程 29 3.2.1 阻塞与线程 29 3.2.2 ...
第三方JavaScript库48 BootstrapCSS48 22构建系统48 构建系统准则49 自动化所有事情49 尽早报错，清晰报错49 不同的工作流，不同的命令50 构建脚本同样是代码50 工具50 Gruntjs51 测试库与工具51 Jasmine...
喜科堂课程含26章，含盖linq,三层架构，div+css网页设计，js,jQuery,Bootstrap,AJAX,MVC企业级框架实战，ADO.NET，EntityFramework数据持久化框架应用,高级泛型、委托、事件、异步与多线程、控件二次开发、分页汇总...
第1章 引言 ........................................................... 18 1.1 简史 .......................................................... 18 1.2 Java虚拟机 ...........................................