Question

嘿大家我刚刚完成了我的javascript和jquery课程，所以我决定建立一个网站来帮助我把它做好。然而，目前看来我正在运行其他问题，我的logo div包含一些h1文本，我的徽标图像不适合我告诉它的区域。这里有一些截图可以帮助您理解我的意思。

工作

破碎

在代码工作的第一张图片中，我的css和html就是这样。

HTML

    <!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/main.css">
    <script src="js/jquery-2.1.1.min.js"></script>
    <script>
        // This Script changed the menu to display the drop down button
        // It also sets the menu items or anchors to hidden so that they are out of the way
        // This allows people on mobile to browse the page easier :)

        $(function() {
            var pull        = $('#pull');
                menu        = $('nav ul');
                menuHeight  = menu.height();

            $(pull).on('click', function(e) {
                e.preventDefault();
                menu.slideToggle();
            });

            $(window).resize(function(){
                var w = $(window).width();
                if(w > 320 && menu.is(':hidden')) {
                    menu.removeAttr('style');
                }
            });
        });
    </script>
</head>
<body>
    <div id="container">

     <header>

        <nav class="clearfix">
            <!--<div id="logo">-->
                <!--<img src="imgs/skullBrand.png" alt=""/>-->
                <!--<h1>Skull&reg;-->
                    <!--</br>-->
                    <!--Alcohol-->
                <!--</h1>-->
            <!--</div>-->
            <ul class="clearfix">
                <li><a href="#">Moonshine</a></li>
                <li><a href="#">Recipes</a></li>
                <li><a href="#">The Blog</a></li>
                <li><a href="#">The Store</a></li>
            </ul>
            <a href="#" id="pull">Menu</a>
        </nav>
    </header>

<div id="content">







</div>

<footer>
    <div class="footerContent"></div>
    <div class="footerContent"></div>
    <div class="footerContent"></div>
</footer>

</div><!--containerEnd-->

CSS

    /* Clearfix */
.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1;
}

/* Basic Styles */



body {
    background-color: #333;
}



/* Basic Styles */
body {
    background-color: #ece8e5;
}
nav {
    height: 100px;
    width: 100%;
    background: #7d7e7d; /* Old browsers */
    background: -moz-linear-gradient(top,  #7d7e7d 0%, #0e0e0e 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7d7e7d), color-stop(100%,#0e0e0e)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #7d7e7d 0%,#0e0e0e 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #7d7e7d 0%,#0e0e0e 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #7d7e7d 0%,#0e0e0e 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #7d7e7d 0%,#0e0e0e 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 ); /* IE6-9 */
    font-size: 11pt;
    font-family: 'PT Sans', Arial, sans-serif;
    font-weight: bold;
    position: relative;
    border-bottom: 2px solid #000000;
}
#logo {
    margin-right: 5%;
    padding: 0;
    color: #ffffff;
    border: none;
    margin-left: 5%;
    float: left;
}
nav ul {
    padding: 0;
    margin: 0 auto;
    width: 600px;
    height: 100px;
}
nav li {
    display: inline;
    float: left;
}
nav a {
    color: #fff;
    display: inline-block;
    width: 150px;
    text-align: center;
    text-decoration: none;
    line-height: 100px;
    text-shadow: 1px 1px 0px #000000;
}
nav li a {
    border-right: 1px solid #cccccc;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
}
nav li:last-child a {
    border-right: 0;
}
nav a:hover, nav a:active {
    background-color: #444;
}
nav a#pull {
    display: none;
}



#content {
    width: 100%;
}

.contentBoxLeft {
    margin-right:5%;
}

.contentBoxMiddle {
    margin:auto;
}

.contentBoxRight {
    margin-left:5%;
}



#text {
    float: left;
    width: 30%;
    color: #fff;
}

#text>h1 {
    font-size: 30pt;
}





/************ Mobile Styles **************/



/*Styles for screen 600px and lower*/
@media screen and (max-width: 600px) {
    nav {
        height: auto;
    }
    nav ul {
        width: 100%;
        display: block;
        height: auto;
    }
    nav li {
        width: 50%;
        float: left;
        position: relative;
    }
    nav li a {
        border-bottom: 1px solid #cccccc;
        border-right: 1px solid #cccccc;
    }
    nav a {
        text-align: left;
        width: 100%;
        text-indent: 25px;
    }
}

/*Styles for screen 515px and lower*/
@media only screen and (max-width : 480px) {
    nav {
        border-bottom: 0;
    }
    nav ul {
        display: none;
        height: auto;
    }
    nav a#pull {
        display: block;
        background-color: #000;
        width: 100%;
        position: relative;
    }
    nav a#pull:after {
        content:"";
        background: url('../imgs/nav-icon.png') no-repeat;
        width: 30px;
        height: 30px;
        display: inline-block;
        position: absolute;
        right: 15px;
        top: 10px;
    }
}

/*Smartphone*/
@media only screen and (max-width : 320px) {
    nav li {
        display: block;
        float: none;
        width: 100%;
    }
    nav li a {
        border-bottom: 1px solid #576979;
    }
}

在第二个截图中，我只是从徽标div中删除了评论，它打破了一切。如果有人能帮我解决这个问题，那么你的时间将会非常感激。

Answer 1

将属性position: absolute添加到您的图片，然后它不会影响页面上定位的其他元素。如果您对徽标的大小不满意，请添加width属性并找到您满意的尺寸

我的徽标正在打破我的网页

1 个答案: