Div標籤,我們稱為層,div是塊狀元素,結合css能夠很好的進行網頁版面
我們先來寫一段div+css的程式碼,讓大家看下div是什麼樣的
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> div{ width:300px; height:300px; border:1px solid red } </style> </head> <body> <div></div> </body> </html>
上面的一段程式碼,然後我們運行一下,在網頁當中顯示一個寬高各位300像素,邊框為紅色的正方形
然後我們來如何佈局網站首頁,首頁的樣子是這樣的
上面一塊,作為輪播圖
下面一塊是導航,然後是內容部分,內容部分分為左右倆塊,然後最下面以塊,我們來看看是如何製作的,製作網頁,我們要有html基礎與css的基礎,比如id選擇器與類別選擇器等
在使用div+css進行網頁佈局,我們要使用float,如果有小伙伴們不知道這塊的知識,可以去參考php中文網上面的css的視頻教程或者文字教程,如上所述,我們要做的例子
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{margin:0;padding:0;} #div{ width:100%; height:300px; background:#f69; } #daohang{ width:100%; height:50px; background:#f60; } ul li{ list-style:none; float:left; line-height:50px; margin-left:130px; } #bdy{ width:100%; height:500px; background:green; } #left{ width:30%; height:500px; background:red; float:left; } #right{ width:70%; height:500px; background:#ccc; float:left; } #but{ width:100%; height:200px; background:#f60; } </style> </head> <body> <div id="div"> 轮播图 </div> <div id="daohang"> <ul> <li>公司首页</li> <li>公司新闻</li> <li>产品介绍</li> <li>加盟领航</li> <li>联系我们</li> <li>在线客服</li> <li>驾车路线图</li> </ul> </div> <div id="bdy"> <div id="left">公司公告</div> <div id="right">公司新闻</div> </div> <div id="but">底部信息</div> </body> </html>
其實程式碼並沒有多少,也很簡單,但是你們注意margin與padding 的區別這個還是很重要的,margin ,邊界與邊界之間的距離,padding 內容與邊界之間的距離,有很多朋友說css裡面的屬性記不住,對於這塊,我覺得你記不住,是因為你練習地少了,只有自己多寫多練,我個人覺得這樣才會記得!