المصمم أدوات: قالب CSS فارغة

16 مارس 2008 بواسطة chriscoyier · 11 تعليقات




إذا قمت بتصميم عدد لا بأس به من المواقع من الصفر، وستجد نفسك تفعل الكثير من العمل إعداد نفسه مرارا ومرارا وتكرارا. إنشاء الدليل مع مجلد الصور. إنشاء ملف الفهرس، وكتابة محتوى الإعلان نوع، والكتابة الأساسية هيكل الصفحة. إنشاء ملف CSS، وكتابة CSS إعادة تعيين، والكتابة الأساسية المغلق هيكل. فقط يمكن أن الإعداد يأخذك قسما لائق من الوقت وتذوي حماسكم من أجل الحصول على لحوم التصميم الخاص بك.

في هذه الدفعة القادمة من أدوات مصمم، ونحن نقدم لكم وسيلة لتجنب كل هذا الوقت الضائع مع قالب CSS فارغة.

فارغة-CSS-template.png

مجرد ابقاء هذا المجلد على النظام الخاص بك وأنت في أي وقت بدء مشروع جديد، يمكنك تكرار هذا المجلد فقط وتبدأ مع الترميز الحقيقي / تصميم.

حتى تعرف ما يمكن أن يكون الدخول، دعونا ننظر في HTML: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>PAGE TITLE HERE</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div id="page-wrap"> </div> <!-- Put Google Analytics Code Here --> </body> </html>

كما ترون، انها بسيطة جدا جدا. مجرد إعلان صفحة (XHTML 1.0)، والمحتوى إعلان نوع (UTF-8)، عنوان الصفحة، وصلة الأنماط، وبنية بسيطة (الجسم مع DIV صفحة التفاف). أنا وشملت أيضا تذكرة قليلا لتشمل بك رمز تحليلات في الجزء السفلي، إذا كنت سوف تتبع بيانات الزائر على موقعك.

الآن هنا هو المغلق: 

 /* AUTHOR: YOUR NAME HERE [email protected] */ /* ------------------------------------------ */ /* RESETS, BASIC PAGE SETUP, BASIC TYPOGRAPHY */ /* ------------------------------------------ */ * { margin: 0; padding: 0; } html { overflow-y: scroll; } body { font: 62.5% Helvetica, sans-serif; } ul { list-style: none inside; } p { font: 1.3em/1.3em; margin-bottom: 1.3em; } a { outline: none; } a img { border: none; } /* END RESET */ /* ------------------------------------------ */ /* TOOLBOX CSS */ /* ------------------------------------------ */ .floatleft { float: left; } .floatright { float: right; } .clear { clear: both; } .transpBlack { background: url(transpBlack.png); } /* END TOOLBOX */ /* ------------------------------------------ */ /* PAGE STRUCTURE */ /* ------------------------------------------ */ #page-wrap { width: 775px; margin: 0 auto; } /* END STRUCTURE */  /* AUTHOR: YOUR NAME HERE [email protected] */ /* ------------------------------------------ */ /* RESETS, BASIC PAGE SETUP, BASIC TYPOGRAPHY */ /* ------------------------------------------ */ * { margin: 0; padding: 0; } html { overflow-y: scroll; } body { font: 62.5% Helvetica, sans-serif; } ul { list-style: none inside; } p { font: 1.3em/1.3em; margin-bottom: 1.3em; } a { outline: none; } a img { border: none; } /* END RESET */ /* ------------------------------------------ */ /* TOOLBOX CSS */ /* ------------------------------------------ */ .floatleft { float: left; } .floatright { float: right; } .clear { clear: both; } .transpBlack { background: url(transpBlack.png); } /* END TOOLBOX */ /* ------------------------------------------ */ /* PAGE STRUCTURE */ /* ------------------------------------------ */ #page-wrap { width: 775px; margin: 0 auto; } /* END STRUCTURE */

أيضا بسيطة جدا، ومعظمها مجرد إعادة تعيين CSS الموسعة. محدد النجمة (*) هل الثقيلة رفع إعادة تعيين، ولكن هناك بضع لمسات إضافية لذكرها. تحديد حجم الخط في الجسم إلى 62.5٪ يتيح لك استخدام EM الأحجام وكأنك بكسل (بكسل) الأحجام. 1.0 م = 10px، 1.1em = 11px، وهلم جرا. الفائض ص يفرض شريط التمرير العمودي في العديد من برامج التصفح على القضاء على القفزات في تمركز أفقي .

هناك بعض بسيطة "أدوات CSS" لأشياء مثل العائمة، وتطهير، وملء المناطق ذات لون شفاف. يتم تضمين صفحة CSS-التفاف إلى مركز محتوى صفحتك.

[DOWNLOAD TEMPLATE CSS فارغة (. ZIP)]

تعليقات

