Question

我正在尝试更改div的网格，这样当我放大页面时，它会从一行变为两行。
我遇到的另一个问题是将左侧菜单设置为与html的其余部分相同的比例。
我的最后一个问题是，我正在尝试让菜单提升按钮进行切换效果，但在第二次使用dblclik时我没有找到一个好的解决方案..

这是我的HTML：

<html>
<head>
    <meta charset="utf-8">
    <title>final project</title>

    <link rel="stylesheet" type="text/css" href="css/final-fix.css">
    <!--jquery-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <!--bootstrap-->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

    <script src="js/final.js"></script>

</head>

<body>

    <div class="container-box">

        <div class="menu">

            <!-- Menu icon -->
            <div class="icon-close">
                <img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/uber/close.png">
            </div>

            <!-- Menu -->
            <ul>
                <li><a href="#">About</a></li>
                <li><a href="#">Blog</a></li>
                <li><a href="#">Help</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>

        <nav>
            <ul class="nav nav-pills pull-right">
                <li role="navigation"><a href="#">Home</a></li>
                <li role="navigation"><a href="#">About Us</a></li>
                <li role="navigation"><a href="#">Contact Us</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle">More<b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Community</a></li>
                        <li><a href="#">Our Blog</a></li>
                        <li><a href="#">Maps Blog</a></li>
                        <li><a href="#">Eng Blog</a></li>
                        <li><a href="#">Advertisers</a></li>
                        <li><a href="#">Publishers</a></li>
                        <li><a href="#">About Us</a></li>
                    </ul>
                </li>
            </ul>
            <ul class="nav nav-pills pull-left">
                <li role="menu"><a href="#"><span class="glyphicon glyphicon-menu-hamburger"></span></a></li>
            </ul>
        </nav>

        <header></header>


        <div class="main" id="grad">
            <h1>Welcome to ducati</h1>

            <div class="cover-div  row col-md-12 col-md-offset-0 ">

                <div class="box col-md-2 col-md-offset-1" id="box1 ">
                    <span class="boxSimbol glyphicon glyphicon-headphones"></span>
                    <p>Lorem ipsum  1</p>
                </div>

                <div class="box col-md-2 col-md-offset-1" id="box2">
                    <span class="boxSimbol glyphicon glyphicon-music"></span>
                    <p>Lorem ipsum 2</p>
                </div>
                <div class="box col-md-2 col-md-offset-1" id="box3">
                    <span class="boxSimbol glyphicon glyphicon-download-alt"></span>
                    <p>Lorem ipsum  3 </p>
                </div>
                <div class=" box col-md-2 col-md-offset-1" id="box4">
                    <span class="boxSimbol glyphicon glyphicon-shopping-cart"></span>
                    <p>Lorem ipsum 4</p>
                </div>
            </div>
        </div>
        <footer>&copy; All right belong to me :) </footer>
    </div>
</body>
</html>

这是我的css：

* {
    margin: 0;
    padding: 0;
    font-family: arial;
}

body {
    left: 0;
    margin: 0;
    overflow: hidden;
    position: relative;
}

.container-box {
    position: relative;
    margin: 0 auto;
    width: 600px;
    height: 570px;
    border: 2px solid black;
}

.pull-right {
    /* font-weight:bold;  */
}

header {
    background-image: url('http://dre.ducati.it/wp-content/uploads/2015/02/Home_Multi-720x404.jpg');
    height: 30%;
    width: 100%;
    background-position: center center;
}

.main h1 {
    text-align: center;
    margin: auto;
}

.main span {
    text-align: center;
    font-size: 30px;
    margin-top: 10px;
}

.main {
    position: relative;
    height: 60%;
    border-bottom: 2px solid black;
}

#grad {
    background: -webkit-linear-gradient(left top, gray,gray,red,gray,white ); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(bottom right, gray,gray,red,gray,white); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(bottom right, gray,gray,red,gray,white); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to bottom right, gray,gray,red,gray,white); /* Standard syntax */
}


footer {
    background-color: gray;
    border: 2px solid orange;
}

.box {
    width: 20%;
    border: 1px solid black;
    /*  margin:2.5%; */
    height: 50%;
    border-radius: 15px;
    color: purple;
    font-weight: bold;
}

.cover-div {
    /* display:table; */
    border: 2px solid yellow;
    width: 100%;
    margin: auto;
    text-align: center;
}

/* .col-md-12{
    padding-left:none !important; 
    }
    .col-md-offset-0{
    margin-left:none !important;
    } */

#box1 {
    background-image: linear-gradient( rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1) ),url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTB2YZ8vH8ya8CmAfxdelGL1Yg2H9wnubKmiMjTfa_-oUyWMBJrsg');
}

#box2 {
    background-image: url('https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRHQ6KOrPE0qzNJXGClg03lWQ_N1mArKThc4oL2Cj9F06RaKHqajg');
}

#box3 {
    background-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRwFGxPLtrhbS_a3m_Vvc8I-M27rdh9fkIdXULQYSEGwuazc4ey');
}

#box4 {
    background-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSpOLpDTHGt7NHyuUtsc3Zrpb5JuV4G6vmIEQKD0VO9Nrot-MS46w');
}

.glyphicon-menu-hamburger {
    box-sizing: border-box;
}

.boxSimbol {
    color: red;
}

.dropdown-menu {
    font-size: 16px;
    margin-top: 5px;
    min-width: 105px;
}

    .dropdown-menu li a {
        color: #898989;
        padding: 6px 20px;
        font-weight: 300;
    }




.menu {
    background: #202024;
    left: -285px; /* start off behind the scenes */
    height: 570px;
    position: fixed;
    width: 285px;
}

    .menu ul {
        border-top: 1px solid #636366;
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .menu li {
        border-bottom: 1px solid #636366;
        font-family: 'Open Sans', sans-serif;
        line-height: 45px;
        padding-bottom: 3px;
        padding-left: 20px;
        padding-top: 3px;
    }

    .menu a {
        color: #fff;
        font-size: 15px;
        text-decoration: none;
        text-transform: uppercase;
    }

.icon-close {
    cursor: pointer;
    padding-left: 10px;
    padding-top: 10px;
}

.icon-menu {
    color: #fff;
    cursor: pointer;
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    padding-bottom: 25px;
    padding-left: 25px;
    padding-top: 25px;
    text-decoration: none;
    text-transform: uppercase;
}

    .icon-menu i {
        margin-right: 5px;
    }

这是我的javascript / jquery：

var main = function () {

    $(".glyphicon-menu-hamburger").click(function () {
        $('.menu').animate({
            left: "98px"
        }, 200);
    });

    /* Then push them back */
    $('.icon-close').click(function () {
        $('.menu').animate({
            left: "-285px"
        }, 200);
    });

    $('.dropdown-toggle').click(function () {
        $('.dropdown-menu').toggle();
    });
};
$(document).ready(main);

谢谢！

如何在不同的缩放设置上更改网格位置？

0 个答案: