Heim >Web-Frontend >HTML-Tutorial >在html中div+css布局的简单应用（适合初学者了解）_html/css_WEB-ITnose
在html中div+css布局的简单应用（适合初学者了解）_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:27:471267Durchsuche
<!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=utf-8" /><title>div+css页面布局练习</title><!--<link rel="stylesheet" href="index1.css" type="text/css" />--><style type="text/css">*{margin:0px; padding:0px;}#top,#nav,#mid,#footer{ width:500px; margin:0PX auto;}#top{height:80px; background-color:#F0F;}#nav{height:25px; background-color:#0FF;}#mid{height:300px;}#left{width:98px; height:298px; border:1px solid #FF0; background-color:#00F; float:left;}#right{ height:298px; background-color:#900;}.content{width:98px; height:148px; background-color:#030; border:1px solid #300; float:left;}#content2{background-color:#30F;}#footer{height:80px; background-color:#669;}</style></head><body><div id="top">顶部广告区</div><div id="nav">导航区</div><div id="mid"><div id="left">纵向导航区</div><div id="right"><div class="content">内容a</div><div class="content" id="content2">内容b</div><div class="content">内容c</div><div class="content" id="content2">内容d</div><div class="content" id="content2">内容e</div><div class="content">内容f</div><div class="content" id="content2">内容g</div><div class="content">内容h</div></div></div><div id="footer">底部版权区</div></body></html>
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：1.DIV+CSS常用的Html网页布局代码_html/css_WEB-ITnoseNächster Artikel：css div 布局（左右固定，中间自动大小）_html/css_WEB-ITnose