您现在的位置是：网站首页> 编程资料编程资料

div+css排版的样例_CSS/HTML_

2023-05-25 314人已围观

简介 div+css排版的样例_CSS/HTML_

div+css排版的样例

><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><meta http-equiv="Content-Language" content="gb2312"><meta content="all" name="robots"><meta name="Author" content="huobazi@aspxboy.com ,活靶子"><meta name="Copyright" content="www.AspxBoy.Com,自由版权,任意转载."><meta name="Description" content="www.AspxBoy.Com"><meta name="Keywords" content="www.AspxBoy.Com,活靶子,huobazi"><title> Div布局 </title><style> body{text-align:center;margin:0;padding:0}/*text-align:center是ie中必须要有的*/div { height:200px; color:red; } .title { margin:0 auto; width:776px; background-color:#abcdef; } .middle { margin:0 auto; width:776px; } .left { float:left; clear:right; width:20%; background-color:#eeefff; } .center { float:left; clear:right; width:50%; background-color:#CCC000; } .right { float:left; clear:right; width:30%; background-color:#fff000; } .both { clear:both; width:100%; background-color:#666999; } .footer { margin:0 auto; width:776px; clear:both; background-color:#000fff; } </style><div class="title">顶部</div><div class="middle"><div class="left">左侧</div><div class="center">中部</div><div class="right">右侧</div><div class="both">全行</div><div class="left">左侧</div><div class="center">中部</div><div class="right">右侧</div><div class="both">全行</div><div class="left">左侧</div><div class="center">中侧</div><div class="right">右侧</div></div><div class="footer">底部</div>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

上一篇：CSS经典技巧十则第1/2页_CSS/HTML_

下一篇：HTML结构化：实践DIV＋CSS网页布局入门指南_CSS/HTML_

您现在的位置是：网站首页> 编程资料编程资料

div+css排版的样例_CSS/HTML_

相关内容

点击排行

本栏推荐

猜你喜欢