Question

好的家伙我的风格非常好，但有一些怪癖！我已经尝试了一切，它看起来很棒/很好作为响应式网站，但有一些问题。我不能让.therapy部分看起来像我想要的那样。整页它拥抱左边距，但我的媒体查询看起来不错。我的问题是如何让它在整页上看起来很好并且也能做出响应。谢谢你，拥抱。我希望边距有几个px，看起来它没有使用所有可用的空白区域。请帮忙。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Home</title>
    <link rel="stylesheet" href="something.css" type="text/css"/>

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

<style>
body{
    background-color: #f1f0d1;
    font-family: Verdana, Tahoma, Arial, sans-serif;
    font-size: 1.125em;
    overflow: auto;
}
h1, h2, h3{
    text-align: center;
    padding-left: 5%;
    color: #878e63;
}
p{
    padding: 2%;
    color: #878e63;
}
img{
    text-align: center;
    max-width: 100%;
    height: auto;
    width: auto;
}

#wrapper {
    margin: 0 auto;
    max-width: 1020px;
    width: 98%;
    background-color: #fefbe8;
    border: 1px solid #878e63;
    border-radius: 2px;
    box-shadow: 0 0 10px 0px;
    overflow: hidden;
}
#callout {
    width: 100%;
    height: auto;
    background-color: #878e63;
    overflow: hidden;
}
#callout p {
    text-align: right;
    font-size: 13px;
    padding: 0.1% 5% 0 0;
    color: #f1f0d1;
}
#callout p a {
    color: #f1f0d1;
    text-decoration: none;
}
header {
    width: 96%
    min-height: 125px;
    padding: 5px;
    text-align: center;
}
nav ul {
    list-style-type: none;
    margin: 0;
    padding-left: 90px;
}
nav ul li {
    float: left;
    border: 1px solid #878e63;
    width: 15%;
}
nav ul li a {
    background-color: #f1f0d1;
    display: block;
    padding: 5% 12%;
    font-weight: bold;
    font-size: 18px;
    color: #878e63;
    text-decoration: none;
    text-align: center;
}
nav ul li a:hover, nav ul li.active a {
    background-color: #878e63;
    color: #f1f0d1;
}
.banner img {
    width: 100%;
    border-top: 1px solid #878e63;
    border-bottom: 1px solid #878e63;
}
.clearfix{
    clear: both;
}
.left-col {
    width: 55%;
    float: left;
    margin:  1% 1% 1%;
}
.sidebar: {
    width: 40%;
    float: right;
    margin: 1%;
    text-align: center;
}
.therapy {
    /*float: left;*/
    margin: 0 auto;
    width: 100%;
    height: auto;
    /*padding: 1%;*/
}
.section{
    width: 29%;
    float: left;
    margin: 2% 2%;
    text-align: center;
}
footer{
    background-color: #878e63;
    width: 100%;
    overflow: hidden;
}
footer p, footer h3 {
    color: #f1f0d1; 
}
footer p a {
    color: #f1f0d1;
    text-decoration: none;
}
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
li {
    display: inline;
}
ul li img {
    height: 50px;
}

@media screen and (max-width: 480px) {
    body{
        font-size: 13px;
    }
}
@media screen and (max-width: 740px){
    nav {
        width: 100%;
        margin-bottom: 10px;
    }
    nav ul {
        list-style-type: none;
        margin: 0 auto;
        padding-left: 0;
    }
    nav ul li {
        text-align: center;
        margin-left: 0 auto;
        width: 100%;
        border-top: 1px solid #878e63;
        border-right: 0px solid #878e63;
        border-bottom: 1px solid #878e63;
        border-left: 0px solid #878e63;
    }
    nav ul li a{
        padding: 8px 0;
        font-size: 16px;
    }
    .left-col, .sidebar, .section {
        width: 100%;
        float: left;
        margin: 0;
    }
}

