0

こんにちは、私はまだ友人のために同じ Web モックアップのデザインに取り組んでおり、いくつかのことを理解しようとしているので、将来のために知っています。

まず、背景画像が適切に配置されていません (固定から変更すると変更されることはわかっていますが、そのスクロール効果が必要です)。コードは次のとおりです。

.jumbotron {
background:url("http://i.imgur.com/5zm8SAo.jpg") no-repeat center center fixed;
background-size: cover;
height: 500px;
}

背景のサイズをいじると、寸法がウェブサイトに収まりません。

  1. 私は自分のコンピューター (まだサーバーをセットアップしていません) からパブリック フォント ジェネレーター Web サイトにフォントを OTF ファイルとしてアップロードし、昨夜作業していたときにコンピューターで実行していましたが、今は私のコンピューターからオフィスのコンピュータでは、フォントはデフォルトで表示されます。回避策はありますか? それともサーバーが必要ですか？

  2. 下の写真にいくつかのロールオーバー効果を追加し、全体的に少し拡大し、フェードアウトして、reigningchamp の Web サイトと同様にテキストを追加したい (下にスクロールすると、2 つのリンクを投稿するのに十分な担当者がいない?!?)コードの動作:

       <div class="col-md-4">
       <div class = "grow">  
            <div class="thumbnail">
                <img src="#" />
              </div>
            </div>
        </div>
.grow {
display: inline-block;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
 }
 .grow:hover, .grow:focus, .grow:active {
 -webkit-transform: scale(1.1);
 transform: scale(1.1);
 }

また、ブートストラップフレームワークを使用しているため、クラスのサムネイルを呼び出してサムネイルを拡大しようとすると、画像を大きくする方法は何も変わりませんが、画像はそのままです。

  1. 最後にもう 1 つ、サイトのフォーマットをブラウザ ウィンドウやモバイルなどに合わせて調整する方法に関する一般的な質問です。フォントがページ上で実行されなかったり、上部のロゴが誤って配置されたりすることはありませんか? これは、私が codeacademy を通じて学習に取り組んできた JavaScript に関係している可能性があります (ただし、これまでのところ、Web サイトの機能ではなく、これらすべてのゲームとランダムな機能です)。ウィンドウを小さくすると、ナビゲーション メニューのテキストが .jumbotron div に表示されます。

みんなありがとう、私はそれをよく知っていますが、誰かがこれらの1つで私を助けてくれることを願っています!!

**JSFiddle はこちら** http://jsfiddle.net/thedonmon/KZ7d8/5/

4

1 に答える 1

0

はい、別のマシンから OTF ファイルにアクセスする場合は、OTF ファイルがサーバー上にある必要があります。ローカルマシンだけでなく、誰もがそれらを見ることができるように、それらをサーバーにロードする必要があります。Google フォントから取得したものでない限り、API を使用できます。https://www.google.com/fonts

画像の部分については、フィドルを作成しました: http://jsfiddle.net/sburke0708/KZ7d8/18/-webkit-transform:あなたが探しているのはプロパティだと思います。他のブラウザーを含めるために、必ず other プレフィックスを追加してください。

メディア クエリを確認する最後の部分。これらは、ニーズに合わせてコンテンツのサイズを変更します。https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queriesを確認してください。通常、メディア クエリは CSS の最後に配置され、特定の要素のサイズを変更してこの問題を回避します。

于 2014-06-24T17:31:44.403 に答える