ホームページ >ウェブフロントエンド >htmlチュートリアル >HTML と CSS を使用してレスポンシブな光軸レイアウトを作成する方法
HTML と CSS を使用してレスポンシブな光軸レイアウトを作成する方法
- WBOYオリジナル
- 2023-10-26 11:28:571156ブラウズ
HTML と CSS を使用してレスポンシブなタイムライン レイアウトを作成する方法
タイムライン レイアウトは、コンテンツを時系列に表示できるユニークなページ レイアウト方法です。歴史的な出来事、個人の履歴書、プロジェクトの進捗状況など。この記事では、HTML と CSS を使用してレスポンシブな光軸レイアウトを作成する方法を紹介し、具体的なコード例を示します。
まず、基本的な HTML 構造を作成する必要があります。コードは次のとおりです。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>响应式时光轴布局</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="timeline">
<div class="timeline-item">
<div class="timeline-content">
<h2>2000年</h2>
<p>这是第一个事件的描述。</p>
</div>
</div>
<div class="timeline-item">
<div class="timeline-content">
<h2>2005年</h2>
<p>这是第二个事件的描述。</p>
</div>
</div>
<div class="timeline-item">
<div class="timeline-content">
<h2>2010年</h2>
<p>这是第三个事件的描述。</p>
</div>
</div>
<!-- 更多事件... -->
</div>
</body>
</html>次に、タイムライン レイアウトの外観と応答動作を定義する CSS スタイル シートを作成する必要があります。コードは次のとおりです。
.timeline {
width: 100%;
max-width: 900px;
margin: 0 auto;
position: relative;
}
.timeline::before {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 50%;
width: 2px;
background-color: #000;
transform: translateX(-50%);
}
.timeline-item {
position: relative;
padding: 50px 0;
}
.timeline-content {
position: relative;
width: 50%;
padding: 20px;
background-color: #f1f1f1;
}
.timeline-content h2 {
margin-bottom: 10px;
}
.timeline-content p {
margin-bottom: 0;
}
@media (max-width: 768px) {
.timeline::before {
left: 0;
transform: none;
width: 100%;
height: 2px;
}
.timeline-item {
padding: 20px 0;
}
.timeline-content {
width: 100%;
}
}さて、上記のコードが何を行うかを説明しましょう。
- HTML では、イベントを含むタイムライン コンテナ
.timelineを作成し、各イベントは.timeline-itemでラップされます。.timeline-contentでラップされています。 - CSSでは光軸の幅、最大幅、中心揃えを設定します。また、
::before擬似要素を使用して垂直線を作成し、タイムラインを表します。 -
.timeline-itemクラスのスタイルは、イベント項目の位置とパディング間隔を定義します。 -
.timeline-contentクラスのスタイルは、イベント項目の特定のコンテンツを定義し、背景色とパディングを設定します。 -
@mediaクエリを使用して、小さな画面デバイス (最大幅 768 ピクセル) 用のアダプティブ スタイルを定義し、タイムラインを一番上に配置し、水平線に設定しました。
上記のコードにより、基本的な応答性の高い光軸レイアウトが完成しました。ニーズに応じてスタイルをカスタマイズしたり、イベントを追加したり、HTML 構造を通じて拡張したりできます。
概要:
この記事では、HTML と CSS を使用してレスポンシブな光軸レイアウトを作成する方法を紹介し、具体的なコード例を示します。このレイアウトにより、過去の出来事やプロジェクトの進捗状況が明確に表示され、Web コンテンツがより魅力的でインタラクティブなものになります。この記事が素晴らしいレイアウトの作成に役立つことを願っています。
以上がHTML と CSS を使用してレスポンシブな光軸レイアウトを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。