媒体查询实现的响应式设计

简单的做了一个媒体查询实现的响应式设计，里面含有CSS3的box-shadow和圆角效果。但是在IE9以下的IE浏览器没有这样的效果。

需要注意的小地方：1.关于在IE6、7、8中实现inline-block效果是采用*display:inline

                         2.在IE浏览器中点击链接的时候会出现虚线框，解决方法是加上outline:0;

下面给出效果：

 

请缩放浏览器查看效果(宽度不要超过600px哦！max-width:600px)

左对齐

右对齐

中对齐

代码如下：

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>LIGHTBOX</title>
<style>
body {
    font-family: 'microsoft yahei',Arial,sans-serif;
    color: #666;
    width: 900px;
    max-width: 96%;
    margin: 0 auto;
}
a {
    color: #69c;
    text-decoration: none;
}
a:hover {
    color: #F60;
}
h1, h2{
    color: #000;
    line-height: 120%;
    margin: 30px 0 10px;
}
h1 {
    font-size: 1.8em;
    color: #000;
}
h2 {
    font-size: 1.4em;
    border-top: solid 1px #eee;
    padding-top: 20px;
}
ul{list-style-type:none;}

/* nav */
.nav {
    margin: 20px 0;
}
.nav ul {
    margin: 0;
    padding: 0;
}
.nav li {
    margin: 0 5px 10px 0;
    padding: 0;
    display: inline-block;
    *display:inline; /* ie7 */
}
.nav a {
    padding: 3px 12px;
    text-decoration: none;
    color: #999;
    line-height: 100%;
    outline:0;
}
.nav a:hover {
    color: #000;
}
.nav  .current a {
    background: #999;
    color: #fff;
    border-radius: 5px;
}

/* right nav */
.nav.right ul {
    text-align: right;
}

/* center nav */
.nav.center ul {
    text-align: center;
}

@media screen and (max-width:600px){
    .nav{
        position:relative;
        min-height:40px;
        }
    .nav ul{
        background:#fff;
        position:absolute;
        top:0;
        left:0;
        width:180px;
        border: solid 1px #aaa;
        padding:5px 0;
        border-radius: 5px;
        box-shadow: 0 1px 2px rgba(0,0,0,.3);
        }
    .nav li{
        display:none;
        margin:0;
        }
    .nav .current{
        display:block;
        }
    .nav a {
        display: block;
        padding: 5px 5px 5px 32px;
        text-align: left;
        }
    .nav .current a {
        background: none;
        color: #666;
        }
    .nav ul:hover{
        position:absolute;
        z-index:100;
        }
    .nav ul:hover li {
        display: block;
        margin: 0 0 5px;
        }
    .nav.right ul {
        left: auto;
        right: 0;
        }
    .nav.center ul {
        left: 50%;
        margin-left: -90px;
        }
    }
</style>
</head>

<body>
    <h1>请缩放浏览器查看效果</h1>

    <h2>左对齐</h2>
    <div class="nav">
        <ul>
            <li class="current"><a href="#">Portfolio</a></li>
            <li><a href="#">Illustration</a></li>
            <li><a href="#">Web Design</a></li>
            <li><a href="#">Print Media</a></li>
            <li><a href="#">Graphic Design</a></li>
        </ul>
    </div>
    
    <h2>右对齐</h2>
    <div class="nav right">
        <ul>
            <li><a href="#">Portfolio</a></li>
            <li class="current"><a href="#">Illustration</a></li>
            <li><a href="#">Web Design</a></li>
            <li><a href="#">Print Media</a></li>
            <li><a href="#">Graphic Design</a></li>
        </ul>
    </div>
    
    <h2>中对齐</h2>
    <div class="nav center">
        <ul>
            <li><a href="#">Portfolio</a></li>
            <li><a href="#">Illustration</a></li>
            <li><a href="#">Web Design</a></li>
            <li class="current"><a href="#">Print Media</a></li>
            <li><a href="#">Graphic Design</a></li>
        </ul>
    </div>

</body>
</html>

 

posted @ 2013-04-08 21:44  Joy Ho  阅读(226)  评论(0)  编辑  收藏  举报