HTML と CSS を使用してレスポンシブな光軸レイアウトを作成する方法-htmlチュートリアル-php.cn

HTML と CSS を使用してレスポンシブな光軸レイアウトを作成する方法

WBOY

リリース： 2023-10-26 11:28:57

オリジナル

1155 人が閲覧しました

HTML と CSS を使用してレスポンシブな光軸レイアウトを作成する方法

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 サイトの他の関連記事を参照してください。