</style>
</head>
<!-- redo all images on the page and style with css3-->
<body>
    <div id="wrapper">
        <div id="callout">
            <p>Call us at <strong>727-555-5555</strong></p>
        </div><!--end callout div-->
        <header>
            <!--need ne image--><a href="#"><img src="http://www.w3newbie.com/wp-content/uploads/massagelogo.png" alt="Massage" title="Massage by ?"></a>
        </header>

        <nav>
            <ul>
                <li class="active"><a href="#">Home</a></li>
            <!--make active later--><li><a href="#">Contact</a></li>
            <!--make active later--><li><a href="#">Pricing</a></li>
            <!--make active later--><li><a href="#">Specials</a></li>
            <!--make active later--><li><a href="#">Consult</a></li>
            <!--make active later--><li><a href="#">Consult</a></li>
            </ul>
            <div class="clearfix"></div>
        </nav>
            <div class="banner">
                <img src="http://www.w3newbie.com/wp-content/uploads/massagebanner.png" alt="need new" title="new">
            </div><!--close banner-->
            <!--fix w css--><center><img src="http://www.w3newbie.com/wp-content/uploads/three_sayings.png" alt="need new" title="new"></center>
            <section class="left-col">
                <!--use h2 tag and css--><p style="text-indent: 50px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In non fringilla risus. Quisque sollicitudin iaculis nunc, ultricies fringilla ex malesuada eu. Quisque a augue in mauris molestie pellentesque at convallis eros. Ut luctus ex eget tempor scelerisque. Praesent blandit velit eu turpis aliquam pellentesque. Cras vel erat eget ligula sollicitudin commodo.Lorem ipsum dolor sit amet, consectetur adipiscing elit. In non fringilla risus. Quisque sollicitudin iaculis nunc, ultricies fringilla ex malesuada eu. Quisque a augue in mauris molestie pellentesque at</p>
                <p style="text-indent: 50px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In non fringilla risus. Quisque sollicitudin iaculis nunc, ultricies fringilla ex malesuada eu. Quisque a augue in mauris molestie pellentesque at convallis eros. Ut luctus ex eget tempor scelerisque.</p>
            </section>
            <aside class="sidebar">
                <div class="therapy">
                <img src="http://www.w3newbie.com/wp-content/uploads/therapist.jpg" alt="need new" title="new">
                </div><!--close therapy div-->
            </aside>

        <div class="section">
            <h3>Text Text Text Text</h3>
            <img src="http://www.w3newbie.com/wp-content/uploads/private.png" alt="need new" title="new">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In non fringilla risus In non fringilla risus. Quisque sollicitudin iaculis nunc, ultricies fringilla ex malesuada eu. Quisque a augue in mauris molestie</p>
            </div><!--close section div-->
            <div class="section">
            <h3>Text Text Text Text</h3>
            <img src="http://www.w3newbie.com/wp-content/uploads/sauna-steam.png" alt="need new" title="new">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In non fringilla risusIn non fringilla risus. Quisque sollicitudin iaculis nunc, ultricies fringilla ex malesuada eu. Quisque a augue in mauris molestie</p>
            </div><!--close section div-->
            <div class="section">
            <h3>Text Text Text Text</h3>
            <img src="http://www.w3newbie.com/wp-content/uploads/retreat.png" alt="need new" title="new">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In non fringilla risusIn non fringilla risus. Quisque sollicitudin iaculis nunc, ultricies fringilla ex malesuada eu. Quisque a augue in mauris molestie</p>
        </div><!--close section div-->
        <!--fix w h2 and css --><center><img src="http://www.w3newbie.com/wp-content/uploads/ease.png" alt="need new" title="new"></center> 

        <footer>
            <div class="section">
                <p>Text Text Text</p>
                <p><strong>727-555-5555</strong><br>
                123 Main St<br>
                Anywhere, FL 33770<br>
                blank@blahblah.com</p>
            </div>
            <div class="section">
                <p>Connect with us!</p>
                <ul>
                    <li><a href="#"><img src="http://www.w3newbie.com/wp-content/uploads/facebook1.png" alt="need new" title="new"></a></li>
                    <li><a href="#"><img src="http://www.w3newbie.com/wp-content/uploads/googleplus.png" alt="need new" title="new"></a></li>
                    <li><a href="#"><img src="http://www.w3newbie.com/wp-content/uploads/twitter1.png" alt="need new" title="new"></a></li>
                    <li><a href="#"><img src="http://www.w3newbie.com/wp-content/uploads/youtube1.png" alt="need new" title="new"></a></li>

                </ul>

            </div>
            <div class="section">
                <img src="http://www.w3newbie.com/wp-content/uploads/plant.png" alt="need new" title="new">
            </div>
        </footer>
    </div><!--end wrapper div-->
        <p>&copy;  2014.</p><!--margin 0 auto this-->

</body>

</html>

我知道这很多，但我被卡住了，我想我的数学已经结束了。请告诉我如何解决并感谢你。

Answer 1

我发现了一个拼写错误（一个不必要的冒号）：

＆＃13;

.sidebar: {          /*here*/
    width: 40%;
    float: right;
    margin: 1%;
    text-align: center;
}

＆＃13;

Answer 2

如果您想改善空白区域的使用，首先需要制定一个概念。例如，您的文本当前位于一个巨大的图像上方。在这张巨大的图像中，有三个较小的盒子。

所以你可以全屏说你想要彼此相邻的图像和文字。这是通过将以下内容添加到您希望文本和图像彼此相邻的媒体查询中来完成的：

aside.sidebar {
 width: 40%;
 float: right;
 margin-right: 2%;
 margin-top: 30px;
}

然后你需要插入

<div style="clear: both;"></div>

在结束</aside>标记下方！您已在第106行的{+ 1}}中为侧边栏插入了类似这样的内容，因为您的css课程后.sidebar:，这是一个“损坏的代码”。

这是一个非常简单的示例，但适用于各种页面。如果您需要进一步解释，请随时提出，这是一个“快速帮助”副本＆amp;粘贴解决方案。

祝你好运，玛丽安。

如何让我的布局更具响应性？

2 个答案: