الأدوات المغلق
7 مايو 2008 من قبل · chriscoyier 13 تعليقات 
ما هي أدوات المغلق؟
الأدوات المغلق هو التصميم المعلومات التي لم تفعل شيئا لفريد مع أي موقع معين. هذه هي مجموعة من الأساليب الشائعة التي يمكن أن تكون مفيدة في أي مشروع على شبكة الإنترنت. كم عدد المرات التي كتبتها فئة لتطهير تعويم؟ كثيرة جدا ، هو تخميني. هذه الفكرة مع أدوات المغلق هو لتشمل أنماط منفصلة لهذه الأداة المساعدة "" الأنماط.
ما هو غير أدوات المغلق؟
أليست هي الأدوات المغلق المغلق إعادة تعيين. أليست هي الأدوات المغلق الإطار المغلق. الأدوات المغلق يتضمن أيا من التصميم "الروح" التي تجعل من أي مشروع الشبكة العالمية فريدة من نوعها.
لماذا استخدام أدوات المغلق؟
باستخدام أدوات المغلق سيوفر لك الوقت. فإنه يوفر لك من أنماط الكتابة نفسها مرارا ومرارا وتكرارا. الحاجة إلى تعويم شيء إلى اليسار؟ يمكنك دائما الاعتماد على الأدوات. كما أنه يساعدك على الحفاظ على الاتساق بين المواقع الخاصة بك. إذا كنت دائما استخدام الأدوات نفسها ، وسوف الترميزية الخاصة بك يشتركان في نفس أسماء فئة مشتركة ، وتجعل من الأسهل بالنسبة لك أن يقفز مرة أخرى إلى وفهم.
المدونة
رمز للأدوات المغلق هو أدناه. أو ، استخدم صلة مباشرة.
/* Toolbox CSS Chris Coyier http://css-tricks.com */ /* LAYOUT TOOLS */ .floatLeft { float: left; } .floatRight { float: right; } .clear { clear: both; } .layoutCenter { margin: 0 auto; } .textCenter { text-align: center; } .textRight { text-align: right; } .textLeft { text-align: left; } /* PRINT TOOLS */ .page-break { page-break-before: always; } /* TYPOGRAPHIC TOOLS */ .error { border: 1px solid #fb4343; padding: 3px; color: #fb4343; } .warning { border: 1px solid #d4ac0a; padding: 3px; color: #d4ac0a; } .success { border: 1px solid #149b0d; padding: 3px; color: #149b0d; } .callOut { font-size: 125%; font-weight: bold; } .strikeOut { text-decoration: line-through; } .underline { text-decoration: underline; } .resetTypeStyle { font-weight: normal; font-style: normal; font-size: 100%; text-decoration: none; background-color: none; word-spacing: normal; letter-spacing: 0px; text-transform: none; text-indent: 0px; } /* STYLING EXTRAS */ a[href^="mailto"] { background: url(images/emailIcon.png) left center no-repeat; padding-left: 10px; } a[href~=".pdf"] { background: url(images/pdfIcon.png) left center no-repeat; padding-left: 10px; } a.button { color: black; border: 1px solid black; padding: 3px; } a.button:hover { background: black; color: white; } .transpBlack { background: url(images/transpBlack.png); } /* DISPLAY VALUES */ .hide { display: none; } .show { display: block; } .invisible { visibility: hidden; } وشرح ليتل
فاصل الصفحة : عن طريق إدراج صفحة "كسر" الطبقة ، صفحة جديدة سوف تبدأ عند الطباعة الموقع إلى طابعة. الصور قبل مفيدة كبيرة أو أقسام رئيسية.
إضافات التصميم : هذه إشارة إلى زوجين من ملفات الصور بأنني لم تدرج هنا. هناك الكثير من الاماكن لتجدوا لرموز لطيفة ، حاول الباحث دلالات.
عرض القيم : هناك فرق بين العرض : لا شيء والرؤية : خفي. تعيين قيمة العرض إلى أن أيا منها لن إزالة مربع تخطيط من الصفحة ، مما تسبب في إعادة تدفق. المرغوب فيه أحيانا ، وأحيانا لا. ببساطة إذا كنت ترغب في إخفاء عنصر ولكن ترك المساحة التي كان يشغلها سليمة ، واستخدام السمة الرؤية.
فقد تعلمت أنني ل". اضحة" الطبقة ، وينبغي أن يكون لديك
الطول : 1px ؛
خط الطول : 1px ؛
حجم الخط : 1px ؛
هامش قمة : - 1px ؛
واضح : على حد سواء ؛
هل هذا مبالغة؟ أفهم كان هذا هو لتحديد بعض المشاكل إي.
أفكار؟
وعرض لهذه الصفحة من شأنه أن يكون لطيفا ، فإنه من الواضح ماذا تفعل بعض عتبة ، الطبقات الطباعة ليست تماما كما هو واضح.
شكرا ، أفضل من هذا الإطار ، وبسيطة!
يبدو رائعا! أنا أحب التصميم المقطع أشياء. مفيدة للغاية ، وجبهته ، تفوح منها رائحة الفوز بالنسبة لي هو الطبقة resetTypeStyle... الرائعة. المسائل القانونية -- إذا أردنا تعديل هذا بشدة قيام نضيف اسمنا بمثابة وزارة الدفاع في شبه مجال حق المؤلف؟ إذا كنا إزالته تماما وسوف تقوم مطاردة لنا باستمرار و...؟
@ بات رأيت أشياء من هذا القبيل من قبل ، ولكن أعتقد أنه لا لزوم لها. أنا لست متأكدة مما يحل المشكلة وهذا في الواقع وتبدو انها في الواقع قد يسبب مشاكل أكثر إمكانات أكثر مما يحل. أنا مستعد لسماع المزيد عن ذلك رغم!
@ كيفن : يمكنك أن تفعل ما تريد مع ذلك ، والمضي قدما في إزالة اسم ، لا مانع لدي!
جميلة فكرة جيدة...
نيس المادة والأداة المغلق!
أنا لم تجد خطأ صغير على الرغم من : الخط : أ href [~ = ". الشعبي]... مفقود" بعد كلمة قوات الدفاع الشعبي ، وبالتالي سوف المغلق مع وقف التنفيذ بحق هناك. يجب قراءتها بشكل صحيح : أ href [= ~ ". الشعبي"]....
مواكبة عملكم الخير والمحبة مقالاتك.
@ بات -- قتل اكثر من...
قبلة هو دائما أفضل وسيلة.
@ كريس -- وهذا هو أفضل بكثير من إعادة سخيفة أو بعض الإطار إلا أن يضيف إلى المواقع غير المرغوب فيه المتضخمة.
@ Marlyse شكرا ، الذي كان في الواقع خطأ في رمز المعروضة في هذه المادة ، وعندي أنه ثابت.
ما المتصفحات دعم هذه الأنماط؟
هذه خطوة كبيرة الى الوراء اذا كنت تعتقد ان تصميم الهيكل وينبغي فصلها. انها حقا إلا نسخة shortcutted استخدام أنماط مضمنة... ليس بالضبط المثالي.
@ توبياس أنا أوافق ، وينبغي أن الطبقة التي تصف محتوى أنها علامة ، وهكذا كان على غرار ورقة يمكن تطبيق أسلوب لحالة معينة ، والتصميم ، أو صفحة.
@ Jermayn أسلوب إعادة تعيين وقائع هي جميلة لو كان لديك قلق حفظ أشياء مثل أحجام الخط ، خط المرتفعات ، وهوامش الخ. متناسقة عبر العديد من المتصفحات. هناك بعض التي قد تكون منتفخة ، ولكن عموما كانت تخدم أكثر عالمية تعمل المنظمة البحرية الدولية.
الجانب الأقوى لهذا أعتقد هو القدرة على الانتقال ذهابا وإيابا بين مواقع مختلفة ، وتشعر بالراحة.
أي شخص يمكن أن يخلق مجموعة أدوات لأنفسهم على أساس انهم ما بالارتياح ، ولكن أن نكون صادقين : من الذي سيقوم بذلك؟ وخاصة عندما يقوم شخص آخر قد فعلت ذلك من أجلك.
العمل الجيد.
أسماء الفصول الدراسية لا تحتوي على الدلالات والاشارات البصرية -- وهو كبير "نونو". إذا كان العميل ، على سبيل المثال ، تقرر تغيير محاذاة النص لبعض الحاويات كنت قد اثنين من الخيارات السيئة : 1. بحث واستبدال كافة 'الطبقة =" textRight "' مع شيء آخر ، والتي الهزائم الفكرة كلها من المغلق ويمكن أن تسبب نتائج غير مرغوب فيها (مثل تغيير شيء يجب أن لا) ، أو 2. تغيير نمط فقط ، من شأنه أن الإعلان داخل الصف ، وهو في الاستخدام الصحيح للالمغلق ، ولكن أترككم مع فئة المسمى "textRight" التي تؤيد النص على اليسار. الأمر الذي سيجعل من فوضى تامة من طبقة العرض.
أيضا ، السمة محددات غير معتمدة بشكل كامل ، وينبغي ألا تستخدم.
على خلاف ذلك ، انها فكرة جميلة ، ولكن من الصعب بعض الشيء لتنفيذ ، كما هو.