Question

在twitter bootstrap的帮助下玩html和css，但是1）我似乎无法修复右侧的额外空间2）我无法在我的网页底部添加任何内容。< / p>

您可以在此处查看实时网站：practicerenz.kissr.com

这是我的HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Practice Renz</title>
    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <link rel="stylesheet" href="style.css" />
    <link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Roboto+Condensed' rel='stylesheet' type='text/css'>
</head>

<body>
    <div class="container">
        <div class="header">
            <div class="row">
                    <div class="col-xs-8">
                        <h1 class="title">Renz Site</h1>
                    </div>
                    <div class="col-xs-4">
                            <ul>
                                <li><a href="#work">WORK</a></li>
                                <li><a href="#blog">BLOG</a></li>
                                <li><a href="#contact">CONTACT</a></li>
                                <li><img class="social1" src="img/facebook.png" /></li>
                                <li><img class="social2" src="img/twitter_light.png" /></li>
                            </ul>
                    </div>
                </div>
            </div>
        <div class="content">
            <div class="maintitle">
                <img src="img/user.png" />
                <h1 class="name">I am Renzze Mistal.</h1>
                <p class="occupation">Digital Marketer | Rookie Developer</p> <br />
                <p class="info">I like to create and design things. I like to create and design things. I like to create and design things.</p>
            </div>
            <div class="work">
                <img class="workimg" src="img/Dashboard.png" />
                <h1 class="info2"><a name="work">My Work</a></h1>
                <p class="info2">Here are some of the things that I've done.</p>
                <ul class="thumbnails">
                    <li class="col-xs-4">
                        <div class="thumbnail">
                        <img src="img/work.png">
                        <p class="info3">Brand 1</p>
                        <p class="info3">Info info info info info</p>
                        </div>
                    </li>
                    <li class="col-xs-4">
                        <div class="thumbnail">
                        <img src="img/work.png">
                        <p class="info3">Brand 2</p>
                        <p class="info3">Info info info info info</p>
                        </div>
                    </li>
                    <li class="col-xs-4">
                        <div class="thumbnail">
                        <img src="img/work.png">
                        <p class="info3">Brand 3</p>
                        <p class="info3">Info info info info info</p>
                        </div>
                    </li>
                </ul>
                <div class="col-xs-12">
                    <div class="button">
                    <a href="http://www.google.com">
                    <button class="btn btn-primary" type="button">Learn more</button>
                    </a>
                    </div>
                </div>
            <div class="blog">
                <img src="img/Comment.png">
                <h1 class="blogname"><a class="blogtitle" name="blog">Blog</a></h1>
                <p class="bloginfo">Read some of the stuff I've written.</p>
                <img src="img/blog.png">
            </div>
            <div class="contact">
                <h1>Contact</h1>
                <p>Leave me a message below</p>
            </div>
            </div>
        </div>
    </div>
</body>



</html>

这是我的CSS：

.col-xs-8 {
    text-align: center;
    color: #ecf0f1;
}
.col-xs-4 {
    text-align: center;
    color: #ecf0f1;
}
body {
    background-color: #2980b9;
    height: 100%;
}
.header {
    background-color: #ecf0f1;
    margin: 0 auto
}
ul li {
    display: inline;
    padding: 0 5px 0 5px;
    font-family: 'Lato', sans-serif;
}
ul {
    padding-top: 30px;
}
.title {
    text-align: left;
    padding-left: 20px;
}
.container {
        width: 1024px;
        height: auto;
        margin: 0 auto;
        padding: 0;
    }
p {
    font-family: 'Lato', sans-serif;
    color: #ecf0f1;
}
h1 {
    font-family: 'Roboto Condensed', sans-serif;
    color: #2c3e50;
}
.maintitle {
    text-align: center;
    margin-top: 20px;
    height: 300px;
}
.info {
    margin-top: -20px;
}
.occupation {
    font-size: 15px;
}
.work {
    background-color: #ecf0f1;
    height: 800px;
    text-align: center;
}
.info2 {
        color: #2c3e50;
        text-align: center;
        padding-top: 10px;
}
.name {
    color: #ecf0f1;
}
.social1 {
    width: 25px;
    height: 25px;
    display: inline;
    margin-right: -15px;
}
.social2 {
    width: 25px;
    height: 25px;
    display: inline;
}
.mywork {
    display: inline;

}
.info3 {
    color: #2c3e50;
    text-align: center;
    margin: 10px 0 10px 0;
}
.col-xs-12 {
    text-align: center;
    padding-bottom: 20px;
}
.blog {
    background-color: #2980b9;
    text-align: center;
    height: 600px;
    padding-top: 20px;
}
.blogname {
    color: #ecf0f1;
}
.bloginfo {
    color: #ecf0f1;
    margin-bottom: 20px;
}
.blogtitle {
    color: #ecf0f1;
}
.workimg {
    padding-top: 20px;
}

感谢任何帮助！ :)

P.S。对不起，如果我的HTML和CSS看起来很混乱。

Answer 1

body{height:100%}错了，你需要改变它。

Answer 2

删除博客课程中的高度。联系人会很清楚

.blog {
    background-color: #2980B9;
    padding-top: 20px;
    text-align: center;
}

Answer 3

将“标题”移到“容器”之外，因为其宽度为1024，限制标题宽度。

<div class="header">
 <div class="row">
 </div>
</div>

<div class="container">
 <div class="content">
 </div>
</div>


.row { width: 1024px; margin-left: auto; margin-right: auto; }
.header { width: 100%; }

HTML网页无法正常显示

3 个答案: