站长之站 站长之站QQ群:16356000 100345456 16263640 130690866
还没有任何记录...
当前位置:站长之站 > 网页设计 > 正文 > 帮助设计师和开发者的9种实用CSS技巧

帮助设计师和开发者的9种实用CSS技巧

来源:网络作者:网络日期:2012/11/7 21:05:00收藏
本文链接:帮助设计师和开发者的9种实用CSS技巧http://www.cncncc.com/ArtSJ/Show.Asp?id=4233

一个网页设计师脑子里一定会被大量与他的工作有关的知识填满。而说到CSS,它可以帮助对网站进行设计,让设计具有更多的可能性,用更简单的方式让你的网站更具吸引力,而使用传统的技术这些方面并不容易面面俱到。

对于前端,页面而言,CSS的确是一门首选需要掌握的技能。

以下就是9种非常实用的CSS3属性和使用技巧,

1. 圆角效果

谈及圆角小编曾在各种讨论中频繁听见:实现麻烦、兼容困难、性能不佳等等缺点。而如今的Web设计需要的就是各种各样新的开发技巧,因此越来越多的前端和页面都开始使用HTML5。

对于HTML5而言,从前必须使用图片来实现的需求,现在都可以通过代码来实现。而CSS3中加入的“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 */

我们也可以使用下面这样的组合版本,或者用它来对上面的代码进行速记。

-moz-border-radius: 10px 20px 30px 0;

而IE浏览器对CSS3属性支持,可以从这篇英文文章进一步了解。

2. 阴影效果

另一个CSS3可实现的有趣功能是阴影效果(box-shadow),通过“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) {

}

而使用如下的@media print甚至可以指定CSS的打印预览:

@media print

{

p.content { color: #ccc }

}

4. 添加一个渐变填充

在CSS3中的渐变效果是另一个让人惊叹的属性。它目前还未得到全部浏览器的支持,因此最好不要完全依赖它来设置布局。而这里有一个基于CSS的梯度导航栏可以让大家参考一下。

以下是实现的方式。

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

5. 背景尺寸

背景尺寸(Background size)是CSS3中最实用的效果之一,目前很多浏览器都已经支持。Background size属性可以让你随心所欲的控制背景图的尺寸大小。

从前用于背景的图像大小在样式中是不可调整的,如果你无法想象那样有多么糟糕,可以试着回忆一下,在自己的电脑桌面上做壁纸的时候遇到一张合乎心意却偏偏与桌面尺寸不合的图片,只能通过平铺来填充。

那样的桌面丑的让一个审美观及格的人都会有砸屏幕的冲动。而现在我们可以通过改变一行代码让背景图片适应自己的页面。

div

{

background:url(bg.jpg);

background-size:800px 600px;

background-repeat:no-repeat;

}

6 @font face

属性在使用CSS3针对各种字体进行转变的时候已经充分证明了它的实用性。从前因为各种字体许可的问题,在设计过程中只能选择几种特定的字体。而通过@font face我们就能自定义字体的名称:

@font-face

{

font-family: mySmashingFont;

src: url(‘blitz.ttf’)

,url(‘blitz.eot’); /* IE9 */

}

而后我们能通过一个简单的代码,随时随地的使用自定义的mySmashingFont字体系列

div{font-family:mySmashingFont;}

7. clearfix属性

如果Overflow: hidden清除浮动的效果实在不是你的首选,那么clearfix应该是你更好的选择,它可以让你个别处理不同的HTML元素。

.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,它做作用主要是隐藏溢出,而就像上述提到的,人们都很少用到其另外一个功能,就是清除浮动。

div

{

overflow:hidden;

}

Via:Smashing HUB

(Warlial 供雷锋网专稿,转载请注明来自雷锋网及作者,并链回本页)


作者:站长之站 收集整理,任何媒体转发须保留作者个人微信和来源,不尊重作者劳动的行为将受到举报。
本文链接:帮助设计师和开发者的9种实用CSS技巧http://www.cncncc.com/ArtSJ/Show.Asp?id=4233

【帮助设计师和开发者的9种实用CSS技巧】由站长之站收集整理,您可以自由传播,请主动带上本文链接

觉得有用就多来支持一下,没有能帮到您,站长之站也只能表示遗憾,希望有一天能帮到您。

(责任编辑:站长之站)

评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)
站长之站 · CNCMS
站长之站 测试频道
业界动态
业界动态 门户网站 聚焦人物 电子商务 站长新闻 观察评论
编程开发
ASP教程 .NET教程 JSP教程 PHP教程 Xml/Xslt Shtml教程 CGI专区 JavaScrip 其他编程
服务器类
Web服务器 Ftp服务器 Mail服务器 Dns服务器 Linux服务器 Win服务器 安全防护 服务器其他
建站指南
主机域名 建站入门 建站经验 网站推广 网站优化 网站策划 网络赚钱 网络创业 SEO 专区
网页设计
Html教程 设计心得 动态网页 JS/Ajax Div/Css CSS教程 设计其它
软件教程
Photoshop Fireworks FLASH Dreamweaver Frontpage 其他教程
数据库类
MSAccess MS_SQL My_SQL VFP PowerBuilder Oracle 其它数据
全站导航
业界动态编程开发服务器类建站指南网页设计软件教程数据库类
关于我们/版权
版权所有:
Copyright © 2008 - 2019 站长之站 www.cncncc.com
PowerBy:CNCMS(5.1.20)

苏ICP备16002106号-1