//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的更多相关文章

  1. element-ui中轮播图自适应图片高度

    哈哈,久违了各位.我又回来了,最近在做毕设,所以难免会遇到很多问题,需要解决很多问题,在万能的博友帮助下,终于解决了Element-ui中轮播图的图片高度问题,话不多说上代码. 那个axios的使用不 ...

  2. 网页中如何用 CSS 设置打印分页符

    Word 中按 Ctrl + Enter 创建一个分页符,方便打印,其实网页中也可以,用 CSS 的 page-break-after:always;. <p>第 1 页</p> ...

  3. 使用CSS3中的input标签与lable标签组合实现banner图的切换

    在做网页时,我们经常可以碰到banner图的切换.对于那些JS薄弱的同学来说,这就很尴尬了.今天,我来告诉大家如何使用CSS做出banner图切换的效果. 这里,用到了lable标签与input的组合 ...

  4. 原生JS实现各种经典网页特效——Banner图滚动、选项卡切换、广告弹窗等

    在制作网页过程中,我们可能会遇到各种常用的经典网页特效,比如Banner图片滚动.选项卡循环播放.右下角广告弹窗.评论提交展示.选项动态增删.剪刀石头布小游戏等等等...是不是感觉都见到过这些场景.那 ...

  5. 这是假的JS——利用CSS Animation实现banner图非交互循环播放

    话不多说,先来张html和css代码截图~ 注意事项: 1.如果想在每张图前进行停顿,可以在keyframes中的每一步前加上一小段与下一张相同的代码: 2.如果想要在实现无违和感的最后一张与第一张的 ...

  6. 最简单实用的JQuery实现banner图中的text打字动画效果!!!

    下面,就让小博详细介绍如何实现上面GIF实现的banner图中的文字动画效果,最简单实用的方法(鉴于代码量较小,就内嵌在一个HTML文件中了): 首先,我们要在header导入一个jQuery,并新建 ...

  7. 前端开发css实战:使用css制作网页中的多级菜单

    前端开发css实战:使用css制作网页中的多级菜单 在日常工作中,大家都会遇到一些显示隐藏类菜单,比如页头导航.二维码显示隐藏.文本提示等等......而这些效果都是可以使用纯css实现的(而且非常简 ...

  8. Bootstrap css栅格 + 网页中插入代码+css表格

    设计达人 http://www.shejidaren.com/30-minimal-app-icons.html CSS栅格: <!DOCTYPE html> <html lang= ...

  9. 利用CSS的@font-face属性 在网页中嵌入字体

    字体使用是网页设计中不可或缺的一部分.网页是文字的载体,我们希望在网页中使用某一特定字体,但是该字体并非主流操作系统的内置字体,这样用户在浏览页面的时候就有可能看不到真实的设计. 美工设计师最常做的办 ...

随机推荐

  1. .Net转Java.05.为啥MySQL没有nolock

    今天忽然想到一个问题,原来为了提高SQL Server性能,公司规定查询语句一般都要加 WITH (NOLOCK)的 现在转Java了,用了MySQL为啥不提这个事情了? 先在MySQL里写了一个查询 ...

  2. [Canvas]空战游戏 已经可以玩了 1.13Playable

    空战游戏做到这里,己方运动,己方发射子弹,敌方运动,敌方发射子弹,子弹与飞机碰撞,飞机与飞机碰撞都已经具备了,换言之已经可以玩了. 还需要一个奖励升级系统,在上面显示击落敌机数量等,还有己方不幸被击落 ...

  3. 【问题与解决】showModalDialog is not defined 的解决方案

    背景: showModalDialog 是比较老的方法了,有些浏览器不再支持弹出模态窗口了. 比如说谷歌浏览就不再支持了,有文章说明如下: Chrome’s Lack of Support for s ...

  4. easylog -- Linux 下的简单日志库

    之前使用 log4c 或者 log4cpp 的时候, 总需要配置一些文件和链接库之类复杂的配置. 虽然越复杂越说明这个软件支持的功能多.可选择性强, 但是对于一个小的项目,或者要研究他人的代码而加点儿 ...

  5. Windows下使用mklink命令参数介绍

    Windows下创建符号链接使用命令mklink常用参数有 /D /J,两者有比较明显的区别 区别1:创建/D 创建目录符号链接(即目录快捷方式)而不是文件符号链接(默认为文件符号链接),可以使用相对 ...

  6. vue 实站技巧总结

    多个页面都使用的到方法,放在 vue.prototype上会很方便 刚接触 vue的时候做过一件傻事,因为封装了一个异步请求接口post,放在 post.js文件里面,然后在每个需要使用异步请求的页面 ...

  7. Java8新特性interface中的static方法和default方法

    static方法 java8中为接口新增了一项功能:定义一个或者更多个静态方法.用法和普通的static方法一样. 代码示例 public interface InterfaceA { /** * 静 ...

  8. [转载] Conv Nets: A Modular Perspective

    原文地址:http://colah.github.io/posts/2014-07-Conv-Nets-Modular/ Conv Nets: A Modular Perspective Posted ...

  9. mybatis generator生成文件大小写问题

    mybatis generator插件中,如果 mysql数据表中的字段是用下划线划分的(个人一般都是喜欢这么创建表的字段,如:company_name),那么生成的Vo中会自动对应为companyN ...

  10. xxl-job安装教程

    xxl-job是一个开源的分布式调度框架,其他类似的框架还有airflow,oozie等等,需要进行对比 https://github.com/xuxueli/xxl-job 1.首先git clon ...