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

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

从MySQL迁移到MariaSQL Wikipedia力求开放 奥巴马筹款网站的制作过程 国内芯片厂商发力4G 新岸线2013年将推LTE方案 CMDN Club 23期:开放平台和O2O移动产品开发 花旗调低Apple股票评级 不信iPhone5会卖得好 2012年Linux Journal读者选择奖结果公布 百度云SiteApp:三步轻松创建移动网站 Twitter跨数据中心图片存储系统Blobstore解析 摩托罗拉携手中国移动发布Intel Inside智能机新锋丽i MT788 第五届“英特尔杯”全国大学生软件创新大赛圆满落幕 Appro推出液冷超级计算机 Dell:曾敦促微软WinRT放弃Windows品牌 IE10十大优点:渲染页面比Chrome快8% 法国电信:开放平台下的O2O移动产品怎么玩? 客如云创始人彭雷:寻找O2O“失落的半圆” 中国电信宋鹏飞:天翼开放平台的服务及架构解析 W3C小组宣布:HTML5标准制定完成 还记得DUQU吗?起因可能是Windows中存在了20多年的漏洞! API管理的五大规则 Google也节能:挖角美能源部Arun Majumdar博士 预测:云计算领域的5大变革 CTO俱乐部:移动信息化的创新实践及互联网创业 核心组图曝光:BlackBerry 10明年1月30日发布 “蛐蛐儿”创始人朱连兴:音频二维码的技术实现和应用场景 信恩科技创始人林兴陆:QR Code二维码的前世今生 2012移动开发工具盘点:傻瓜式游戏工具引擎 《福布斯》发布年度“未来之星” 扎克伯格上榜 Cloudera透露Impala发行版新功能及开源计划 Nokia落寞身影下 三星成为全球最大手机厂商 乐视网CTO:智能电视,一个诱人的议题 SeatGeek:Web设计师如何转型iOS开发? 谁有生成TIN三角网的代码? Tlink怎么用? 如何打印recordset对象 bcb编译工程需要做的设置都有什么呀! 又有问题了!TStringList的一些冲突? 我的WIN2000各个盘都被共享, 却不显示共享的手型图标 !!!!!!! 如何定制列表视(report style,full Row Select)的高亮选中条的字符和背景颜色? 表名作为参数问题? VFP两个表的纵向合并? 机器突然掉电是怎么回事? 请教高手,怎样对TreeView控件的节点的OnClick事件处理? 一条出错信息的意思???? 怎样在dreamweaver里面插入包含网页??? 好久没为这样的小事快乐了 紧急求教(关于控件打包问题) 怎么开发互联网和手机短信互通的软件? 哪位有<<游戏编程大师技巧>>的原码 求一简单程序 installshield for c++builder:怎么把客户‘安装路径’注册到他的注册表里-现在急用 请问这4个组件在那个组件拦上的 TFileListBox,TDirectoryListBox,TFilterComboBox,TDriveComboBox 一条出错信息的意思??? ManagermentServer为什么启动不起来?? CList的RemoveAt()问题 爽!今天买了一个可无线上网的手提,散分! 本人用insertShile安裝制作軟件制作了vb6的一個setup文件包,直接用硬盤copy到其機子安裝是沒問題的,但是本人將該setup文件包刻錄到光盤 如何可以将windows 2000 server的C、D等盘的默认共享属性去除,可不可以将这个属性永久去除,因为选择“右击”-“共享”去除后,重启又出 如何让你的编译器生成汇编代码 怎么样把数据库里的某个字段读到ComboBox1里? 在MDI框架中,如何禁止View相互切换? 代码转换 谁能告诉我delphi6.0中的installshield怎样使 为什么我用Zend Encoder加密了一个php文件,速度比以前没加密慢了好多哦, 怎样让在运行时加载的控件总在最前面?? 代码转换 linux + mysql+ apache + php + jdk + jsdk 怎样让在运行时加载的控件总在最前面?? 代码转换 一个关于全局变量的访问问题。 263游戏大厅里的用户信息列表是怎么实现的?急问,多谢!! 也帮帮我吧!i'll be dead ! 263游戏大厅里的用户信息列表是怎么实现的?急问,多谢!! 关于窗体 如何去掉我的“计划任务”共享? linux + mysql + apache + php + jdk + jsdk 新手问各位大哥一个问题:我在机器上已经安装了98,2000,现在有装了红帽7.2,已经安装成功,但是在LOGIN之后,有开始GNOME之后,什么都 菜鸟问题,请多帮忙 window 2000 server服务器,不能使用mail函数,怎么解决!?急!! 我靠!我今天算碰到一个希奇事!你们听听这个网址! 关于鼠标右键菜单的制作问题 SOS!100分相送。很简单的题目,明天考试急用 请问oracle中的帮助导航器、帮助主题窗口是在哪里啊 英语翻译many customers found that they were not receiving the nondestructive test examinations they felt they had paid to receive.具体些,英语不好,正在学习,顺便告诉一下我下次遇到这种语句如何翻译. 谁知道关于TIME 的所有的短语 告诉我 谢了! Lily needs___sports,she isn`t healthy.A does B: to do C:doing D:to does As long as you hold my hand.I'll go along withAs long as you hold my hand.I'll go along with you.第一个回答正确采纳 Don't worry.We still have ______ little time left.怎么填写 为什么 They saw a man _____ along the road.A.walking B.walk C.walks 英语同义句转换I found that they were good.I found them ___ ___ good同义句转换,每空一次I found that they were good.I found them ___ ___ good. Don’t worry about the time.We still have _______days left.a.another 3 b.3 another c.3 others d.other three 选哪个?为什么?解释下他们的差别和用法. 好书推荐(一本就够了) 1.书名 2.作者 3.主要内容 4.主要人物介绍 5.喜欢的原因注意:主要内容只要100~300不要太多,人物每个50~100字就好. As long as you hold my hand .I well go along with Don't worry we still have time to do the job A fell in love with B falls in love with C D my mother ( ) tired after she does some housework .括号里填什么 They were waiting for a train that was very late.帮我吧这个句子翻译, 让我看看你的照片,好吗的英文may l take [ ] [ ] [ ] your photos? 12岁女孩到哪去做明星报名 They all said that Italians were very strange people b__翻译和填空 '这个照片限时观看"英文怎么翻啊 Does the man ____(want) to clean his car?用括号里的词的适当形式填空,谢谢 It has been raining ______ last Saturday.A:on B:for C:till D:since His grandma is eighty.she is very o 张杰唱的just the way you are 为什么那么难听发音就不说了,感觉咋那么土呢,好难听啊 the plane l____safely at last though it was raining hard my grandma is very old now,but she was a teacher before (同义句)my grandma___ ____be a teacher before,but now she is very old I want you to always live in my heart,even if separated as we like together!请牛人翻译一下 做梦 梦到很多蝴蝶 同上 6."Where does he live?" Mr Hu asked.(改为复合句) Mr Hu asked where ______6“Where does he live?”Mr Hu asked.(改为复合句) Mr Hu asked where _______ _______.7.Tom’s father saw him sitting on some eggs.(改为复合句) Tom’s father saw ( )The old man _______ to take medicines.He's already fine A.needn't B.need C.doesn't need D.needs not 绞丝旁加个色字念什么?谢谢了,大神帮忙啊 ''Where does Lily live?''(改为复合句)I wonder ___ ___ ___. The old man ____ go out for a walk twice a week.A.need B.needs C.needs to D.both A and BI______(希望) i could go to the country in the USA.The old man ____ go out for a walk twice a week.A.need B.needs C.needs to D.both A and B 绞丝旁加一个寅字是什么字啊? What time do you get to school and how many classes do you have这句话的意思 _________ I need to take the medicine?根据内容填空. 一个绞丝旁一个真是什么字?书上写的是shěn我打不出来 3本书的书名和主要内容 主要内容要少一点 大约20个字 different名词 collect名词 sell反义词 happy名词 stand过去式 busy反义词 careful副词 skip现在分词 base on和because of的近义词分别是什么,四个词的 一些网友发的英文照片评语,手工翻you are really living beauty of ur own.hats off dear. 英文短信件手工翻中2yeah,baby,do not have stress after sleeping...what are you going to study?this is nice to study sometimes...i watch new harry potter,do you know it?so i am going to sleep,will try...will see your beautiful smile and will s -Do you think it will be cool tomorrow?-,_.It has been too hot for a week.A.I hope so B.I'm afraid so C.So it is D.Of course not我选的是A,但答案给的是C,请问谁能解释清楚? 照片的2英文短评语翻中人工的This is erotically sexy!You look delicious!A hot sexy ninja in a dress.>. 英语好的帮我翻译一下,hey.i was goin' over here,and I came across ur place.U appear to be Do you think it will still be rainy tomorrow?____It has rained for many days.A.I hope not B.I'm sure it will. old man has the years for word twenty here连词成句 英文短信件手工翻中hi my dear!))your last pics are very sweet!i even haven't words to say my feeling)so cutie and ideal)Asia is so big...yeah translater is not very good,i know it,that's why i asked your language,i can learn it hard and speak grandma is 70years old.My grandma is__70 years old,but she looks young she like to be beautiful..she doesn't ( ) the idea that old people can't be beautiful We've lived here for ten years?对for ten years提问. the great wall wind it way over high mountains ,through deep valleys and across grest deserts如何翻译 she is _____15 years old means she is 15 years old.A not more than B not less than C no more thanD no less than 这四个答案选什么 能不能帮我翻一下下面图的英文什么意思! 英文短信件翻中手工的HI!i saw a message on my wall from you and now i feel really worried!you wrote that i speak with other girls at the same time that maybe i do not like you...this is absolutelly fake!why do you think so?as you can see my 宾语从句例句1.Polly says:“I want to eat an apple”.2.It’s very clod in Moscow.He said3.where does Mr Li live?Do you know.4.We had a football match.Tom said.5.Listen to me carefully.The teacher told me .6.Whose jacket is this Can you tell 1 Miss Liu is very busy.—______. A. She does so B. So she does C. So does she D. So she is2 -How much _____ the sneakers? ----Tendollars ______ enough. A. is; is B. are ; is C. are ; are D. is ; is 3-That T-shirt with YaoMing’s pictur She 's very busy.She has a lot __.A do B does C doing D to do为什么是D啊,看不出是做定语啊 As long as you hold my hand,I'll go along with you. “辑”这个字,把车字旁换成绞丝旁,怎么念, she has a lot of things ____.A.do B.does C.doing D.to do As long as you hold my hand ,I'll go along with you , 求最佳翻译、 有关time的短语(它们的用法,意思.等) Once a rich man was walking along the road with his servant.Suddenly,a young man carrying a heavy bag passed by him.
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