Rumah >hujung hadapan web >html tutorial >上下左右布局(DIV+CSS)_html/css_WEB-ITnose

上下左右布局(DIV+CSS)_html/css_WEB-ITnose

WBOY
WBOYasal
2016-06-24 12:27:331501semak imbas

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title> </title><style type="text/css">#head{height:40px;background-color:#0033CC;margin:0;}#content{background:#CCCCCC;height:200px;margin:0;}#left{width:20%;height:200px;background:#CCCC66;float:left;margin:0;}#c{width:60%;height:200px;background:red;margin:0;float:left;}#right{width:20%;height:200px;background:#339966;float:right;margin:0;}#foot{background:#0099CC;height:40px;margin:0;}</style></head><body><div id="head">head</div><div id="content">  <div id="left">left</div>  <div id="c">content</div>  <div id="right">rigth</div></div><div id="foot">foot</div></body></html>

  

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya:css layout ?人的?梯Artikel seterusnya:div css 盒子模型_html/css_WEB-ITnose