简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > Web Front-end > HTML Tutorial > body text

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

WBOY
Release： 2016-06-24 11:31:10
Original
1633 people have browsed it

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>
Copy after login

 

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

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

 

Related labels：
div css三列布局效果实例代码
source：php.cn
Previous article：两列布局的设置方法总结_html/css_WEB-ITnose Next article：div中显示页面_html/css_WEB-ITnose
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
CSS scope custom properties are not recognized when used to evaluate variables in the parent scope I'm trying to scale the size via a var custom property so that classes can be composed wit...
From 2023-11-01 21:53:10
0
1
180
javascript - 使用flex布局，子元素怎么高度自适应？ 1、想用flex实现这种布局 2、各个子元素高度不固定，从上到下依次排列请问可以怎么实现？ 附：我对父元素定义了下面的规则： {代码...} 对子元素用p标签放了一些文本，未设置高...
From 2017-04-11 11:41:25
0
2
339
javascript - 为什么bootstrap框架导入后没有效果？ 以下是HTML代码，文件存放在本地： {代码...} 链接是官网上的，没有问题。按照bootstrap的网格布局，最内层的两个div应该并列在一行，而在chrome下却出现这样的效...
From 2017-04-11 09:18:47
0
1
648
javascript - bootstrap3两栏布局，侧边栏过长使得主栏第二行无法浮动上来，该如何调整？效果请看图。 用bootstrap的栅格系统实现一个两栏布局，左边9列，右边3列： {代码...} 效果是这样的： 希望预期效果是左栏第二行的蓝色块浮上来紧贴第一行，而不是被右边的红色块挤下去。...
From 2017-04-10 17:56:07
0
1
196
javascript - bootstarp 设置td 的max-width属性失效的问题 利用bootstrap的table布局 ，表格只有两列，想限制前一列的的最大宽度，可是发现设置的max-width没有起到印象中的作用。 注意，着基本是我所有的html,css代码...
From 2017-04-10 17:49:24
0
4
402
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！