CSS3 で Taobao に空白スペースを実装する方法

CSS3 で Taobao に空白スペースを実装する方法

Taobao用の空白スペースを作成します。

ブラウザページを縮小すると、コンテンツ領域は縮小されませんが、空白スペースは小さくなります。

<!DOCTYPE html>
<html>
	<ヘッド>
		<メタ文字セット="utf-8" />
		<タイトル></タイトル>
		<スタイル タイプ="text/css">
			*{
				マージン: 0;
				パディング: 0;
			}
			.ラッパー{
				高さ: 30px;
				背景色: グレー;
			}
			。コンテンツ{
				幅: 1200ピクセル;
				高さ: 30px;
				背景色: #0f0;
				margin: 0 auto;/* 上と下は 0、左と右は適応型*/
			}
		</スタイル>
	</head>
	<本文>
		<div class="wrapper"><!-- 背景領域 -->
			<div class="content"></div><!-- コンテンツ領域 -->
		</div>
	</本文>
</html> 

このように、ズームすると外側の灰色の部分がズームされ、緑色の部分が常に中央になります。

中のテキストはこのように書かれています。

<div>
<ul style="float: left;"></ul>
<ul style="float: right;"></ul>
</div>

CSS3 で Taobao のホワイト スペースを実現する方法については、これで終わりです。CSS3 Taobao のホワイト スペースに関する関連コンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<:  Vue コンポーネントでのアンチシェイクとスロットリングの使用例の分析

>>:  MySQL 構成マスタースレーブサーバー (マスター 1 台とスレーブ複数台)

推薦する

CSSは、マウスを線の上に置くと線全体の色を変える効果を実現します。

まとめ:以下のように、CSS で指定した行にマウスを置いたときに行全体の色を変更する方法を示します。...

MySQL パフォーマンス最適化のヒント

MySQL パフォーマンスの最適化MySQL はインターネット企業で広く使用されており、MySQL ...

MySQL countの詳細な説明と関数のサンプルコード

mysql countの詳細な説明count関数はテーブルや配列内のレコードを数えるために使われます...

フォーム OnSubmit と input type=image の使用の概要

ここに <input type="image"> がある場合、この画...

js の Array.forEach でループを終了する方法の例

目次forEach() メソッドjs の Array.forEach のループから抜け出す方法解決:...

JavaScript BOMの構成と一般的なイベントの詳細な説明

目次1. 部品2. BOMの構成2. ウィンドウオブジェクトの共通イベント1. ウィンドウ読み込みイ...

シンプルなカレンダー効果を実現する JavaScript コード

この記事では、シンプルなカレンダー効果を実現するためのJavaScriptの具体的なコードを参考まで...

Chrome、Firefox、IEで入力カーソルの位置がずれる問題の解決方法

ブラウザで入力カーソルがずれる問題の詳しい説明<br />仕事で問題に遭遇し、解決策を探...

Mysql5.7.17 winx64.zip 解凍バージョンのインストールと設定のグラフィックチュートリアル

1. mysql-5.7.17-winx64.zip をダウンロードします。リンク: https:/...

有名なブログの再設計例 28 件

1. Webデザイナーウォール 2. Veerleのブログ 3. チュートリアル9 4. UXブース...

Dockerを使用してOracle_11gをインストールする方法

DockerでOracle_11gをインストールする1. oracle_11gイメージを取得する d...

4 つの主要な SQL ランキング関数 ROW_NUMBER、RANK、DENSE_RANK、NTILE の使用方法の紹介

1. ROW_NUMBER()定義: ROW_NUMBER() 関数は、select によってクエリ...

JavaScript 定期検証パスワード強度実装方法

展示する デザインパスワード強度分析パスワードは数字、文字、特殊記号で構成されていますパスワード: ...

js で継承を実装する 5 つの方法

コンストラクタの借用この手法の基本的な考え方は単純です。サブタイプ コンストラクター内からスーパータ...

実稼働環境でのNginx高可用性ソリューションの実装プロセスの分析

準備: 192.168.16.128 192.168.16.129 2 台の仮想マシン。 Nginx...