zoukankan      html  css  js  c++  java
  • [译]CSS系列技巧之一

          这是我翻译得国外的一篇关于cs技巧的文章,也是想通过翻译来更深入的学习这些东西,避免眼高手低的问题.这是第一次翻译,肯定有很多的纰漏,欢迎高手批评指正.
    原文的地址是:53 CSS-Techniques You Couldn’t Live Without
        css是重要的.并且也越来越多的被应用.样式表
    提供了比表格布局更有利的选择,首先它将页面布局,设计和页面信息进行了精确的分割.(类似MVC模式).由此可以对页面进行更灵活有效的控制和改变,只需要改变一个样式表css文件,就可达到目的.是不是很厉害啊? 事实上,确实如此.
        在过去的几年里,很多web开发者已经写了很多的关于css的技术文章,这些文章肯定让你获益匪浅.当然了,如果你能及时的找到他们.下面是一个css技术列表,作为一个css构建者,你一定不能错过它.它们是非常重要且能使你的工作变得更加的容易.下面让我们来看看这53项你必须掌握的技术吧.
        在这里多谢过去几年里一直耕耘在css技术方面的开发者们,非常感谢你们!

    1. css基本导航

    效果图:

    演示地址: http://www.nundroo.com/navigation/
    css代码:
    Code

    html代码:
    html代码


    批注:  关键点主要是图片翻转技术. background-position属性.



    2. css矩阵导航

    效果图:


    演示地址:http://www.nundroo.com/nav_matrix/welcome2.html

    css代码:

    Code


    html代码:

    Code

    关键图片:


    批注:
        这是个非常有意思的导航,可以说是将background-position属性运用到了极致.随着鼠标的.根据位置的不同和鼠标是否hover来相应的对矩阵图片进行绝对的移动定位.smart!对ul元素和a元素同时应用同一个背景.一个用来做页面载入时的初始背景,一个用来做单个a元素的相应背景.



    3.CSS Tab
    效果图
    :



    演示地址: http://exploding-boy.com/images/cssmenus/menus.html

    css代码:
     
    html代码:

     批注:
    这里推荐一个软件CSS Tab Designer,多余的废话就不讲了.下载地址是:  css_tab.zip


  • 相关阅读:
    CodeForces 734F Anton and School
    CodeForces 733F Drivers Dissatisfaction
    CodeForces 733C Epidemic in Monstropolis
    ZOJ 3498 Javabeans
    ZOJ 3497 Mistwald
    ZOJ 3495 Lego Bricks
    CodeForces 732F Tourist Reform
    CodeForces 732E Sockets
    CodeForces 731E Funny Game
    CodeForces 731D 80-th Level Archeology
  • 原文地址:https://www.cnblogs.com/mn232nm/p/1212117.html
Copyright © 2011-2022 走看看