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

用于响应式设计的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

Visual Basic三级跳 Visual Basic使用技巧 Visual Basic中的子类处理技术 Visual Basic中软件封面技术探秘 VisualBasic 软件设计中的几个问题 Windows 95/NT 运行了多长时间 -VB资料 Windows 的登录资料库 -VB资料 把回车键变成TAB键-VB资料 把文件置入到Text或RichText中 -VB资料 避免按 [ENTER] 回车键产生的“嘀”声 -VB资料 避免使用全局变量-VB资料 避免装载多份应用程序-VB资料 不定个数的参数 -VB资料 不在任务栏中显示,只能在Ctrl+Alt+Del对话框中显示或者干脆什么也不显示数 -VB资料 处理 Dropdown List型 Combo的录入问题-VB资料 VB创建和删除快捷方式 从程序中生成 exe 文件 -VB资料 打开和关闭CD-ROM 驱动器 -VB资料 打开和关闭其他应用 -VB资料 打开一个超连接 -VB资料 当前操作系统的语言集-VB资料 当前系统目录-VB资料 得到磁盘上剩余空间的值-VB资料 调用“添加打印机”对话框 -VB资料 调整分辩率和取当前分辩率 -VB资料 定义全局热键-VB资料 动记录应用软件工作时间-VB资料 动态改变屏幕设置-VB资料 读取档案的建立时间及存取时间 -VB资料 多个参数的属性 -VB资料 发现剪帖板的秘密 -VB资料 关于在菜单中陷入文本框 20分求助有关SQL数据库的问题(为什么select...into语句无法执行) 哪有里Crystal Reports可以下载(无内容)? Where the 广东外贸外语学院 关于ODBC客户机端配置的问题 谁能给我一个delphi连接access数据库的实例,小弟万分感谢!!!!!!!!!!!!! 我机器里,98,2000装在C盘,XP装在D盘,现在我想只留下XP,不知道该怎么处理???????????????????????????? 如何实现5M以上的文件的上传 从windows进入unix Oracle 中文输入 是否onkeypress和onkeydown不能同时使用呀? Delphi 5下要做一个多 Y 轴的曲线图形,如何实现? 哪有xteamlindows下载?? 万分感谢!!!!! borland 会不会出一个 C# Builder? 乱码,头大了,不知道为什么pb导入excel怎么办 数据统计问题,请大侠门帮忙!急急急!!! 求解ZModem通讯协议源程序----有谁用过CZModemCore 我也不知道对不对! 最高级的问题?搞一个专业的VC程序员基地~~~~~~ 在研究directshow filter的push模式的兄弟请进 800分+工资管理原代码,如何解决ActiveReports打印图片的一个很难题;否则我快下岗了 有两个问题,每题40分,马上给分!!!! 如何使用打印机? 在爱情方面谁能做到这一点? 谁有 file cutter v1.4的注册码? 有急用! 搞一个专业的VC程序员基地~~~~~~谁愿意加入????? 最新发现:原来C++Bilder的项目文件(.bpr)是XML格式的! 关于FAT32和NTSF的问题 如何用VC实现Email的发送? 800分+工资管理原代码,如何解决ActiveReports打印图片的一个很难题;否则我快下岗了! 搞一个专业的VC程序员基地~~~~~~需要网页制作高手!! ADO 的用法 m_pRecordset->Fields->GetItem(index)->GetName() 关于CRichEditCtrl的问题之二,取的当前可见行数? 请问在哪里下载IMAIL SERVER???各位帮帮忙!!! 高手请回答,ADO和BDE到底有什么区别,你选择谁?为什么? 高分求教!!!!!!!!!!!!!!!!怎样得到局域网上所有的机器名?(普通WINDOWS网络,用VB?,好象用WNET API可以的) 如何安装com.ibm.bridge2java.*这个包阿? 有人吗???求救! 你也许也会遇到这样的问题? 800分+工资管理原代码,如何解决ActiveReports打印图片的一个很难题!!! 大虾看过来. 一个access表一万条记录,想转到Mysql下(Mysql在Linux下)用什么方法和什么语言来做好? rs.CursorLocation=aduseclient是什么东西? 800分+工资管理原代码,如何解决ActiveReports打印图片的一个很难题! 简单SQL,免费送分! 用ASP如何上传文件,可以用组件。 谁知道怎么改运行中的程序的托盘图标???我用SysTray.ocx不能改? 新手提问,简单题目,大量给分~~~~~~~~~~ 如何使用getdispatch(), 800分+工资管理原代码,如何解决ActiveReports打印图片的一个很难题!! 在比例尺为1:4000000的地图上A、B两地的距离是5厘米在比例尺为1;4000000的地图上A\、B两地距离5㎝同时从A、B两地相向开出一辆汽车每时行35㎞另一辆汽车每时行45㎞,找这样的速度,两辆车几时才 一根绳子第一次用去20%,第二次又用去余下的20%,两次相差8米,这根绳子原来的长是( )米. 李叔叔家种粮食作物8分之3公顷,种油料作物0.21公顷,种经济作物5分之1公顷.哪种面积大 KPa和KN怎么算 气压表上的《kpa》和Lb/in2什么意思,1个2个气压是多少 某县耕地面积约80万公顷,2005年粮食作物与经济作物的面积比是7:3,到今年将调整为6 :4哪一种作物的生产规模扩大了,扩大了多少万公顷.请回答完整要算式并解答 KPa和KN的换算 有一根绳子,第一次剪去全长的20%,第二次比第一次少剪5米,这时还剩53米.这根绳要有解释和算式.谢谢啦! 5π等于多少 KN换算吨 请教1千帕等于1千克每平方厘米吗?因为胎压表上标的是1kg/cm2,i汽车说明书上标的标准气压是前轮220kpa ,后轮250kpa.我查看胎压表的时候是以前轮2.2,后轮2.5 这种看法正确吗?胎压表外面的数值从0 5+5等于多少 填空 一根绳子第一次用去20%,第二次用余下的20%,两次相差2m.这根绳原来的长( )米.一根绳子第一次用去20%,第二次用余下的20%,两次相差2m.这根绳原来的长( )米. 在比例尺是1:6000000的地图上,量得A、B两地相距8厘米.甲,乙两车分别从A、B两地同时相对开出,经过4小时相遇.已知甲、乙两车的速度比是5:7,甲、乙两车每小时各行多少千米? 若大气压为1.01*10的5次要方Pa,水平屋顶面积为100平方米,则大气压对水平屋顶上表面压力为多少N 一根绳子第一次剪去全长的30%第二次剪去余下的20%剪了两次还剩下全长的百分之几 在比例尺是1比6000000的地图上,量得A、B两地相距8厘米.甲、乙两车分别从A、B两地同时相对开出,经过4小时相遇.已知甲、乙两车的速度比是5比7,甲、乙两车每小时各行多少千米?(用比例解) 大气压多少Pa 一根绳子第一次用去了20%,第二次又用去了余下的20%,两次相差2米,这根绳原来的长是多少米? 在一幅比例尺是1:6000000的地图上,量得甲乙两地之间的距离是8厘米,甲乙两地相距多少千米? 一根绳子减去20%后又接上5米,比原来断20分之3,则现在绳子多少米 一根绳子第一次用去20%.第二次用去25% 两次相差2米.这根绳原来长多少米 永宁乡有块4.5公顷耕地,种粮食作物、经济作物,油料作物的面积比是9:4:2.3种作物各种了多少公顷? 等于几? 在比例尺为1比6000000的地图上,量得南京到北京的距离是15厘米,南京到北京的实际距离大约是多少千米?南京长江大桥全长6700米,如果画在比例尺是100000分之1的地图上,应画多少厘米? 绳量井深,三折余4尺,四折短1尺,绳有多长(只列方程) 总压为1个大气压的体系,含50%氧气和50%氮气.问氧气的压强为多少? 在比例尺是1:4000000的地图上量得甲乙两地之间的距离为20厘米两列火车同时从甲乙两地相对开出,甲每小时行55千米,乙车每小时行45千米,几小时两车相距100千米? 在比例尺1:6000000的地图上,量出南京到北京的直线距离是15厘米.一架飞机以每小时900千米的速度飞往北京,几个小时可到达? 李叔叔家种粮食作物8分之3公顷中油料作物0.21公顷中经济作物5分之1公顷那种作物种植面积最大那种最大那种种植面积最小 在比例尺是1:4000000的地图上,量得甲、乙两地相距20厘米,实际多少米? K=A的纸箱耐破数据是35.86kgf 纸皮受力面积是50.0cm2,施压面积是3.0cm2 请问如何转换成 lbs/in2 如果我是要转换成kgf/cm2 是不是:35.86/3=11.95kgf/cm2 有两根绳子,第一根的长度是第二根的1.5倍,第一根比第二根长3.6米,第一根长多少米?列方程 1mm²与m²的换算单位 纸箱抗爆破力150LBS-200LBSLBS是什么意思? 请问 1BAR=多少 = 多少kg/cm2 mW/cm²怎么换算成W/m² K=K 纸箱耐破强度=150LBS/IN 是否标准太低 正确的耐破强度事多少? 我这..是头虱 还是 狗狗的虱子?我家养狗狗,它总是挠痒痒,我也没太在意,后来我觉得我全身都养,就像是有虫子,但是什么都看不到,躺下的时候能听到耳边有"皮皮"声,那天,一洗澡,关水后能看到 ψm与mm单位之间的换算关系 动物一生都要经历哪些时期 一只小狗的重量等于6只鸡的重量,3只鸡的重量等于4只鸡的重量.一只小狗的重量等于几只鸭的重量? 十斤铁和十公斤棉花哪个重? 动物的一生都要经历 等生长时期 某农场种植粮食作物和经济作物面积的比是3:2,一直种粮食作物252公顷,两种作物一共种了多少公顷 10斤棉花和10斤铁 哪个重 居然有人说一样重 棉花怎么可能比铁重 没常识 动物一生要经历过哪些变化?可以多选什么都行 如图是红星农场农作物种植面积的统计图,回答下列问题:(1)若已知有250公顷土地种植蔬菜和棉花,则小麦有多少公顷?(2)若已知种植小麦的面积比种植蔬菜的面积多120公顷,则种植总面积 十斤棉花,和十斤铁那个要重? 不同动物的一生所经历的生命周期一样吗?急 下面是城东村今年各种农作物计划种植面积统计图.己知粮食作物的种植面积是175公顷,蔬菜种植面积是多少公顷?(粮食作物25% 蔬菜30% 其他45%) 10斤棉花和10斤铁哪个重? 动物的一生都要经历( )、()、()、( )等生长时期.这些生长时期构成了动物的( )动物的一生都要经历( )、( )、( )、( )等生长时期.这些生长时期构成了动物的( ) 在比例尺为1:30000的地图上,实际距离是15千米,在图上应画多少厘米? 10公斤棉花和10斤铁哪个重?我就被难住了 5公斤等于多少毫升 某地的大气压为1.0*10^5Pa,这个大气压可以支持多高的水柱?要写出计算过程``! 在比例尺是1:4000000的地图上,量得A,B两地的距离是20厘米.在比例尺是1:4000000的地图上,量得A,B两地的距离是20厘米.一辆汽车以每小时80千米的速度从A地到B地,几小时可以到达? 0.5公斤到底等于多少克啊 大气压在哪里为0
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn