响应式css3案例分享

最新推荐文章于 2024-06-01 14:57:43 发布

hhkhhhhklkhh

最新推荐文章于 2024-06-01 14:57:43 发布

阅读量152

点赞数

分类专栏： css3响应式布局案例文章标签： css html5

本文链接：https://blog.csdn.net/hhkhhhhklkhh/article/details/112387417

版权

css3响应式布局案例专栏收录该内容

1 篇文章 0 订阅

订阅专栏

响应式项目

个人总结

1、当我们设置了一定的内边距和外边距导致宽度不够时，我们可以用box-sizing: border-box;这样就不会影响你的布局了

2、当我们最外边的div的logo元素已经设置了居中时（text-align:center;），下面的图片有的要隐藏，有的要显示，显示的图片一定设置为display:inline-block;。

3、想让导航栏下的li元素在下面全屏显示，需要给他的父元素list设置绝对定位以及相应的left值和top值，当然了，宽度必须要100%，子元素LI的宽度也必须要100%

4、要想有切换的效果，我们需要把list元素的高度设置为0，并且隐藏，加上过度效果几秒，
overflow: hidden;
height:0;
transition: .5s;
我们还需要在list的后面加上一个.open,并且设置高度为几个li的高度，比如就像案例中的一个li的高度时40，那么4个li的高度是160。（其实list代表的就是ul）

5、想让背景透明，我们可以用background:transparent;来实现效果

6、图片想要实现响应式效果，只需要将宽度设置为100%就可以了

