脚本之家 服务器常用软件
快捷导航
您的位置：主页 > 网页制作 > CSS >

要知道的10个CSS技巧

  发布时间：2013-04-09 14:19:59   作者：佚名   我要评论
CSS是网页设计师的基础，对CSS的了解能使他们能够设计出更加美观别致的网页。使用CSS技巧来巧妙地处理CSS是非常令设计师着迷的事情。在CSS的深海世界里有很多有意思的东西，你只需要找到最适合你的就好。

当然我们不可能一下子就记住所有CSS的规则和语法，但为了以后的发展我们还是应该记住那些非常有用的CSS技巧。今天我们精心准备了10条对网页设计师最有用的CSS技巧，如果你想设计出独一无二脱颖而出的网页你必须得好好注意了。

1. @font-face

一种用其他服务器上的字体的好方法。很明显，如果你不能在托管服务器上找到你需要的字体，你可以在样式中使用这个方法来引入你需要的字体。


复制代码
代码如下:

@font-face {
font-family: Blackout;
src: url("assests/blackout.ttf") format("truetype");
}

2. .clearfix

如果你没法清除元素的浮动，这是清除浮动一种方法。你可以对任何HTML元素单独使用这种方法。


复制代码
代码如下:

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

3. @media

@media 可以设置你当前响应网站的媒介，它能帮助你根据用户的显示器调整网站的宽度。


复制代码
代码如下:

@media screen and (max-width: 960px) {
}

4. transform: rotate(30deg);

结合这些转换属性和CSS转场效果来创造有意思的动态效果。


复制代码
代码如下:

.title {</p> <p>transform: rotate(40deg);
}

5. background-size

这条规则帮助你在网站中适应全屏幕背景。这不像之前的CSS版本必须写很笨重的代码。


复制代码
代码如下:

body {
background: url(image.jpg) no-repeat;
background-size: 100%;
}

6. input[type="text"]

这个input[type="text"]选择器和其他高级选择器把你从一般水平带到高级水平非常有帮助。使用属性选择器来控制输入元素的提交版本或为一个外链增加一个图标这样很不错吧？


复制代码
代码如下:

input[type="text"] {
width: 250px;
}

7. margin: 0 auto;

很奇怪，没有任何特定的标准来使块级元素居中。这个方法可以使块级元素在父元素中居中。


复制代码
代码如下:

#container {
margin: 0 auto;
}

8. a {outline: none;}

在浏览你的网站的时候，点一个链接一个巨大的虚线框就横跨整个网页这将严重影响用户的心情。这个“a {outline: none;}”声明将移除这个，但为了易用性别忘了给你的链接也加上:focus状态。


复制代码
代码如下:

a {outline: none;}

9. overflow: hidden

这是最好的清除还没加载到你CSS里面的元素浮动的方法。使用它使网站的响应速度更快。


复制代码
代码如下:

a {outline: none;}

10. color: rgba();

PNG图片因为它的透明性使它在网页设计中很流行并广泛使用，但是现在你可以使用下面这种方法同样实现透明。它使用红、绿、蓝三通道并设置其不透明度值来实现透明，像0.5对应%50的不透明度。


复制代码
代码如下:

.btn {
color: rgba(0,0,0,0.5);
}

相关文章

  • 10个必备的CSS技巧总结

    这篇文章主要介绍了10个必备的CSS技巧总结,随看随记,敬请收藏~需要的朋友可以参考下
    2015-06-29

  • 最常用和实用的CSS技巧

    最常用和实用的CSS技巧，不论是前台美工还是后台成员人员都需要注意的地方。
    2010-01-05

  • 21个神奇的CSS技巧

    层叠样式表（CSS）是现代的网站设计不可或缺的重要组成部分，就像10年前那样，没有它网站就会显得是丑陋的。随着时间的推移，网络中的CSS的教程质量已有显著的提高。
    2009-10-27

  • 网页制作中应用的50个CSS技巧(国外)

    几乎可以肯定的CSS是最好的一个网页设计的发展，因为第一次图形的Web浏览器通过了关于大规模，凡表创建笨重，缓慢加载网页，创建的CSS更加精简和实用的网页。
    2009-08-03

  • CSS技巧：IE6用import导入CSS的问题

    网页制作Webjx文章简介：本文描述了一个在IE6下用import导入CSS的问题！ 在ie 6中可以先写CSS再加import比如 p {} @import url("base.css");
    2009-04-02

  • 书写CSS的5个小技巧让你的样式更规范

    CSS在书写过程中会一些小技巧，会省时省力，比如按字母顺序来排列css、先标记 后css等等，本文整理了一些，感兴趣的朋友可以参考下希望对大家书写css有所帮助
    2013-08-13

  • CSS Hack技术介绍及常用的Hack技巧集锦

    这篇文章主要介绍了CSS Hack技术介绍及常用的Hack技巧集锦,本文讲解了什么是CSS Hack、常用的CSS Hack、IE6对!important的支持、IE6下的多选择符等内容,需要的朋友可以参考
    2014-10-08

  • CSS hack技巧之IE6，IE7，firefox显示不同效果

    区别不同浏览器的CSS hack写法
    2010-03-06

  • IE6、IE7和FF的最简单的hack技巧-CSS教程-网页制作-网页教学网

    　　关于CSS HACK的文章在webjx.com中提及的也很多。 　　CSSer必须掌握的关于IE6、IE7和FF的最简单的hack技巧。 FF浏览器 .test{ height:20px; background-co
    2008-10-17

  • CSS常用技巧之CSS书写技巧和CSS HACK技巧

    不同的浏览器对CSS的解析结果是不同的，因此会导致相同的CSS输出的页面效果不同，这就需要CSS Hack来解决浏览器局部的兼容性问题，本文给大家分享CSS常用技巧之CSS书写技巧
    2016-01-12

最新评论

关注微信公众号

扫一扫