【文章內(nèi)容簡介】 是 Cascading Style Sheets(層疊樣式表)的簡稱.CSS語言是一種標記語言,它不需要編譯,可以直接由瀏覽器執(zhí)行(屬于瀏覽器解釋型語言).在標準網(wǎng)頁設計中 CSS負責網(wǎng)頁內(nèi)容(XHTML)的表現(xiàn).CSS文件也可以說是一個文本文件,它包含了一些 CSS標記,CSS 文件必須使用css為文件名后綴.可以通過簡單的更改 CSS文件,改變網(wǎng)頁的整體表現(xiàn)形式,可以減少我們的工作量,所以她是每一個網(wǎng)頁設計人員的必修課. CSS是由 W3C的 CSS工作組產(chǎn)生和維護的. 什么是 DIV+CSS 網(wǎng)頁重構DIV+CSS是網(wǎng)站標準（或稱“WEB 標準” ）中常用術語之一，通常為了說明與HTML網(wǎng)頁設計語言中的表格（table）定位方式的區(qū)別，因為 XHTML網(wǎng)站設計標準中，不再使用表格定位技術，而是采用 DIV+CSS的方式實現(xiàn)各種定位。CSS是英語 Cascading Style Sheets（層疊樣式表單）的縮寫，它是一種用來表現(xiàn) HTML 或 XML 等文件式樣的計算機語言。 HTML語言自 ，不再發(fā)布新版本，原因就在于 HTML語言正變得越來越復雜化、專用化。即標記越來越多，甚至各個瀏覽器生產(chǎn)商也開發(fā)出只適合于其特定瀏覽器的 HTML標記，這顯然有礙于 HTML網(wǎng)頁的兼容性。于是 W3C組織進而重新從 SGML中獲取營養(yǎng)，隨后，發(fā)布了 XML，XML 是一種比 HTML更加嚴格的標記語言，全稱是可擴展標記語言（EXtensible Markup Language） 。但是 XML過于復雜，且當前的大部分瀏覽器都不完全支持 XML。于是 XHTML這種語言就派上了用場，XHTML 語言就是一種可以將 HTML語言標準化，用 XHTML語言重寫后的 HTML頁面可以應用許多 XML應用技術。使得網(wǎng)頁更加容易擴展，適合自動數(shù)據(jù)交換，并且更加規(guī)整。說了這么多，現(xiàn)在該說正題了——CSS。其實 CSS單獨使用除了麻煩一6 / 34點之外，我個人覺得并無明顯的優(yōu)于 HTML的好處。而關鍵就在于其與腳本語言（如 Javascript）及 XML技術的融合，即 CSS+Javascript+XML（實際上有一種更好的融合：XML+XSL+Javascript）——但 XSL，即可擴展樣式表語言相較于 CSS過于復雜，不太容易上手。自從 CSS出現(xiàn)之后，HTML 終于擺脫了雜亂無章的惡夢，開始將頁面內(nèi)容與樣式分離。說了這么多，其實，個中真諦，還得使用過后才知道，所以，現(xiàn)在就開始學習使用吧。DIV元素是用來為 HTML文檔內(nèi)大塊（blocklevel）的內(nèi)容提供結構和背景的元素。DIV 的起始標簽和結束標簽之間的所有內(nèi)容都是用來構成這個塊的，其中所包含元素的特性由 DIV標簽的屬性來控制，或者是通過使用樣式表格式化這個塊來進行控制。在可以預計的將來，table 的地位依然十分重要，于是，如 google之流依然會生意興隆。但是 div代表的是網(wǎng)絡世界發(fā)展的方向。它們一個簡單，一個先進，蘿卜白菜，您選什么都是有可取只處的．我們都很按您的要求認真服務的！div是 html(超文本語言)中的一個元素,div+css 是一種網(wǎng)頁的布局方法,這一種網(wǎng)頁布局方法有別于傳統(tǒng)的 table布局,真正地達到了 w3c內(nèi)容與表現(xiàn)相分離.div 是標簽 css 是層疊樣式表DIV+CSS高級布局已逐漸流行，但面對所謂 DIV+CSS布局的叫法讓人更為擔心，不要讓 DIV成為 Table的替代品，多層嵌套的 DIV會嚴重影響代碼的可閱讀性，活用 HTML為我們提供的標簽吧。雖然在這方面沒有什么硬性的規(guī)定,但個人認為 DIV更適用于大體框架的定位.例如我們要定義一塊頭部的區(qū)域,一般會這樣定義一個 DIV:h1這個標簽或許真正會去用的人很少,因為它顯示的字體真的是太大了,但我們是 CSSer,有什么標簽樣式不能改呢?而且它所能表達的意思就如同它原先的作用一樣明顯(大標題)我想你已經(jīng)知道怎么去用它了 ^_^ul這個標簽很多情況是用來定義導航部分的,當然也可以用 ol來代替,但導航連接沒有什么順序之分吧,所以還是用 ul來的比較確切(去掉 CSS后效果更明顯)b這個已經(jīng)不再推薦使用的標簽,在布局上卻能帶來不少的方便(因為短),雖然我7 / 34不是太贊成使用這個標簽,但有些時候(比如細小地方的布局定義)還是不錯的選擇h2這個使用最多的地方應該不是布局上,而是副標題,但有些地方需要定義欄目樣式的話,用這個標簽比較合適,欄目內(nèi)容就使用 p。8 / 34第 3 章　頁面設計 網(wǎng)站設計圖 網(wǎng)站首頁 首先網(wǎng)站首頁的布局是左右布局2x3方式，依托人物造型為左導航，中部再細分左右布局。這樣做的好處是方便用戶瀏覽，并且承載的信息量更直觀的展現(xiàn)在用戶面前。步驟:1,新建1002*1080的畫布,背景為白色2,制作導航條：新建圖層，將導航條鏈接文字輸入進去,放在頭部圖片下端, 文字顏色用黑色，12號。3,制作廣告位：直觀的讓用戶看到商店促銷信息4，將準備好的圖片，放在花品展示，羅列下來，作為產(chǎn)品展示位； 5，將準備好的店鋪信息，放在最新信息下面，羅列下來，作為網(wǎng)站宣傳；6，將準備好的產(chǎn)品圖片素材，放入最新信息的下方，描邊，1像素，灰色，然后附上與店鋪相關聯(lián)的電話信息；7，重覆步聚16，依次羅列商品，一行3個，共2行；8，新建圖層，用選區(qū)工具拉出1002*76矩形框；并在其下面輸入版權信息，首頁效果圖完成； 9 / 34 最新活動頁面效果圖設計 首先最新活動的頁面布局也是左右布局，分為左導航和右面部分的花品介紹。步驟:1,新建1002*1080的畫布,背景為白色2,新建圖層，將準備好的LOGO放入頂部,構成頭部；3,制作249x586像素的圖片放置網(wǎng)站的左部分：與右面的對齊制作706x630像素的花品圖片并在下方附上花品的商品價格以及促銷價格還有網(wǎng)站的購買價格，以及花品花語。4，新建圖層，用選區(qū)工具拉出1002*76矩形框；并在其下面輸入版權信息，最新活動信息頁面效果圖完成；10 / 34 花品展示頁面效果圖設計 首先花品的展示頁面布局也是左右布局，分為左導航和右面部分的花品介紹。并且花品展示頁面更為用戶分類好了花品。更方便用戶在特定的日子選定適當?shù)幕ㄆ?。步驟:1,新建1002*1080的畫布,背景為白色2,新建圖層，將準備好的LOGO放入頂部,構成頭部；3,制作249x586像素的圖片放置網(wǎng)站的左部分：與右面的對齊制作706x630像素的花品圖片并在下方附上花名，材料、包裝、網(wǎng)站的購買價格，以及花品花語。4，新建圖層，用選區(qū)工具拉出1002*76矩形框；并在其下面輸入版權信息，花品展示頁面效果圖完成；11 / 34 關于我們頁面效果圖設計 首先頁面布局是左右布局，左半部分是以學校操場背景，依托東軟的校園風景更加貼近網(wǎng)站的主題以及友好度。步驟:1,新建1002*1080的畫布,背景為白色2,新建圖層，將準備好的LOGO放入頂部,構成頭部；3,制作249x586像素的圖片放置網(wǎng)站的左部分：與右面的對齊制作706x630像素的花品圖片并在下方附上花名，材料、包裝、網(wǎng)站的購買價格，以及花品花語。4，在這個頁面主要列出了我們網(wǎng)站的宗旨，以及網(wǎng)站的概念。5，新建圖層，用選區(qū)工具拉出1002*76矩形框；并在其下面輸入版權信息，文具效果圖完成；12 / 34 花品展示頁面效果圖設計首先頁面布局是左右布局，左半部分是以少女躺在草坪上為背景，給用戶一種直觀的親切感和親心感，是用戶在瀏覽網(wǎng)站的同時有一種清新舒暢的感覺。更以白色為背景，使整個頁面都感覺到干凈整齊而又舒適。步驟:1,新建1002*1080的畫布,背景為白色2,新建圖層，將準備好的LOGO放入頂部,構成頭部；3,制作249x586像素的圖片放置頁面的的左部分：右半部分整齊的列出3行3列并有序的安排好分類，根據(jù)