Home > Web Front-end > HTML Tutorial > div css三列布局效果实例代码_html/css_WEB-ITnose

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

WBOY
Release: 2016-06-24 11:31:10
Original
1719 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/

 

source:php.cn
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template