目錄
Google HTML & CSS Style Guide
Yahoo Pattern Library
A List Apart Pattern Library
Responsive Web Design Patterns
Interaction Design Pattern Library ? Welie.com
MailChimp Pattern Library
Starbucks Style Guide
首頁 web前端 html教學 有助于提高你的 Web 开发技能的7个模式库_html/css_WEB-ITnose

有助于提高你的 Web 开发技能的7个模式库_html/css_WEB-ITnose

Jun 24, 2016 pm 12:05 PM
web 提高 模式

  正如语言风格指南一样,模式库有两个主要用途。首先,是它们提供了一组编码或设计标准,Web 开发团队可以在整个网站中应用,有助于保持一致的编码实践和外观;其次,对于要学习网页设计最佳实践来说是宝贵的财富。

  在本文中,我想与大家分享7个网页设计风格指南和模式库,这些都是 Web 设计和开发过程中的最佳实践经验,值得借鉴。

  

Google HTML & CSS Style Guide

首先给大家推荐的是 Google 公司的编码建议,告诉开发人员应该怎么写和格式化 HTMLCSS 代码。如果你是一个新手,它是一个有益的开端,帮助您培养良好的编码风格。

 

Yahoo Pattern Library

这个是一个真正的设计模式库,正因为如此,它试图提供解决方案来解决所有网页设计师将碰到的问题,包括雅虎的设计师来处理导航,交互和布局。

 

A List Apart Pattern Library

A List Apart 可能是最知名的网页设计博客。他们最近发布了他们自己的模式库作为努力开源他们的网站的一部分。该模式库包括该网站设计上的解决方案以及 HTML 代码片段的问题。

 

Responsive Web Design Patterns

这是一个响应式设计的模式库,你可以从中学会响应式设计的细节,它涵盖了从布局到简单易懂的示例图像。

 

Interaction Design Pattern Library ? Welie.com

这个网站的设计虽然老旧,但它确实提供了众多的设计模式的资料。这是我见到的最全面的模式库,涉及了设计者将面临的每一种情况。

 

MailChimp Pattern Library

MailChimp 模式库是作者在创建响应式,灵活,直观的应用程序过程中的副产品。不断迭代既需要一个高效的工作流程和明确的,可以快速集成新的用户界面,而不必增加新的技术或者设计原子元素的集合。

 

Starbucks Style Guide

最后登场的是 Starbucks 公司网站的风格指南,包括网格框架的使用、布局和组件的使用等等。

 

 

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Java教學
1662
14
CakePHP 教程
1418
52
Laravel 教程
1311
25
PHP教程
1261
29
C# 教程
1234
24
微信的免打擾模式有什麼作用 微信的免打擾模式有什麼作用 Feb 23, 2024 pm 10:48 PM

微信勿擾模式什麼意思如今,隨著智慧型手機的普及和行動網路的快速發展,社群媒體平台已成為人們日常生活中不可或缺的一部分。而微信作為國內最受歡迎的社群媒體平台之一,幾乎每個人都有一個微信帳號。我們可以透過微信與朋友、家人、同事進行即時溝通,分享生活中的點滴,了解彼此的近況。然而,在這個時代,我們也不可避免地面臨資訊過載和隱私洩漏的問題,特別是對於那些需要專注或

iPhone上的睡眠模式有何用途? iPhone上的睡眠模式有何用途? Nov 04, 2023 am 11:13 AM

長期以來,iOS設備一直能夠使用「健康」應用程式追蹤您的睡眠模式等。但是,當您在睡覺時被通知打擾時,這不是很煩人嗎?這些通知可能無關緊要,因此在此過程中會擾亂您的睡眠模式。雖然免打擾模式是避免睡覺時分心的好方法,但它可能會導致您錯過夜間收到的重要電話和訊息。值得慶幸的是,這就是睡眠模式的用武之地。讓我們了解更多關於它以及如何在iPhone上使用它的資訊。睡眠模式在iPhone上有什麼作用睡眠模式是iOS中專用的專注模式,會根據你在「健康」App中的睡眠定時自動啟動。它可以幫助您設定鬧鐘,然後可以

請勿打擾模式在iPhone中不起作用:修復 請勿打擾模式在iPhone中不起作用:修復 Apr 24, 2024 pm 04:50 PM

