0

ウェブサイトを作ろうとしていますが、いくつか問題があります。

これは私が達成しようとしているものです:

フォトショップ画像

そして、これは私がこれまでに持っているものです

実際の画像

私が現在直面している問題は次のとおりです。

  1. ナビゲーション バーの下の空白を取り除くことができません。ナビゲーションとウィンドウの残りの部分のマージンとパディングを削除しましたが、機能しません。

  2. 最初の画像のように、テキストを中央に垂直に正しく配置できません。行の高さとパディングを使用してみましたが、ブラウザ ウィンドウのサイズを縦方向に変更すると、テキストがサイズに反応しません。ブラウザウィンドウのサイズに関係なく、真ん中にとどまりたい.

  3. ウィンドウのサイズに合わせて背景画像を取得する最良の方法は何ですか? 現在私が使用している

    幅:100%; 高さ:100vh; background-image:url("画像/background.jpg"); 背景サイズ:100% 100%;

しかし、私はこれを行うための最良の方法ではないように感じます

これまでの私のドキュメントは次のとおりです。

#navigation ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #272727;
  border-top: 2px solid #5e20d1;
  text-align: center;
}
#navigation a {
  display: inline-block;
  color: #747272;
  text-align: center;
  padding-top: 15px;
  padding-bottom: 15px;
  padding-right: 15px;
  padding-left: 15px;
  margin: 0;
  text-decoration: none;
}
#navigation li {
  display: inline;
  margin: auto;
}
#navigation a:hover {
  color: white;
}
#jumbo {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 90vh;
  background-image: url("http://i.imgur.com/D1cF3ZG.jpg");
  background-size: 100% 100%;
}
#jumbo li {
  display: inline;
  margin: 1%;
  color: white;
  font-size: 20px;
}
#jumbo h1 {
  color: white;
  font-size: 30px;
}
<div id="navigation">
  <ul>
    <li><a href="#">About</a>
    </li>
    <li><a href="#">Skills</a>
    </li>
    <li><a href="#">Projects</a>
    </li>
    <li><a href="#">Contact</a>
    </li>
  </ul>
</div>

<div id="jumbo">
  <h1>Responsive Front-end Developer</h1>
  <ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JAVASCRIPT</li>
    <li>JQUERY</li>
    <li>WORDPRESS</li>
  </ul>
</div>

誰かがこれらの問題をすべて解決するのを手伝ってくれたら本当にありがたいです

4

6 に答える 6

1

1) h1 に margin-top を追加または削除する必要がpadding-top: 1px;あります。#jumbo

2) ラッパーを使用してテキストを揃えます。それからそれに適用top:50%; transform:translate(0, -50%);する

3) #ジャンボ { 背景サイズ: カバー; }

#navigation ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #272727;
  border-top: 2px solid #5e20d1;
  text-align: center;
}
#navigation a {
  display: inline-block;
  color: #747272;
  text-align: center;
  padding-top: 15px;
  padding-bottom: 15px;
  padding-right: 15px;
  padding-left: 15px;
  margin: 0;
  text-decoration: none;
}
#navigation li {
  display: inline;
  margin: auto;
}
#navigation a:hover {
  color: white;
}
#jumbo {
	text-align:center;
  margin: 0;
  padding: 1px 0 0 0;
  width: 100%;
  height: 90vh;
  background-image: url("http://i.imgur.com/D1cF3ZG.jpg");
  background-size: cover;
}
#jumbo li {
  display: inline;
  margin: 1%;
  color: white;
  font-size: 20px;
}
#jumbo h1 {
  margin-top:0;
  color: white;
  font-size: 30px;
  /*background-color:rgba(0,0,0,.5);*/
}
.teaser {
	position:relative;
	/*background-color:rgba(0,0,0,.5);*/
	top:50%;
	transform:translate(0, -50%);
}
<div id="navigation">
  <ul>
    <li><a href="#">About</a>
    </li>
    <li><a href="#">Skills</a>
    </li>
    <li><a href="#">Projects</a>
    </li>
    <li><a href="#">Contact</a>
    </li>
  </ul>
</div>

<div id="jumbo">
<div class="teaser">
<h1>Responsive Front-end Developer</h1>
  <ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JAVASCRIPT</li>
    <li>JQUERY</li>
    <li>WORDPRESS</li>
  </ul>
</div>
  
</div>

于 2016-02-03T08:26:28.737 に答える
0

あなたが言及したように、問題に対する答えは次のとおりです。1- H1タグにはデフォルトでマージンが上下にあるため、H1タグのマージントップにより問題が発生し、削除する必要があります

#jumbo h1 {
   color: white;
   font-size: 30px;
   margin-top: 0;
   padding-top: 20px;

}

