于企業(yè)或個人來說,原創(chuàng)制作一個網(wǎng)站需要很多時間,先用 Photoshop 做網(wǎng)頁設(shè)計,接著用 DIV+CSS 來寫編寫HTML代碼,最后可能還要程序開發(fā)才能完成,不僅花費時間長,成本也是比較昂貴的。
如果你缺少設(shè)計或前端技能,但又想快速完成一個網(wǎng)站,那么我們建議你直接選擇網(wǎng)站模板,比如靜態(tài)類的 HTML/CSS 網(wǎng)站模板,使用他們可以省下設(shè)計、前端這個階段的工作,而程序開發(fā)是可選的,只有需要后臺才需要程序編寫,不需要的話也可以直接替換模板的文字、圖片就行。
今天我們整理了一些優(yōu)秀免費無版權(quán)限制的 HTML5 網(wǎng)站模板,有不同的類型,比如作品展示用的模板適合攝影師、設(shè)計師、企業(yè)產(chǎn)品展示等。
注:小編已經(jīng)打包好,下載模板地址在文章底部哦!!
New Age
這款是 APP 產(chǎn)品宣傳官網(wǎng)模板,現(xiàn)在有很多 APP 程序員自己開發(fā)了一些有趣 APPs,但是不懂設(shè)計或沒時間來制作網(wǎng)站,那么這款模板就可以用上啦,使用Bootstrap 框架搭建,手機端完全兼容。
在線演示
Howdy(個人簡歷式網(wǎng)頁模板)
想做一份創(chuàng)意個人簡歷嗎?請不要錯過 Howdy 這款個人簡歷模板,設(shè)計、動畫、實用性全有了!設(shè)計達人網(wǎng)小編推薦哦!
同時推薦:22款高端個人簡歷模板 含PSD或HTML版本下載
還有技術(shù)展示數(shù)據(jù)表,增加簡歷描述的可視化,HR 看后一定會加分哦。
在線演示暫無,請下載源文件查看 DEMO ~~(建議下載查看,動畫好帥)
Ethereal
Ethereal 模板有意思,是直接向左右滾動來查看網(wǎng)頁,界面也的設(shè)計也很棒,喜歡個性獨特風格的朋友不要錯過。
在線演示
Creative
一個工作室類的單網(wǎng)頁模板,有了個,就算你是個人,也可以用他來做個工作室一樣的網(wǎng)站,用于宣傳你的業(yè)務(wù)也是不錯的。
在線演示
Megakit
這個免費模板可以說是超值哦,一共13種類型頁面,每個頁面設(shè)計都不簡單哦,頁面有 Service,About, Team, Events, FAQ, Contacts, Corporate, App Landing, Portfolio, Coming Soon等等,建議下載下來看 DEMO。
在線演示
Story
Story是一款左右布局為主的列表展示頁以及作品展示 ,適用于作品介紹。
同時還支援當前頁面彈窗來展示作品圖片,很適合用來放自己的作品上去。
在線演示
Agency
在線演示
Karmo
超時尚的 Protfolio 網(wǎng)頁模板,Bootstrap 模板構(gòu)建,布局新穎,再加上流暢的動畫效果,Nice!
有4個主要頁面,分別是:Home / Services / SingleProject / Contact.
免費有這樣的質(zhì)量,真的超值哦!
在線演示
KapukAlas
響應(yīng)式模板 KapukAlas,首頁效果不錯,但目前只有首頁,如果有子頁面就更好了!
在線演示 (HTML演示請下載源文件方可查看)
AitOnepage
這款主師來自 keenthemes 出品,質(zhì)量很棒,流行的單頁面設(shè)計,布局有 Aabout,Products, Pricing, Work, Service 和 Contact頁面。
在線演示
Magnet
想展示作品集,并且喜歡簡約設(shè)計感?嘿嘿~ 這個經(jīng)典簡約模板是不二之先啊。
在線演示
頭條不給放網(wǎng)盤地址,需要下載的的,私信我!
年H5學(xué)習寶典——網(wǎng)頁設(shè)計師必備,平面設(shè)計轉(zhuǎn)型的人好好學(xué)習、天天向上的好去處。來不及看可以先分享以便保存,隨時隨地瞄一眼,發(fā)現(xiàn)原來還有這么多東西可以學(xué),絕對是一針能讓我們復(fù)活的雞血~
注:以下網(wǎng)站合集和市面各種200+個工具的不負責任羅列不一樣,每個網(wǎng)站都是筆者親測實用非常有必要學(xué)習/使用的。
【行業(yè)新知類】
HTML和CSS入門
https://cn.udacity.com/course/intro-to-html-and-css--ud304/
谷歌在Udecity開設(shè)的中文視頻課程,設(shè)計師培養(yǎng)Web開發(fā)思維/前端入門必備!現(xiàn)在設(shè)計師不學(xué)點網(wǎng)頁知識,大概會被時代拋棄的吧?和國內(nèi)很多按部就班的慕課不同,谷歌的課程設(shè)計靈活——集中精力一天就能知道個大概。
響應(yīng)式網(wǎng)站設(shè)計基礎(chǔ)
https://cn.udacity.com/course/responsive-web-design-fundamentals--ud893/
谷歌在Udecity開設(shè)的中文視頻課程,響應(yīng)式設(shè)計入門與進階必備(需先了解《HTML和CSS入門》)——如果你足夠聰明,一下午就能學(xué)完。
站酷網(wǎng)文章
http://www.zcool.com.cn/articles/
各種設(shè)計相關(guān)的案例制作教程與創(chuàng)作經(jīng)驗,設(shè)計師每日閑逛學(xué)習必備。
UI中國文章
http://www.ui.cn/exp.html
各種網(wǎng)頁設(shè)計相關(guān)的制作教程與創(chuàng)作經(jīng)驗,交互設(shè)計師每日閑逛必備。
眾成翻譯
http://www.zcfy.cc/
實時收錄并翻譯國外各種前沿的Web開發(fā)知識,Web設(shè)計師&開發(fā)者與時俱進的好去處——因為有很多作者是自發(fā)翻譯的,行業(yè)資訊更新速度極快,而且內(nèi)容優(yōu)質(zhì)。
Smashing Magazine [英文]
https://www.smashingmagazine.com/
世界一流的設(shè)計博客,包含各種網(wǎng)頁設(shè)計相關(guān)的創(chuàng)作經(jīng)驗、行業(yè)資訊——做網(wǎng)頁設(shè)計的,估計沒聽過它的名字也買過它的書?
【H5廣告類】
數(shù)英網(wǎng)
http://www.digitaling.com
數(shù)字廣告資訊,包括廣告案例收集、創(chuàng)作經(jīng)驗分享、案例下載等服務(wù)——H5案例豐富。
H5案例分享
http://www.h5-share.com/
國內(nèi)行業(yè)H5精品案例的合集(移動廣告為主),包括預(yù)覽、說明與技術(shù)講解,更新及時——移動端比較方便。
iH5互動大師
http://www.ih5.cn/
使用iH5制作的精品案例合集(移動廣告為主),網(wǎng)站包含H5頁面制作工具、案例教學(xué)、在線咨詢等服務(wù)。
哇呸網(wǎng)
http://thewap.cn/
國內(nèi)行業(yè)H5優(yōu)質(zhì)廣告合集(移動為主),分類齊全。
H5doo
http://www.h5doo.com/
國內(nèi)行業(yè)H5優(yōu)質(zhì)廣告合集(移動為主),優(yōu)勢在于移動版可以直接點擊預(yù)覽,不需掃碼——PC端可以用開發(fā)者工具打開實現(xiàn)移動效果。
Sizmek
http://showcase.sizmek.com/
世界行業(yè)優(yōu)質(zhì)Web廣告的合集(PC端為主),分為HTML5和Flash等類別,對于網(wǎng)頁嵌入廣告的樣式參考很有幫助。
【H5網(wǎng)站&特效篇】
PIXID
https://www.iiiimg.com/
世界HTML5優(yōu)秀網(wǎng)站合集(PC端為主),尤其是日系風格的網(wǎng)站,經(jīng)常看會發(fā)現(xiàn)很多寶藏。
Codepen [英文]
http://codepen.io/
各種拽酷炫狂的網(wǎng)頁特效實例與源碼,勾搭世界一流網(wǎng)頁設(shè)計師和開發(fā)者的寶地——見識一下,絕不會后悔。
HTML5SHOWCASE [英文]
http://html5-showcase.com/
世界HTML5優(yōu)秀網(wǎng)站合集(PC端為主),分類齊全,尤其是Web應(yīng)用——如果你還不知道PWA(漸進式應(yīng)用)這個最近這么火的概念,可以先去pwa.rocks逛逛。
Codrops [英文]
https://tympanus.net/codrops/
各種網(wǎng)頁特效實例(以PC端為主)、免費設(shè)計素材,設(shè)計師的創(chuàng)作靈感、程序員的動效參考——更新有點慢,但篇篇精華。
SiteInspire [英文]
https://www.siteinspire.com/
世界HTML5優(yōu)秀網(wǎng)站合集(PC端為主),收錄很多視覺效果不錯的網(wǎng)站,更新及時。
TRESENSA [英文]
http://www.tresensa.com/games/
世界HTML5精品游戲合集,可以在線試玩,H5游戲創(chuàng)作的靈感來源。
【W(wǎng)eb設(shè)計&開發(fā)篇】
優(yōu)秀網(wǎng)頁設(shè)計聯(lián)盟
http://www.uisdc.com/
各種網(wǎng)頁設(shè)計相關(guān)的資源、教程和經(jīng)驗,網(wǎng)頁設(shè)計師必備。
Media Queries
http://mediaqueri.es.
現(xiàn)在你還沒聽說過屏幕自適應(yīng)的網(wǎng)頁設(shè)計概念,可能落后別人一大截了……這個網(wǎng)站有各種使用Media Queries(媒體查詢,HTML5相關(guān)方法)的響應(yīng)式設(shè)計網(wǎng)站,有在不同屏幕下的對比圖,可以觀察網(wǎng)站自適應(yīng)屏幕的斷點,非常好用。
ISUX
https://isux.tencent.com/
騰訊ISUX(社交用戶體驗設(shè)計)團隊,包含各種網(wǎng)頁設(shè)計、Web開發(fā)的解決方法、用戶體驗優(yōu)化技巧,以HTML5網(wǎng)頁、APP應(yīng)用為主。
設(shè)計達人
http://www.shejidaren.com/
集大成者的設(shè)計博客,包含網(wǎng)頁設(shè)計、產(chǎn)品設(shè)計、交互設(shè)計、前端開發(fā)等信息——涉獵較廣,富含各種新鮮知識。
Web基本原則--設(shè)計&界面 [中英混合]
https://developers.google.cn/web/fundamentals/design-and-ui/
谷歌Web開發(fā)設(shè)計規(guī)范,從響應(yīng)式設(shè)計、用戶體驗、輸入框、動畫等方面說明HTML5網(wǎng)頁開發(fā)的最佳解決方案。
Material design 中文版
https://material.io/guidelines/
谷歌Material設(shè)計規(guī)范,設(shè)計師必看!從動效、樣式、布局等多個方面定義了世界一流的Web跨平臺設(shè)計方案——原質(zhì)化設(shè)計。
Mobile Design Inspiration [英文]
http://inspirationmobile.tumblr.com/
iPhone、Android、iPad等移動網(wǎng)頁設(shè)計實例,很多網(wǎng)頁動效設(shè)計值得參考——由于收錄于tumblr網(wǎng)站,查看需翻~墻。
SimilarWeb [英文]
https://www.similarweb.com/top-websites
世界頂尖網(wǎng)站排名,可以按類別、國別查看,參考行業(yè)頂尖網(wǎng)站設(shè)計非常實用。
【實用云端工具篇】
搜百度盤
http://www.sobaidupan.com/
按格式(doc、pdf、mp4等)一鍵搜索各種百度云盤資源!缺點是熱門資源需要多試幾次,因為可能點進去后發(fā)現(xiàn)被刪——搜書、視頻、軟件什么的,非常有用。
iH5互動大師
http://www.ih5.cn
H5網(wǎng)頁可視化制作的專業(yè)工具,功能、性能和用戶體驗上秒殺各大國產(chǎn)甚至國外的工具,用于微信廣告、HTML5網(wǎng)頁制作、小游戲、小程序制作等。
Befunky
https://www.befunky.com/create/
快速編輯、導(dǎo)出圖片的在線工具,分為編輯器、照片拼貼、設(shè)計師三種模式,支持剪裁、系統(tǒng)字體、濾鏡等功能,網(wǎng)頁設(shè)計師偷懶、設(shè)計小白裝逼必備……
百度腦圖
http://naotu.baidu.com/
思維導(dǎo)圖在線制作工具,可導(dǎo)出成圖片——做思維導(dǎo)圖的很多,其實一個就夠了。
BROWSER SHOTS [英文]
http://browsershots.org/
一鍵對比網(wǎng)站在近百個瀏覽器的顯示效果,可以自定義屏幕大小、系統(tǒng)類別、顏色顯示、是否支持Flash等性能,H5網(wǎng)頁測試必備。
Can I use [英文]
http://caniuse.com/
一鍵測試各大瀏覽器具體性能上對HTML5的支持,Web開發(fā)必備。
智圖
http://zhitu.isux.us/
圖片壓縮、提高網(wǎng)頁性能必備,相比業(yè)內(nèi)知名的Tinypng的好處是可以實時預(yù)覽不同圖片質(zhì)量的差別。
【資源下載篇】
365psd
http://cn.365psd.com/
各種免費、付費PSD、矢量圖資源下載。
繪藝素材
http://www.huiyi8.com/yinxiao/
各種各樣的音效試聽與下載,用來為H5頁面動態(tài)變化聽覺上增色必備。
愛思資源
http://www.aseoe.com/webook/
各種HTML、CSS、Javas cript相關(guān)的書籍下載。
jQuery之家
http://www.htmleaf.com/
各種jQuery、HTML5、CSS3的插件庫下載,分門別類,可供網(wǎng)頁設(shè)計師參考動效設(shè)計或使用源碼。
jQuery插件庫
http://www.jq22.com/
各種網(wǎng)頁特效實例(以jQurey為主)預(yù)覽和源碼下載——經(jīng)常更新,還附帶一定講解。
Emojipedia [英文]
http://emojipedia.org/
高清圖標大全,分不同設(shè)備顯示的各種Emoji表情,支持打包下載。
Freebiesbug [英文]
http://freebiesbug.com/
各種免費的網(wǎng)頁設(shè)計資源下載,非常齊全。
Freepik [英文]
http://freepik.com/
各種免費PSD、矢量圖資源。
PSDDD [英文]
http://www.psddd.co/
各種免費圖標、設(shè)備、元素的設(shè)計資源。
Material System ICONS [英文]
https://material.io/icons/
谷歌Material Design圖標大全,原質(zhì)化設(shè)計需要ICON必備。
UI-Cloud [英文]
http://ui-cloud.com/browse/
各種UI源文件下載——更新比較慢,不過資源都是精品。
當你以為你很了解設(shè)計的時候,
可能正是發(fā)現(xiàn)你自己一無所知的時候。
【作者說明】
iH5_cn良心出品,轉(zhuǎn)載請注明來源:H5頁面制作工具iH5.cn,或ih5_cn。
求:支持20G文件上傳和續(xù)傳,支持秒傳,支持文件夾上傳,支持在服務(wù)端保存文件夾層級結(jié)構(gòu),支持將文件夾層級結(jié)構(gòu)信息保存到數(shù)據(jù)庫中,支持下載時能夠?qū)⑽募A層級結(jié)構(gòu)下載下來,支持下載文件夾,下載文件夾支持斷點續(xù)傳,支持VUE2,VUE3,React,支持IE,Chrome和信創(chuàng)國產(chǎn)化環(huán)境,比如銀河麒麟,統(tǒng)信UOS,龍芯,支持加密傳輸,包括加密上傳,加密下載,加密算法支持國密SM4,支持云對象存儲,比如華為云,阿里云,騰訊云,七牛云,AWS,MinIO,FastDFS,需要提供手機,QQ,微信,郵箱等聯(lián)系方式,提供7*24小時技術(shù)支持,提供長期技術(shù)支持和維護服務(wù),提供遠程1對1技術(shù)指導(dǎo),提供二次開發(fā)指導(dǎo),提供文檔教程,提供視頻教程。
1.下載示例
https://gitee.com/xproer/up6-vue-cli
將up6組件復(fù)制到項目中
示例中已經(jīng)包含此目錄
1.引入up6組件
2.配置接口地址
接口地址分別對應(yīng):文件初始化,文件數(shù)據(jù)上傳,文件進度,文件上傳完畢,文件刪除,文件夾初始化,文件夾刪除,文件列表
參考:http://www.ncmem.com/doc/view.aspx?id=e1f49f3e1d4742e19135e00bd41fa3de
3.處理事件
啟動測試
啟動成功
效果
數(shù)據(jù)庫
*請認真填寫需求信息,我們會在24小時內(nèi)與您取得聯(lián)系。