前端教程2014版第三本即css典型范例

辛星web前端(2014版)第三本：css典型范例****************web前端下面是辛星web前端的2014年的書單：第一本：html第二本：css第三本：css典型范例第四本：JavaScript第五本：html5第六本：css3第七本：jQuery第八本：Bootstrap辛星網(wǎng)，致力于優(yōu)秀的*******************建議搜索”辛星web”或者”辛星 找到更全的資料奧。辛星，的關(guān)注****************辛星網(wǎng)地址為 ，就是”辛 的全拼辛星網(wǎng)，免費開放的個人********************與君共勉當(dāng)學(xué)習(xí)成為一種習(xí)慣，進步就是一知識，傳遞。我心永恒，始終如一前 第一節(jié)：橫向?qū)Ш?第二節(jié)：面包屑導(dǎo) 第三節(jié)：選項 第四節(jié)：列 第五節(jié)：下拉菜 第六節(jié)：滑動門特 第七節(jié)：分頁效果制 附錄：意見反 前這本書主要是介紹css在制作一些頁面的局部的時候的用法，也就本書依然是所有html碼都寫到my.html件中，css都寫到my.css文件中。做一做吧。本書是辛星web前端2014版的第三本，也就是介紹了一css的典型范例，算是典型的實戰(zhàn)部分的典型內(nèi)容了不過由于篇幅有限，我們不可能把所有的范例都拿上來，只能介紹其中幾個比較有代表性的。因為越是精美的界面，需要的代碼量就越大，如果動輒四五百行的代碼，次截圖只能截幾行，那么讀者的思路也會不清晰了，本書的定位是讀者在閱讀完畢“2014年辛星web前端”前兩本的基礎(chǔ)上，或者是有了html+css的基礎(chǔ)的時候閱讀的書籍。第一節(jié)：橫向?qū)Ш?gt;>>>>>>>>>>導(dǎo)航條學(xué)習(xí)css的最經(jīng)典的應(yīng)用就是導(dǎo)航條了，那么我們今天就做一個橫下面是最終效果之前是零基礎(chǔ)的。如果您剛剛學(xué)習(xí)，那么跟著一起把它寫出來吧我們首先在my.html中寫入如下內(nèi)然后看下效果吧我們之后將不會再修改my.html中的內(nèi)容，然后我們在同級下新建一個my.css件，我們之后的工作都在my.css完成。我們要做的第一件事就是去掉列表前面的小圓點，那么我們在中寫如下代碼此時所有的小圓點都掉了，看下效果吧我們要做的第二件事就是讓這些豎直排列的文字變成橫向排列的，那么我們可以使用浮動的方式，我們修改m.css的代碼如下：那么我們看下效果雖然它們在一行中顯示，但是它們都擠到一塊了，我們要做的第四件事就是把它們分開，通常的方式就是規(guī)定寬度，并且我們設(shè)置相應(yīng)的背景色，因此看我在.css中的操作吧：此時的效果如下那么我們的界面的效果圖位置之類的，看下面的m.css代碼：設(shè)置一下argin-left的屬性就可以了：然后它的效果如下一個比較簡單的導(dǎo)航條了。>>>>>>>>>>回顧步驟下面我就對這個步驟做成了一個表格，我們一起來看一下吧步目用到知識1寫一個列ul、2去掉列表項的小list-style-3讓列表項在一行中4設(shè)置超的字體、顏color5設(shè)置分隔margin實戰(zhàn)是最好的老師，如果您是新手，不妨自己重新做一遍奧第二節(jié)：面包屑導(dǎo)>>>>>>>>什么是面包屑地球》亞洲》中國》》區(qū)》辛星的它常用于 、商城、門戶等信息大、分類較多、側(cè)重層性的 中。下面是我從discuz中拿出來的一個那么我們寫一下自己的面包屑導(dǎo)航吧>>>>>>>>>>知識介紹在寫我們的面包屑之前，我們先介紹一下如何做三角形首先我們在my.html中寫如下然后我們在my.css中寫如下內(nèi)容大家可以注意到我們這里四條邊使用的顏色都不一樣，不過這不是重點，重點是它的寬度和高度都是0p，也就是說我們是不要內(nèi)容的，只是要一個邊框，而且它的邊框有50px那么寬。我們看下效果吧看到了吧，其實它是顯示成四個三角形的，每個三角形都有各自的顏色，其實我們這里只要左邊的那個三角形就可以了，因此我們修改.css內(nèi)容如下：那么我們看一下最終效果>>>>>>>>>>>>步驟詳解第一步首先我們在my.html中寫入如下內(nèi)容此時我們看一下效果吧margin和padding為0，這樣會顯得更緊湊一些，因此我們在my.css中書寫代碼如下：然后我們看一下效果如第三步我們要做的就是讓列表的元素左浮動，并且設(shè)置文本居中，而且需要設(shè)置一下寬度，因此我們的m.css添加下述代碼：然后我們來看下效果吧一起把大小確定下來，因此我們設(shè)置下.nav的屬性：現(xiàn)在我們可以看到效果如第五步我們就開始修改字體了，這里我們通常是修改li元素下a元素的屬性，因此我們在my.css中添加如下代碼不過這里我們需要用到絕對定位，我們知道，一個子元素要用到絕對定位，那么父元素也一定要使用定位才行，于是，我們的第六步就是簡單的在所有的li元素中加入一條posiion：relatie；這個，如下：此時的效果圖肯定是不變的，來個我們接下來要做的就是加入一個空白的三角形，由于我們上面已經(jīng)給讀者朋友們交代過如何去做三角形了，那么我們這里就做一個白色的三角形吧，但是需要注意的是，由于我們設(shè)置了該三角形的邊框是4像素，因此我們需要抬高4-(32÷2)=8個像素，而向右不廢話了，我們的第七步修改my.css代碼如下接下來我們做一個棕色三角形即可，值得注意的是它需要向左移動8個像素，我們這里可以設(shè)置它的大小為16px，其實這個大小的這里不知道大家是否注意到，我們em元素來設(shè)置的，而我們這一個白色三角形則是使用的i元素來進行設(shè)置，這種元素的作用就是作為一個裝飾作用，它本身并不用包含任何內(nèi)容21我們的第七步就是在my.css中添加如下代碼此時我們看一下效果至此，我們的面包屑就做成這樣了當(dāng)然啦，我們還是梳理一下它的思我們依然是通過如下的列表來展示這一步驟步1書寫html2去掉列表小圓點，修改3讓列表元素左浮動、設(shè)置4設(shè)置背景色、高5 美化字體、去掉的下劃6li定外屬7添加白8添加棕當(dāng)然啦，這里只是中的代碼，盡量簡化其中的步驟，不搞的那么復(fù)雜。真正的商業(yè)應(yīng)用中的代碼可能會更加復(fù)雜一些，其實，讀者朋友們也可以自行加入一些其他的樣式，來讓它更加美觀，這些都是必>>>>>>>與君共勉我始終相信一句話：因寂寞而優(yōu)秀沒錯，知識無涯，學(xué)海無邊，我們在茫茫的知識中難免都會迷茫，辛星，一個喜歡研究知識并且熱衷于知識的漢子，會進的道和您一起努力的。前進的，我會是您最堅實的后盾，相信我第三節(jié)：選項>>>>>>>>>>>說明選項卡其實還是蠻常見的，我們可以在多個選項卡之間來回切換它不僅僅是因為可以包 的信息，而且它本身也很帥下面我給大家看一下咱們偉大的網(wǎng)易的一個截較常用的呢？識做的還不夠，而且我們還沒學(xué)Javascript，動態(tài)性上還有所有欠缺不過這都不是事，我們目前能做成這個樣子跟著的腳步，您肯定會成為技牛的。>>>>>>>>>>準備工作在正式開工之前，我們需要準備兩幅，它們的主要作用是裝下面是第一幅圖，命名為b.png，首先說一下這個b.png，它是很小的，它的大4x31素，它的只有下面的2個像素是灰色的，其他都是白色的，它是作為背景然后就是c.png，我們來個特寫這個圖是干嘛用的呢？它的作用就是提供一個背景，僅此而我們的網(wǎng)頁制作過程是首先涉及出來的，然后用Photoshop或者>>>>>>>>>>>>步驟詳解第一步，我們首先在my.html中寫入如下內(nèi)我們首先看下效果根據(jù)慣例，我們的my.html是不會再動了的，我們接下來my.css中進行修屬的li元素左浮動，我們修改.csss內(nèi)容如下：此時我們看下效果須修改.in這個類，看我代碼：那么我們看下效果行高、背景吧：然后我們看一下效果圖第六步就開始設(shè)置超的字體屬性啦，我們首先需要去掉下劃線，然后把字體設(shè)置為黑色，最后我們給它加一個背景圖，如下代那么我們看一下效果可以了，因此添加一行代碼即可：此時我們看一下效果第八步我們就設(shè)置一下超的邊可以了，我們添加下面一此時我們看一下效果特殊一點。其實也很簡單，我們只需要對selected這個類進行一下設(shè)置背景那么我們看一下效果吧至此，我們的全部工作就做完>>>>>>>>>>思路梳理可能對于新手朋友們來說還是有點，我們一起梳理一下思路對應(yīng)的資源的話可以到辛星網(wǎng)去，當(dāng)然用別的也可我把整個過程做了一個表步對應(yīng)操1寫html文件，并且設(shè)置相應(yīng)的類2去掉小圓點，并讓li左浮3讓選項卡部分獨立出4設(shè)置選項卡字體、行高、背景5設(shè)置左右6設(shè)置超字體樣式、背景7設(shè)置左浮8設(shè)置超邊 設(shè)置選定狀態(tài)下的背對于有著豐富前端經(jīng)驗的人來說，這個步驟基本不用寫出來，就像刷牙、洗臉、穿衣服一樣，這個順序心里是有數(shù)的，但是對于新手來說，我還是寫出來啦。希望朋友們可以根據(jù)上述步驟敲敲代碼，并且刪除其中的某部分，>>>>>>>>>小結(jié)圣賢皆寂寞，因寂寞而優(yōu)秀前進的，辛星與您同在>>>>>>>說明在中，有很多類似于列表、文章列表之類的標(biāo)題列表的3.上面這個列表是我截取自網(wǎng)易的一部分，那么我們今天自己>>>>>>>>詳細步驟第一步我們首先在my.html中書寫內(nèi)容如下我們來看下效果此我們在m.css中書寫如下內(nèi)容：此時我們看一下效果吧第三步我們就是設(shè)置它的范圍，我們給這個表示newsdiv一個大小即可，我們在my.css中如下操作：然后我們來看一下效果個問題嗎？第四步我們就在my.css設(shè)置li素的margin就可以了，如下截圖然后我們看看效果我們只需要設(shè)置一下a元素的樣式就可以了，如下截圖：的需求添加一些更好的設(shè)置奧。>>>>>>>>>>>>思路梳理可能這是我們所有的案例中最簡單的那個了步說1書寫html2修改列表樣式，讓日期右3設(shè)置區(qū)塊大4設(shè)置li素5調(diào)整字體樣第五節(jié)：下拉菜很早之前的的導(dǎo)航條基本是沒有下拉菜單的，之后的的也有些 認為下拉菜單是過時的，不會再用了，但是，然有不少 認為下拉菜單仍然是分類的最好的形式之一。那么，今天我們就來制作一個下拉可能很多朋友們說是否需要用到Javascript，我的回答是：可以使用js，也可以不用，不過由于我們的中沒有涉及到j(luò)s，因此我們就不會使用js了。方便后面的截圖，別看只有兩項，但是html代碼中已經(jīng)略顯臃腫了在學(xué)習(xí)了Javascript后，我們還會有更好的方式去創(chuàng)建下拉菜單，畢竟Javascript這門語言博大精深。>>>>>>>>>>詳細步驟首先我們在my.html中書寫如下內(nèi)表示抱歉啦。然后我們看下效果那么第二步還是一成不變的去掉列表的前綴并且讓列表項左浮動，并且給列表項設(shè)置一個寬度吧，而且我們這里不妨全局的padding和margin都設(shè)置為0px，個別項目再進行調(diào)整，因此我們的內(nèi)容如下我們看下效果吧那么它已經(jīng)有點像下拉菜單的樣子了，那么我們接下來干什么呢？妨先去做一做，如果感覺沒有思路，就翻翻前面是怎么做的由于方便讀者朋友們的操作，我決定不使用，也沒有使用圓角。那么我們怎么裝飾呢？答案就是修改dt和dd的屬性。那么如何修改呢？我們的第三步在my.css中添加的代碼那么我們看看它的效果那么，一個問題出現(xiàn)了：如何實現(xiàn)“下拉”這個特性呢？其實這個最好的解決方案是使用Jaascriptcss中那么我們第四步就在my.css中添加如下代碼吧還有美中不足的一件事就是這個超的字體不怎么樣，件事對于讀者朋友們來說應(yīng)該是小菜一碟了把，不過我還是給出在.css中的相應(yīng)修改方式：那么我們看下效果吧那么我們就做到這樣>>>>>>>>>>思路梳理根據(jù)慣例，我們依舊是通過表格的形式來介紹一下它的制作流步說1書寫html2去掉列表前綴、列表項左浮動并設(shè)置寬3美化dtdd樣4使用偽類來捕獲鼠標(biāo)焦5 美化 中的字 6打完收由于有了上面的制作導(dǎo)航條的基礎(chǔ)，因此這個制作還是蠻簡單的，第六節(jié)：滑動門特>>>>>>>>>>>滑動門簡介滑動門不算是一門新技術(shù)，也算是一門古老的技術(shù)了，其實上一節(jié)我們講選項卡的時候，就有點滑動門的意味了，也有人認為選項卡就是滑動門。現(xiàn)的情況，那么我們可以隱分內(nèi)容，當(dāng)我們點擊或者是把鼠標(biāo)移動到某個的時候，再顯相應(yīng)的內(nèi)容?；瑒娱T特效一般來說有兩種，，獲鼠標(biāo)移動的。對于這種效果可以使用js+css做，當(dāng)然也可以使用purecss做，也就是使用純css來做，都很簡單。>>>>>>第一個效果展示這里我們先看下第一個滑動門吧，很簡單，下面是效果圖當(dāng)然點擊不同的選項會顯示不同的>>>>>>html碼第一步我們首先寫my.html文件吧，不過由于該文件較長，因此首先是第一段那么為了讓讀者朋友們看的比較清楚，這里我可以把截圖拉長了，這里需要注意的就是這里的id和上面的href屬性一定要對應(yīng)起來，那么我們看看剩下的代碼由于是分兩次截圖完成的，第一次是截取了前22行，第二次是取了從2331下面我們首先看看這個效果圖>>>>>>>>my.css文件步驟詳解我們歷經(jīng)千辛萬苦寫完了my.html開始寫my.css件吧，這里我們還是分幾個步驟去講解，寫html文件當(dāng)做第一步。我們第二步的主要工作就是讓#column面的a素先按照預(yù)期加緊湊，②有固定的寬度，不要擠到一起③設(shè)置左邊界和下邊④設(shè)置相應(yīng)字體⑤去掉超的下劃線，⑥設(shè)置文本居中雖然看起來任務(wù)很多，但是基本都是對應(yīng)一行代碼，因此我my.css中添加如下代碼此時我們來看看效果吧那么我們注意它的上邊的選項那部分，它們都是只有下邊框和右邊框奧，其實這么做的原因是我們一會兒要設(shè)置整個邊框，因此一般我們不讓邊框。么我們就必須設(shè)置它的高度，超過的內(nèi)容使用overflow：hidden；給截取掉。這里我們的高度設(shè)置為90px，寬度就是3x100+1+1+1=303了，然后我們還必須設(shè)置列表的展示樣式為無樣式的，因此我們下面在my.css中的設(shè)置就是：那么我們看下效果那么如何放到下面呢？這里就需要設(shè)置外層div，也就是#nav的屬性了，注意它的寬度和#contant的寬度是相同的，高度可以是#contant的高度加上#column的高度，也就是30+90=120px，既然數(shù)據(jù)到手，那么作為第四步，我們不妨在頂部設(shè)置一下my.css中那么我們看一下效果吧這里其實還是有點問題的，比如我們點擊“狼族”這個選項，會發(fā)現(xiàn)底部還會顯示一些內(nèi)容，這點是我們不希望看到的，也就引出了我們第五步要做的工作：調(diào)整大小和字體樣式。我們接下來要做的工作就是調(diào)整字體樣式和各種邊距了，我們要操作的主要對象就是u、i、a這三個元素，在.css中的操作：此時就是我們最終想要的效果我的任務(wù)是完成啦，讀者朋友們是否跟著也一起做了呢很多事情看起來難，真正做起來很簡單，我們不要“被紙嚇破膽”。但是很多事情看起來超簡單，但是做起來卻無處下手，我>>>>>>>>>說明其實對于滑動門，還有一種是在導(dǎo)航欄的制作上，當(dāng)我們鼠標(biāo)在導(dǎo)航欄的多個選項之間滑動的時候，會感覺到導(dǎo)航欄會捕捉我們的鼠標(biāo)焦點，然后跟著一起滑動。它做出來。其實前端和后端的學(xué)習(xí)是兩回事，當(dāng)我們看到一個比較漂亮的界面的時候，我們可以右鍵查看其htl和css源代碼，然后分析它的第七節(jié)：分頁效果>>>>>>>>>>>>說明一種有效的展示方式。我們來看一下貼吧中的分頁效果我們做一個類似的效果吧，不過我感覺我們做出來的更帥一第一步我們首先設(shè)置一下my.html中的代碼吧然后我們看一下效果吧設(shè)置一下間距，這些我們前面都做過N我就直接上代碼了：如果讀者朋友們看過“2014年辛星web前端第二本”的話，第三步我們要干什么呢？當(dāng)然是