Question

我正在尝试使用Django创建博客网站。我在做前端工作时遇到了这个问题。代码如下与该问题相关的问题显示在链接到该帖子的图像中。标头占用了太多可用空间。同时，我用几乎完全相同的代码（HTML和CSS）文件制作了一个相似的页面。

body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  margin: 0;
  padding: 0;
  color: #efefef;
  background-color: #0e0e0e;
}


/*Global*/

.container {
  width: 80%;
  margin: auto;
  overflow: hidden;
}

.highlight {
  color: #f64003;
  font-weight: bold;
}


/* Header */

header {
  background-color: #1f1e1e;
  color: #ffffff;
  border-bottom: 3px #f64003 solid;
  max-height: 20%;
}

header ul {
  list-style-type: none;
}

header ul li a {
  font-weight: bold;
  font-style: normal;
  text-transform: uppercase;
  font-size: 16px;
  text-decoration: none;
  color: #ffffff;
}

header .logoTextArea {
  height: 50%;
  padding: 0;
}

header .logoTextArea h1 {
  font-size: 50px;
  text-align: center;
}

header .navigation .left {
  float: left;
  text-align: left;
  padding: 0 20px 0 20px;
}

header .navigation .left ul li {
  display: inline;
  margin: 10px;
}

header .navigation a:hover {
  font-weight: bolder;
  color: #f64003;
}

header .navigation .right {
  float: right;
  text-align: right;
  padding: 0 20px 0 20px;
}

header .navigation .right ul li {
  display: inline;
  margin: 10px;
}


/* ShowCase Area */

.showcase {
  min-height: 500px;
  background: url('./images/mainBG.jpeg') no-repeat -150px 0;
  border-bottom: 2px #f64003 solid;
}

.showcase h1 {
  font-size: 75px;
}

<!DOCTYPE <!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>{{title}}</title>
  <meta name="viewport" content="width=device-width"> {% load staticfiles %}
  <link rel="stylesheet" type="text/css" href="{% static 'blogs/posts.css' %}" />
</head>

<body>
  <header>
    <div class='container'>
      <div class='logoTextArea'>
        <h1>BRE<span class="highlight">V</span>ITY BL<span class='highlight'>O</span>GS</h1>
      </div>
      <div class='navigation'>
        <nav class='left'>
          <ul>
            <li>
              <a href='/'>Home</a>
            </li>
            <li>
              <a href='news.html'>News</a>
            </li>
          </ul>
        </nav>
        <nav class='right'>
          <ul>
            <li>
              <a href='login.html'>Log In!</a>
            </li>
            <li>
              <a href='https://patreon.com/Brevity'>Become a patreon!</a>
            </li>
          </ul>
        </nav>
      </div>
    </div>
  </header>
  <section class="showcase">
    <div class="container">
      <div>
        <h1>Scroll <span class="highlight">Down</span> for Blogs</h1>
      </div>
    </div>
  </section>
  <section>
    <div class="blogs">
      <ul>
        {% for post in posts %}

        <li><a class="Bpost" href="/details/{{post.id}}"> {{post.title}} <br> {{post.created_at}} </a> </li>

        {% endfor %}
      </ul>
    </div>
  </section>
</body>

</html>

Answer 1

在CSS中，标题设置为屏幕height的50％：

header .logoTextArea {
    height: 50%;
    padding: 0;
}

删除或减小高度值可解决此问题。

Answer 2

尝试一下。有很多需要更改的地方：)全页查看。

body{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    margin: 0;
    padding: 0;
    color: #efefef;
    background-color: #0e0e0e;
}

/*Global*/

.container{
    width: 80%;
    margin: auto;
    overflow: hidden;
}

.highlight{
    color: #f64003;
    font-weight: bold;
}

/* Header */
header{
    background-color: #1f1e1e;
    color: #ffffff;
    border-bottom: 3px #f64003 solid;
    max-height: 10%;
    width: 100%;
}

header ul{
    list-style-type: none;
}

header ul li a{
    font-weight: bold;
    font-style: normal;
    text-transform: uppercase;
    font-size: 16px;
    text-decoration: none;
    color: #ffffff;
}

header .logoTextArea{
    height: 1%;
    width: 1%;
    padding: 0;
    float: left;
}

header .logoTextArea h1{
    font-size: 10px;
    text-align: center;
}

header .navigation .left{
    float: left;
    text-align: left;
    padding: 0 20px 0 20px;
}

header .navigation .left ul li{
    display: inline;
    margin: 10px;
}

header .navigation a:hover{
    font-weight: bolder;
    color: #f64003;
}

header .navigation .right{
    float: right;
    text-align: right;
    /*padding: 0 20px 0 20px;*/
}

header .navigation .right ul li{
    display: inline;
    margin-left: 10px;
    /*margin: 10px;*/
}

/* ShowCase Area */

.showcase{
	min-height: 500px;
	background: url('./images/mainBG.jpeg') no-repeat -150px 0;
	border-bottom: 2px #f64003 solid;
}
.showcase h1{
	font-size: 75px;
}

<!DOCTYPE <!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>{{title}}</title>
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" type="text/css" href="{% static 'blogs/posts.css' %}" />
</head>

<body>
    <header>
        <div class='container'>
            <div class='logoTextArea'>
                <h1>BRE<span class="highlight">V</span>ITY BL<span class='highlight'>O</span>GS</h1>
            </div>
            <div class='navigation'>
                <nav class='left'>
                    <ul>
                        <li>
                            <a href='/'>Home</a>
                        </li>
                        <li>
                            <a href='news.html'>News</a>
                        </li>
                    </ul>
                </nav>
                <nav class='right'>
                    <ul>
                        <li>
                            <a href='login.html'>Log In!</a>
                        </li>
                        <li>
                            <a href='https://patreon.com/Brevity'>Become a patreon!</a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
    </header>
    <section class="showcase">
        <div class="container">
            <div>
                <h1>Scroll <span class="highlight">Down</span> for Blogs</h1>
            </div>
        </div>
    </section>
    <section>
        <div class="blogs">
            <ul>
                {% for post in posts %}
                
                <li><a class="Bpost" href="/details/{{post.id}}"> {{post.title}} <br> {{post.created_at}} </a> </li>

                {% endfor %}
            </ul>
        </div>
    </section>
</body>

</html>

HTML5和CSS3混乱了

2 个答案: