html靜態網頁製作中div+css的淺運用
在基地實訓的這些日子，對於javaweb靜態網頁佈局也有了些理解，博主在此與大家分享一下這幾天總結的經驗。
當然博主算是相對的初學者（畢竟大學前三年混過來的），寫程式碼也要用dreamweaver輔助，求不噴，對於我的理解指點就好。
使用html製作靜態網頁首先要對一個網頁的佈局有大體的瞭解。
一個網頁就好比一個人，主要的無非就是頭、身體。頭就是個標題，給人以明示的作用，一眼望去就能認出你是誰，沒有頭大家都一樣，既不美觀也不好識別；身體就是內容，一個人或胖或瘦或高或矮，全在於身體，而古語有云：“匙桃不上個村夫，文墨胸中一點無。曾把空虛揣出骨，惡聲贏得滿江湖。”這也充分說明一個人的身體就是一個人的內涵，美的所在，值得探索的地方。（這裡就談最簡單的靜態網頁製作）所以一個網頁也包括頭和身體，也就是<head>和<body>。
而<head>和<body>只是搭建了一個網頁的框架和內容，這樣的網頁單調、醜陋且無生機，好比在ie開啟一個記事本。所以為了美我們就要去是修飾網頁。
面對簡單的靜態網頁佈局，我們完全可以在.html檔案中直接新增修飾，但是面對龐大的繁重的靜態網頁佈局，完全在.html檔案中進行新增修飾，這樣只會增加麻煩；又如果是在<head>中新增修飾，會使整個程式碼頭的分量很重，變成“大頭鬼”，這樣程式碼也會顯得冗雜並且十分不現實。所以我們引入.css檔案來輔助我們修改裝飾靜態網頁佈局，極大的便利了我們靜態網頁佈局的流程。
所謂的css就是通過找到我們事先在程式碼中做好的標記，在css上對應進行統一的佈局修改，下面我們就來簡單談下css的運用：
1、css一般由選擇符（selector），屬性（property），屬性值（value）三部分組成。
2、css的基本語法結構：selector｛property1:value;property2:value;...｝
3、選擇符的作用是在文件中選擇使用樣式的元素和內容，簡單說就是對應html中相應的標記，選擇符主要分為通配選擇符（*），型別選擇符（p）,ID選擇符（#），類選擇符（.）,包含選擇符（上下級用空格隔開），擇符分組（一次定義幾個選擇符的樣式）。
4、css的屬性：（1）字型屬性：字型選擇font-family；字型大小font-size，字型樣式font-style，字型加粗font-weight，字母小寫轉大寫font-variant，字型綜合font；
（2）文字屬性：文字顏色color，文字修飾text-decoration，文字水平對齊text-align，文字垂直對齊vertical-align，文字書寫方向direction，縮排：text-indent，行高：line-height，空白：white-space；
（3）背景屬性：背景顏色：background-color，背景圖片：background-imge,背景圖片重複：background-repeat，背景圖片位置：background-position，背景圖片附件屬性background-attachment；
（4）邊框屬性：邊框樣式：border-style（top，right，bottom，left），邊框寬度：border-width，邊框顏色：border-color；
（5）內邊距屬性：padding；內邊距屬性：margin；
（6）css未訪問連線：link，已訪問連結：visited，滑鼠懸停連結：hover，啟用連結：active；
（7）css佈局屬性：定位方式：position，層疊順序：z-index，浮動屬性：float，清除浮動：clear，超出內容：overflow，顯示：visibility
（這裡博主要插一句，在寫css時，要注意格式和所對應的選擇符，而且屬性間的分號不要忘，尤其是最後的，博主也是經常馬虎出錯，檢查也是比較麻煩的。）
既然我們引入了css來輔助我們佈局通過程式碼編寫的的靜態網頁，如果我們的程式碼雜亂無章，毫無標記，就算用css來修飾佈局也會很繁瑣，修改起來也十分麻煩，所以我們這時又引入了層元素<div>的使用，來規劃我們的程式碼方便了理解，簡化了工作量，節省了時間。
對於<div>，即為頁面的分割元素，可以理解為div將身體分為不同部分，例如手，腳，胸等，所以<div>中,可以包含文字內容，圖片，表單等。通過<div>將不同的元素移動到頁面的任意位置，實現簡單粗略的規劃和佈局，而且也可以建立多個<div>,這些<div>可以並列，也可以巢狀，甚至可以重疊。
<div>的用法也比較簡單：<div>內容</div>，以此實現分層，為了區分不同的<div>,這裡又引入了<div>的屬性：
1、標記屬性：id；2、標題屬性：title；3、類屬性：class；4、制定語言屬性：lang；5、文字顯示方向屬性：dir；6、定義級聯樣式屬性：style；7、對齊屬性：align；8、取消自動換行屬性nowrap（example：<div id=" "></div>)。
由於<div>中控制元素呈現的屬性很少，而且不能定義<div>的寬度和高度，所以就更依賴於div與css的聯用來實現網頁佈局的呈現。
然而不是引入div+css就可以做好頁面的佈局，對於一個靜態網頁的佈局，一定要在書寫程式碼前勾勒出所製作的網頁實際的大體佈局，做好框架分好模組，列出條理，理清思路，然後再開始寫程式碼，進而利用div+css輔助，這樣才會使靜態網頁的製作更簡潔高效。
以上便是博主做的小小總結，希望各位看官有什麼異議可以給我補充，不吝賜教。
相關推薦
html靜態網頁製作中div+css的淺運用
在基地實訓的這些日子，對於javaweb靜態網頁佈局也有了些理解，博主在此與大家分享一下這幾天總結的經驗。 當然博主算是相對的初學者（畢竟大學前三年混過來的），寫程式碼也要用dreamweaver輔助，求不噴，對於我的理解指點就好。
html-css練習題（天天生鮮靜態網頁製作）
先來看一下效果圖： 主要要求： 注：最下面有素材連結地址可以自己練習使用 /* 1.login最外側盒子設定高29 背景顏色#f7f7f7 下邊框1 */ /* 1.1 login內容部分
HTML靜態網頁css成品DW大學生網頁作業制作畢業設計
大學生 src 網頁 img p s http 制作 mark title HTML靜態網頁源碼css成品DW大學生網頁作業制作畢業設計+2425691680 HTML靜態網頁css成品DW大學生網頁作業制作畢業設計
Html靜態網頁下載—Teleport Pro 1.68 官方原版
apple pan 進程 搜索網站 得到 ava span 靜態 地址 Teleport Pro 1.68 官方原版+有效註冊碼 – 下載整個網站 簡介 Teleport Pro由美國Tennyson Maxwell公司開發，曾被PC Magazine評為”編輯選擇
ZBLOG系統PHP程序無法生成純HTML靜態網頁導致的2大缺陷
ZBLOG php 數據庫 最近在研究ZBLOG系統，其中有ASP版本，可以搭配ACCESS和MS-SQL數據庫，也都有生成HTML純靜態網頁文件的插件，雖然對於ZBLOG2.1-2.2的ASP版本來說，靜態化插件沒有及時更新，導致提交網頁後在後臺無法跳轉的小問題，但還是可以用的，目前來說，除了在
Html靜態網頁的實現——（二）之傻瓜式教程
上次說到Html5中無法換行的問題 <body> <p>把文字輸入到這裡</p> <p>把文字輸入到這裡</p> </body> 看看執行結果 這下是不是就換行了 格式：<p a
網頁製作中遇到的一些問題及解決方案
1、重複定義：在css中前面定義了<a>標籤的字型顏色之後，如果後面要修改某個<a>標籤的字型顏色，css中該怎麼寫？（未解答） 2、自己在做的頁面中，對於頁碼的實現，需要有跳轉的頁碼框，當瀏覽器顯示的頁面中頁碼框不能輸入時，該怎麼做：提升父級層級，
HTML-學網頁製作-盧磊-專題視訊課程
HTML-學網頁製作—102人已學習 課程介紹 HTML-學網頁製作課程收益 熟練掌握html的常用標籤及使用講師介紹 盧磊更多講師課程 十年以上開發經驗,jdk從1.4
tomcat部署簡單的html靜態網頁
首先電腦上（無論Windows還是linux系統）應該裝好java和Tomcat，並設定好它們的環境變數。 設定完成後，啟動Tomcat ，開啟瀏覽器輸入網址：http://ip:port，如果出現相應的頁面，說明Tomcat安裝成功，可以繼續下面的配置。 在\co
HTML進階：通過DIV+CSS進行佈局
為什麼要使用這種佈局？ 傳統表格的佈局缺陷佈局固定不夠靈活。 什麼是Div？ 它是一個html標籤，一個塊級元素（單獨顯示一行，即如果後面還有元素，將會在下一行顯示）。主要用途是結合CSS實現頁面的佈局。 什麼是Span？ 它是一個html標籤，一個內聯元素（顯
HTML靜態網頁設計
第一週：HTML寫靜態網頁一、HTML理論介紹及常用格式1.HTML主體格式基本結構<!DOCTYPE html><html><head><mate charset="utf-8"/><title>標題</ti
網頁設計中利用CSS實現背景圖片平鋪的技巧
我們在進行網站的設計製作過程中，使用css來針對背景圖片進行設定，其實就與傳統的做法一樣十分簡單方便。不過，相對於傳統的一些操作方式，css可以提供更多的可控選項，我們先了解一下一引起最基本的設定圖片的方法。 css程式碼如下： #content { border:1
大學生簡單網頁div+css網頁純手寫代碼制作html靜態頁面切圖排版
靜態頁面 靜態頁 watermark 簡單 ima 大學生 ges 51cto mar 了解下下+2425691680 大學生簡單網頁div+css網頁純手寫代碼制作html靜態頁面切圖排版
我學的第一個靜態網頁HTML/CSS
當初我是一個零基礎的小白，無意間就在騰訊課堂上看到了一個web前端網頁製作的課堂，然後就深深的愛上了這炫酷的畫面。當初連html，css都不知道的人，現在終於能做出一個完整的靜態頁面了，我就照著我學校的官網寫了一個模板，不過還沒買自己的域名和空間，要是能上線就叼炸天啦！給大家
web.xml中配置訪問資源URL/時無法訪問.html、.jsp、.js、.css等靜態資源時的解決方案
在web應用中，我們在web.xml配置URL路徑問題時，經常這樣配置：<servlet-mapping> <servlet-name>spring-MVC</servlet-name> <url-pattern>/<
html中div使用CSS實現水平/垂直居中的多種方式
CSS中的居中，在工作中，會經常遇到。它可以分為水平居中和垂直居中，以下是幾種實現居中的方式。 git 檢視原始碼 配合線上預覽，效果更佳 以下例子中，涉及到的CSS屬性值。 .parent-frame { width: 200px; height: 200px;
解決在用HTML+DIV+CSS編寫網頁時，各個瀏覽器的相容問題
一、解決層居中的問題 一般我們在瀏覽網頁的時候，都會看到不同瀏覽器開啟的同一個頁面會出現不一樣的佈局問題。其實這是每一個初學HTML的程式設計師長碰見的問題。 那麼給怎麼解決中瀏覽器不相容的問題呢？ 首先，我們一般再用DIV+CSS程式設計時，一般會用margin：0 au
《基礎網頁製作》一個超簡單的div佈局，製作靜態網頁很簡單
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Div佈局</title> </head> <body> <!-整個div佈局大小-
HTML、CSS、JavaScript網頁製作從入門到精通
這大概是我第一次寫部落格吧，自從大一開始寫程式碼，至今也有5年的光景了，很遺憾並沒有養成寫部落格的習慣，一方面因為我平時很少有階段性的總結，另一面也確實不知道該分享些什麼。歸根結底還是功夫不到家，沒有一些讓自己驕傲的階段性成果。既然要寫，還是決定從讀書筆記開始，
製作html網頁時如何使用CSS使背景圖片拉伸（填充）
答案：background-size: cover; 例1： <!DOCTYPE html> <html lang="en"> <head>