网页中顶部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属性 在网页中嵌入字体
字体使用是网页设计中不可或缺的一部分.网页是文字的载体,我们希望在网页中使用某一特定字体,但是该字体并非主流操作系统的内置字体,这样用户在浏览页面的时候就有可能看不到真实的设计. 美工设计师最常做的办 ...
随机推荐
- 【linux】linux下准确查询正在tomcat下运行的java进程。准确获取正在运行的java进程的PID
准确获取定位到tomcat下正在运行的java进程的PID命令: ps -ef|grep java | grep catalina | awk '{print $2}' 准确定位到tomcat下正在运 ...
- JavaWeb中过滤器Filter的使用示例
https://github.com/YouXianMing/Java-Web-Study/tree/master/Servlet-Filter 过滤器示例基于以下流程 测试效果如下 web.xml配 ...
- Asp.Net Core IIS发布后PUT、DELETE请求错误405.0 - Method Not Allowed 因为使用了无效方法(HTTP 谓词)
一.在使用Asp.net WebAPI 或Asp.Net Core WebAPI 时 ,如果使用了Delete请求谓词,本地生产环境正常,线上发布环境报错. 服务器返回405,请求谓词无效. 二.问题 ...
- Go 语言极速入门
本系列文章主要是记录<Go 语言实战>和<Google 资深工程师深度讲解 Go 语言>的学习笔记. Go 语言极速入门1 - 环境搭建与最简姿势Go 语言极速入门2 - 基础 ...
- Android Studio3.0.1集成Git
1:前提 本机可以根据SSH的方式正常连接git服务器 2:开始配置 file-settings-Version Control 点击右边的+号天添加项目所在目录,VCS类型选择Git 点击 Conf ...
- CAS 单点登录【1】入门
1. CAS 的引入的前提和好处 很早期的公司,一家公司可能只有一个应用,慢慢的应用开始变多,如员工报销系统.审核系统.学习系统...... 每个应用都要进行注册登录,退出的时候又要一个个退出,用户操 ...
- [windows+cocos2dx]文本类
文字也是游戏最重要的元素之中的一个,以下就看看使用动态字体和静态字体库怎样创建文字.使用动态字体库创建的文字能够包括经常使用的不论什么字符,一般假设用户要输入名字,这就最好用动态字体库.由于你不知道用 ...
- Mac 上安装maven
http://maven.apache.org/download.cgi 官网下载bin.tar 解压后放入某个目录: 配置环境变量: vim .bash_profile M2_HOME=/maven ...
- H3C Comware V3 端口聚合
通常链路聚合有三种模式:手工汇聚.静态LACP汇聚和动态LACP汇聚. 但是V3版本下只提供了 手工聚合模式 manual 和 静态LACP聚合模式 static 两种 V3版本配置链路聚合 1,创建 ...
- Gluon Datasets and DataLoader
mxnet.recordio MXRecordIO Reads/writes RecordIO data format, supporting sequential read and write. r ...