注釋:<div> 元素常用作布局工具,因為能夠輕松地通過 CSS 對其進行定位。
這個例子使用了四個 <div> 元素來創建多列布局:
<html> <head> <style> #header { background-color:#1aaa11; color:white; text-align:center; padding:5px; } #nav { line-height:30px; background-color:#eeeeee; color:#faaaff; height:300px; width:100px; float:left; padding:5px; } #section { width:350px; float:left; padding:10px; } #footer { background-color:#166611; color:white; clear:both; text-align:center; padding:5px; } </style> </head> <body> <div id="header"> <h1>天華信息教育</h1> </div> <div id="nav" > 第一組<br> 第二組<br> 第三組<br> </div> <div id="section"> <h2>這是標題</h2> <p> 這是內容 </p> <p> 這是內容 </p> </div> <div id="footer"> 天華信息教育 </div> </body> </html>
HTML基礎教程:div元素實現布局
一點都不會程序也不懂程序,也從來沒有接觸過程序語言,能不能做前端網頁布局,答案是肯定的,CSS層疊樣式是一塊不同于程序且與程序相似的一種語言。說它與程序相似因為它也像程序代碼一樣需要寫且是英文一般的代碼等特性。說它不同于程序是因為CSS代碼不像程序需要通過服務器解釋與處理,而是直接由瀏覽器解釋而直接呈現給瀏覽用戶。CSS是比較有規律非常簡單且容易掌握的一種語言。您只需要記住掌握這些規律那就恭喜您已經會CSS。CSS有什么規律?第一就是有屬于他自己的名稱,也叫選擇器,第二就是要有他的屬性類似這種格式{key:value}。第三要把css名稱放到html代碼中,要想學會html就是多看別人的網頁源代碼總結經驗,了解html基礎可以多看看html相關教程,尤其是新手,一定要自己動手制作DIV與CSS頁面,遇到問題要多問(問答)及多查看資料,多做筆記。進步成為高手的關鍵是自己動手多制作頁面。在網頁html中查看源代碼會看到很多代碼,包括html標簽、css的標簽等。
附?div與css布局代碼:
用瀏覽器打開效果圖:
么是DIV?
DIV是層疊樣式表中的定位技術,全稱DIVision或叫做劃分。在網站制作中DIV元素一般是用來為HTML文檔內大塊(block-level)的內容提供結構和背景的元素。當使用DIV+CSS布局的時候, 主要把它當做盒子然后把需要的文字,圖像等內容放在DIV標簽之中,它可稱作為“DIV block”,或“DIV element”或“CSS-layer”,或干脆叫“layer”。所以把它稱作“層次”,或者直接就叫一段在 DIV 中的 HTML。
什么是CSS和CSS3?
CSS是一種用來表現HTML(標準通用標記語言的一個應用)或XML(標準通用標記語言的一個子集)等文件樣式的計算機語言。CSS不僅可以靜態地修飾網頁,還可以配合各種腳本語言動態地對網頁各元素進行格式化。
CSS3是CSS2的升級版本,3只是版本號,它在CSS2.1的基礎上增加了很多強大的新功能。 目前主流瀏覽器360、chrome、safari、firefox、opera等都支持CSS3絕大部分功能,IE10以后也開始全面支持CSS3了。CCS3可以讓使用者能更加快速地訪問互聯網。在CSS3語言下,不需要圖片,僅用文字即可。這讓網頁的文字在變得越來越漂亮的同時,不會影響瀏覽速度,并且還能被搜索引擎搜索。
現在國內用H5+css3做的網站越來越多,功能、交互等都給用戶體驗帶來了很大的提升。在移動端,微信朋友圈的各種H5游戲更是把H5推向了高峰。H5+css3就是發展的趨勢。
*請認真填寫需求信息,我們會在24小時內與您取得聯系。