div手绘页面布局(上下左右中)
生活随笔
收集整理的這篇文章主要介紹了
div手绘页面布局(上下左右中)
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1、空白頁面
<!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>我的文件夾</title> </head> <body> </body> </html>2、添加6個 div 標簽 <!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>我的文件夾</title> </head> <body> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> </body> </html>
3、將頁面劃分為五個部分：banner、left、center、right、bottom，在加上頁面本身共6個<div>標簽。
頁面id定義為 page_container，和其他五個id是父子關系。
<!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>我的文件夾</title> <style></style> </head> <body> <div id="page_container"><div id="banner">2</div><div id="left">3</div><div id="center">4</div><div id="right">5</div><div id="bottom">6</div> </div> </body> </html>4、添加CSS約束的框架 <!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>我的文件夾</title> <style>div { background-color:#fff; background-color:#fff;border: 1px solid #000;margin:5px;}#page_container { }#banner { }#left { }#center { }#right { }#bottom { } </style> </head> <body> <div id="page_container"><div id="banner">2</div><div id="left">3</div><div id="center">4</div><div id="right">5</div><div id="bottom">6</div> </div> </body> </html>
5、添加每一個id的位置和范圍 <!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>我的文件夾</title> <style>div { background-color:#fff; background-color:#fff;border: 1px solid #000;margin:5px;}#page_container {border: 0px;width:90%;margin:0 auto;text-align:left;}#banner {height:70px; }#left {width:200px;height:459px;float:left;}#center {width:60%;height:259px;float:left;}#right {float:right;width:200px;height:450px;}#bottom {clear:both;height:50px;} </style> </head> <body> <div id="page_container"><div id="banner">2</div><div id="left">3</div><div id="center">4</div><div id="right">5</div><div id="bottom">6</div> </div> </body> </html>
這樣一個頁面布局就完成了。
總結
以上是生活随笔為你收集整理的div手绘页面布局(上下左右中)的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 机器人抓取平台搭建记录（二）：KINOV
- 下一篇： jupyter运行环境安装与使用