网页中顶部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属性 在网页中嵌入字体
字体使用是网页设计中不可或缺的一部分.网页是文字的载体,我们希望在网页中使用某一特定字体,但是该字体并非主流操作系统的内置字体,这样用户在浏览页面的时候就有可能看不到真实的设计. 美工设计师最常做的办 ...
随机推荐
- 记录使用yum安装nginx之后的目录问题
一般来说我们安装nginx的目录都是/usr/local/nginx的,但是用yum安装的目录跟手动安装的不一样,下面是整理的使用yum安装的一些对应目录. nginx执行文件目录:/usr/sbin ...
- iOS:练习题中如何用技术去实现一个连线题
一.介绍 本人做的app涉及的是教育行业,所以关于练习题的开发肯定是家常便饭.例如,选择题.填空题.连线题.判断题等,每一种题型都需要技术去实现,没啥多大难度,这里呢,就给出实现连线题的核心代码吧.过 ...
- IDEA调试SpringMvc项目时,出错:java.lang.ClassNotFoundException: org.springframework.web.context.ContextLoaderListener,解决办法
具体报错信息如下图所示: 解决方法:File > Project Structure > Artifacts > 在右侧Output Layout右击项目名,选择Put into O ...
- mysql基础SQL练习
许久收藏的练习mysql语句的,现在看来任然有学习价值! 表如下: Student(Sid,Sname,Sage,Ssex) 学生表 Course(Cid,Cname,Tid) 课程表 SC(Sid, ...
- Docker Mongo数据库主主同步配置方法
一.背景 不多说,请看第一篇<Docker Mongo数据库主从同步配置方法> 二.具体操作方法 1.创建目录,如创建~/test/mongo_sr1和-/test/mongo_sr2两个 ...
- vivado和modelsim联合调试仿真
vivado和modelsim联合调试仿真 0赞 发表于 2017/5/10 19:10:59 阅读(881) 评论(0) 使用vivado和modelsim联合调试仿真时,在破解完modelsim后 ...
- Software Engineer Title Ladder
http://changelog.ca/log/2013/08/09/software_engineer_title_ladder Within the software engineering pr ...
- node出现 Error: listen EACCES 0.0.0.0:8080错误
Error: listen EACCES 0.0.0.0:8080 at Object._errnoException (util.js:1022:11) at _exceptionWithHostP ...
- 刷机补丁包updater-script脚本
1.单刷补丁包 新建META-INF文件夹,新建txt文件命名为:updater-script新建system文件夹,在里面新建app文件夹,把你要单刷的apk放进app文件夹在updater-scr ...
- python学习小记
python HTTP请求示例: # coding=utf-8 # more materials: http://docs.python-requests.org/zh_CN/latest/user/ ...