HTML5 响应式布局

最新推荐文章于 2021-06-16 17:39:13 发布

凌冰_

最新推荐文章于 2021-06-16 17:39:13 发布

阅读量798

点赞数

分类专栏： HTML5

本文链接：https://blog.csdn.net/hlx20080808/article/details/52152370

版权

HTML5 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

一、页面response.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>响应式布局</title>
    <!--引用外部的CSS -->
    <link rel="stylesheet" href="response.css" type="text/css"/>
</head>
<body>
<div class="box">
    <nav>
        <ul>
            <li class="li_1"><a href="#">首页</a></li>
            <li><a href="#">产品介绍</a></li>
            <li><a href="#">素材中心</a></li>
            <li><a href="#">联系我们</a></li>
        </ul>
    </nav>
    <section>

    </section>
</div>

</body>
</html>

二、样式response.css

* {
    /* 边距去掉*/
    margin: 0px;
    padding: 0px;
    font-family: 微软雅黑;
}

li {
    /* 去掉小黑点*/
    list-style: none;
}

body {
    /* 背景黑色*/
    background: #000;
}

a {
    /*  去掉下划线 */
    text-decoration: none;
}

/*导航 宽度，居中*/
nav {
    width: 600px;
    margin: 50px auto;
}

/* 背景+圆角 */
nav ul {
    background: yellowgreen;
    height: 50px;
    border-radius: 15px; /* 圆角 */
}

/* 左浮动，行高，字体大小，内间距 */
nav ul li {
    float: left;
    line-height: 40px;
    font-size: 18px;
    padding: 5px 15px;
    margin-left: 40px; /*  外边距左边40*/
}

/* 默认第一个li */
nav ul li.li_1{
    background: darkorange; /* 背景 */
    border-radius: 15px; /* 圆角 */
}

li a {
    color: #fff; /* 超链接的字体白色 */
}

/* 悬停上也是同一个颜色*/
nav ul li:hover {
    background: darkorange; /* 背景 */
    border-radius: 15px; /* 圆角 */
}

/* 注意：下面的代码能用上面的 */
/* 媒体屏幕最小=320 最大=640 (根据屏幕的大小变化随之也发生变化)*/
@media only screen and (min-width: 320px) and (max-width: 640px) {
    nav {
        /* 缩小宽度 */
        width: 200px;
        margin: 30px;
    }

    nav ul li{
        display: none;  /*display：none咱们可以直接输入dn*/
        width:200px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        margin: 0px; /* 必须为0 */
        background: greenyellow;
        border-radius: 15px; /*css3属性  圆角属性*/
        margin-top: 1px;

    }
    /* 默认第一个li 显示*/
    nav .li_1{
        display: block;
        margin-top: 0px;    /* 去掉顶端外边距 */
    }

    /* 经过ul 就显示li */
    nav ul:hover li{
        display: block;
    }
}


/* 媒体屏幕最小=320 最大=480 (根据屏幕的大小变化随之也发生变化)*/
@media only screen and (min-width: 320px) and (max-width: 480px) {
    nav {
        /* 缩小宽度 */
        width: 100px;
        margin: 30px;
    }

    nav ul li{
        display: none;  /*display：none咱们可以直接输入dn*/
        width: 100px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        margin: 0px; /* 必须为0 */
        background: greenyellow;
        border-radius: 15px; /*css3属性  圆角属性*/
        margin-top: 1px;

    }
    /* 默认第一个li 显示*/
    nav .li_1{
        display: block;
        margin-top: 0px;    /* 去掉顶端外边距 */
    }

    /* 经过ul 就显示li */
    nav ul:hover li{
        display: block;
    }
}


/* 媒体屏幕最小=640 最大=960 (根据屏幕的大小变化随之也发生变化)*/
@media only screen and (min-width: 640px) and (max-width: 960px) {
    nav {
        /* 缩小宽度 */
        width: 300px;
        margin: 30px;
    }

    nav ul li{
        display: none;  /*display：none咱们可以直接输入dn*/
        width: 300px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        margin: 0px; /* 必须为0 */
        background: greenyellow;
        border-radius: 15px; /*css3属性  圆角属性*/
        margin-top: 1px;

    }
    /* 默认第一个li 显示*/
    nav .li_1{
        display: block;
        margin-top: 0px;    /* 去掉顶端外边距 */
    }

    /* 经过ul 就显示li */
    nav ul:hover li{
        display: block;
    }
}

三、效果

（1）平铺页面