第8音 Design Everying

第8音 Design Everying

Archive for the ‘Web 标准’ Category

import css OR link css

1 8, 2007 作者: xw | 分类: Web 标准

css在页面里面一般有三种引入方式
1.在页面里面直接写

  1. <style type="text/css">
  2.       body{
  3.               margin: 0;
  4.                padding: 0;
  5.      }
  6. </style>

2.用link进行引用

  1. <link rel="stylesheet" type="text/css" href="my.css">

3.用import进行引用

  1. <style type="text/css">
  2.     @import url(my.css);
  3.  </style>

第一种是直接在html页面上进行css书写，而第二种和第三种是采用外部引用样式单独提取文件。
问题1.到底link和@import有什么区别？
我们先来看看他们的定义
(more…)

  • 0 评论

    • 破解UX Magazine的自适应屏幕的三列和两列

    1 7, 2007 作者: xw | 分类: Web 标准, 工作

    UX Magazine.com是2006年度首届css大赛的冠军网站，呵呵既然是冠军网站肯定有他自己的特点
    和得到冠军的法宝，其中一个就是采用了宽平和窄屏的两种不同显示模式，在屏幕>1024的时候采用
    三列，当屏幕<1024的时候采用两列，而且设计的巧妙在于如果你不仔细观察根本发现不了它细节
    上的变化，可以说利用了巧妙的css技巧让，让宽平和窄屏幕的用户都可以很好的浏览网站内容。

    那么下面我们就来分析分析他是怎么做的，先来看看首页的源代码。（非常的整洁和干净）
    先看头部找到关键部分：

    1. ............
    2. <link rel="stylesheet" href="http://www.uxmag.com/_css/uxm.base.css" type="text/css" media="screen" />
    3. <link rel="stylesheet" href="http://www.uxmag.com/_css/uxm.1024.css" type="text/css" media="screen" id="wide" title="wide" />
    4. <link rel="alternate stylesheet" href="http://www.uxmag.com/_css/uxm.800.css" type="text/css" media="screen" id="narrow" title="narrow" />
    5. <link rel="stylesheet" href="http://www.uxmag.com/_css/uxm.print.css" type="text/css" media="print" />
    6.  ................
    7.  <!-- h5 & h6 Image Replacement Script  -->
    8. <script src="http://www.uxmag.com/_js/imageReplace.js" type="text/javascript"></script>
    9. <!-- Generic Scripts / Functions -->
    10. <script src="http://www.uxmag.com/_js/jsLib.js" type="text/javascript"></script>
    11.         ......................
    12. <!-- Various functions that initialize the page. -->
    13. <script type="text/javascript">
    14. <!--
    15.    function doOnResize () {
    16. determineStyle();
    17. }
    18.    function doOnLoad () {
    19.      determineStyle();
    20.    if ( getCookie("externalLinks") ) {
    21.        setLinkAttributes( getCookie("externalLinks") );
    22. }
    23. }
    24.             window.onresize = doOnResize;
    25. window.onload = doOnLoad;
    27. //-->
    28. </script>
    29.        .......................

    从上面的代码可以看出，整个页面引用了四个主要css：
    1.uxm.base.css是整个页面的基础样式;
    (more…)

  • 0 评论

    • 破解淘宝菜单

    1 3, 2007 作者: xw | 分类: Web 标准

    呵呵为什么又来一个破解，为什么是淘宝菜单，因为taobao上面的菜单，可以说是中国第一个大型网站采用css做的滑动门菜单，二来
    滑动门有一弱点就是会产生选中链接的虚线线框偏移，而淘宝的菜单是没有虚线框的，哈哈至于怎么做到的我们会在下面分析：

    好了长话段说我们先打开taobao的首页看看找到如下代码：

    1. <ul id="ChannelMenuItems">
    2.       <li id="MenuHome"><a href="http://www.taobao.com/index.php?from=top" target="_top"><span>首页</span></a></li>
    3.       <li id="MenuDigital"><a href="http://www.taobao.com/vertical/digital/index.php?from=top" target="_top"><span>数码通讯</span></a></li>
    4.       <li id="MenuLady"><a href="http://www.taobao.com/vertical/lady/index.php?from=top" target="_top"><span>女人</span></a></li>
    5.       <li id="MenuLife"><a href="http://www.taobao.com/vertical/life/index.php?from=top" target="_top"><span>家居</span></a></li>
    6.       <li id="MenuPet"><a href="http://www.taobao.com/vertical/pet/index.php?from=top" target="_top"><span>宠物</span></a></li>
    7.       <li id="MenuMan"><a href="http://www.taobao.com/vertical/man/index.php?from=top" target="_top"><span>男人</span></a></li>
    8.       <li id="MenuSports"><a href="http://www.taobao.com/vertical/sports/index.php?from=top" target="_top"><span>运动</span></a></li>
    9.       <li id="MenuGame"><a href="http://www.taobao.com/vertical/game/index.php?from=top" target="_top"><span>游戏</span></a></li>
    10.       <li id="MenuCulture"><a href="http://www.taobao.com/vertical/culture/index.php?from=top" target="_top"><span>书籍音像</span></a></li>
    11.       <li id="MenuHongkong"><a href="http://www.taobao.com/vertical/hkstreet/index.php?from=top" target="_top"><span>香港街</span></a></li>
    12.       <li id="MenuMall"><a href="http://www.taobao.com/vertical/mall/index.php?from=top" target="_top"><span>淘宝商城</span></a></li>
    13.     </ul>

    很标准的滑动门菜单结构，至于真正的滑动门菜单技术我们这里不详细介绍，如果你不是很了解的话，可以去看《CSS中的滑动门技术》，我们在查找一下菜单的css
    (more…)

  • 0 评论

    • ie7 下的hack

    1 3, 2007 作者: xw | 分类: Web 标准

    ie7 下的hack
    ie7发布了，有很多方法用不了了
    但是ie7有了一个全新的hack

    1. *+html ie7{
    2.  
    3. }

    在里面加上要hack的代码就可以只有在ie7下生效

    对于一般网站来说，在ie7下最普遍的问题就是浮动层的
    layout失效的问题造成。通常情况下在ie6和firefox下用的
    hack代码是

    1. .clearfix:after {
    2.         content: ".";
    3.         display: block;
    4.         height: 0;
    5.         clear: both;
    6.         visibility: hidden;
    7.     }
    8.     * html>body .clearfix {
    9.         display: inline-block;
    10.         width: 100%;
    11.     }
    12.    
    13.     * html .clearfix {
    14.         /* Hides from IE-mac \*/
    15.         height: 1%;
    16.         /* End hide from IE-mac */
    17.     }

    但是这个hack在ie7下是失效的
    我们之需要在这段代码增加一个ie7的hack就可以解决问题了

    1. .clearfix:after {
    2.         content: ".";
    3.         display: block;
    4.         height: 0;
    5.         clear: both;
    6.         visibility: hidden;
    7.     }
    8.     * html>body .clearfix {
    9.         display: inline-block;
    10.         width: 100%;
    11.     }
    12.    
    13.     * html .clearfix {
    14.         /* Hides from IE-mac \*/
    15.         height: 1%;
    16.         /* End hide from IE-mac */
    17.     }
    18.        /* ie7 hack*/
    19.         *+html .clearfix {
    20.         min-height: 1% ;
    21.     }

    最后感谢~~~realazy http://realazy.org/blog/ 在我遇到问题的时候可以耐心的给我解答

  • 0 评论

    • ie7下的图像自适应大小

    1 3, 2007 作者: xw | 分类: Web 标准

    今天在更改lbs在ie7下小图片出现滚动条bug的时候发现一个有趣的事情，
    ie7在我修正bug测试的时候竟然发现在ie7下图片竟然可以自动适应屏幕大小，我查看了一下代码

    1. img{
    2.   vertical-align: middle;
    3.   border: 0px none;
    4.   max-width:100%;
    5.   height:auto;
    6. }

    发现是定义了一个max-width:100%;在firefox下就支持max-width
    的,ie7下也开始支持max-width和max-min了，怪不得可以根据屏幕自适应大小呢。
    另外补充一下，设置的时候要max-width:100%;height:auto;都要写上，如果只写
    max-width:100%;的话在ie7是可以等比例缩放的，但是在firefox下就不能等比例缩放
    加上height:auto的话，在ie7和fierfox下就都可以实现自适应容器大小，并且等比例
    缩放了

  • 0 评论
    • Pages (3): « 1 2 3

    Flickr

    • iphone 3g
    • xin_39040311095407802931
    • b988f88fcaed5320adc72957fb401664
    • DSC03949
    • 黑胡椒鸡扒饭
    • DSC00004

    订阅

    日志(RSS)

    分类


    归档


    标签云


    我的豆瓣




    我的链接


    UEer


    W3Cer


    UIer


    友情链接


    其它

    最热文章

    最新评论

    最新发表

    Copyright © 2008 - 第8音 Design Everying
    Design Everying.