Heim > Artikel > Web-Frontend > div css三列布局效果实例代码_html/css_WEB-ITnose
div css三列布局效果实例代码_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:31:101689Durchsuche
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>
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=9803
更多内容可以参阅:http://www.softwhy.com/divcss/
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：两列布局的设置方法总结_html/css_WEB-ITnoseNächster Artikel：div中显示页面_html/css_WEB-ITnose