it-swarm.asia

نمط المغلق المشاهد / اختبار

هل هناك موقع يحتوي على مجموعة من HTML النموذجي لرؤية الشكل الذي يبدو عليه CSS بمجرد تطبيقه؟

أعني ، شيء مليء بـ table ، a ، div ، span ، p ، أيًا كان. تذهب إلى هناك ، والصق في CSS الخاص بك ورؤية النتائج.

12
Homer

أنا فقط تعثرت عبر http://colorschemedesigner.com/ .

من الجيد اختيار الألوان وسوف يعرض لك صفحات مثال لترى كيف سيبدو نظام الألوان المطبق على صفحة نموذجية.

تحديث: الموقع الآن http://paletton.com

3
Homer

واو ، شخص نشر للتو هذا على SO.

إنه IS فقط ما طلبه الطبيب: http://jsfiddle.net/

يمكنك كتابة لغة تأشير النص الفائق ، المغلق وجافا سكريبت وتشغيله مباشرة هناك! بالإضافة إلى أن لديهم بالفعل إشارات إلى Jquery وغيرها من الأشياء!

أعتقد أن قاعدة الإنترنت 33 هي إذا أردت/تخيلها ، فهناك! ؛)

4
gideon

لا أعرف أيًا ، لكن هذا أمر بسيط لإقامة نفسك. ببساطة إنشاء مستند HTML أساسي مع جميع العناصر التي تصفها. (يمكنك إنشاء نص إذا لزم الأمر من Lipsum.com .) ثم اربط ملف CSS في رأس المستند لرؤية أنماطك مرفقة. في المرة القادمة التي تريد اختبارها ، قم بتغييرها للإشارة إلى ملف CSS آخر.

2
DisgruntledGoat

ليس بالضبط ما طلبته ، لكني أحب طريقة المشاهدة المباشرة لـ less.js .

بشكل عام ، أنا فقط أسخر من أي عناصر/مجموعات في أيًا كانت نكهة HTML أو XHTML مطلوبة يدويًا ، ولكن يمكنك إنشاء مستندك الرئيسي للعناصر. إذا قمت بتوصيل شاشة ثانية (أو شاشتين أو ثلاثة ، إلخ) لفتح جميع المتصفحات على (أو استخدام جهاز كمبيوتر آخر) ، فإن أي تغييرات تقوم بحفظها يتم تطبيقها مباشرة على جميعها في وقت واحد.

يمكن استخدام بناء جملة LessCSS جنبًا إلى جنب مع CSS العادي ، لكنه أسرع في العمل وسهل التقاطه (يمكن تحويل النتائج إلى CSS طبيعي بعد ذلك).

تتيح لك أدوات مثل Aviary التقاط لقطات الشاشة بسهولة (بما في ذلك أتمتة التمرير لأسفل وخياطة) ، والتي يمكن تعليقها بسرعة (عبر الإنترنت مع روابط قابلة للمشاركة) أو حفظها ومقارنتها في أداة أخرى ( مثل Photoshop ، GIMP ، Paint.NET ، إلخ) عن طريق تراكبهم كطبقات وتغيير شفافية الطبقة الموجودة في الأعلى.

تحرير:

إذا كنت ترغب في أتمتة عملية لقطة الشاشة (حفظ في الملف) بحيث:

  • عندما تحدث مشكلة لديك بالفعل كل شيء في متناول اليد
  • يمكن إضافة صورة إلى التحكم في الإصدار (والتي يمكن أيضًا أن تكون آلية عند حفظ الملف)
  • يمكنك التركيز على CSS بدلاً من الأنشطة المحيطية

ثم يمكنك استخدام شيء مثل مراقب الملف (يرجى المعذرة Python الاتجاه ، هناك الكثير من الحلول الأخرى) مع أداة إمساك الشاشة . يمكن أيضًا معالجة النشر تلقائيًا ، وإذا كنت تستخدم مواضع نافذة متسقة (يمكن أن تساعد بيئة البرنامج/سطح المكتب في ذلك) ، يمكن إيقاف تشغيل "chrome" حول المستعرضات كجزء من البرنامج النصي.

2
Metalshark

تتيح لك w3schools الالتفاف باستخدام قواعد HTML و CSS. ابحث فقط عن CSS/HTML الذي تريد أن تلعب به وابحث عن المكان الذي تقول "جربه بنفسك". وإليك هذه border CSS الصفحة و وهنا ملعبهم .

1
John Conde

أقوم بإنشاء جميع صفحاتي بتنسيق html/css ثم استخدم firebug أو chrome أدوات مشرفي المواقع لإضافة/تغيير/تجربة باستخدام الأنماط. انها سريعة وبسيطة ومؤقتة ، وهو أمر عظيم للتجريب. بالإضافة إلى ذلك ، يمكنك العمل باستخدام الكود الخاص بك على الخوادم الخاصة بك ، والتي تعد مكافأة أخرى.

Buzzkill: يحذرك جزء UI Developer مني أنه من الأفضل أن يتم التصور في أداة تصميم حقيقية ثم رمز للتقليد بسبب الاختلافات في المتصفحات .... فقط قل "...

ملاحظة جانبية - أنا معجب كبير بـ JQery's UI Themeroller. توجد مثل هذه الأداة ل Themeroller لتغيير الأنماط على الجانب. من الممكن تصميم موقع كليًا عبر Themeroller CSS ، ثم التبديل بين السمات المختلفة. إذا لم تكن قد جربته من قبل ، فيمكنه تسريع عملية النشر ، خاصة إذا كنت تبحث عن هذا المظهر "اللامع" الذي يحظى بشعبية كبيرة الآن.

1
bpeterson76

تذهب إلى هناك ، والصق في المغلق الخاص بك ورؤية النتائج.

هنا تذهب: http://www.oswt.co.uk/developments/style_sheet_viewer/

بالضبط ما هو مطلوب في السؤال!

0
jeremy

لست متأكدًا مما إذا كان هذا هو ما طلبته ، لكن CSS Zen Garden به صفحة HTML مع الكثير من تصميمات CSS. يمكنك كتابة CSS الخاص بك لهذا الموقع ، والأمثلة ملهمة للغاية.

0
martinstoeckli