首页 > 代码库 > html/css 布局练习3
html/css 布局练习3
效果图：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>无标题文档</title> 6 <style> 7 .body{width:300px;height:300px; margin:100px; border:10px solid #CCC;} 8 .left{width:150px; height:300px; background-color:#3C9; float:left;} 9 .top{width:150px; height:100px; background-color:#FC6; float:left;}10 .center{width:150px; height:100px;}11 .centerleft{width:75px; height:100px; background-color:#F09; float:left;}12 .centerright{width:75px; height:100px; background-color:#9FF; float:left;}13 .bottom{width:150px; height:100px; background-color:#69F; float:left;14 </style>15 </head>16 17 <body>18 <div class="body">19 <div class="left"></div>20 <div class="top"></div>21 <div class="centerleft"></div>22 <div class="centerright"></div>23 <div class="bottom"></div>24 25 26 </div>27 </body>
html/css 布局练习3
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。