7、我们在js当中可以用classlist中的toggle方法是实现效果的切换

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>响应式页面</title>
    <style>
        * { font-family: Arial; font-size: 14px; margin: 0; padding: 0; border: none; }
        body{
            background:#EFEFEF;
        }
        a { text-decoration: none; }
        ul { list-style: none; }
        .clearfix::after {
        content: '';
        display: block;
        clear:both
        }
        #header{
             height:40px;
             padding:8px 0 15px;
             background:#88C5E1;
             border-bottom:5px solid #54ABD4;
        }
        .logo{
            float:left;
            width:25%;
            text-align:center;
        }
        .large-logo{
            display:inline-block;
        }
        .middle-logo{
            display:none;
        }
        .small-logo{
            display:none;
        }
        .logo img{
            height:40px;
        }
        .search-form{
            float:left;
            width:50%;
        }
        .search-form input{
            width:80%;
            height:40px;
            padding:0 10px;
            border:1px solid #ccc;
            border-radius:10px 0 0  10px;
            box-sizing: border-box;
        }
        .search-form button{
            float:right;
            width:20%;
            height:40px;
            border-radius:0 10px 10px 0;
            border:1px solid #ccc;
            box-sizing: border-box;
        }
        .nav{
            float:right;
            width:25%;
        }
        .nav .btn{
            display:none;
        }
        .nav .list li{
            width:25%;
            float:left;
            height:40px;
            line-height:40px;
            text-align:center
        }
        .nav .list li a{
            display:block;
            color:#fff;
            font-size:12px;
        }
        

    @media screen and (max-width:1024px){
        .middle-logo{
            display:inline-block;
        }
        .large-logo{
            display:none;
        }
        .small-logo{
            display:none;
        }
        
    }
    @media screen and (max-width:640px){
        .middle-logo{
            display:none;
        }
        .large-logo{
            display:none;
        }
        .small-logo{
            display:inline-block;
        }
        .search-form{
            width:60%;
        }
        .nav{
            width:15%;
        }
        .nav .list{
            position:absolute;
            left:0;
            top:68px;
            width:100%;
            background:#88C5E1;
            overflow: hidden;
            height:0;
            transition: .5s;
        }
        .nav .list.open{
            height:160px;
        }
        .nav .list li{
            float:none;
            width:100%;
        }
        .nav .btn{
            display: block;
            margin:2px auto;
            padding:9px 10px;
            border:1px solid #ccc;
            border-radius:4px;
            background:transparent;
            outline:none;
        }
        .nav .btn span{
            display:block;
            width:22px;
            height:2px;
            background:#888;
            margin-bottom:5px;
        }
        .nav .btn span:last-child{
            margin-bottom:0;
        }
    }



    #banner img{
            width:100%;
        }
    .main-contain{
        margin:20px auto;
        width:1000px;
    }
    .col{
        float:left;
        padding:20px;
        width:25%;
        box-sizing: border-box;
    }
    .course-item a{
        color:#333;
    }
    .course-item img{
        width:100%;
    }
    .course-title{
        background:#fff;
        padding:20px 0;
        text-align: center;
    }

    @media screen and (max-width:1024px){
        .main-contain{
            width:100%;
        }

        .col{
            width:50%;
        }
    }

    @media screen and (max-width:640px){
        .col{
            width:100%;
        }

    }
    
    </style>
    <header id="header">
        <div class="logo">
            <img src="img/Brand.png" class="large-logo">
            <img src="img/Brand-M.png" class='middle-logo'>
            <img src="img/Brand-S.png" class='small-logo'>
        </div>
        <form action="search" class='search-form'>
            <input type="search">
            <button>搜索</button>
        </form>
        <nav class="nav">
            <button class="btn">
                <span></span>
                <span></span>
                <span></span>
            </button>
            <ul class="list">
                <li><a href="javascript">首页</a></li>
                <li><a href="javascript">课程</a></li>
                <li><a href="javascript">公告</a></li>
                <li><a href="javascript">登录</a></li>
            </ul>
        </nav>
    </header>    
    <div id="banner">
        <img src="img/homeImg.png" alt="">
    </div>
    <div id="main">
        <div class="main-contain clearfix">
            <div class="col">
                <div class="course-item">
                    <a href="">
                        <div class="course-img">
                            <img src="img/01h5.jpg" alt="">
                        </div>
                        <div class="course-title">
                            <h3>HTNL5</h3>
                        </div>
                    </a>
                </div>
            </div>
            <div class="col">
                <div class="course-item">
                    <a href="javascript:">
                        <div class="course-img">
                            <img src="img/02css3.jpg" alt="">
                        </div>
                        <div class="course-title">
                            <h3>CSS3</h3>
                        </div>
                    </a>
                </div>
            </div>
            <div class="col">
                <div class="course-item">
                    <a href="javascript:">
                        <div class="course-img">
                            <img src="img/03less.jpg" alt="">
                        </div>
                        <div class="course-title">
                            <h3>Less</h3>
                        </div>
                    </a>
                </div>
            </div>
            <div class="col">
                <div class="course-item">
                    <a href="javascript">
                        <div class="course-img">
                            <img src="img/04bootstrap.jpg" alt="">
                        </div>
                        <div class="course-title">
                            <h3>Bootstrap</h3>
                        </div>
                    </a>
                </div>
            </div>
            <div class="col">
                <div class="course-item">
                    <a href="javascript">
                        <div class="course-img">
                            <img src="img/01h5.jpg" alt="">
                        </div>
                        <div class="course-title">
                            <h3>HTNL5</h3>
                        </div>
                    </a>
                </div>
            </div>
            <div class="col">
                <div class="course-item">
                    <a href="javascript">
                        <div class="course-img">
                            <img src="img/02css3.jpg" alt="">
                        </div>
                        <div class="course-title">
                            <h3>CSS3</h3>
                        </div>
                    </a>
                </div>
            </div>
            <div class="col">
                <div class="course-item">
                    <a href="javascript">
                        <div class="course-img">
                            <img src="img/03less.jpg" alt="">
                        </div>
                        <div class="course-title">
                            <h3>Less</h3>
                        </div>
                    </a>
                </div>
            </div>
            <div class="col">
                <div class="course-item">
                   <a href="javascript">
                    <div class="course-img">
                        <img src="img/04bootstrap.jpg" alt="">
                    </div>
                    <div class="course-title">
                        <h3>Bootstrap</h3>
                    </div>
                   </a>
                </div>
            </div>
        </div>
    </div>
    <footer id="footer"></footer>

    <script>
        var btn = document.querySelector('#header .nav .btn');
        var list = document.querySelector('#header .nav .list');
        (function(){
            btn.onclick = function(){
                list.classList.toggle('open')
            }
        })();

    </script>
</body>
</html>

hhkhhhhklkhh

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
响应式css3案例分享

响应式项目个人总结1、当我们设置了一定的内边距和外边距导致宽度不够时，我们可以用box-sizing: border-box;这样就不会影响你的布局了2、当我们最外边的div的logo元素已经设置了居中时（text-align:center;），下面的图片有的要隐藏，有的要显示，显示的图片一定设置为display:inline-block;。3、想让导航栏下的li元素在下面全屏显示，需要给他的父元素list设置绝对定位以及相应的left值和top值，当然了，宽度必须要100%，子元素LI的
复制链接

扫一扫