一步步做 魅族官網！中

好的小夥伴們

我們來繼續製作魅族官網哈！

請各位夥伴耐心的等待一下

開始我們今天的內容

為了方便

我們為每一部分進行了分組

開始

part1

利用無序列表標籤分成四部分

然後每一部分放上圖片以及對應的文字

效果：

代碼：

樣式：

看到這個代碼沒有

這是

CSS3中的選擇器

用於匹配父元素的子元素

具體用法

歡迎大家前去搜索

part2

左邊是一塊放一張背景圖

右面是一塊用列表標籤排列

效果：

代碼：

樣式：

part3

這一部分有一點厲害了

當我們把滑鼠放上去時

這個圖片就會變化

效果：

滑鼠放上去之後

（這是放在了第一張圖片上面）

代碼：

只截取了部分代碼

樣式：

swiper2

下面這部分

我們叫它 swiper2

因為這部分用到了 js

和上面的輪播圖一樣

利用了 swiper 插件

我們偷點懶直接借用 part3 的模塊

樣式：

修改了按鈕的位置

其他的樣式沿用了 part3

swiper 插件的 js 與 css 代碼還是原來的不變

我們需要寫一段新的 js 代碼

效果：

愣是把動態效果捷成靜態的了

這手速還可以吧！

part4

這個模塊和 part3 有點像呀！

都是滑鼠放上去會有一定的效果

效果圖：

滑鼠放上去之後

部分代碼：

樣式代碼

滿滿的都是乾貨

有沒有！！！

勤快的小夥伴們

自己試著把代碼敲一下吧！

只截取部分代碼

是因為是重複的

只要把展示的代碼複製一下就可以了

至於 swiper 插件

百度一下

就可以看見了

上面有教程的哦！

拿出手機 百度一下

沒有時間敲代碼的夥伴

不要急

轉發分享是一種美德

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！