简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Rumah > hujung hadapan web > html tutorial > teks badan

关于css布局的一些个人理解。（只是自己理解，不对的地方勿喷）_html/css_WEB-ITnose

WBOY
Lepaskan： 2016-06-24 11:32:45
asal
934 orang telah melayarinya

两列布局（左侧宽度固定，右侧自适应）

例如：

<!doctype html><html><head><title>左部宽度固定，右部自适应</title><meta charset="utf-8"/><style type="text/css">    *{        margin:0px;        padding:0px;        font-size:14px;    }    div{        height:600px;    }    .left{        width:300px;        background:red;        float:left;            }    body div.right{        background:green;        margin-left:300px;            }</style>    <link rel="stylesheet" type="text/css" href=""/></head><body>    <div class="left">左部</div>    <div class="right">右部</div></body></html>
Salin selepas log masuk

三列布局，（左右宽度固定，中间自适应）；

<!doctype html><html><head><title>左右宽度固定，中间自适应</title><meta charset="utf-8"/><style type="text/css">    *{        margin:0px;        padding:0px;        font-size:14px;    }    div{        height:700px;    }    .left{        width:300px;        background:red;        float:left;    }    .right{        width:400px;        background:yellow;        float:right;    }    .center{        background:blue;        margin:0 400px 0 300px;    }</style></head><body><div class="left">左</div><div class="right">右</div><div class="center">中</div></body></html>
Salin selepas log masuk

Label berkaitan：
关于css布局的一些个人理解。（只是自己理解，不对的地方勿喷）
sumber：php.cn
Artikel sebelumnya：后缀为html、htm与shtml文件的区别_html/css_WEB-ITnose Artikel seterusnya：如果我把html＋css＋js搞得非常精通，有前途吗？_html/css_WEB-ITnose
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
Hasilkan nilai lalai dan pembolehubah CSS menggunakan SCSS Saya sedang melaksanakan penggayaan laman web. Atas sebab sokongan warisan, saya perlu men...
daripada 2024-04-06 17:46:54
0
1
355
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！