ホームページ >ウェブフロントエンド >htmlチュートリアル >HTML と CSS を使用して固定幅で中央揃えのレイアウトを実装する方法
HTML と CSS を使用して固定幅で中央揃えのレイアウトを実装する方法
- 王林オリジナル
- 2023-10-20 19:12:18729ブラウズ
HTML と CSS を使用して固定幅で中央揃えのレイアウトを実装する方法
Web デザインでは、固定幅で中央揃えのレイアウトを使用すると、ページを維持できます。さまざまなサイズのモニター、統一されたスタイルとレイアウト。このレイアウトは HTML と CSS を使用して実現できます。この記事では、HTML と CSS を使用して固定幅の中央揃えレイアウトを実装する方法を示す具体的な例を示します。
まず、HTML ファイルを作成する必要があります。メモ帳などのテキスト エディタを使用して、新しい HTML ファイルを作成できます。ファイルに次のコンテンツを入力します。
<!DOCTYPE html>
<html>
<head>
<title>定宽居中布局示例</title>
<style>
body {
width: 100%;
background-color: #f3f3f3;
font-family: Arial, sans-serif;
}
.container {
width: 800px;
margin: 0 auto;
background-color: #fff;
padding: 20px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<h1>这是一个定宽居中布局示例</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In dapibus ante ac dapibus interdum. Sed faucibus, erat eget laoreet consequat, metus mi tincidunt lorem, nec tincidunt ex magna at arcu. Sed consequat tincidunt ante vel laoreet. Pellentesque ultrices est non elit tincidunt, nec rutrum quam efficitur. Fusce euismod orci in laoreet semper. Donec gravida magna id erat maximus sollicitudin eget ac turpis. Nulla suscipit augue ac pretium tincidunt. Sed vestibulum, tellus vel molestie iaculis, est tellus consectetur nisi, id rutrum urna turpis vel ligula.</p>
<p>Sed bibendum vehicula est, et pellentesque ex laoreet id. Cras ut ligula vitae mi tincidunt imperdiet vitae sit amet lorem. Morbi porta justo et lacinia elementum. Praesent eu dapibus neque. Ut mollis quis risus eget rutrum. Aliquam erat volutpat. Aliquam tristique ultrices vestibulum. Nulla facilisi.</p>
</div>
</body>
</html>上記のコードでは、ページのコンテンツをラップするために使用される、container という名前の div 要素を定義します。 CSS では、コンテナの幅を 800 ピクセルに設定し、マージンを「0 auto」に設定します。これは、コンテナがページの水平方向の中央に配置されることを意味します。また、ページの美しさを高めるために、コンテナに背景色、パディング、シャドウ効果を追加しました。
最後に、h1 と 2 つの段落を使用して、コンテナーに表示されるコンテンツを表示します。
ファイルを .html ファイルとして保存し、ダブルクリックして開くと、ページが固定幅で折り返され、中央に水平に表示されていることがわかります。ページの背景色はグレー、コンテンツ領域の背景色は白です。タイトルと本文も中央揃えになります。
この例を通して、HTML と CSS を使用して固定幅の中央揃えのレイアウトを実装する方法を確認できます。この例は、独自のプロジェクトに合わせて変更できます。
この記事がお役に立てば幸いです!
以上がHTML と CSS を使用して固定幅で中央揃えのレイアウトを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。