资讯频道 → Web前端
阅读更多

19顶
0踩

Web前端

翻译新闻 Web 前端开发者必知的9 个 CSS 属性

2012-09-25 16:03 by 见习记者 车丽 评论(8) 有13425人浏览
css3 浏览器 web html5
CSS可以改进网站的设计并且开拓网站设计更多的可能性，可以令你的网页更具吸引力。对于前端开发者、网站设计师来说，掌握并熟练应用CSS是一项必不可少的技能。

下面列出了一些非常实用的CSS3属性和使用技巧，希望能够为你的开发、设计工作带来一些帮助。

1.  圆角效果

如今的Web设计在不断跟进最新的开发技术，纷纷采用HTML5来开发多样性的Web应用。HTML5的优势之一，就是之前必须用图片实现的元素，现在可以用代码来实现。“border-radius”是实现这一功能的一个重要的属性，可以用来直接定义HTML元素的圆角，并且被所有现代浏览器支持。 

border-radius: 10px; /* CSS3 Property */
-moz-border-radius: 10px;  /* Firefox */
-webkit-border-radius: 10px; /* Chrome/Safari */
-khtml-border-radius: 10px; /* Linux browsers */

想充分了解IE浏览器对CSS3属性支持情况，请看这篇文章。

2.  阴影效果

通过CSS3的box-shadow属性可以非常方便地实现阴影效果。所有主流的浏览器都支持这个属性，其中Safari浏览器支持加前缀的-webkit-box-shadow属性。 

#myDiv{
-moz-box-shadow: 20px 10px 7px #ccc;
-webkit-box-shadow: 20px 10px 7px #ccc;
box-shadow: 20px 10px 7px #ccc;
}

也可以用JavaScript来实现阴影效果，如下： 

object.style.boxShadow="20px 10px 7px #ccc"

3.  @media属性

Media属性用于设置同一样式表在不同屏幕下的样式，可以在属性值中指定应用此样式的介质或媒体。 

@media screen and (max-width: 480px){
   /* 网页在宽度为480px屏幕上的显示样式 */
}

开发者也可以使用@media print属性指定打印预览的样式： 

