Question

对CSS很新，只是遇到了一些麻烦，我已经尝试了所有东西，在这里搜索，但似乎无法使它工作。

现在我的标题/正文都是屏幕的70％。但是，我希望我的顶部标题（.mainheader）是100％的屏幕，但文本保持在相同的位置（所以也称为填充相同背景颜色的两侧）但似乎甚至无法得到标题无论我做什么，都能伸展到100％。

请帮帮我！ index.html和stylesheet.css的代码如下：

INDEX.HTML：

<!DOCTYPE html>
<html lang="en">

<head>
    <title> Computer Company </title>
    <meta charset="utf-8" />

    <link rel="stylesheet" href="stylesheet.css" type="text/css" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<header class="mainheader">
<nav><ul>
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">Solutions & Services</a>
        <ul>
            <li><a href="#">Internet</a></li>
            <li><a href="#">Networking</a></li>
            <li><a href="#">Website</a></li>
            <li><a href="#">Home Computers</a></li>
            <li><a href="#">Servers</a></li>
        </ul>
    </li>
    <li><a href="#">Team</a>
        <ul>
            <li><a href="#">Founder</a></li>
            <li><a href="#">Graphics</a></li>
        </ul></li>
    <li><a href="#">Contact</a></li>
</ul>
<p class="mainheader-phone"> Call Joel at <b>0400000000</b> </p> </nav>
</header>

<body class="body">

<header class="images">
    <img class="first-image" src="images/logo.jpg">
    <img class="second-image" src="images/logo.jpg">
    <img class="third-image" src="images/logo.jpg">
    <img class="fourth-image" src="images/logo.jpg">
    <img class="fifth-image" src="images/logo.jpg">
    <img class="sixth-image" src="images/logo.jpg">
</header>

<div class="maincontent">
    <div class="content">
        <article class="top-content">
            <header>
                <h2><a href="#" title="What we do">What we do</a></h2>
            </header>

            <footer>
                <p class="post-info">Posted by Joel</p>
            </footer>

            <content>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </content>
        </article>

        <article class="bottom-content">
            <header>
                <h2><a href="#" title="What we do">What we do</a></h2>
            </header>

            <footer>
                <p class="post-info">Posted by Joel</p>
            </footer>

            <content>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </content>
        </article>
    </div>
</div>

<aside class="top-sidebar">
    <article>
        <h2> Latest Updates </h2>
        <div id="twitter-widget-settings">
        <a class="twitter-timeline" href="https://twitter.com/JoelwMale" data-widget-id="612605233995214848">Tweets by @JoelwMale</a>
        <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
    </div>
    </article>
</aside>

<footer class="main-footer">
    <p> &copy; 2015 <a href="index.html">Computer Company</a></p>

    <ul>
        <li class="footermedia"><a href="http://www.twitter.com"><img src="images/social/twitter.png"/></a></li>
        <li class="footermedia"><a href="http://www.linkedin.com"><img src="images/social/linkedin.png"/></a></li>
        <li class="footermedia"><a href="http://www.facebook.com"><img src="images/social/facebook.png"/></a></li>
    </ul>
</footer>

CSS

/*
    Business Website
    Author: Joel Male;
    Date Started: 20/06/2015;
    Date Finished: **;
*/

body {
    background-image: url("images/bg.png");
    color: #000305;
    font-size: 87.5%;
    font-family: Arial, 'Lucida Sans Unicode';
    line-height: 1.5;
    text-align: left;
}

a {
    text-decoration: none;
}

a:link, a:visited {

}

a:hover, a:active {

}

.body {
    margin: 0 auto; /* Centers the page */
    width: 70%;
    clear: both; /* Nothing floats on the page */
}

.companyname {
    width: 0 auto;
    height: 30px;   
    margin-bottom: 5%;
}

.companyname h1 {
    font-size: 60px;
    margin-top: 0;
}

.mainheader img {
    width: 100%;
    height: 300px;
    margin-top: 2%;
}

.mainheader {
    width: 100%;.
    height: 80px;
}

.mainheader nav {
    width: 100%;
    background-color: #666;
    height: 40px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

.mainheader nav ul {
    padding-left: 0px; /* THIS REMOVES THE PADDING BETWEEN NAV AND HOME */
    list-style: none;
    margin: 0 auto;
}

.mainheader nav ul li {
    float: left;
    display: inline;
}

.mainheader nav a:link, .mainheader nav a:visited {
    color: #FFF;
    display: inline-block;
    padding: 10px 25px;
    height: 20px;
}

.mainheader nav a:hover, .mainheader nav a:active,
.mainheader nav .active a:link, .mainheader nav .active a:visited {
    background-color: #CF5C3F;
    text-shadow: none;
}

.mainheader nav ul li a {
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

.mainheader nav ul li:hover ul {
    display: block; /* THIS SHOULD HANDLE THE SHOWING OF THE MENU */
}

/* HIDE THE UL */
.mainheader nav ul ul {
    display: none;
    position: absolute;
    background-color: #666;
}

.mainheader nav ul ul li {
    display: block;
    float: none;
    min-width: 178px;
}

.mainheader nav ul ul li:hover {
    background-color: #CF5C3F;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

.mainheader p {
    float: right;
    margin-top: 10px;
    padding-right: 10px;
    color: #FFF;
}

.mainheader p b {
    text-decoration: underline;
}

.images {
    height: 30%;
    padding-top: 2%;
    display: block;
}

.images .first-image {
    width: 33%;
}

.images .second-image {
    width: 33%;
}

.images .third-image {
    width: 33%;
}

.images .fourth-image {
    width: 33%;
}

.images .fifth-image {
    width: 33%;
}

.images .sixth-image {
    width: 33%;
}

.maincontent {
    line-height: 25px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

.content {
    width: 70%;
    float: left;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

.post-info {
    font-style: italic;
    color: #999;
    font-size: 85%;
    margin-top: 3px;
    margin-bottom: 3px;
}

.top-content {
    background-color: #FFF;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    padding: 3% 5%;
    margin-top: 2.8%;
}

.bottom-content {
    background-color: #FFF;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    padding: 3% 5%;
    margin-top: 2%;
}

.top-sidebar {
    width: 21%;
    float: left;
    background-color: #FFF;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    margin: 2% 0 2% 3%;
    padding: 0% 3%;
}

.top-sidebar h2 {
    margin-top: 6px;
    margin-bottom: 6px;
}

.top-sidebar .twitter-timeline {
    height: 796px;
    width: 100%!important;
}

.top-sidebar .twitter-widget-settings {
    height: 600px;
}

.main-footer {
    width: 100%;
    float: left;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    background-color: #666;
    margin: 2%;
}

.main-footer p {
    padding-top: 3px;
    padding-left: 25px;
    float: left;
    width: 40%;
    margin: 10px auto;
    color: #FFF;
}

.main-footer a {
    color: #FFF;
}

.main-footer ul {
    list-style: none;
    margin-top: 2px;
}

.main-footer ul .footermedia {
    float: right;
    padding-right: 5px;
}

.main-footer ul .footermedia img {
    margin-top: 0px;
    width: 40px;
    height: 40px;
}

.main-footer ul .footermedia a {
    padding: 0 0;
    width: 40px;
    height: 40px;
}

.main-footer ul .footer-media a:hover {
    background-color: #666;
}

@media only screen and (min-width: 150px) and (max-width: 600px)
{
    .body {
        width: 90%;
        font-size: 95%;
    }

    .mainheader img {
        width: 30%;
    }

    .mainheader nav {
        background: #666;
        height: 200px;
        line-height: 30px;
        margin-bottom: 0;
        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
    }

    .mainheader nav ul {
        list-style: none; 
        margin: 0 auto;
        padding-left: 0;
    }

    .mainheader nav li {
        width: 100%;
        margin-left: 0 auto;
    }

    .mainheader nav a:link, .mainheader nav a:visited {
        color: #FFF;
        display: block;
        height: 30px;
        padding: 5px 0;
        text-decoration: none;
    }

    .mainheader nav a:active,
    .mainheader nav .active a:link, .mainheader nav .active a:visited {
        background: #CF5C3F;
        color: #fff;
        text-shadow: none !important;
    }

    .mainheader nav li a {
        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;

        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
    }

    .content {
        width: 100%;
        float: left;
        margin-top: 2%;
    }

    .top-content {
        background-color: #FFF;
        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        padding: 3% 5%;
        margin-top: 2%;
    }

    .bottom-content {
        background-color: #FFF;
        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        padding: 3% 5%;
        margin-top: 2px;
    }
}

希望我正确地格式化了一切。谢谢！

Answer 1

将标题放在体内。并且不要将样式应用于身体但使用容器。 +你的页面应该只有一个标题。

<body>
<header>
<nav><ul>
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">Solutions & Services</a>
        <ul>
            <li><a href="#">Internet</a></li>
            <li><a href="#">Networking</a></li>
            <li><a href="#">Website</a></li>
            <li><a href="#">Home Computers</a></li>
            <li><a href="#">Servers</a></li>
        </ul>
    </li>
    <li><a href="#">Team</a>
        <ul>
            <li><a href="#">Founder</a></li>
            <li><a href="#">Graphics</a></li>
        </ul></li>
    <li><a href="#">Contact</a></li>
</ul>
<p class="mainheader-phone"> Call Joel at <b>0400000000</b> </p> </nav>
</header>
<div class="container">
<div class="images">
    <img class="first-image" src="images/logo.jpg">
    <img class="second-image" src="images/logo.jpg">
    <img class="third-image" src="images/logo.jpg">
    <img class="fourth-image" src="images/logo.jpg">
    <img class="fifth-image" src="images/logo.jpg">
    <img class="sixth-image" src="images/logo.jpg">
</div>

<div class="maincontent">
    <div class="content">
        <article class="top-content">
            <header>
                <h2><a href="#" title="What we do">What we do</a></h2>
            </header>

            <footer>
                <p class="post-info">Posted by Joel</p>
            </footer>

            <content>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </content>
        </article>

        <article class="bottom-content">
            <header>
                <h2><a href="#" title="What we do">What we do</a></h2>
            </header>

            <footer>
                <p class="post-info">Posted by Joel</p>
            </footer>

            <content>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </content>
        </article>
    </div>
</div>

<aside class="top-sidebar">
    <article>
        <h2> Latest Updates </h2>
        <div id="twitter-widget-settings">
        <a class="twitter-timeline" href="https://twitter.com/JoelwMale" data-widget-id="612605233995214848">Tweets by @JoelwMale</a>
        <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
    </div>
    </article>
</aside>

<footer class="main-footer">
    <p> &copy; 2015 <a href="index.html">Computer Company</a></p>

    <ul>
        <li class="footermedia"><a href="http://www.twitter.com"><img src="images/social/twitter.png"/></a></li>
        <li class="footermedia"><a href="http://www.linkedin.com"><img src="images/social/linkedin.png"/></a></li>
        <li class="footermedia"><a href="http://www.facebook.com"><img src="images/social/facebook.png"/></a></li>
    </ul>
</footer>

</container>
</body>

CSS中的

header{
    width:100%;
}
.container{
    width:70%;
    margin:0 auto;
}

顶部标题100％的屏幕，但身体只有70％？

1 个答案: