作者:_i逗比_985 | 来源:互联网 | 2022-03-11 04:31
本文我们制作一下子栏目资讯内容,供大家参考,具体内容如下
谷歌浏览器解析的顺序调整,需要全部加载后执行
$(window).load(function() {
$('.text').eq(0).css('margin-top', ($('.auto').eq(0).height() - $('.text').eq(0).height()) / 2 + 'px');
});
注:对于 Firefox 浏览器,可以按 Ctrl+Shift+M,调整移动端尺寸。
子栏目标题
栏目 CSS
.jumbotron {
margin: 50px 0 0 0;
padding: 60px 0;
background: #ccc url(../img/bg.jpg);
color: #ccc;
}
.jumbotron h1 {
font-size: 26px;//768,30; 992,33; 1200,36;
padding: 0 0 0 20px;
}
.jumbotron h4 {
font-size: 16px;//768,16; 992,17; 1200,18
padding: 0 0 0 20px;
}
资讯内容
资讯内容 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;//768,16; 992,18; 1200,20;
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;
}
如果大家还想深入学习,可以点击这里进行学习,再为大家附3个精彩的专题:
Bootstrap学习教程
Bootstrap实战教程
Bootstrap插件使用教程
以上就是Bootstrap制作子栏目资讯内容的想关代码,希望大家喜欢。
推荐阅读
-
本文详细介绍了如何利用Bootstrap框架构建一个具有渐变效果的固定顶部响应式导航栏,包括HTML结构、CSS样式以及JavaScript交互的完整实现过程。适合前端开发者和学习者参考。 ...
[详细]
蜡笔小新 2024-12-12 18:04:25
-
本文介绍了如何在Angular CLI创建的项目中安装并配置Bootstrap,包括必要的依赖项jQuery和Popper.js的安装步骤。 ...
[详细]
蜡笔小新 2024-12-11 16:29:15
-
-
在前端开发领域,Bootstrap与Layui是两种非常流行的框架选择。本文将深入探讨这两种框架的主要区别,帮助开发者根据项目需求做出最佳选择。 ...
[详细]
蜡笔小新 2024-12-08 19:53:39
-
动画队列的设计目的是为了确保一系列任务能够按照预定顺序执行,每个任务只有在其前一个任务完成后才开始。这些任务既可以是同步的,也可以是异步的。本文将探讨jQuery动画系统中的队列机制,并介绍如何使用队列来优化动画效果。 ...
[详细]
蜡笔小新 2024-12-07 10:26:02
-
jQuery 1.4.4 已经发布,这是自 1.4.3 版本以来不到一个月的又一更新。本次更新主要集中在基于用户反馈的错误修复,并引入了一项新的功能。 ...
[详细]
蜡笔小新 2024-12-06 17:19:16
-
Django小实战——在线Web计算器(利用Bootstrap进行前端开发),Go语言社区,Golang程序员人脉社 ...
[详细]
蜡笔小新 2024-12-06 10:13:30
-
HTML 提供了 `type=file` 的 input 元素用于文件上传功能,但其默认样式较为简陋。本文探讨了如何利用原生 JavaScript 结合 layui 和 bootstrap 的样式来美化文件上传按钮,提升用户体验。 ...
[详细]
蜡笔小新 2024-12-05 17:03:44
-
本文探讨了Windows Presentation Foundation (WPF)如何通过扩展Microsoft Build Engine (MSBuild)来增强其构建能力,特别是在处理WPF特有的任务时。 ...
[详细]
蜡笔小新 2024-12-04 17:26:08
-
探讨了button和a标签即使设置了相同的CSS样式,但显示宽度仍存在差异的原因及解决方案。 ...
[详细]
蜡笔小新 2024-12-04 12:31:36
-
本文详细介绍了Java语言的核心特性——面向对象编程。探讨了Java的基本概念、平台无关性、丰富的内置类库及安全性,同时深入解析了类加载器、垃圾回收机制以及基本数据类型和其包装类。 ...
[详细]
蜡笔小新 2024-12-02 10:44:41
-
本文详细介绍了 CSS3 中的 `cursor: not-allowed` 属性,该属性用于在用户无法执行特定操作时显示一个禁止手势。此外,还探讨了如何通过结合 `pointer-events: auto!important;` 来增强用户体验。 ...
[详细]
蜡笔小新 2024-12-01 19:34:25
-
移动端浏览器为了识别用户的双击放大操作,通常会在点击后引入300毫秒的延迟。虽然这种延迟在日常使用中可能不易察觉,但对于需要即时响应的应用(如网页游戏)来说,消除这一延迟至关重要。 ...
[详细]
蜡笔小新 2024-11-27 20:34:45
-
本文介绍如何利用CSS和HTML创建一个动态响应的图片墙,特别适合在Firefox和Chrome浏览器中查看。通过简单的鼠标交互,用户可以放大浏览图片。 ...
[详细]
蜡笔小新 2024-11-27 19:10:33
-
Apollo是一个分布式配置中心,由服务端和客户端组成,支持配置的集中管理和动态更新。 ...
[详细]
蜡笔小新 2024-11-28 19:02:31
-
本文探讨了Java类加载的过程,包括加载、验证、准备、解析和初始化五个阶段,并详细解释了每个阶段的具体操作和意义。此外,文章还讨论了Java如何通过双亲委派模型来保障核心API的安全性,以及在特定情况下如何打破这一机制。 ...
[详细]
蜡笔小新 2024-11-28 11:45:04
-