随州网站优化随州SEO随州网站建设就找创想网络随州本地网站优化SEO网站建设创想网络最好、最专业。创想网络致力于网站优 化、SEO、网站建设、网站美化网站推广网络营销整合方案等服务。

    正在载入图片……
    • 网站没有排名,想知道为什么吗?
    • 解密SEO如何让网站排名第一
    • 网站是做来用的,不光是做来看的
    热门关键词:时间 织梦 自定义 采集 模型
    您现在的位置:创想网络 >> SEO技术 >> 最常用和实用的10个CSS技巧

    最常用和实用的10个CSS技巧

    作者:随州SEO 来源:随州网站优化 发布日期:2010年07月26日 浏览:
    文章Tags:CSS技巧 IE兼容


    1.重置浏览器的字体大小

    重置浏览器的默认值 ,然后重设浏览器的字体大小你可以使用雅虎的用户界面重置的CSS方案 ,如果你不想下载9MB的文件,代码如下: 
     

    body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,
    blockquote,th,td {margin:0; padding:0; }
    table { border-collapse:collapse; border-spacing:0; }
    fieldset,img { border:0; }
    address,caption,cite,code,dfn,em,strong,th,var { font-style:normal; font-weight:normal; }
    ol,ul { list-style:none; }
    caption,th { text-align:left; }
    h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal; }
    q:before,q:after { content:”; }
    abbr,acronym { border:0; }


    其次,我们重设浏览器字体的大小为10像素,使用如下:
     

    html {font-size: 62.5%;}


    这个大小基本合适,然后您可以根据自己的需要调整大小,如 标题1为120像素:
     

    h1 {font-size: 2em;}



    2.设置水平居中

    大多数的网站目前都是固定宽度的。CSS代码如下:
     

    div#container {margin: 0 auto;}



    3.控制位置:绝对位置,相对位置
    假如有两个div
     

    <div id='parent'>
    <div id='son'></div>
    </div>


    div有left和top属性,是用来定位的.
    如果内层的div的position属性是absolute.那他就是相对于文档的左上角的位置..
    如果内层的div(id为son的那个)position属性为relative,那它的left和top值就是相对于外层的div的左上角的距离.


    4.将重要元素放置在屏幕中央

    如果你希望将您想要的东西放在最中央,可以使用以下CSS:
     

    div.popup { height:400px; width:500px; position: absolute; top: 50%; left: 50%;}
    div.popup { margin-top: -200px; margin-left: -250px;}


    您必须明确的指定宽度和高度,再把top和left属性设为他们的一半,这样就可以是这个部分回到屏幕的中心。


    5.可以重复利用的规则

     

    .left {float: left;}
    .right {float: right;}
    img .left { border:2px solid #aaaaaa; margin: 0 10px 0 0;}
    img .right { border:2px solid #aaaaaa; margin: 0 0 0 10px; padding: 1px;}


    设置自己的CSS样式表,就可以在您需要的时候直接的添加标记即可。 



    6. 解决IE6 的浮动元素的双倍边距问题
    对一个div设置了float:left 和 margin-left:100px 那么在IE6中,这个bug就会出现。您只需要多设置一个display即可,代码如下:

    div {float:left;margin:40px;display:inline;}




    7.简单的导航菜单

    在您的设计中预设一个导航栏是非常有益的。可以让别人对你网页的主要内容有一个大致的了解。第一次来的XHTML:
     

    <div id=”navbar”>
    <ul>
    <li><a href=”http://www.peakflowdesign.com”>Peakflow Design</a></li>
    <li><a href=”http://www.google.com”">Google</a></li>
    <li><a href=”http://zenhabits.net/”>Zen Habits</a></li>
    </ul>
    </div>


    CSS代码:
     

    #navbar ul li {display:inline;margin:0 10px 0 0;}
    #navbar ul li a {color: #333;display:block;float:left;padding:5px;}
    #navbar ul li a:hover {background:#eee;color:black;}


     
    8.不使用table的form表单

    正如我们现在进行网站设计的table-free,把重点是放在使用DIVs上。不再对表的列和域进行约束,所以我们需要一些好用的CSS,在JeddHowden.com 发现
     

    XHTML:
    <form action=”form.php” method=”post”>
    <fieldset>
    <legend>Personal Information</legend>
    <div>
    <label for=”first_name”>First Name:</label>
    <input type=”text” name=”first_name” id=”first_name” size=”10″ value=”" />
    </div>
    <div>
    <label for=”last_name”>Last Name:</label>
    <input type=”text” name=”last_name” id=”last_name” size=”10″ value=”" />
    </div>
    <div>
    <label for=”postal”>Zip/Postal Code:</label>
    <input type=”text” name=”postal” id=”postal” size=”10″ value=”" />
    </div>
    </fieldset>
    </form>



     

    CSS:
    form div {clear:left;display:block;width:400px;zoom:1;margin:5px 0 0 0;padding:1px 3px;}
    form div label {display:block;float:left;width:130px;padding:3px 5px;margin: 0 0 5px 0;text-align:right;}



    9.让footer总是停留在页面的底部

    在网页的底部总是保留着公司的版本信息,如何是这部分信息来实现呢?这是一个很古老的技术,这都要归功于The Man in Blue 。
     

    XHTML:
    <body>
    <div id=”nonFooter”>
    <div id=”content”> *Place all page content here* </div>
    </div>
    <div id=”footer”> *Place anything you want in your footer here*
    </div>
    </body>


     

    CSS:
    html, body { height: 100%; }
    #nonFooter { position: relative; min-height: 100%; }
    * html #nonFooter { height: 100%; }
    #content { padding-bottom: 9em; }
    #footer { position: relative; margin-top: -7.5em; }


    10.在同一元素上使用多种类
    随着有用的功能越来越多的,大多数的人都忽略了内部CSS的选择。一个元素可以套用很多的类,例如:
     

    .red {color: red;}
    .bold {font-weight: strong;}


    我们可以运用它:
     

    <p class=”red bold”>This text will be red yet also bold!</p>


    希望这些能对您有所帮助!

    本文地址:http://www.szcxdl.com/seotg/4.html

    本文作者随州SEO,转载请注明出处。