@media print
{
p.content { color: #ccc }
}

4.  渐变填充

CSS3的Gradient（渐变）属性给了开发者另一个惊人的体验。Gradient还未得到全部浏览器的支持，所以不能完全依赖Gradient来设置布局。 

background: -webkit-gradient(linear, left top, left bottom, from(darkGray), to(#7A7A7A));

5.  Background size

Background size是CSS3中最重要的属性之一，已经被很多浏览器支持。Background size属性用于设置背景图像的大小。以前背景图像的大小在样式中是不可调控的，如今使用Background size属性的一行代码就能实现用户想要的背景图像效果。 

div
{background:url(bg.jpg);
background-size:800px 600px;
background-repeat:no-repeat;
}

6  @font face

CSS3中的@font face属性对引用字体文件做了很大的改进，该属性主要用于把自定义的Web字体嵌入到网页中。以前由于字体许可的问题，设计者只能使用特定的字体。首先自定义字体的名称： 

@font-face
{  
font-family: mySmashingFont;
src: url('blitz.ttf')
,url('blitz.eot'); /* IE9 */
}

然后就可以在任何地方使用mySmashingFont字体系列： 

div
{
font-family:mySmashingFont;
}

7.  clearfix属性

如果设计师认为Overflow: hidden不能很好的处理浮动，那么clearfix提供了更好的处理浮动的解决方案。 

.clearfix {
display: inline-block;
}

.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}

8.  Margin: 0 auto

Margin: 0 auto属性是CSS的基础属性。虽然CSS语法并没有定义一个块元素居中的语句，但设计师仍然可以使用auto margin选项来实现这个功能。这个属性可以根据需要居中一个元素。但要注意，需要设计者给div设定宽度才会实现。 

.myDiv {
margin: 0 auto;
width:600px;
}

9.  Overflow: hidden

Overflow：Hidden这个CSS属性除了隐藏溢出功能外，还有清除浮动的作用。 

div
{
overflow:hidden;
}


英文原文：9 Amazing CSS Rules that Save Designers and Developers
19
顶
0
踩
评论 共 8 条 请登录后发表评论
8 楼 jAmEs_ 2013-01-09 16:04
这些必知？
7 楼 qq413041153 2012-09-27 09:43
不错学习了
6 楼 jole 2012-09-27 08:52
IE9貌似对1，2条支持都不是很好。
5 楼 kissgxd 2012-09-26 16:31
lazy_ 写道
Margin: 0 auto

不属于CSS3吧？IE7都有效果哦。

首先，本文没有特意指要写CSS3，只是开头举例都是CSS3而已。
其次，margin:0 auto;任何一个主流浏览器都支持，包括IE6!!
4 楼 蓝眼人 2012-09-26 15:15
2楼的很好用！以前我都用 c标签 看来css解决更方便
3 楼 damoqiongqiu 2012-09-26 12:29
区分浏览器的那些写法真的让人蛋疼到死
2 楼 Rod_johnson 2012-09-25 17:35
补充一个 text-overflow:ellipsis;
当对象内文本溢出时显示省略标记(...)
例子：
<style>
li{
   width:200px;
   overflow:hidden;
   white-space:nowrap;
   text-overflow:ellipsis;
 
}​
</style>
<ul class="news border"><li><a href="http://money.msn.com.cn/">[投资]</a><a href="http://money.msn.com.cn/overseas/20120924/07181470142.shtml">30亿中国资本拟赴朝鲜淘金 含高铁项目</a></li><li><a href="http://money.msn.com.cn/">[国内]</a><a href="http://money.msn.com.cn/internal/20120924/06381470127.shtml">百余4A级以上景区将降价 中秋节前公布</a></li><li><a href="http://money.msn.com.cn/">[声音]</a><a href="http://money.msn.com.cn/internal/20120924/07221470148.shtml">铁道部3.3亿招标背后:12306技术遭质疑</a></li><li><a href="http://money.msn.com.cn/">[楼市]</a><a href="http://money.msn.com.cn/internal/20120924/06391470128.shtml">房屋租赁乱象:小中介扣押金乱收费成常态</a></li><li><a href="http://money.msn.com.cn">[质量]</a><a href="http://money.msn.com.cn/industry/20120924/07261470160.shtml">质监局:对光明年抽检4000次力度仍不够</a></li><li><a href="http://money.msn.com.cn/">[焦点]</a><a href="http://money.msn.com.cn/internal/20120924/05081470054.shtml">姚明一代品牌被判侵权 云鹤体育赔百万</a></li></ul>​
1 楼 lazy_ 2012-09-25 17:28
Margin: 0 auto

不属于CSS3吧？IE7都有效果哦。

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • 在FireFox/IE下Response中文文件名乱码问题解决方案

    只是针对没有空格和IE的情况下使用Response.AppendHeader()如果想在FireFox下输出没有编码的文件，并且IE下输出的文件名中空格不为+号，就要多一次判断了,接下来将详细介绍下感兴趣的朋友可以了解下，或许对你有所...

  • HTML5在IE10、火狐下中文乱码问题的解决方法

    写HTML5代码时发现中文显示乱码，之前以为是不兼容IE10、然后换成火狐，谁知也不行，经反复研究测试，寻得个不错的解决方法，有类似情况的朋友可以参考下

  • Ajax FireFox IE 乱码兼容问题

    这是一个ajax解决乱码的问题WEBSERVICE项目

  • C#HTML导出excel文件名火狐，IE浏览器乱码

    C#HTML导出excel时文件名，IE，火狐浏览器不兼容，乱码。故此将ExcelHelper.FileName(Request.ServerVariables["HTTP_USER_AGENT"].ToUpper(), $"文件名{DateTime.Now:_yyyyMMdd}", out filename, out encoding);

  • ie显示的html页面乱码,IE10、IE11页面中文乱码解决方案

    当我们在IE10\IE11浏览器中打开中文时，本来应该显示中文的内容却显示成了乱码，一般遇到这种都是编码不对应导致的问题。如果想要显示正常的，只需要修改浏览器编码即可。可以在页面中单击右键，在右键菜单中选择...

  • html在ie11乱码,IE1 0、 IE11页面中文乱码

    当我们在IE10 \ IE11浏览器中打开中文时，应以中文显示的内容显示为乱码。通常，此问题是由代码不匹配引起的。如果要正常显示，只需修改浏览器代码。您可以右键单击该页面，在右键菜单中选择“编码”，然后选择“ ...

  • FireFox下载文件时文件名乱码的解决办法

    之前在写下载文件的时候，在chrome和360浏览器下都是正常的，但是在firefox下却是乱码（编码）的情况。RFC 2183规定filename只能为US-ASCII码，然而现代浏览器中许多已经支持UTF-8编码了，但各个浏览器的支持规则...

  • IE乱码chrome firefox正常

    在IE中出现中文乱码，但在chrome,firefox中正常． 可能出现的问题： 1.数据提交时使用了$.get() 解决方案：使用$.post()方法提交 转载于:https://www.cnblogs.com/Jiphen/archive/2013/01/05/2845360.html...

  • Firefox 火狐 浏览器下载文件文件名中文乱码解决

    Firefox 火狐 浏览器下载文件文件名中文乱码解决

  • 中文传值火狐、google浏览器无问题，但IE有乱码问题的解决

    用户名为中文时，火狐、google浏览器无问题，但IE有乱码问题： 问题代码： Java代码 "member!sysLogin.do?name='${member.uname }'" target="_blank" /&gt;登录  登录 超链接形式的传参，都是...

  • Ajax FireFox IE 乱码不兼容

    url中传值，设置Firefox的参数传递编码：url = "tooltipDisplayAction.te?key=" + encodeURIComponent(key); 即是encodeURIComponent在Struts的action中添加接受数据的参数设置：request.setCharacterEncoding("UTF-...

  • IE、FireFox、Chrome浏览器中关于URL传参中文乱码，解决兼容性问题！

    前台用url传值中文，后台用request.... IE、 Firefox、Chrome浏览器对URL的处理各不相同，浏览器在传输URl时得对URL进行编码，IE默认是以UTF-8来传输 的，Firefox肯定不是以UTF-8来编码，有可能是以ISO-8859-

  • Firefox下载文件时中文名乱码问题

    为了形象化，先看几张不同...很明显在Firefox下出现了乱码，出现乱码一般是字符集的问题，这是怎么回事呢？为什么其他的浏览器都没有问题呢？看了一下Firefox的字符集是Unicode，改成简体中文看看，发现文件名是不乱...

  • php代码在火狐乱码怎么办,Firefox火狐浏览器设置字符编码格式（解决查看源代码出现乱码问题）...

    现在Firefox浏览器版本升级太快，且展示方式也经常变化，本人还找了一番才找到火狐浏览器的设置字符编码的方式，在此分享出来，希望能帮到碰到这个问题的朋友。本人使用的Firefox浏览器版本为69.0.3(64位)HTML页面.....

  • ie 火狐 下载文件乱码问题

    @RequestMapping("/download2") ...// IE fileName = new String(fileName.getBytes("GBK"), "ISO-8859-1"); } downFile(res, new FileInputStream(_file),fileName ); }

  • IE和火狐浏览器下载文件，文件命乱码

    if (UserAgent.indexOf("firefox") &gt;= 0) { response.addHeader("Content-Disposition", "attachment; filename=\"" + new String(fileName.getBytes("UTF-8"), "ISO-8859-1") + "\""); }else{ response.add...

  • java中火狐地址栏中文,FIREFOX 下载中文文件名出现乱码的java解决方案

    24、 if (UserAgent.indexOf(“firefox”) &gt;= 0) 25、 return “FF”; 26、 if (UserAgent.indexOf(“safari”) &gt;= 0) 27、 return “SF”; 28、 } 29、 return null; 30、 } 31、 ...

  • HTML5在IE10、火狐下中文乱码问题的解决方法.docx

    HTML5在IE10、火狐下中文乱码问题的解决方法.docx

  • java源码资源手机游戏J2ME毕业设计

    java源码资源手机游戏J2ME毕业设计提取方式是百度网盘分享地址

  • 第5章 存储器管理（笔记整理）

    内容概要：本章节深入探讨了存储器管理和相关概念。首先介绍了存储器的多层次结构，涵盖了寄存器、主存和辅助存储的区别及其功能。接下来讨论了主存储器、寄存器的功能和角色，包括二者如何支持程序运行及数据处理。之后分析了高速缓存和磁盘缓存的运作机制及其优化计算机性能的方式。接着概述了程序的装入、链接、地址绑定、内存保护的技术细节。此外，文章还讲述了存储器管理的高级技巧如对换技术、覆盖技术和不同的分配方式，以及各种存储管理模式的具体实施方式，比如连续分配、分页、分段及段页组合。 适用人群：对操作系统内部工作原理有一定兴趣的计算机专业学生、技术人员及爱好者。 使用场景及目标：适用于课程学习和项目实践中，帮助理解和设计复杂的存储管理系统。通过本文的学习可以达到对操作系统底层存储管理的理解，掌握不同存储分配策略的选择标准和技术应用。 阅读建议：建议逐步阅读每个小节，重点关注各部分内容的实际应用场景及其背后的设计理念。同时，尝试绘制存储层次模型和不同管理策略的工作流程图，加深理解。

Global site tag (gtag.js) - Google Analytics