即使在「請勿打擾」模式下接聽電話也可能是一種非常煩人的體驗。顧名思義,請勿打擾模式可關閉來自郵件、訊息等的所有來電通知和警報。您可以按照這些解決方案集進行修復。修復1–啟用對焦模式在手機上啟用對焦模式。步驟1–從頂部向下滑動以存取控制中心。步驟2–接下來,在手機上啟用「對焦模式」。專注模式可在手機上啟用「請勿打擾」模式。它不會讓您的手機上出現任何來電提醒。修復2–更改對焦模式設定如果對焦模式設定中存在一些問題,則應進行修復。步驟1–打開您的iPhone設定視窗。步驟2–接下來,開啟「對焦」模式設

iPhone 15 Pro:如何擺脫狀態列中的靜音模式符號 iPhone 15 Pro:如何擺脫狀態列中的靜音模式符號 Sep 24, 2023 pm 10:01 PM

在iPhone15Pro和iPhone15ProMax型號上,Apple推出了一個實體可編程的動作按鈕,取代了音量按鈕上方的傳統響鈴/靜音開關。可以對操作按鈕進行編程以執行幾種不同的功能,但是在靜音和響鈴模式之間切換的能力並沒有消失。預設情況下,長按一次操作按鈕將使裝置靜音,按鈕的觸覺回饋將發出三個脈衝。兩款iPhone15Pro機型在狀態欄中的時間旁邊都會顯示一個劃掉的鈴鐺符號,表示靜音/靜音模式已激活,並且它將一直保持到您再次長按“操作”按鈕取消設備靜音。如果您傾向於將iPhone置於靜音模

如何啟用「記事本++深色模式」和「記事本++深色主題」? 如何啟用「記事本++深色模式」和「記事本++深色主題」? Oct 27, 2023 pm 11:17 PM

記事本++暗模式v8.0沒有參數,Notepad++是最有用的文字編輯器。在Windows10上執行的每個應用程式都支援暗模式。您可以命名網頁瀏覽器,例如Chrome、Firefox和MicrosoftEdge。如果您在記事本++上工作,預設的白色背景可能會傷害您的眼睛。開發人員已將暗模式加入到版本8的Notepad++中,這是開啟它的方法。為Windows11/10啟用記事本++暗模式啟動記事本++點選「設定」>「首選項」>「暗模式」選擇「啟用深色模式」重新啟動記

iOS 17中的待機模式使用指南 iOS 17中的待機模式使用指南 Aug 22, 2023 pm 04:01 PM

待機模式即將透過iOS17進入iPhone,本指南旨在向您展示如何在iPhone上使用此功能。待機模式是一項突破性功能,可將iPhone轉換為動態、始終開啟的智慧顯示器。當您的iPhone在充電過程中水平側放時,它會啟動待機模式。此模式精美地展示了大量有用的小部件,包括但不限於當前時間、當地天氣更新、您喜歡的照片的幻燈片,甚至是音樂播放控制。此模式的一個顯著優點是它能夠顯示通知,允許用戶查看和參與通知,而無需完全喚醒他們的iPhone。如何使用待機模式要使待機模式正常運行,iPhone必須運行i

在 Windows 10/11 上如何離開 S 模式 在 Windows 10/11 上如何離開 S 模式 Aug 03, 2023 pm 08:17 PM

S模式下的視窗旨在透過僅允許從Microsoft應用商店安裝應用程式來提供增強的安全性和效能。雖然此功能有助於防止惡意軟體和確保安全的運算環境,但它可能會限制想要從MicrosoftStore以外的來源安裝應用程式的使用者。如果您發現自己處於這種情況並不斷問自己如何在Windows10/11中切換出S模式,那麼您來對地方了,因為我們將引導您完成如何使用兩種不同的方法在Windows10/11中切換出S模式的步驟,確保您可以享受從您選擇的任何地方安裝應用程式的自由。了解如何在Windows中切換出S模式將

web標準是什麼東西 web標準是什麼東西 Oct 18, 2023 pm 05:24 PM

Web標準是一組由W3C和其他相關組織制定的規範和指南,它包括HTML、CSS、JavaScript、DOM、Web可訪問性和性能優化等方面的標準化,透過遵循這些標準,可以提高頁面的兼容性、可訪問性、可維護性和效能。 Web標準的目標是使Web內容能夠在不同的平台、瀏覽器和裝置上一致地展示和交互,提供更好的使用者體驗和開發效率。

See all articles