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

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

一周消息树:计算机将拥有五感 人类面临威胁? 通晓数学的人就可以当程序员吗? 360发布企业版4.0 可自定义软件白名单 不要总是依赖机器 MongoDB扩展彰显分片功夫 Dell与HP的OpenStack的战略:渠道对抗SLA 路况电台王雷:未来车载系统会是Android的天下 移动周报:2012移动开发工具系列盘点 谷歌不愿错失机会 Android或不再成它人独享 黑客文化:Facebook公布2012年Hackathon大赛顶级“黑客作品” 中国移动音乐开放平台正式对外开放 GitLab 4.0发布 更好地支持PostgreSQL 傻瓜式移动应用开发平台:专访摩讯创始人赵健 日本DeNA进军中国智能电视,与海信战略合作 扎克伯格不仅为Poke编码,而且还“献声” Wordament:首款支持Xbox Live成就的iPhone游戏 使用Storm实现实时大数据分析! 孙博凯:微软日益开放,Windows Azure更加拥抱开源 大数据计算:如何仅用1.5KB内存计算十亿个不同的对象 我们为什么爱EC2和S3却彻底抛弃EBS 不畏Surface:诺基亚明年或推Windows平板 Linus Torvalds:用户程序被破坏永远是Kernel的问题! Python高效编程技巧 苹果加速硬件迭代 iPad5原型机曝光 宏碁推99美金平板 价格创历史新低 黑莓10全键盘版代号N系列,谍照泄露! 那些年我们用过的互联网产品 QQ亿级业务演变:从文件、音视频说起 少年企鹅的成长之旅:QQ体验设计发展史 全球超算Top 500:Linux已占93.8%,Windows或将消失 AWS东部地区再次发生宕机 Netflix等网站受影响 2012年全球最美的十个数据中心 如何改变图象的对比度和亮度(速度要快点) 请交如何解决这个bug?鼠标消息传给滚动条,但是不能传给层本身的移动函数?(附代码) 网络问题,服务器开起一段时间后,工作站就不能正常登录。 一个比较愁人的问题,不知道谁遇到过…… 各位同仁有没有这样的经历?。。。。。。。。。。。 请问哪里有关于硬盘配额管理的技术文章~~~~ 国内哪家软件公司更尊重技术? 上传问题的扩展!希望高手帮帮我!我实在弄不出来了!在线等待 写过入党申请书的进来了了.... sos, the simplest iis problem 在pb中如何向外部写文件?比如文本文件。急!!在线等待 高分悬赏--哪里有Delphi7.net下载? 请问如何来截获DLL 的函数接口? win 2000 pro 中的direct的问题!请指教! 请问wingate客户端应该如何配置才能使用OICQ? 21fuck(咚咚)进来看 关于表单"type"的判断 关于OnOpenDocument()的一个问题。(先上100分,解决后再给100!在线等!) 在DOS年代有个小程序(什么名称忘记了)能把一部分内存映射为磁盘,不知在WIN2000/9X是否有内似工具或有办法做到吗? win 2000 pro 中的direct的问题!请指教! 来这儿去高分!!!! 各位前辈有谁用MS SQL SERVER 2000的请进! 谁有"我家我设计"(圆方的系统)的注册码? 残啊?都要计算机专业毕业的。。。。。 怎样求得两时间相差10天? 各位高手们 关于ATL COM 在98和2000下的区别 关于CEvent 如何判断commondialog.showsave ,用户是按了确定,还是取消按钮? 我最近编写一个DLL,用来实现ftp功能,使用了delphi中的nmftp控件,结束调用后总出现莫名其妙的内存错误。请高手指教! 请问哪里有win2000 server的软件下呀?迫切需要,恳请各位能帮忙!谢谢! 面试时问主考官什么样的问题算有水平? 我枚举一个外部程序的子窗体,可是却只看到了TDXDraw,我怎么样才能得到TDXDraw中更多的信息呢? 帶一個checkbox的list應該怎麼做? 扫描程序如何循环处理一段IP地址? 数据库中图片如何调用? 如下错误是什么意思,如果解决 一个关于SQL的问题 残啊?都要计算机专业毕业的。。。。。 Miscrosoft Scrioting Library是何东东?Scrrun.dll上那去弄? 如何让softice支持usb鼠标,键盘 多线程程序中使用采用单线程编译参数编译的DLL,会有什么后果? 很多on error goto ... 很简单,有NT4.0或XP的朋友一看就知道。在线等待 手工配置Grub:希望能对大家有所帮助 新显卡驱动For Linux Where download? ADO问题?????????????/ 请问c++的handle class是什么东东呀 怎么textBox控件不可以使用 \n,\r等语句?????? CEdit疑问 急切在线等:打包时出现的问题!
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