CSS实例

  • HTML和CSS做网页实例教程:边框阴影和内容垂直居中分享

    本帖代码实现的是边框阴影(很多时候被勇于顶部banner框),及让框架内内容垂直居中。 html+CSS实例效果(2):边框为阴影及DIV内容垂直居中效果 <!DOCTYPE…

    html干货教程 2020年4月22日
    74
  • CSS特点及加入网页的四种方法分享

    今天给初学者介绍一下CSS特点及如何在网页中使用已经设置的CSS。   CSS(Cascading Stylesheets,层叠样式表)是一种制作网页的新技术,现在已经为大多数的浏…

    html干货教程 2020年4月21日
    114
  • 去除链接元素的虚线框 兼容IE7、IE6、FF分享

    推荐下面的代码 代码如下: a {outline: none; /* for Forefox */ } a {star:expression(this.onFocus=this.b…

  • CSS缩写6个图例总结分享

      本文将通过CSS实例,讲解六种缩写的形式。它们分别是margin和padding、border、background、font、list和color。phpstudy.Com以…

    css干货教程 2020年4月16日
    72
  • IE浏览器Css if hack条件语法操作说明分享

    1、Css if hack条件语法< !–[if IE]> Only IE <![endif]–>仅所有的WIN系统自带IE可识别&…

  • CSS实例:三列等高布局分享

      三列等高CSS布局的一个实例,
      修改国外的一个demo,
      兼容到了IE5.5+ 和标准的浏览器Opera Firefox Safari。
      不过hack太多,不是很喜欢这样做。

    全部代码如下:

    <?xml version="1.0" encoding="gb2312"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <meta http-equiv="Content-Language" content="zh-CN" />
    <meta content="all" name="robots" />
    <title>3 column lauput</title>
    <style type="text/css" media="screen">
    <!–
    /*<![CDATA[*/
    /*———————————————————–
        @from:http://www.alistapart.com/articles/holygrail
        @modify:greengnn 08-01-02
    ————————————————————*/
    * {
        margin:0;
        padding:0;
    }
    body {
        min-width: 550px;
        font:normal normal normal 75%/1.25em Verdana, Arial, Helvetica, sans-serif;
        color:#333333;
        text-align:left;
    }
    /*layout*/
    #container {
        padding-left: 200px;
        padding-right: 150px;
        background:#000;
        zoom:1;
    }
    #container:after {
        content:’.’;
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }
    #container { display: inline-block; }
    /**/
    #container { display: block; }
    /**/
    #center, #left, #right {
        position: relative;
        float: left;
    }
    *+html #center {
    }
    #center { width: 100%; }
    #left {
        width: 200px;
        right: 200px;
        margin-left: -100%;
    }
    #right {
        width: 150px;
        margin-right: -150px;
    }
    #footer { clear: both; }
    /*Equal-height */
    #container { overflow: hidden; }
    #footer {
        overflow:hidden;
        position: relative;
    }
    /*IE7 hack*/
    *+html #center {
        position:static;
    }
    *+html #left {
        position:static;
    }
    *+html #right {
        position:static;
    }
    *+html #container {
        position:relative;
        overflow:hidden;
    }
    *+html #left {
        position:relative;
    }
    /*End IE7 hack*/
    /*Start Hack for Opera8*/
    /**/
    #container #center, #container #left, #container #right {
        padding-bottom: 32767px !important;
        margin-bottom: -32767px !important;
    }
    @media all and (min-width: 0px) {
        #container #center, #container #left, #container #right {
            padding-bottom: 0 !important;
            margin-bottom: 0 !important;
        }
        #center:before, #left:before, #right:before {
            content: ‘[DO NOT LEAVE IT IS NOT REAL]’;
            display: block;
            background: inherit;
            padding-top: 32767px !important;
            margin-bottom: -32767px !important;
            height: 0;
        }
    }
    /**/
    /*End Hack for Opera8*/
    /*just to see*/
    #header, #footer {
        font-size:40px;
        line-height:40px;
        text-align:center;
        font-weight:bold;
        color:#cccccc;
        background:#666666;
    }
    #center { background:#eeeeee; }
    #left { background:#FF9933; }
    #right { background:#0099CC; }
    /*]]>*/
    –>
    </style>
    </head>
    <body>
    <div id="header">header(test in IE5.5+ opera9.0 Firefox 2.0)</div>
    <div id="container">
        <div id="center">
            <h2>Abstract</h2>
            <p>The web is constantly evolving. New and innovative websites are being created     every day, pushing the boundaries of HTML in every direction. HTML 4 has     been around for nearly a decade now, and publishers seeking new techniques to     provide enhanced functionality are being held back by the constraints of     the language and browsers.</p>
            <p>To give authors more flexibility and interoperability, and enable  more interactive and exciting websites and applications, HTML 5  introduces and enhances a wide range of features including form  controls, APIs, multimedia, structure, and semantics.</p>
            <p>Work on HTML 5, which commenced in 2004, is currently being carried out in     a joint effort between the <a href="http://www.w3.org/html/"><abbr title="W3C HTML Working Group">W3C HTML     WG</abbr></a> and     the <a href="http://www.whatwg.org/"><abbr title="Web Hypertext Application Technology Working Group">WHATWG</abbr></a>.     Many key players are participating in the W3C effort including representatives     from the four major browser vendors: Apple, Mozilla, Opera, and Microsoft;     and a range of other organisations and individuals with many diverse interests     and expertise.</p>
            <p>Note that <a href="http://www.w3.org/html/wg/html5/">the     specification</a> is still a <em>work in progress</em> and quite a long     way from completion. As such, it is possible that any feature discussed in     this article may change in the future. This article is intended to provide     a brief introduction to some of the major features as they are in the current     draft.</p>
        </div>
        <div id="left">
            <h2>Abstract</h2>
            <p>The web is constantly evolving. New and innovative websites are being created     every day, pushing the boundaries of HTML in every direction. HTML 4 has     been around for nearly a decade now, and publishers seeking new techniques to     provide enhanced functionality are being held back by the constraints of     the language and browsers.</p>
            <p>To give authors more flexibility and interoperability, and enable  more interactive and exciting websites and applications, HTML 5  introduces and enhances a wide range of features including form  controls, APIs, multimedia, structure, and semantics.</p>
            <p>Work on HTML 5, which commenced in 2004, is currently being carried out in     a joint effort between the <a href="http://www.w3.org/html/"><abbr title="W3C HTML Working Group">W3C HTML     WG</abbr></a> and     the <a href="http://www.whatwg.org/"><abbr title="Web Hypertext Application Technology Working Group">WHATWG</abbr></a>.     Many key players are participating in the W3C effort including representatives     from the four major browser vendors: Apple, Mozilla, Opera, and Microsoft;     and a range of other organisations and individuals with many diverse interests     and expertise.</p>
            <p>Note that <a href="http://www.w3.org/html/wg/html5/">the     specification</a> is still a <em>work in progress</em> and quite a long     way from completion. As such, it is possible that any feature discussed in     this article may change in the future. This article is intended to provide     a brief introduction to some of the major features as they are in the current     draft.</p>
        </div>
        <div id="right">
            <h2>Abstract</h2>
            <p>The web is constantly evolving. New and innovative websites are being created     every day, pushing the boundaries of HTML in every direction. HTML 4 has     been around for nearly a decade now, and publishers seeking new techniques to     provide enhanced functionality are being held back by the constraints of     the language and browsers.</p>
            <p>To give authors more flexibility and interoperability, and enable  more interactive and exciting websites and applications, HTML 5  introduces and enhances a wide range of features including form  controls, APIs, multimedia, structure, and semantics.</p>
            <p>Work on HTML 5, which commenced in 2004, is currently being carried out in     a joint effort between the <a href="http://www.w3.org/html/"><abbr title="W3C HTML Working Group">W3C HTML     WG</abbr></a> and     the <a href="http://www.whatwg.org/"><abbr title="Web Hypertext Application Technology Working Group">WHATWG</abbr></a>.     Many key players are participating in the W3C effort including representatives     from the four major browser vendors: Apple, Mozilla, Opera, and Microsoft;     and a range of other organisations and individuals with many diverse interests     and expertise.</p>
            <p>Note that <a href="http://www.w3.org/html/wg/html5/">the     specification</a> is still a <em>work in progress</em> and quite a long     way from completion. As such, it is possible that any feature discussed in     this article may change in the future. This article is intended to provide     a brief introduction to some of the major features as they are in the current     draft.</p>
        </div>
    </div>
    <div id="footer">footer</div>
    <script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script>
    <script type="text/javascript">
    /*<![CDATA[*/
        _uacct = "UA-496414-1";
    /*]]>*/
    </script>
    </body>
    </html>
    查看运行效果:

    <?xml version="1.0" encoding="gb2312"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta http-equiv="Content-Language" content="zh-CN" /> <meta content="all" name="robots" /> <title>3 column lauput</title> <style type="text/css" media="screen"> <!– /*<![CDATA[*/ /*———————————————————– @from:http://www.alistapart.com/articles/holygrail @modify:greengnn 08-01-02 ————————————————————*/ * { margin:0; padding:0; } body { min-width: 550px; font:normal normal normal 75%/1.25em Verdana, Arial, Helvetica, sans-serif; color:#333333; text-align:left; } /*layout*/ #container { padding-left: 200px; padding-right: 150px; background:#000; zoom:1; } #container:after { content:’.’; display: block; height: 0; clear: both; visibility: hidden; } #container { display: inline-block; } /**/ #container { display: block; } /**/ #center, #left, #right { position: relative; float: left; } *+html #center { } #center { width: 100%; } #left { width: 200px; right: 200px; margin-left: -100%; } #right { width: 150px; margin-right: -150px; } #footer { clear: both; } /*Equal-height */ #container { overflow: hidden; } #footer { overflow:hidden; position: relative; } /*IE7 hack*/ *+html #center { position:static; } *+html #left { position:static; } *+html #right { position:static; } *+html #container { position:relative; overflow:hidden; } *+html #left { position:relative; } /*End IE7 hack*/ /*Start Hack for Opera8*/ /**/ #container #center, #container #left, #container #right { padding-bottom: 32767px !important; margin-bottom: -32767px !important; } @media all and (min-width: 0px) { #container #center, #container #left, #container #right { padding-bottom: 0 !important; margin-bottom: 0 !important; } #center:before, #left:before, #right:before { content: ‘[DO NOT LEAVE IT IS NOT REAL]’; display: block; background: inherit; padding-top: 32767px !important; margin-bottom: -32767px !important; height: 0; } } /**/ /*End Hack for Opera8*/ /*just to see*/ #header, #footer { font-size:40px; line-height:40px; text-align:center; font-weight:bold; color:#cccccc; background:#666666; } #center { background:#eeeeee; } #left { background:#FF9933; } #right { background:#0099CC; } /*]]>*/ –> </style> </head> <body> <div id="header">header(test in IE5.5+ opera9.0 Firefox 2.0)</div> <div id="container"> <div id="center"> <h2>Abstract</h2> <p>The web is constantly evolving. New and innovative websites are being created every day, pushing the boundaries of HTML in every direction. HTML 4 has been around for nearly a decade now, and publishers seeking new techniques to provide enhanced functionality are being held back by the constraints of the language and browsers.</p> <p>To give authors more flexibility and interoperability, and enable more interactive and exciting websites and applications, HTML 5 introduces and enhances a wide range of features including form controls, APIs, multimedia, structure, and semantics.</p> <p>Work on HTML 5, which commenced in 2004, is currently being carried out in a joint effort between the <a href="http://www.w3.org/html/"><abbr title="W3C HTML Working Group">W3C HTML WG</abbr></a> and the <a href="http://www.whatwg.org/"><abbr title="Web Hypertext Application Technology Working Group">WHATWG</abbr></a>. Many key players are participating in the W3C effort including representatives from the four major browser vendors: Apple, Mozilla, Opera, and Microsoft; and a range of other organisations and individuals with many diverse interests and expertise.</p> <p>Note that <a href="http://www.w3.org/html/wg/html5/">the specification</a> is still a <em>work in progress</em> and quite a long way from completion. As such, it is possible that any feature discussed in this article may change in the future. This article is intended to provide a brief introduction to some of the major features as they are in the current draft.</p> </div> <div id="left"> <h2>Abstract</h2> <p>The web is constantly evolving. New and innovative websites are being created every day, pushing the boundaries of HTML in every direction. HTML 4 has been around for nearly a decade now, and publishers seeking new techniques to provide enhanced functionality are being held back by the constraints of the language and browsers.</p> <p>To give authors more flexibility and interoperability, and enable more interactive and exciting websites and applications, HTML 5 introduces and enhances a wide range of features including form controls, APIs, multimedia, structure, and semantics.</p> <p>Work on HTML 5, which commenced in 2004, is currently being carried out in a joint effort between the <a href="http://www.w3.org/html/"><abbr title="W3C HTML Working Group">W3C HTML WG</abbr></a> and the <a href="http://www.whatwg.org/"><abbr title="Web Hypertext Application Technology Working Group">WHATWG</abbr></a>. Many key players are participating in the W3C effort including representatives from the four major browser vendors: Apple, Mozilla, Opera, and Microsoft; and a range of other organisations and individuals with many diverse interests and expertise.</p> <p>Note that <a href="http://www.w3.org/html/wg/html5/">the specification</a> is still a <em>work in progress</em> and quite a long way from completion. As such, it is possible that any feature discussed in this article may change in the future. This article is intended to provide a brief introduction to some of the major features as they are in the current draft.</p> </div> <div id="right"> <h2>Abstract</h2> <p>The web is constantly evolving. New and innovative websites are being created every day, pushing the boundaries of HTML in every direction. HTML 4 has been around for nearly a decade now, and publishers seeking new techniques to provide enhanced functionality are being held back by the constraints of the language and browsers.</p> <p>To give authors more flexibility and interoperability, and enable more interactive and exciting websites and applications, HTML 5 introduces and enhances a wide range of features including form controls, APIs, multimedia, structure, and semantics.</p> <p>Work on HTML 5, which commenced in 2004, is currently being carried out in a joint effort between the <a href="http://www.w3.org/html/"><abbr title="W3C HTML Working Group">W3C HTML WG</abbr></a> and the <a href="http://www.whatwg.org/"><abbr title="Web Hypertext Application Technology Working Group">WHATWG</abbr></a>. Many key players are participating in the W3C effort including representatives from the four major browser vendors: Apple, Mozilla, Opera, and Microsoft; and a range of other organisations and individuals with many diverse interests and expertise.</p> <p>Note that <a href="http://www.w3.org/html/wg/html5/">the specification</a> is still a <em>work in progress</em> and quite a long way from completion. As such, it is possible that any feature discussed in this article may change in the future. This article is intended to provide a brief introduction to some of the major features as they are in the current draft.</p> </div> </div> <div id="footer">footer</div> <script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script> <script type="text/javascript"> /*<![CDATA[*/ _uacct = "UA-496414-1"; /*]]>*/ </script> </body> </html>
        [ 可先修改部分代码 再运行查看效果 ]

  • css实现的漂亮的分页效果代码(橘黄色与蓝色)分享

    在做pj皮肤的时候到网上搜了个分页效果,因为颜色不搭就没用,但是个人认为挺漂亮。代码也够简洁。 下面是用的背景图片: html代码: 代码如下: <div id=&#8221…

    css干货教程 2020年4月10日
    68