Home >Web Front-end >HTML Tutorial >Simple application of div css layout in html (suitable for beginners to understand)_html/css_WEB-ITnose
Simple application of div css layout in html (suitable for beginners to understand)_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:27:471251browse
<!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>
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn