CSSのレイアウトの仕方-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

CSSのレイアウトの仕方

php中世界最好的语言

Nov 21, 2017 pm 05:18 PM

css レイアウト

CSS的布局说简单也简单，说复杂也复杂，我们下面给大家举几个列子，为大家详细的讲解一下绝对定位的布局和相对定位布局以及网页布局。

遇到以上的不规则案例布局，如果使用float、padding等浮动实现比较麻烦，但使用position绝对定位即可很好简单地实现。接下来为大家介绍position绝对定位方法布局以上小的案例。

用到CSS样式和HTML标签及相应解释

1、要用到CSS样式单词及解释

position：绝对定位样式实现DIV定位布局其设置值absolute和relative应用

width：宽度，设置对象宽度

height：高度，设置对象高度

line-height：行高，设置文本行高

left：设置div对象靠左距离

right：设置div对象靠左距离

top：设置div对象靠左距离

bottom：设置div对象靠左距离

background：背景，设置背景图片和颜色

color：设置字体颜色

font-size：设置字体大小

font-weight：设置字体加粗

2、用到HTML标签及解释

div标签：用于布局结构框架

ul li标签：用于布局列表型数据列表

h3标签：用于布局栏目标题

绝对定位实际案例布局思维解释介绍

将隐藏文字后整图作为最外层大盒子DIV的背景图片，命名为bg.jpg。

隐藏文字后的图片素材，可直接保存使用

这一个最外层DIV，设置好宽度高度、背景图片，同时设置position:relative。此盒子里分别布局3个小DIV盒子，分别设置好宽度高度，同时设置position:absolute绝对定位再使用left、right、top、bottom这几个样式定位好这3个盒子位置。

通过以上布局即可布局好三个DIV盒子，再分别布局栏目标题和内容即可实现。

绝对定位案例重要代码

以下是最外层DIV盒子及CSS代码和内容3个小盒子布局代码。

1、HTML代码

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>绝对定位 实例在线演示 DIV </title> 
<link href="images/style.css" rel="stylesheet" type="text/css" /> 
 
</head> 
<body> 
<div id="wrapper"> 
<div class="box1"></div> 
<div class="box2"></div> 
<div class="box3"></div> 
</div> 
</body> 
</html> 
以上HTML布局一个大盒子使用ID，里面三个小DIV盒子使用CLASS。
2、CSS代码
#wrapper{ margin:0 auto;position:relative;width:610px;height:559px;background:url(bg.jpg) no-repeat} 
/* position:relative是绝对定位关键，父级设置 */ 
.box1{ position:absolute; width:147px; height:140px; left:198px; top:14px} 
.box2{position:absolute; width:141px; height:186px; left:31px; bottom:17px} 
.box3{position:absolute; width:132px; height:188px; right:28px; bottom:67px}

ログイン後にコピー

从以上图看出布局结构初现。再以上基础上分别布局栏目标题和对应内容即可完成此布局。

1、完整CSS代码

@charset "utf-8"; 
body, div, ul, li,h3{margin:0; padding:0;font-style: normal;font:12px/22px "\5B8B\4F53",Arial, Helvetica, sans-serif} 
/* \5B8B\4F53 代表 宋体，更多中文字体转 Unicode http://www.php.com/jiqiao/j325.shtml */ 
ol, ul ,li{list-style:none} 
img {border: 0; vertical-align:middle} 
body{color:#FFF;background:#FFF; text-align:center} 
a{color:#FFF;text-decoration:none}  
a:hover{color:#BA2636;text-decoration:underline} 
/* 根据本实例 设置超链接字体与没有超链接字体演示为白色 */ 
 
#wrapper{ margin:0 auto;position:relative;width:610px;height:559px;background:url(bg.jpg) no-repeat} 
/* position:relative是绝对定位关键，父级设置 */ 
 
.box1{ position:absolute; width:147px; height:140px; left:198px; top:14px} 
.box2{position:absolute; width:141px; height:186px; left:31px; bottom:17px} 
.box3{position:absolute; width:132px; height:188px; right:28px; bottom:67px} 
/* position:absolute是绝对定位关键，子级设置同时lef right top bottom配合使用 */ 
 
h3.title{ height:32px; line-height:32px; font-size:14px; font-weight:bold; text-align:left} 
/* 标题统一设置 */ 
ul.list{ text-align:left; width:100%; padding-top:8px} 
ul.list li{ width:100%; text-align:left; height:22px;overflow:hidden} 
/* 加了overflow:hidden防止内容过多后自动换行 隐藏超出内容 */

ログイン後にコピー

2、完整HTML代码：

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>绝对定位 实例在线演示 DIV </title> 
<link href="images/style.css" rel="stylesheet" type="text/css" /> 
<!--www.php.com --> 
</head> 
<body> 
<div id="wrapper"> 
<div class="box1"> 
<h3 class="title">新闻动态</h3> 
<ul class="list"> 
<li><a href="http://www.php.com/wenji/w558.shtml">不会程序能学会CSS吗？</a></li> 
<li><a href="http://www.php.com/wenji/w556.shtml">DIVCSS学习难吗？</a></li> 
<li><a href="http://www.php.com/peixun/">我要参加DIVCSS5的培训</a></li> 
<li><a href="http://www.php.com/css-tool/t720.shtml">jQuery所以版本集合整理</a></li> 
</ul> 
</div> 
<div class="box2"> 
<h3 class="title">DIV 栏目</h3> 
<ul class="list"> 
<li><a href="http://www.php.com/html/">CSS基础教程</a></li> 
<li><a href="http://www.php.com/htmlrumen/">HTML基础教程</a></li> 
<li><a href="http://www.php.com/wenji/">CSS问题</a></li> 
<li><a href="http://www.php.com/css-tool/">CSS制作工具</a></li> 
<li><a href="http://www.php.com/jiqiao/">DIV CSS技巧</a></li> 
<li><a href="http://www.php.com/css-texiao/">DIV+CSS+JS特效</a></li> 
</ul> 
</div> 
<div class="box3"> 
<h3 class="title">网站栏目</h3> 
<ul class="list"> 
<li><a href="http://www.php.com/cssrumen/">DIV CSS入门</a></li> 
<li><a href="http://www.php.com/htmlrumen/">HTML入门教程</a></li> 
<li><a href="http://www.php.com/shili/">CSS实例</a></li> 
<li><a href="http://www.php.com/">DIV首页</a></li> 
<li><a href="http://www.php.com/template/">DIV CSS模块模板</a></li> 
<li><a href="http://www.php.com/w3c/">DIV CSS WEB标准</a></li> 
</ul> 
</div> 
</div> 
</body> 
</html>

ログイン後にコピー

关于CSS的布局的案列讲解就是这么多了，需要的朋友可以保存一下，也请大家持续关注本站的其他更新。

ホットAIツール

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7526

CakePHP チュートリアル

1378

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

NYTの接続はヒントと回答です

Related knowledge

ブートストラップにスプリットラインを書く方法 Apr 07, 2025 pm 03:12 PM

ブートストラップスプリットラインを作成するには2つの方法があります。タグを使用して、水平方向のスプリットラインを作成します。 CSS Borderプロパティを使用して、カスタムスタイルのスプリットラインを作成します。

HTML、CSS、およびJavaScriptの役割：コアの責任 Apr 08, 2025 pm 07:05 PM

HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。

VueでBootstrapの使用方法 Apr 07, 2025 pm 11:33 PM

vue.jsでBootstrapを使用すると、5つのステップに分かれています。ブートストラップをインストールします。 main.jsにブートストラップをインポートしますブートストラップコンポーネントをテンプレートで直接使用します。オプション：カスタムスタイル。オプション：プラグインを使用します。

ブートストラップに写真を挿入する方法 Apr 07, 2025 pm 03:30 PM

ブートストラップに画像を挿入する方法はいくつかあります。HTMLIMGタグを使用して、画像を直接挿入します。ブートストラップ画像コンポーネントを使用すると、レスポンシブ画像とより多くのスタイルを提供できます。画像サイズを設定し、IMG-Fluidクラスを使用して画像を適応可能にします。 IMGボーダークラスを使用して、境界線を設定します。丸い角を設定し、IMGラウンドクラスを使用します。影を設定し、影のクラスを使用します。 CSSスタイルを使用して、画像をサイズ変更して配置します。背景画像を使用して、背景イメージCSSプロパティを使用します。

ブートストラップのサイズを変更する方法 Apr 07, 2025 pm 03:18 PM

Bootstrapの要素のサイズを調整するには、次のものを含むDimensionクラスを使用できます。

ブートストラップのフレームワークをセットアップする方法 Apr 07, 2025 pm 03:27 PM

Bootstrapフレームワークをセットアップするには、次の手順に従う必要があります。1。CDNを介してブートストラップファイルを参照してください。 2。独自のサーバーでファイルをダウンロードしてホストします。 3。HTMLにブートストラップファイルを含めます。 4.必要に応じてSASS/LESSをコンパイルします。 5。カスタムファイルをインポートします（オプション）。セットアップが完了したら、Bootstrapのグリッドシステム、コンポーネント、スタイルを使用して、レスポンシブWebサイトとアプリケーションを作成できます。

ブートストラップボタンの使用方法 Apr 07, 2025 pm 03:09 PM

ブートストラップボタンの使用方法は？ブートストラップCSSを導入してボタン要素を作成し、ブートストラップボタンクラスを追加してボタンテキストを追加します

ブートストラップの日付を表示する方法 Apr 07, 2025 pm 03:03 PM

回答：ブートストラップの日付ピッカーコンポーネントを使用して、ページで日付を表示できます。手順：ブートストラップフレームワークを紹介します。 HTMLで日付セレクター入力ボックスを作成します。ブートストラップは、セレクターにスタイルを自動的に追加します。 JavaScriptを使用して、選択した日付を取得します。

See all articles

CSSのレイアウトの仕方

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック