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

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

《近匠》RealSense:几行代码,为游戏添增实感交互 MDCC游戏应用征集关键词:中小团队,3D,转型,IP 共话HealthKit:能否颠覆医疗保健生态系统? Perception Neuron系统,让动作捕捉技术不再高冷 2014年DevOps实践调查报告 .NET程序性能的基本要领 百度手机卫士宣布开放三大能力 构建互联网安全生态 火速围观,AMD APU新芯片架构A68H呼之欲出! 对于测试人员而言,TDD意味着什么? 年用电910亿度,那些庞大的数据中心该用什么支撑 走近黑客们的世界,感受网络空间的心跳 VMworld 2014 Day One:Docker、数据中心、混合云新举措 Docker和Kubernetes或将加速SDN发展 前端开发框架三剑客—AngularJS VS. Backone.js VS.Ember.js 【CTO俱乐部读书会】《流程的永恒之道》辛鹏:企业的本质就是流程运营 紧扣微信研发痛点 2014微信开发者大会吸引大量外地参会者 Mobile First!jQuery UI组件集Wijmo五年最大更新 首届TCL杯HTML5智能电视—应用开发大赛火热开启! MDCC智能硬件征集关键词:智能家居、机器人、健康生活 采集颜色、自动同步,还有比这更牛叉的儿童触控笔么? AppCan移动平台:为企业移动化进程加速 学生强则国强,访天猫推荐算法大赛Top 9团队 Mozilla与三星之子——Servo特性解读 360天巡启动公测 打造新一代企业级无线安全解决方案 继Storm和Spark之后,Hortonworks添加对Kafka的支持 一周消息树:国产操作系统最快10月发布,并支持应用商店 技术团队看板方法实践的难点分析 SAP云服务加速转型:调动资源瞄准中国市场 开发测试全承包!移动应用开发工具Telerik平台 火火火火火!看HomeKit如何改变物联网和智能家居? MDCC应用与工具关键词:平台、社交、垂直、解决方案 》》怎么没有人解决这个问题呀,谁解决,我给分!!!!! 为什么快捷方式不能用? ★★★有没有像“delphi属性编辑框”一样的控件或是源码(100-1000分)★★★ 谁有RealPlay格式详细信息 500分求救! 请问大家那里有jrun 4下载 如何自己析构单文档模板? MASM32中标号的疑问 这个错误该如何改 关于在OUTLOOK中如何自创模板的问题? com系列丛书那里有卖 一个关于鼠标事件的简单问题 为什么我在JSP中能得到TEXT文本中的数据,却得不到在SELECT中的数据呢? 求救!为什么我的ACESS数据库文件会莫名其妙的达到25M,我还没输任何数据呢?而生成MDE后只有500K? 我要一个功能强大的弹出日历 Viva La Costa Rica! 我再也不看Chinese Team的比赛了! 如何做jar包呢?还有如何做bak呢?大家救救我吧。 《inside the c++ object model》问题 这句是什么意思??? 问一个Win2000Server域用户客户端登陆问题。 小问题:在线等待:) 如何删除一个ini文件中的关键项目?急 求救!为什么我的ACESS数据库文件会莫名其妙的达到25M,我还没输任何数据呢?而生成MDE后只有500K? 求教关于c++builder的图象预处理的源代码。50分!!还有金钱相送! access的问题 郁闷!!关于数据窗口一个奇怪的问题!! 如何实现断点续传 寻求《软驱监控程序》!!!!!!!!!!!!!!价格面议 用imp恢复数据库,要做什么准备呀? 刚才给分失败,重新散分! 关于SQLserver数据库和MDB数据库的句语问题!!! IE数据保密大全,如何禁止以下功能?菜单,工具栏,收藏夹,鼠标右键,PRINTSCREEN键,键盘快捷键 帮忙:DCOM 无法使用任何配置的协议与计算机 慨n 通信? 查询问题 请教bean中填写方法问题,高手帮忙啊!!!!! 昨天回家遇到打劫,被暴打一顿 本人有一个数据窗口对象中的一个字段,其为DDDW型的,可是在它的选项页中却怎么也不能显示出我想设置的名字显示出来,却总是显示保存在表中 在线求助,当场送分。 用MASM编译DOS程序经常有问题啊!? asp.net问题 有关DateDiff的问题。。。SOS 请问用什么软件制作chm帮助文档? 数据库中记录条数在增加,但字段却是空的呀??? 高分求:如何确定TreeView的SelectedItem为空? ******* 怎样调试硬中断程序? 存储过程中的一个语法问题 servlet中forward到jsp页面的显示问题 SOS:请问一个页面在不同分辨率下适应性的问题! 我在做数据库链接时,出现了编译错误,实在看不错在哪里(在线等待) rpm的升级过程中的问题,请大家关注 有关gethostbyname的问题 求有机高手:在正溴丁烷的制备中,依次加入水、浓硫酸、正丁醇、溴化钠之后,为什么整个烧瓶会变成深红色 误食体温计中的水银有什么危害 什么是十一届全国人大一次会议第五次全体会议第五次全体会议是什么意思? 加料时,先使用溴化钠与浓硫酸混合,然后加正丁醇,为什么? 判断一下题目是否正确.为什么?1.将水加热,Kw增大,pH不变.2.偏铝酸钠的水溶液经加热浓缩、蒸干灼烧后能得到其固体. 1关于牛顿第一定律,下列说法不正确的是1A、不能直接用实验来证明B、是根据实验推理出来的结论C、可以用“斜面实验”来证明D、是多人总结概括的结果2由于实际上不存在不受力的作用的 我吃了两支体温计里的水银,多久会发病? 判断下面题目是否正确,为什么? 1.下列关于催化剂的说法不正确的是( ).A.化学反应前后,催化剂的质量和化学性质都不变B.催化剂可以提高某些化学反应的速率C.催化剂可以降低某些化学反应的速率D.任何化学反应都需要催 我刚才摔了个体温计,体温计里含水银多么? 春秋战国时期的成语典故,要简洁一些 ( )1、下列说法正确的是A.欧姆表的测量范围是从零到无穷 B.用不同档次的欧姆表测量同一个电阻的阻值,误差是一样的 C.用欧姆表测电阻时,指针越接近中央时,误差越大 D.用欧姆表测电阻时 那后来你的宝宝误食体温计内的水银后有没有去医院检查过?之后有没有什么症状? 判断是否正确? 葛洲坝和三峡哪个大 电动汽车的发动机功率是多少 春秋战国时期的成语典故卧薪尝胆\一鸣惊人\纸上谈兵\胡服骑射\围魏救赵\负荆请罪\退避三舍的含义以及典故 三峡葛洲坝位置分别在长江那个位置哥们没那么麻烦就是哪个更偏上一点,不用那么具体…… 电动汽车的发动机是利用什么原理制成的? 判断③是否正确 比三峡小,葛洲坝大的水电站说一下具体地点和水电站的名字 我吃了两支体温计里的水银,多久会发病? 帮我判断是否正确 长江三峡起源及结束开垦开垦坎坎坷坷 如果勿食了体温计里的水银,会死吗 CO2和NaOH反应的离子方程式 区分日常生活中的下列各组物质,鉴别方法正确的是选项 待鉴别的物质 鉴别方法A 氯化铵和碳酸钾 加水溶解B 自来水和蒸馏水 加肥皂水,观察产生泡沫多少C 羊毛纤维和化学纤维 灼烧闻气味, 电动车的电机有声音吗 CO2分别与少量NaoH和足量的NaoH溶液反应的离子方程式?Why? 三峡中各个峡的名称的来历是什么?三峡中的西临峡为什么叫“西临峡”西临峡的一段黄猫峡为什么叫“黄猫峡”?灯影峡为什么叫“灯影峡”?崆岭峡为什么叫“崆岭峡”?米仓峡为什么叫“米 周朝的政治制度与强调平等竞争和奋斗的现代社会有什么根本差异? 电动车电机充电时会有声音?我习惯晚上22点开始充:上海地区分时记价,22点后半价用电22点后一般也应该睡了刚刚起夜,听到有轻微的呼呼声,循声而去,竞是充电器仰或电池! 氢氧化钠溶液和二氧化碳的反应离子方程式? 关于周朝的政治制度,第一:周朝分封给诸侯的封地是不是属于诸侯个人管辖?封地内的事务,如任命官员和管理百姓,是不是都由分封诸侯自行解决?周王朝中央有权干涉吗?第二:周朝的分封诸 AL+H2O+NaOH====NaALO2+H2↑(加热) 线上等啊``帮帮忙`` 印度手工棉纺织业原来很发达,棉纺品曾经大量出口英国.19实际以后,英国凭借强大的实力,采取各种手段,打击印度的棉纺织业,是指迅速衰落下去.著名的纺织业城市达卡,187年有15万人口,8年后 周朝河伯国究竟在哪?居民属于什么民族? Al+NaOH+H2O=NaAlO2+H2配平配平,写出思路,方法, 越南语翻译,别人发我,我看不懂. 为什么说修建葛洲坝是修建三峡的基石 那位专家能为我详细剖析下 “Al+NaNO3+NaOH=NaAlO2+N2+H2O”怎么配平 帮我翻译成越南语,谢谢(叫你姐姐打电话给我!)不要软件翻译,他看不懂 周朝后期政治混乱的表现 AL+NaOH+H2O=NaAlO2+3H2 这个化学方程式用用化合价的升降法来配平怎么配》? 英语翻译如图所示..这玩意有何作用 鉴别KOH溶液、稀H2SO4、CaCl2溶液下列试剂中,能把KOH溶液、稀H2SO4、CaCl2溶液鉴别出来的是1.KCl 2.K2CO3 3.稀HCl为什么 NaOH+Al=NaAlO2+H2怎么配平? 下列说法正确的是 ( ) A a的系数是0 B 1下列说法正确的是 ( )A a的系数是0 B 1/y是一次单项式C -5x的系数是5 D 0是单项式 用一种试剂即可一次鉴别出稀h2so4溶液,bacl2溶液和kno3溶液,这种试剂是A, NaOH B,Na2CO3C,AgNO3D,CaCO3 NaOH与NaHSO4的反应方程式 1.关于自由落体运动,下列说法正确的是A.物体竖直向下的运动一定是自由落体运动B.自由落体运动是初速度为零、加速度为g的竖直向下的匀加速直线运动C.物体只在重力作用下从静止开 制备1-溴丁烷时,为什么浓硫酸能除去正丁醚和正丁醇 小孩误食体温计里的水银怎么办? 1.下列有关气体压强的说法中,正确的是()A.气体分子的密度减小,气体的压强一定增大.B.气体分子的密度增大,气体的压强一定增大.C.气体分子的平均动能增大,气体的压强一定增大.D.气体分 实验室里用加热正丁醇、溴化钠和浓H2SO4的混合物的方法来制备1-溴丁烷时,还会有烯、醚和溴等副产物生成.反应结束后将反应混合物蒸馏,分离得到1-溴丁烷,已知有关的有机物的性质如下 幼儿误食体温计水银怎么办? 1.关于无形资产的后续计量,下列说法中正确的有( ). 为什么正丁醇和HBr反应制1-溴丁烷的时候浓硫酸适当稀释可以减少HBr的挥发? 磷酸二氢铵溶液与 足量氢氧化钠溶液的反应方程式及离子方程式, 氢氧化钠与碳酸钠反应的方程式.注:氢氧化钠 NaOH 碳酸钠 Na2CO3 我没打错吧,确实是这样的。
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