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

div css三列布局效果实例代码_html/css_WEB-ITnose

WBOY
Lepaskan： 2016-06-24 11:31:10
asal
1633 orang telah melayarinya

div css三列布局效果实例代码:
三列布局在是比较中规中矩的布局之一，大量的网站都有应用，也是初学者必须要掌握的布局方式之一，下面就是一个三列布局的实例代码，仅供参考之用，希望对初学者有一定的帮助，代码实例如下:

 

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="author" content="http://www.softwhy.com/" /><title>三列布局效果代码实例</title><style type="text/css" >* {  padding:0px;  margin:0px;}body {  background-color:#e1ddd9;}h1 {  font-size:11px;  text-align:center;  color:#564b47;  background-color:#90897a;}strong{font-size:13px;}#left{  position:absolute;  left:0px;  width:190px;  color:#564b47;  margin:0px;  padding:0px;  height:500px;}#content {  margin:0px 190px 0px 190px;  border-left:2px solid #564b47;  border-right:2px solid #564b47;  padding:0px;  background-color:#ffffff;  height:500px;}#right {  position:absolute;  right:0px;  width:190px;  height:500px;  color:#564b47;  margin:0px;  padding:0px;}</style></head><body><div id="left"></div><div id="right"></div><div id="content"></div><h1>蚂蚁部落欢迎您</h1></body></html>
Salin selepas log masuk

 

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=9803

更多内容可以参阅:http://www.softwhy.com/divcss/

 

Label berkaitan：
div css三列布局效果实例代码
sumber：php.cn
Artikel sebelumnya：两列布局的设置方法总结_html/css_WEB-ITnose Artikel seterusnya：div中显示页面_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
Sifat tersuai skop CSS tidak dikenali apabila digunakan untuk menilai pembolehubah dalam skop induk Saya cuba menskalakan saiz melalui sifat tersuai var supaya kelas boleh digubah tanpa gand...
daripada 2023-11-01 21:53:10
0
1
180
javascript - 使用flex布局，子元素怎么高度自适应？ 1、想用flex实现这种布局 2、各个子元素高度不固定，从上到下依次排列请问可以怎么实现？ 附：我对父元素定义了下面的规则： {代码...} 对子元素用p标签放了一些文本，未设置高...
daripada 2017-04-11 11:41:25
0
2
339
javascript - 为什么bootstrap框架导入后没有效果？ 以下是HTML代码，文件存放在本地： {代码...} 链接是官网上的，没有问题。按照bootstrap的网格布局，最内层的两个div应该并列在一行，而在chrome下却出现这样的效...
daripada 2017-04-11 09:18:47
0
1
648
javascript - bootstrap3两栏布局，侧边栏过长使得主栏第二行无法浮动上来，该如何调整？效果请看图。 用bootstrap的栅格系统实现一个两栏布局，左边9列，右边3列： {代码...} 效果是这样的： 希望预期效果是左栏第二行的蓝色块浮上来紧贴第一行，而不是被右边的红色块挤下去。...
daripada 2017-04-10 17:56:07
0
1
196
javascript - bootstarp 设置td 的max-width属性失效的问题 利用bootstrap的table布局 ，表格只有两列，想限制前一列的的最大宽度，可是发现设置的max-width没有起到印象中的作用。 注意，着基本是我所有的html,css代码...
daripada 2017-04-10 17:49:24
0
4
402
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！