一步步做《魅族官網》！（中）
好的小夥伴們
我們來繼續製作魅族官網哈！
請各位夥伴耐心的等待一下
開始我們今天的內容
為了方便
我們為每一部分進行了分組
開始
part1
利用無序列表標籤分成四部分
然後每一部分放上圖片以及對應的文字
效果：
代碼：
樣式：
看到這個代碼沒有
這是
CSS3中的選擇器
用於匹配父元素的子元素
具體用法
歡迎大家前去搜索
part2
左邊是一塊放一張背景圖
右面是一塊用列表標籤排列
效果：
代碼：
樣式：
part3
這一部分有一點厲害了
當我們把滑鼠放上去時
這個圖片就會變化
效果：
滑鼠放上去之後
（這是放在了第一張圖片上面）
代碼：
只截取了部分代碼
樣式：
swiper2
下面這部分
我們叫它 swiper2
因為這部分用到了 js
和上面的輪播圖一樣
利用了 swiper 插件
我們偷點懶直接借用 part3 的模塊
樣式：
修改了按鈕的位置
其他的樣式沿用了 part3
swiper 插件的 js 與 css 代碼還是原來的不變
我們需要寫一段新的 js 代碼
效果：
愣是把動態效果捷成靜態的了
這手速還可以吧！
part4
這個模塊和 part3 有點像呀！
都是滑鼠放上去會有一定的效果
效果圖：
滑鼠放上去之後
部分代碼：
樣式代碼
滿滿的都是乾貨
有沒有！！！
勤快的小夥伴們
自己試著把代碼敲一下吧！
只截取部分代碼
是因為是重複的
只要把展示的代碼複製一下就可以了
至於 swiper 插件
百度一下
就可以看見了
上面有教程的哦！
拿出手機 百度一下
沒有時間敲代碼的夥伴
不要急
轉發分享是一種美德
※新手程序員，你這樣提問題會沒朋友的！
※程序員新世界的大門，不如……
※程序員非正式「生存指南」，真心捏把汗啊！
※做一個程序媛是一種什麼體驗？
※基於JAVA學習-異常總結
TAG:java學習吧 |