11 الردود على "مصمم لأدوات: قالب CSS فارغ"
  1. كاتب المقال - http://www.articleseer.com يقول:
    16 مارس 2008 في الساعة 0:44

    هذا يبدو بالتأكيد مثل هذا يوفر الكثير من العمل. ويمكن استخدامه في المواقع وورد؟ لقد حصلت على عدد قليل من المشاريع القادمة ويبدو أنها سوف تكون في متناول اليدين الحقيقي.

  2. chriscoyier - http:// يقول:
    16 مارس 2008 في الساعة 1:53

    لقالب "المجردة" لورد، وتحقق من إليوت الأسهم جاي "عار [http://elliotjaystocks.com/blog/archive/2008/free-starkers-wordpress-theme/]" موضوع.

  3. بليس كال - http://spookpaard.nl يقول:
    16 مارس 2008 في 14:25

    فكرة وجود القالب الافتراضي هو جيد. الطريقة انها فعلت هنا ليست كذلك.

    على سبيل المثال: * تبطئ محدد مما يجعل أسفل. كما انه يزيل الهوامش المطلوبين والفوصل من حقول الإدخال في شكل متصفحات / OS معينة، والتي لا يمكن إعادة استخدامها.

    الفائض-y هو أيضا كلام فارغ، منذ الصفحة الخاصة بك قد لا تكون دائما قابلة للتمرير، مما يجعل من التمرير عفا عليها الزمن (ومربكة للبعض).

  4. chriscoyier - http:// يقول:
    16 مارس 2008 في الساعة 6:16

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

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

    تجاوز ص هي أيضا ليست هراء. بل ينطبق 1 التمرير الرأسي فارغة في برامج التصفح التي لا تملك بالفعل أن (IE افتراضيا يفعل هذا بالفعل). وهذا قد يستغرق الشاشه العقاري عند عدم الحاجة إليها في بعض الأحيان، لكنه يلغي حرج "قفزة" في تمركز أفقي عند التنقل بين الصفحة التي مخطوطات والصفحة التي لا تفعل ذلك.

  5. veerendra - http://www.v-render.com يقول:
    17 مارس 2008 في 4:19 صباحا

    شكرا لCSS فارغة sofisticated وقالب HTML. وهذا دليل مساعدتي!

  6. فريدريك - يقول:
    19 مارس 2008 في 4:14 صباحا

    RES كبيرة للeditpadders الموقع مثلي!

    هل يمكن ان توضح مدى فائدة transpBlack {خلفية: رابط (transpBlack.png)؛}. فكر؟

  7. koew - http://koew.net/ يقول:
    19 مارس 2008 في الساعة 2:02

    وأنا لا أرى لماذا يجب استخدام 1.3em (~ 13px) لحجم الخط ف محددات. إذا كان هناك شيء ما الذي يجعل القبيح في المتصفحات القديمة (خصوصا بدون اضحة النوع أو وظائف مماثلة)، انها خط الحجم عند 13.

    فمن الأفضل للعمل مع أرقام حتى، مثل 8 و 10 و 14 و 12 و 16. أفضل قراءة> يتوهم التصميم. (رأي شخصي، ويمكن القول حتى نهاية الوقت)

  8. chriscoyier - http:// يقول:
    19 مارس 2008 في الساعة 3:37

    @ فريدريك: أنا استخدم وتشمل تلك كجزء من بلدي CSS "صندوق أدوات". فهو في جوهره واحد بكسل ألفا شفافة بابوا نيو غينيا حتى أستطيع أن تطبيق تعبئة شفاف أسود إلى مربع دون الحاجة إلى استخدام السمة التعتيم. غموض كبيرة في بعض الأحيان، تطبيقه على عنصر يجبر جميع العناصر التابعة لديهم غموض أيضا. إذا كانت تلك العناصر التابعة للنص، يمكن أن يكون أمرا سيئا. بهذه الطريقة يمكنك تطبيق خلفية شفافة والحفاظ على نص غير شفاف تماما.

    @ koew: كنت في الواقع ليست على علم بأن الأحجام حتى بكسل المقدمة أفضل .... أنا ستعمل يكون للنظر في ذلك.

  9. أندي وود - يقول:
    20 مارس 2008 الساعة 10:13 صباحا

    تعليق koew على بشاعة من الخطوط في نيف وحجم بكسل هو واحد صحيح على أساس تجربتي الخاصة مع المتصفحات القديمة على كبار السن من المنصات.

    ربما أنا أجد نفسي محتجزا في timewarp، ولكن ما زلت أشعر بالحاجة إلى استخدام الأحجام حتى في أصغر خلية خاصة نهاية النطاق.

    بخلاف ذلك أعتقد أن هذا هو قالب مفيدة جدا وأجد لديك CSS-الخدع موقع لتكون قراءة ممتازة. بفضل كريس.

    هتاف

  10. رالف - http://www.webpixelkonsum.de يقول:
    23 مارس 2008 فى الساعة 10:00 صباحا

    شكرا لك على فكرتك رائعة لتجنب الكثير من الاخطاء واضاعة الوقت مع XHTML و CSS مستوى القالب ...

    يجب أن أفكر في هذه الفكرة لwebprojects بلدي، وأيضا

    رالف

  11. أرمين - http://alphablogdesigns.com/ يقول:
    24 مارس 2008 في 11:33 صباحا

    كريس - أنا معك في قضية محدد عالمي. لست مقتنعا بأن الأمر كله سيئا، وأنا لا تزال تستخدم على نطاق واسع من دون أي مشاكل.

البرنامج التعليمي المدونة