Question

http://i.imgur.com/sTt59s4.png

问题＃1：页脚中的文字消失了。只是在我忙着对齐其他元素时随机注意到我的页脚中的文字已经消失了。

http://i.imgur.com/WyHf37d.png

问题＃2：段落不会换行。如果我没有放display: inline，文本就会完全消失。

问题＃3：图像漂浮在我的导航栏顶部。当我向下滚动时，图像会在条形图顶部传递，看起来很奇怪。

一般情况下，请随意纠正我的编码。我是个菜鸟。感谢。

HTML：

<head>

    <meta charset="utf-8">

        <title>BIKES & BITES | ABOUT</title>

    <link href="styles/Hortaleza-Kyla-styles.css" rel="stylesheet">
    <link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'> 
    <link href='https://fonts.googleapis.com/css?family=Playfair+Display:400,700italic,900italic,900' rel='stylesheet' type='text/css'>

</head>

<header>

    <section id="title-slogan">

        <h1>BIKES & BITES</h1>
        <p>EAT • BIKE • LOVE</p>

    </section>

    <nav id="main-nav">

        <ul>
            <li><img src="index-images/B&B-logo.png" id="logo"></li>
            <li><a href="index.html" class="home">HOME</a></li>
            <li><a href="02-about.html" class="about">ABOUT</a></li>
            <li><a href="03-adventures.html" class="adventures">ADVENTURES</a></li>
            <li><a href="04-hungry.html" class="hungry">HUNGRY?</a></li>
            <li><a href="05-calendar.html" class="calendar">CALENDAR</a></li>
            <li><a href="06-contact.html" class="contact">CONTACT</a></li>
        </ul>

    </nav>

</header>

<section id="main-content">

        <h1>ABOUT</h1>

    <section id="about-bb">

        <img src="02-about-images/B&B-logo2.png">

        <p id="desc"><b>BIKES & BITES</b> brings you cycling and food all wrapped into one delicious burrito. It’s for anyone, everyone; it’s for people like you! People who love health and at the same time, love good food. Whether you’re just thinking of buying a bike, a total newbie, or even a pro, we welcome everyone to the community. We're just here to have a good time!

        <b>BIKES & BITES</b> aims to share with its readers the beauty and enjoyment of cycling, with the help of the natural beauty of the Philippines. It aims to encourage others to try taking up the sport—or any sport for that matter—and at the same time a healthy lifestyle (but still be able to eat what you want!). <b>BIKES & BITES</b> will provide you with routes, recipes, and many more, to help you with every aspect of your cycling life.</p>

    </section>

    <section id="about-creator">
        <img src="02-about-images/02-about-profile.png">
        <p><h3>Kyla Hortaleza</h3>
        <i>Founder and Editor</i><br><br>
        Despite being an avid cyclist and part-time duathlete, Kyla Hortaleza is currently an Interdisciplinary Studies major in Ateneo de Manila University. She is 22-years-old and has no experience of writing a serious blog whatsoever, but finds delight in sharing her experiences to others through her pictures. She believes in the power of juicing and the power of carbohydrates (no to fad diets but yes to moderation!). She loves promoting cycling and believes that it is the sport that anyone can try and enjoy regularly.</p>

    </section>

</section>

<footer>
    <p>Created by Kyla Hortaleza | 2015</p>
</footer>

</body>

CSS：

body {
margin: auto;
background: #fdedf1;
padding-top: 80px;
font-family: 'Montserrat', sans-serif;
font-weight: 400;
} 

#aboutpage #main-content #about-bb p {
    display: inline;
}

#aboutpage #main-content {
    overflow: scroll;
}

#aboutpage #main-content p {
    font-family: 'Montserrat', sans-serif;
    padding-top: 200px;
}

#aboutpage #main-content img {
    width: 300px;
    height: 300px;
}

#aboutpage #main-nav a.about {
    color: #f8bfcd; 
}

#aboutpage #main-nav a.about:hover {
    color: #ccf0e2; 
}

#aboutpage #main-content #about-bb {
    width: 400px;
    float: left;
    position: relative;
    padding: 75px 0px 75px 200px;
}

#aboutpage #main-content #about-creator {
    width: 400px;
    float: left;
    position: relative;
    padding: 75px 0px 75px 75px;
}

#aboutpage #main-content #about-creator img {
    padding-left: 45px;
}

#main-content h1 {
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}

body #title-slogan h1, p {
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    margin-top: -21px;
}

body #title-slogan-hungry h1, p {
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    margin-top: -194px;
    padding: 0;
}

header {
    position: fixed;
    top: 0;
    width: 100%;
}

#logo {
    width: 60px;
    height: 60px;
    position: relative;
    left: -10px;
    top: -1px;
    padding: 0;
    margin: 0;
    vertical-align: middle;
}

#main-nav {
    background: white;
    overflow: auto;
    text-align: left;
    padding-left: 70px;
}

#main-nav ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    font-variant-caps: all-small-caps;
    font-weight: 600;
}

#main-nav ul li {
    display: inline-block;
    padding-top: 15px;
}

#main-nav a {
    display: block;
    text-align: center;
    height: 50px;
    color: black;
    text-decoration: none;
    padding: 0px 5px;
}

#main-nav a:hover {
    color: #ccf0e2;
}

footer p {
    background: black;
    overflow: auto;
    text-align: center;
    color: white;
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    margin-top: 50px;
    width: 100%;
    height: 50px;
}

Answer 1

我已删除

white-space:nowrap;

这

 body #title-slogan h1, p 
body #title-slogan-hungry h1, p

现在看起来应该是这样的：

body #title-slogan h1, p {
    overflow: hidden;
    margin-top: -21px;
}

body #title-slogan-hungry h1 {
    text-indent: 100%;
    overflow: hidden;
    margin-top: -194px;
    padding: 0;

哦，您在标题开始之前忘记打开<body>标记。

页脚中的文本不会显示，段落不会换行，图像会在导航栏上方流动

1 个答案: