網站制作公司（博納網絡）前端設計工程師在前篇文章中，分享過網頁在制作過程中對圖像處理的方法，本文我們網頁設計師將通過實例的形式幫助各位網頁制作愛好者設計css的圖片樣式，以提高實戰(zhàn)技法和技巧，快速理解css圖片屬性的應用。
一、網頁制作之設計圖文混排
本實例進步鞏固圖文混排方法的使用，并把該方法運用到實際的網站制作中。示倒介紹中國的傳統(tǒng)節(jié)日為題村，利用圖文混排的方法，實現頁面的圖文效果。整個網頁設計效果如下圖所示。
網頁制作圖文混排實際操作步驟如下：
第1步，啟動Dreamweaver，新建文檔，保存為index.html。
第2步，構建網頁的整體結構。第一個<p>標簽的內容是網頁的首段，在首段中用ispan/標簽設置了首字下沉效果。然后是各個分標題，每個分標題都由兩個<p>標簽、個<img>標簽組成．分別是分標題中的標題、圖片和段落內容。具體代碼如下：（為了各位能更好的熟悉制作步驟，并養(yǎng)成一個自己動手的習慣，今后本站在次類型文章進行分享時，凡是涉及到代碼編輯部分一律以截圖方式展現）。
第3步，規(guī)劃整個頁面的基本顯示屬眭：為網頁選擇個合適的背景顏色，設置<p>標簽的字體大小，電就是所有段落的字體大小，并設置首字下沉效果。
此時的顯示效果如圖538所示。
第4步，考慮到整體的圖文排版，采用左右的形式，所以圖文混排的css分為左右兩段，分別定義為img.picl和img.pic2，不同的是一個在左邊一個在右邊。此時的顯示效果如圖5.39所示。
網頁制作圖文混排效果圖5.39圖片處于左右兩邊第5步，設置正文的文字，文字本身不需要做太多調整，但是每個段落的標題同樣是分為左右兩側的，要根據圖片的位置做出變化。所以小標題也和圖片樣進行左右兩個css設置，分別為titlel和title2。
從代碼中可以看出，兩段標題的代碼不同就在于文字的對齊方式，當圖片應用img. picl而位于左側時，標題則使用titlel，電相應地在左側。當圖片應用img. pic2而位于右側時，標題則使用title2．電相應地在右側。p.content設置了段落正文的樣式。本例主要是通過圖文混排的技巧，使文字和圖片左右應用兩種不同的對齊方式，采用兩組不同的css類樣式標記，合理地將圖片和文字融為體。
二、網站設計經驗之設計圖片布局
深圳網站設計公司前端工程師模仿淘寶網上的圖片布局，進步展示了圖片與文字之間混排和用圖片布局的方法，演示效果如圖5 40所示。
網站設計效果圖5-40設置標題樣式的演示效果
【操作步驟】
第1步，啟動Dreamweaver，新建文檔，保存為index. html.。
第2步，構建網頁結構。在本例中，首先用<div>標簽設置container容器，在此頁面中，所有內容分為4個部分，每個部分用one和two分為兩塊，one中又分為left和right兩部分，分別定義圖片和下邊框，在two中也分為left和right兩部分．分別定義了圖片和文字列表．如圖5-41所示。
網頁設計效果圖5-41網頁內容部分截圖以下為部分代碼，其余代碼請瀏覽本節(jié)案例示例源代碼。
此時的顯示效果如圖5 42所示，可以看到，網頁的基本結構已經搭建好了，但是由于沒有進行css樣式設置，界面并不美觀。
網頁設計實操效果圖5-42構建網頁的基本結構第3步，定義同頁基本屬性以及container容器的寬度和左側內邊距。
以上代碼中，*{margin: Opx，padding:Opxl表示將網頁中所有標簽的padding和margin都設定為Opx，{可以理解為個通配符，指的是所有標簽。
第4步，定義第部分內容中的one部分，這部分為one. left和one. right。
left中的內容包含了個<img>標簽，left類樣式定義了其浮動為左浮動right中沒有實際的內容，只是在right類樣式中定義了底部邊框，此時顯示效果如圖5-43所示。
網站設計效果圖5-43 0ne部分的css設置第5步，第4步實現了one部分的設置，接下來進行two. left和two. right部分的設置。
two. left與one. left樣，都包含了一個<img>標簽．同樣將圖片設置為左浮動。two. right標簽中包含了一個<h3>標簽和一一個<ul>標簽，分別定義了標題和文字列表。另外，在left. img中定義了圖片樣式。此時的顯示效果如圖5-44所示。
圖-44 two部分的css設置從圖5-44中可以看出，頁面的基本樣子已經建好，最后完成標題和文字部分的樣式設置。
第6步，定義<h3>標簽的標題樣式和<ul>標簽的列表樣式。
在<h3>標簽中定義了標題的字體大小和顏色，并設置了底部補白。<ul>標簽定義了文字列表，關于對<ul>標簽的樣式定義會在后面的實際操作案例中詳細介紹。最終的顯示效果如圖5-45所示。
深圳網站設計前端工程師關于圖文混排實際操作經驗以及步驟的分享，本文就寫到這里，喜歡本站敬請持續(xù)關注。我們會在下期的文章中分享網頁設計時“多圖水平排列”
