网页中顶部banner图自适应css
//test.css
.index-banner-top {
width: 100%;
background: url(../imgs/guanyu.png) no-repeat center center;
height: 210px;
background-size:cover
}
@media only screen and (max-width: 640px){ .index-banner-top {
height: 100px;
}
}
//test.html
<div class="index-banner-top"></div>
电脑端显示:

手机端显示:

网页中顶部banner图自适应css的更多相关文章
- element-ui中轮播图自适应图片高度
哈哈,久违了各位.我又回来了,最近在做毕设,所以难免会遇到很多问题,需要解决很多问题,在万能的博友帮助下,终于解决了Element-ui中轮播图的图片高度问题,话不多说上代码. 那个axios的使用不 ...
- 网页中如何用 CSS 设置打印分页符
Word 中按 Ctrl + Enter 创建一个分页符,方便打印,其实网页中也可以,用 CSS 的 page-break-after:always;. <p>第 1 页</p> ...
- 使用CSS3中的input标签与lable标签组合实现banner图的切换
在做网页时,我们经常可以碰到banner图的切换.对于那些JS薄弱的同学来说,这就很尴尬了.今天,我来告诉大家如何使用CSS做出banner图切换的效果. 这里,用到了lable标签与input的组合 ...
- 原生JS实现各种经典网页特效——Banner图滚动、选项卡切换、广告弹窗等
在制作网页过程中,我们可能会遇到各种常用的经典网页特效,比如Banner图片滚动.选项卡循环播放.右下角广告弹窗.评论提交展示.选项动态增删.剪刀石头布小游戏等等等...是不是感觉都见到过这些场景.那 ...
- 这是假的JS——利用CSS Animation实现banner图非交互循环播放
话不多说,先来张html和css代码截图~ 注意事项: 1.如果想在每张图前进行停顿,可以在keyframes中的每一步前加上一小段与下一张相同的代码: 2.如果想要在实现无违和感的最后一张与第一张的 ...
- 最简单实用的JQuery实现banner图中的text打字动画效果!!!
下面,就让小博详细介绍如何实现上面GIF实现的banner图中的文字动画效果,最简单实用的方法(鉴于代码量较小,就内嵌在一个HTML文件中了): 首先,我们要在header导入一个jQuery,并新建 ...
- 前端开发css实战:使用css制作网页中的多级菜单
前端开发css实战:使用css制作网页中的多级菜单 在日常工作中,大家都会遇到一些显示隐藏类菜单,比如页头导航.二维码显示隐藏.文本提示等等......而这些效果都是可以使用纯css实现的(而且非常简 ...
- Bootstrap css栅格 + 网页中插入代码+css表格
设计达人 http://www.shejidaren.com/30-minimal-app-icons.html CSS栅格: <!DOCTYPE html> <html lang= ...
- 利用CSS的@font-face属性 在网页中嵌入字体
字体使用是网页设计中不可或缺的一部分.网页是文字的载体,我们希望在网页中使用某一特定字体,但是该字体并非主流操作系统的内置字体,这样用户在浏览页面的时候就有可能看不到真实的设计. 美工设计师最常做的办 ...
随机推荐
- centOS --- 安装最新版的node nodejs
对于 RHEL, CentOS or Fedora 系统,Node.js v8 LTS版本命令: curl –silent –location https://rpm.nodesource.com/s ...
- .Net转Java.04.踩到switch的坑
今天线上有个NullPointerException 的异常,我翻了一下代码,抛异常的竟然是switch语句 我有种不祥的预感,本地做了实验 结果是 Java的switch如果传入null值,会抛出 ...
- SOLDI原则之DIP:依赖倒置原则
本篇介绍软件设计原则之一DIP:依赖倒置原则.很多知识回头来看会有新的理解.看到一句话,一段文字,一个观点有了新的理解,醍醐灌顶的感觉.这种感觉像是一种惊喜.古语说:温故而知新. DIP:依赖倒置原则 ...
- Scala详解
1 快速入门... 4 1.1 分号... 4 1.2 常变量声明... 4 1.2.1 val常量... 4 1.2.2 ...
- PL/SQL学习笔记程序单元
一:程序单元组成 一个PL/SQL程序单元主要包括三部分: 声明与定义部分:声明变量.常量.类型等:定义过程.函数等: 执行部分:执行PL/SQL语句:调用过程.参数:处理游标等: 异常处理部分:处理 ...
- Django 复习
Django 基础1 day49 老师的博客:https://www.cnblogs.com/yuanchenqi/articles/6083427.html http://www.cnblogs.c ...
- Java并发之线程转储
一.java线程转储 java的线程转储可以被定义为JVM中在某一个给定的时刻运行的所有线程的快照.一个线程转储可能包含一个单独的线程或者多个线程.在多线程环境中,比如J2EE应用服务器,将会有许多线 ...
- JS IOS/iPhone的Safari浏览器不兼容Javascript中的Date()问题的解决方法
1 var date = new Date('2016-11-11 11:11:11'); 2 document.write(date); 最近在写一个时间判断脚本,需要将固定好的字符串时间转换为时间 ...
- React Router教程
React Router教程 React项目的可用的路由库是React-Router,当然这也是官方支持的.它也分为: react-router 核心组件 react-router-dom 应用于浏览 ...
- ffmpeg转码器移植VC的project:ffmpeg for MFC
本文介绍一个自己做的FFMPEG移植到VC下的开源project:ffmpeg for MFC.本project将ffmpegproject中的ffmpeg转码器(ffmpeg.c)移植到了VC环境下 ...