说三道四技术文摘-感悟人生的经典句子
说三道四 > 文档快照

用于响应式设计的9个CSS技巧

HTML文档下载 WORD文档下载 PDF文档下载
本文将介绍一些简单的CSS设计技巧,包括取消下划线、设计响应式视频、背景图片的设置以及相对值等。这些技巧可以适用于各种类型的网站,而且对于后期的网站维护也十分方便。

CSS已成为Web发展不可或缺的部分,开发人员可以使用它来改变网页元素的样式。而随着响应式设计越来越流行,CSS在响应式设计中已扮演着举足轻重的角色,在进行响应式设计时,倘若你能掌握一些CSS技巧,将大大提高你的工作效率。

本文将介绍一些简单的CSS设计技巧,包括取消下划线、设计响应式视频、背景图片的设置以及相对值等。

1.取消下划线

现在越来越多的网站文本链接已取消下划线,而这已成为一种Web设计趋势,尤其是在做响应式网站时。下面提供一段简单的CSS代码,可以轻松取消文本链接下划线:

<style type=”text/css”>a {text-decoration:none;}</style>

2.响应式视频

在网页中嵌入视频,这里介绍 tjkdesign.com给大家,里面提供了许多CSS技巧,帮助你在页面中嵌入响应式视频( DEMO)。

.video {position: relative;padding-bottom: 56.25%;height: 0;overflow: hidden;}.video iframe,.video object,.video embed {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}

3.Rollover文本链接

越来越多的人喜欢在手机上浏览网页,这使得Rollover链接变得越来越流行。想要实现该效果一点都不难,代码也非常简单。

<style type="text/css">a:hover{color:red;}</style>
4.最大、最小宽度

最大最小宽度可以帮助页面元素设置边界线,其最基本的目的是使所有页面元素都能在边界范围之内。下面提供一段代码,你也可以根据需要进行修改:

.container {width: 800px;max-width: 90%;}
下面这段代码将会根据边界线自动调整图片大小:

img {max-width: 100%;height: auto;}
上面这段代码仅适用于IE 7和9,对于IE 8需要作出以下修改:

@media \0screen {img {width: auto; /* for ie 8 */}}

最小宽度设定

5.背景图片

一些开发人员喜欢给table或者block设置背景图片,CSS有一段代码是专门设置背景图片的:

<div style="background-image: url(../images/test-background.gif); height: 200px; width: 400px; border: 1px solid black;">Example of a DIV element with a background image:</div><div style="background-image: url(../images/test-background.gif);height: 200px; width: 400px; border: 1px solid black;"> </div>
6.相对值

相对值是响应式设计中非常重要的部分,如果你想要获得最佳效果,你就应该知道如何使用这些值,这对网站的布局是非常重要的。



Relative Font Size

在设置字体相对大小时,需要根据父元素进行设置:

相对比例填充

7.突出边界

border-bottom: 2px solid #427AA8;
8. Word Break

下面这段代码可以很好的实现文本换行:

.break-word {word-wrap:break-word;}

9.CSS溢出:隐藏技巧

visible的相对值默认情况下是隐藏的,如下图所示,超出box部分的内容就被隐藏起来了。


总结

以上都是用于响应式设计的最简单技巧,并且可以被普遍使用于各种网站上,对于后期的网站维护也十分方便。

原文链接: SMASHINGHUB

天天用的开发环境,你真的了解吗? 物联网时代,你的汽车也在转型 触宝输入法产品经理解析iOS 8第三方输入法开放程度 专访联想谢政维:功耗和价格是天蝎项目最大障碍! 《近匠》蚁视科技创始人覃政:ANTVR,虚拟现实的新生 后棱镜门时代:开发者保护应用安全的5大技巧 专访许鹏:谈C程序员修养及大型项目源码阅读与学习 65种GPU性能测试,AMD开源驱动领先! 一周消息树:我们从WWDC 2014收获了什么? 精益设计:“纸上谈兵”的说服力 指尖上的艺术——如何运用代码发挥无限创意 周末巨献:100+诡异的数据集,20万Eclipse Bug、死囚遗言等 TIOBE 2014年6月编程语言排行榜:Swift能否取代Objective-C? 移动游戏后端:开发还是购买?你必须知道的6件事 Vuforia SDK 3.0发布在即 全球注册开发者已逾10万 最受职场青睐的十大热门云计算技能盘点 Android Bootstrap:开发也能用模板,省时又省力! Facebook开源又一力作,欲借Broadcom开放交换机 华为敏捷网络:坚持被集成,引领ICT融合 专访赵桂华:.Net也有春天及高性能网站架构实践 《近匠》Testin:云测试除了APP和真机 还有可穿戴和汽车 应用开发利器FXForms:iOS上实现各种Form View Firefox 30正式版:支持GStreamer 1.0技术、内置全新Gecko 30内核 从阿里、UC联姻 看移动互联网“入口”之争 AppCode发布3.0.1更新,支持Xcode 6和Swift 智能家居持续升温:苹果HomeKit合作伙伴Honeywell发布恒温器 欲与谷歌、亚马逊抗衡,苹果推CloudKit拥抱云服务 针对新一代物联网应用 Atmel推全新32位微控制器 实时计算,流数据处理系统简介与简单分析 Cue:秒杀HealthKit,打造自己的家庭医生 新iPhone要来:4.7就够了么?我们还有更大的 我靠,263也收费了!我们何去何从? vc下参数传递问题 Tomcat的服务程序怎么实现的 为什么在delphi中给sql server的image字段插入null值,在sql server却变为了0x? 请问大家除了自考之外,还有什么途径可以将学历升到本科 定义一个p[1000],会不会内存不够用? 爱情为什么会使我如此痛苦. 关于 《DELPHI》 与 《C++》 的对比!!!!!!!!!!!!! 如何在同一窗口启动Word 动态报表问题--如何动态打印一个主表和多个细表的问题?? 如何制作有身份验证的单机数据库程序? JAVA中的指针,引用及对象的clone 请教大家。为什么我用access做的数据库但是用VC创建工程时却被告之不识别的数据库格式。 50分!!!兄弟们,BCB6安装完之后还要一次注册,activation key,谁知道? 软件黑奴们,我们算是白领吗? 有关office助手 怎樣跟蹤Access數據庫的操作 关于 《DELPHI》 与 《C++》 的对比!!!!!!!!!!!!! 非技术问题,不一定经典 ASP中如何上传文件到SQL2k 怎么从crosstab中取列名? c++ primer 难!难! 难!如何得到选中文本加亮矩形区域?? 如何在北京找一个工作+学习的机会? sql7.0如何升级到sql2000并且数据不变 DBGrid顯示的范圍如何定? 请教:在VC++中编程时,为何有的文件能出现类成员提示,有的文件编辑时不出现提示,有的只出现该类的,却没有其基类的类成员提示? 一个很好拿的高分 我写了一个拨号网络记时的工具,可以设定时间自动断线,提供源码.... 怎么读取外部数据源中的某个表中的某列的数据类型? 如何注册一个DCOM,让它跑在别的机子上? 关于用Win32 API画 BMP 图片问题 !急急急急急急急急急急 !!! Delphi 6 的 lib path 丢失!! help?谁知道Tab Control 控件的用法,12分的感谢!!!! 请问:如何在一般用户环境下启动管理员程序? 我想捕获网卡收到的数据包,该怎么搞? vb中调用sql server和ORACLE数据库的问题 北京的朋友,有谁知道这东西那里有卖的?? 想在c#和java中选一个,给点意见.客观点. 如何得到在另外一个窗口中所选择的结果 dcc32如何使用? 大哥,大姐们,这到题没分给,但我真的想知道答案 求对VSS或者Team Source开发的例子 科鼎校园网V2.3测试版网上演示 关于 WINDOWPLACEMENT Structure 关于用DELPHI联接ACCESS数据库怎样使用insert命令的问题(很急很急)加分多多!!! 学c#要那些知识前提。 请问新建怎么做? 为什么在excel表中可以看到的数字,用data连接后,在text和dbgrid中却看不到。(只显示出了其中的一部分) 简单问题,关于toolbar CTime类型变量的值存到数据库中datetime类型的小问题! 由牛顿第二定律得F=ma,a的单位是N/Kg吗? 棱柱的侧面有没有三角形好像有 计算机中存储容量的单位之间,其换算公式正确的是A、1KB=1024MB B、1KB=1000B C、1MB=1024KB D、1MB=1024GB 下面哪组单位属于国际单位制的基本单位 A m N KG B kg m/s2 s Cm k cd Dm/s2 KG mol 牛顿第二定律中 F=ma力的方向是不是一直跟加速度方向一致? 关于计算机容量的一些计量单位?如:1024=400h=2^10=1k 中的400h是什么意思怎么换算出来的? 关于这两个英语单词:on the table 和on tableon the table --在桌子上面on table--吃饭-------------------------------------上面翻译对吗?如果对的话,为什么on the table --在桌子上面,这句必须要加“the”呢? 三棱柱的高为6cm,三个侧面都是矩形,底面三角形.1 三棱柱的高为6cm,三个侧面都是矩形,底面三角形的边长分别为3cm,4cm,5cm,将棱柱削成一个圆柱,求削去部分的体积的最小值.2 有三个球,第一个球 作文 第一次对妈妈说 我爱你 英语翻译printed on?(her face printed on the cover of...) 沥清防水涂料有毒吗?要多久才没有毒沥清防水涂料有毒吗?用来做室内防水,要多久才没有毒? 我爱你春天 作文450字四年级作文好的+15 英语单词(on)用于长上去还是飞上去(树上)? 有没有初中生物竞赛题目? 我爱你,冬天 作文要求写景色和发生的一件事. 英语单词大全l()on括号里应该填什么 急下列结构中,把组成成分相同的分成一组,共可分成两组.正确的分组是①神经中枢②神经③神经纤维④灰质⑤白质⑥神经节 ( B )A.①②③和④⑤⑥ B.①④⑥和②③⑤C.①③⑤和②④⑥ D. 我爱你春天的作文 补充英语单词:s()()on() 另外,甲状腺激素是怎样合成的? 请各位哥哥姐姐们支支招,本人很喜欢生物学,马上就要竞赛了,(还有十来天),请大家说一哈如何答题,如何复习,说点有用的. 已知温差和材料的导热系数,如何确定保温层的厚度 三棱柱的定义 骨骼的题单选 问哪个选项属于骨骼?A手骨 B肋骨 C椎骨 D股骨 好难啊 感觉都是 on school 还是in school?_____ school the children only do ____ minutes of sports or never do any sports.第一个空:A:on B:by C:for D:at第二个空:A:little B:a little C:few D:a few并且说出原因及句子意思! 四棱柱的定义是?. 电容器的电容与哪些因素有关A.表面积B.电量C.无法确定D.电压 ai怎么画圆形的线框我想要的是没有填充颜色的线框啊! 直棱柱定义 实验中若发现检流计指针始终往一边偏,无法实现补偿,可能由哪些原因造成 以should studends have after-school on weekends?为题写一篇英语短文(急!) 科技与生活 为题的作文高一求 棱柱的定义是什么 AI中画的圆圈为什么改不了边的宽度? on在英语里属于是什么词? 罗马数字是IIV II IV 我也有一些这样的,就是后面没有编号 对after school提问,应该用什么英语来代替 英语on such这个词on和such可以放在一起吗? 大学英语四/六级……有没有其他级?过四六级有什么重要作用? 求100个单词以上的英语作文 题目是“After School" 英语中介词IN和ON 的用法在地图上应该用in 还是on呢,例如:Can you find New York_____ this map of America A.in B.at C.of D.on 此题答案应该是什么呢, 大学英语阅读题目只有两篇实际意义上的阅读? 英语作文关于after school最好是和别的不一样,写了一点,想看看别的参考一下,再次强调最好要和别的不一样啊! 下列说法是否正确?为什么?(1)经过一点可以作两条直线;(2)棱柱侧面的形状可能是一个三角形(3)长方体的截面形状一定是长方形;(4)棱柱的每条棱长都相等. 大学英语两道选择题目求答案和解释.1、Mike became disabled after a diving accident at age 22,but _____ to work 14 years since his injury.A tried B started C managed D attempted2、Mike need 24-hour nursing assistance,but otherw 直三棱柱、正三棱柱什么意思? 牛二定律的F=ma中的加速度要代负值进去吗(如果它是负的)有没有可以不代负值的含有加速度的公式 加速度的单位如何转换?g和m/s2 直四棱柱的定义 以及上底面和下底面是否平行?谢谢大家了 棱柱的侧面都是三角形.判断对错 现在大学英语一定要过4级吗?不过有什么后果?我英语很差,就考60分左右(满分150),过4级很难,再说也不想把大学的大好时光浪费在这样一个鸡肋的学科上面,大学英语过不了4级可以拿到毕业 正四棱柱的概念是什么?书上好象没有,为什么正方体∈正四棱柱∈长方体? 牛顿第二定律(F=ma)中加速度符号一定为正吗 物体的加速度单位(a/m·s负二次方)是什么意思?代表什么?如题 是不是底面是正六边形? 棱柱的侧面为什么不能是三角形 while ()an efficiency test on an engine ,certain precautions should be observed.a making b to make c being made d made.thanks a lot. 牛顿第二定律的F=ma,即a=F/m,其中的m的单位是kg还是化成N来算? F=MA 牛二定律 自由落体时 当物体的加速度乘以他的质量时得到的合外力大于其重力会怎样 飞船以5g加速度上升,质量为m的宇航员对船底的压力宇宙飞船发射.设近地加速时,飞船以5g(重力加速度)的加速度匀加速上升,则质量为m的宇航员对飞船底部的压力为
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