ホームページ >ウェブフロントエンド >CSSチュートリアル >楽しい CSS マジックとレイアウト (コード)
この記事は、興味深い CSS マジックとレイアウト (コード) についての内容であり、一定の参考価値があります。必要な友人が参照することができます。お役に立てれば幸いです。 。
前書き: レイアウトとスタイルは、すべてのフロントエンドで必須のコースです。日々の仕事の中で、特定のシーンでのレイアウト要件に遭遇することもありますが、スタイルを一致させることで、魔法のような効果を得ることができます。日々の開発で遭遇したレイアウトや、大手サイトを巡回しているときに偶然見つけた魔法の特殊効果の書き方などを集めたので、ここで共有したいと思います。
紙面の都合上、2記事に分けてお送りします。今日はまず、面白くて実践的なレイアウトの書き方を紹介します。次の記事では、スタイルの魔法について説明します。
レイジーローディングプレースホルダー画像アダプティブ
モールに商品画像を表示するとき、画像がたくさんある場合、エクスペリエンスが向上します。最初にプレースホルダー画像があり、その目的は次のとおりです。ページのジッターをなくします。これは、いわゆる画像の遅延読み込み効果です。ただし、特に携帯電話の水平画面と垂直画面を切り替える場合、適応に関しては頭の痛い問題です。 JavaScriptで計算した場合、ジッターが発生する可能性があります。
JS の代わりに CSS を使用するという原則に基づいて、次のソリューションがあります:
<div> <img alt="楽しい CSS マジックとレイアウト (コード)" > </div>
.img-ratio {
width: 100%;
position: relative;
padding-top: 75%;
}
.img-ratio > img {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
UI が 4:3 を提供する限り、さまざまな画面に適応できます。プレースホルダー画像。下の図は、幅と高さが異なるものの、比率は同じ 2 つの図を示しています。どちらも完全に中央揃えにすることができます。
原則:
モバイル端末のインターフェイスでは、あらゆるスペースが貴重です。画面のスクロールの長さを制御するために、いくつかのモジュールが水平に配置されることがあります。ただし、それらを水平に配置すると、レイアウト上でいくつかの問題が発生します。
たとえば、モバイル端末のスクロール バーのスタイルはモバイル ブラウザーに依存し、異なります。解決策の 1 つはスクロール軸を非表示にすることですが、overflow-x:hidden; を非表示にしないとスクロールできなくなります。次に、右端のブロックの一部が露出するように各水平ブロックの幅を計算します。これにより、ユーザーは画面の右側の外側にコンテンツがあり、水平にスライドできることがわかります。
また、水平方向のモジュールの数はビジネスのニーズに応じて変化する可能性があるため、水平方向のスクロールの幅が不明な場合は、float を水平方向の配置に使用することはできません。フローティングを使用するため、横スクロール全体の幅を知る必要があり、フローティングが回り込まないように、全体の幅はフローティング ブロックの累積幅よりも広くなります。
したがって、次のような記述方法があります:
<div> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul> </div>
.wrapper {
width: 340px;
height: 80px;
overflow: hidden;
}
.wrapper ul {
height: 96px;
width: 100%;
white-space: nowrap;
overflow-x: scroll;
padding: 0;
margin: 0;
}
.wrapper li {
display: inline-block;
width: 80px;
height: 80px;
background-color: #ddd;
line-height: 80px;
text-align: center;
font-size: 20px;
margin-right: 10px;
}
アイデアは次のとおりです: ul はwhite-space:nowrap;を設定し、li はdisplay:inline-block;を設定します。一番外側の p は、高さの差を利用して水平スクロール バーを非表示にします。
一部の公式 Web サイトには、トップ ナビゲーション バーとナビゲーションのコンテンツ領域があります。多くの場合、バーは中央に両側に表示する必要があります。その場合は空白のままにすると、上部とメインコンテンツを区別するために、ナビゲーションバーの下にルートラインまたは影が表示される場合があります。
.center-float {
float: left;
position: relative;
left: 50%;
}
.center-float > ul {
position: relative;
left: -50%;
}
これは、相対位置決めと組み合わせて中央に浮かせる方法です。
ページのメイン コンテンツ領域の高さが十分でない場合でも、フッターは下部に表示されます。もちろん、これは位置を意味するものではありません。固定、フッターはコンテンツ領域のすぐ下にあります。方法は2つあります。
html の構造は次のとおりです:
<div>....</div> <div>....</div>
html, body {
height: 100%;
}
$footer-height: 30px;
#content {
min-height: 100%;
margin-bottom: -$footer-height;
padding-bottom: $footer-height;
}
#footer {
line-height: $footer-height;
text-align: center;
}
$footer-height: 30px;
html {
height: 100%;
}
body {
min-height: 100%;
display: flex;
flex-direction: column;
}
#content {
flex: 1;
}
#footer {
line-height: $footer-height;
text-align: center;
}
一部の従来のポータル Web サイトでは、メイン コンテンツ領域に 980 ピクセルや 1000 ピクセルなどの従来の幅があります。場合によっては、幅の広い画像が背景画像全体として使用され、水平スクロールなしで中央に配置されます。これを実行すると、水平および垂直の中央揃えを実現できます:
.wrapper {
min-width: 1000px;
height: 800px;
background: url(test.jpg) no-repeat center top;
}
.mainContent {
position: relative;
width: 1000px;
margin: 0 auto;
}
疑似要素もセンタリングを実現するために使用できますか?次の例を見てください:
<div> <img alt="楽しい CSS マジックとレイアウト (コード)" > </div>
.wrapper {
width: 300px;
height: 300px;
border: 1px solid #ccc;
text-align: center;
}
.wrapper::after {
content: '';
display: inline-block;
vertical-align: middle;
height: 100%;
}
.wrapper > img {
vertical-align: middle;
}
水平方向がわかりやすいですね。垂直方向では、img を中央まで引き下げた後:: と理解できます。
この記事はここで終了しています。その他のエキサイティングなコンテンツについては、PHP 中国語 Web サイトの CSS ビデオ チュートリアル 列に注目してください。
以上が楽しい CSS マジックとレイアウト (コード)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。