Heim > Web-Frontend > HTML-Tutorial > 在html中div+css布局的简单应用(适合初学者了解)_html/css_WEB-ITnose

在html中div+css布局的简单应用(适合初学者了解)_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 12:27:47
Original
1257 Leute haben es durchsucht

<!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>
Nach dem Login kopieren

 

Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage