CSS颜色渐变（兼容IE、Firefox、Chrome、Safari）

最新推荐文章于 2021-06-17 03:45:46 发布

xuyf

最新推荐文章于 2021-06-17 03:45:46 发布

阅读量3.2k

点赞数

本文链接：https://blog.youkuaiyun.com/yavobo/article/details/8240982

版权

HTML代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <title>试试</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
        <link rel="stylesheet" type="text/css" href="./main.css" />
    </head>
    <body>
        <div id="mainframe">
            <div id="mainmenu">
                <a href="#">首页</a>
                <a href="#">文化</a>
                <a href="#">知识</a>
                <a href="#">商业</a>
                <a href="#">论坛</a>
                <div>登录信息</div>
            </div>
            <div class="clear"></div>
            <div id="navmenu">
            </div>
            <div id="container" class="css-grd">
                这是一个颜色渐变的网页
            </div>
            <div id="foot">
                <span>Copyright © 2012 Yavobo, All rights reserved.</span>
            </div>
        </div>
    </body>
</html>

CSS代码：

body{
    background-color: #000;
}

/* This is the mainframe to contain the parts:
 *   1.mainmenu
 *   2.navmenu
 *   3.foot
 */
#mainframe{
    margin:2px auto;
    padding-bottom:6px;
    width:1024px;
    background-color:gray;
}

/* This the main menu for the global home. */
#mainmenu{
    margin:2px auto;
    width:98%;
    height:30px;
    line-height:30px;
    text-align:center;
    background-color: RGB(95,116,227);
    color:yellow;
}
#mainmenu a,#manumenu div{
    color:yellow;
    border:1px solid white;
    margin: 1px;
    float:left;
    width: 100px;
}

/* This is the navigation of the father's menu. */
#navmenu{
    margin:2px auto;
    width:98%;
    height:30px;
    background-color:#af2;

}

#container{
    margin:2px auto;
    margin-bottom: 0;
    border:0px solid white;
    border-bottom: 0;
    width:98%;
    height:768px;
    /* background-color:gray; */
}

/* This is the container to fill the parts:
 *   1.Copyrights
 *   2.relationship
 *   3.address
 *   4.Telephone
 *   ....
 */
#foot{
    margin:2px auto;
    margin-top: 0;
    width:98%;
    background-color: #222;
    color:red;
    height: 30px;
    line-height:30px;
    text-align:center;
}

.clear{
    clear:both;
    float:none;
}

.css-grd {
    /* default background colour, for all layout engines that don’t implement gradients */
    background: #2a6da9;

    /* 1.gecko based browsers */
    background: -moz-linear-gradient(top, #FFFFFF, #222);

    /* 2.webkit based browsers */
    background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#222));
    
    /* 3.IE browsers */
    filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#FFFFFF', EndColorStr='#222');

    color: #236; /* text colour (black) */
    height: auto;     /* gradient uses the full height of the element */
    /* padding: 5px;   /*  distance from border edge to text */
    padding-bottom: 0;
}