2-ジャンブトロンのコンテンツを新しいコンテナ内にラップしてから、ジャンブトロン表示テーブルとラッパー表示テーブルセルと垂直方向の中央を揃える必要があります。

 <div id="jumbo">
 <div class="wrapper">
 <h1>Responsive Front-end Developer</h1>
 <ul>
 <li>HTML</li>
 <li>CSS</li>
 <li>JAVASCRIPT</li>
 <li>JQUERY</li>
 <li>WORDPRESS</li>
</ul>
</div>

そしてCSS

#jumbo {
 display:table;
 }
#jumbo .wrapper{
   display: table-cell;
   vertical-align: middle;
   text-align: center;
}

これは、垂直方向に整列する方法に関する完全な記事です 3-最良の方法は

 background-size: cover;
 height: 100%;

100vh はすべてのブラウザーで一般的ではない

于 2016-02-03T08:51:02.640 に答える
0
  1. あなたの体にはパディング/マージンがあるかもしれません。だからいいねゼロにbody{margin:0; padding:0}して応募する#jumbo h1{margin: 0;}

2.申し込み#jumbo{text-align:center;position: relative;}ます。次に、このような余分な divを追加し、次<div class='v-block'><h1>Responsive Front-end Developer</h1><ul><li>HTML</li><li>CSS</li><li>JAVASCRIPT</li><li>JQUERY</li><li>WORDPRESS</li></ul></div>のような css を追加します .v-block{height: 80px;position: absolute;width: 100%;top: 50%;margin-top: -40px;}

  1. 背景サイズ: カバー; これにより、背景画像が引き伸ばされるのを防ぐことができます。

最終的なコードは以下のとおりです..

body{
                margin: 0;
                padding: 0;
            }
            #navigation ul {
                list-style-type: none;
                margin: 0;
                padding: 0;
                overflow: hidden;
                background-color: #272727;
                border-top: 2px solid #5e20d1;
                text-align: center;
            }
            #navigation a {
                display: inline-block;
                color: #747272;
                text-align: center;
                padding-top: 15px;
                padding-bottom: 15px;
                padding-right: 15px;
                padding-left: 15px;
                margin: 0;
                text-decoration: none;
            }
            #navigation li {
                display: inline;
                margin: auto;
            }
            #navigation a:hover {
                color: white;
            }
            #jumbo {
                margin: 0;
                padding: 0;
                width: 100%;
                height: 90vh;
                background-image: url("http://i.imgur.com/D1cF3ZG.jpg");
                background-size: 100% 100%;
                text-align: center;
                position: relative;
                background-size: cover;
            }
            #jumbo li {
                display: inline;
                margin: 1%;
                color: white;
                font-size: 20px;
            }
            #jumbo h1 {
                color: white;
                font-size: 30px;
                margin: 0;
            }
            .v-block{
                height: 80px;
                position: absolute;
                width: 100%;
                top: 50%;
                margin-top: -40px;
            }
<div id="navigation">
            <ul>
                <li><a href="#">About</a>
                </li>
                <li><a href="#">Skills</a>
                </li>
                <li><a href="#">Projects</a>
                </li>
                <li><a href="#">Contact</a>
                </li>
            </ul>
        </div>

        <div id="jumbo">
            <div class='v-block'>
                <h1>Responsive Front-end Developer</h1>
                <ul>
                    <li>HTML</li>
                    <li>CSS</li>
                    <li>JAVASCRIPT</li>
                    <li>JQUERY</li>
                    <li>WORDPRESS</li>
                </ul>
            </div>
        </div>

于 2016-02-03T08:52:15.043 に答える
0

1) その空白はちょうどmargin-toph1 のものです。

2) を使用しflexboxます。

3)完全なページ背景画像

于 2016-02-03T08:26:36.347 に答える
0

不要なマージンとパディングを削除するには、CSS の上部に次を追加するだけです。

* {
    margin:0;
    padding:0;
}

これにより、セレクターの下で特に宣言されていない限り、すべての要素からマージンが削除されます。*

*セレクターのJsFiddleの例

または、 に追加margin-top:0;して#jumbo h1、ヘッダーとコンテンツの間の空白のみを削除することもできます。

JsFiddleの例margin-top

お役に立てれば！

于 2016-02-03T08:26:11.270 に答える
0

1.これを追加して、空白を取り除きます（h1タグに由来します）。 

* {
  margin:0;
  padding:0;
}

これは、h1 タグを右クリックして [検査] をクリックすると表示されます。

2. div 内のテキストをセンタリングする

詳細については、この回答を参照してください。

3. 完全なページ背景画像

CSS Tricks には、これに関するすばらしい投稿があります。

于 2016-02-03T08:28:28.413 に答える