على الرغم من أنه تم تجاهل IE6 باستثناء بعض المتطلبات الصعبة ، إلا أن IE8 ، المتصفح IE8 ، الذي يأتي مع Win7 ، لا يزال بحاجة إلى دعمه.
الميزة الرئيسية لهذه الطريقة هي أنني شخصياً أعتقد أن الأمر أقل تحضيرًا ولا يحتاج إلى البحث عن عدد كبير من الصور لصنع المواد عبر الإنترنت. تحتاج فقط إلى إعداد bootstrap و jQuery و Photoshop. كيفية تكوين bootstrap و jQuery ، يمكنك الرجوع إلى "bootstrap لكتابة مربع حوار يمكن إغلاقه على صفحة الويب الحالية التي يمكن إغلاقها" (انقر لفتح الرابط)
عندما يُطلب منك كتابة موقع ويب ، غالبًا ما تكون مضطربة من كيفية تخطيطه. في الواقع ، ليس من الصعب. إذا كان بإمكانك استخدام Bootstrap بكفاءة ولديك طريقة محددة ، فلا يزال بإمكانك التعامل بسرعة وسهولة التعامل مع واجبك المنزلي للتعامل مع الاحتياجات العادية.
على الرغم من أن قوالب الصفحة يتم البحث عنها لفترة طويلة على الإنترنت ، فإن المفتاح هو أن يكون قادرًا على فهم عملية إنشاء قوالب الصفحة هذه.
بمجرد تنزيل هذه القوالب لا تتوافق مع المتصفح ولن يتم تعديلها ، ستكون مشكلة كبيرة.
1. الأهداف الأساسية
استخدم bootstrapv3 لإنشاء الصفحة التالية:
يظهر الصفحة الرئيسية أعلاه. أولاً ، يتم تعليق القائمة على هذا الموقع ، وهو التسكع في الرأس ، والذي يتم تركه في القائمة المتوسطة والمتوسطة واليمين والمنسدلة. الجوهر هنا هو مجموعة زر ، ولا يمكن استخدام مكون شريط التنقل الذي توفره Bootstrap ، لأن مكون شريط التنقل هذا غير متوافق مع IE8. لمزيد من التفاصيل ، راجع المقالة "كيفية حل عيوب شريط التنقل في Bootstrap في IE8" (انقر لفتح الرابط)
بعد ذلك ، تحت الشاشة العملاقة ، هناك ثلاثة أعمدة واثنين من الأزرار المقابلة. هنا يمكنك وضع أهم أجزاء الموقع ، وأخيراً ، كالمعتاد ، معلومات حقوق الطبع والنشر.
الصفحة الداخلية تبدو هكذا:
إنه أيضًا شريط تنقل أعلى ، يليه عنوان ومحتوى هذه الصفحة الداخلية. عنوان الصفحة الداخلية هو في الأساس شاشة عملاقة ، لكنها أصغر من حجم الصفحة الرئيسية.
التالي هو معلومات حقوق الطبع والنشر.
2. عملية الإنتاج
1. أول فوتوشوب وإنشاء صورة 1024 × 1 جديدة. العرض واسع قدر الإمكان. فقط حاول أن تكون واسعة قدر الإمكان. الصورة هي 1. اللون الأمامي هو الأخضر الداكن R: 0 G: 140 B: 0 ، لون الخلفية خضراء فاتحة R: 100 G: 200 B: 100. استخدم أداة التدرج لسحب الصورة التالية. بغض النظر عن كيفية سحبها ، يمكنك سحبها إلى اليسار واليمين ، وإلى المنتصف والجانبين ، اعتمادًا على تفضيلاتك الشخصية:
هذه هي الصورة الوحيدة التي نحتاجها للتحضير. يمكنك إغلاق Photoshop ، ورميها جانباً ، وحفظ هذه الصورة في مجلد مشروع الموقع. هذه الصورة هي حوالي 6 كيلو واحد فقط ولا تؤثر على التحميل على الإطلاق.
2. الصفحة الرئيسية
الرمز المحدد كما يلي ، ثم يتم شرح الرمز واحدًا تلو الآخر:
<! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3 xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "text/html ؛ charset = utf-8"/> <title> undled document </title> <meta name = content = "width = width device ، scal-scale = 1.0 ، ster-scalable = no"> <link href = "css/bootstrap.css" rel = "stylesheet" media = "screen"> <script type = "text/javascript" src = "js/jquery-1.1.1.js src = "js/bootstrap.js"> </script> <style type = "text/css"> h1 ، h2 ، h3 ، h4 ، h5 {font-family: W3 "،" Wenquanyi Micro Hei "، Sans-Serif ؛ } </style> </head> <body> <div style = "الموضع: الاستخراج ؛ أعلى: 0 ؛ اليسار: 0 ؛ العرض: 100 ٪ ؛"> <viv> <div> <button type = "button"> left </nutri> <///div> <div> <button type = "button"> middle </sult div> <div> data-toggle = "sropdown"> المنسدلة <span> </span> </button> <ul rob = "menu"> <li> <A Href = "#" url (الصور /bg.jpg) ؛ <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <h3> column2 </h3> <p> ... </p> <p> <a href = "#" rome = "button"> زر </a> <a href = "#" rod = "button"> button </a> </p> </p> </p> </p> </p> </p> </p> </p> HREF = "#" ROB = "Button"> زر </a> <a href = "#" rode = "button"> الزر </a> </p> </fiv> </viv> </viv> </viv> <viv> <viv> <viv> <div> <h3> column2 </h3> زر rob = "button"> </a> </p> </viv> </viv> </viv> <viv> <div style = "text-align: center"(1) <الرأس> جزء
<head> <!-ترميز موقع الويب ، العنوان ، الشاشة التكيفية ، إلخ. يجب استخدام-> <link href = "css/bootstrap.css" rel = "stylesheet" media = "screen"> <script type = "text/javascript" src = "js/jQuery -1.11.1.js هو نمط CSS الوحيد الذي نحتاج إلى تحديد أنفسنا لحل الخلل في نظام Win7 الذي لا يمكن عرض خط Microsoft الأسود بشكل طبيعي ، ولكن يتم عرض خط الأغنية-> <style type = "text/css"> h1 ، h2 ، h3 ، h4 ، h5 {font-family: "microsoft yahei ui" ، Helvetica ، Arial ، "Hiragino sans gb" ، "Hiragino sans gb w3" ، "Wenquanyi micro hei" ، sans-serif ؛ } </style> </head>(2) شريط الملاحة
نظرًا لأن شريط التنقل الذي يوفره Bootstrap لا ينطبق ، فقد اضطررنا إلى استخدام مجموعة الأزرار التي توفرها Bootstrap لكتابة شريط التنقل بأنفسنا
<!-أولاً وقبل كل شيء ، يجب تعليق شريط التنقل على رأس صفحة الويب-> <div style = "الموضع: الملخص ؛ الأعلى: 0 ؛ اليسار: 0 ؛ العرض: 100 ٪ ؛"> <!-حدد مجموعة زر-> <viv> <div> <!-كتابة ارتباط تشعبي لزر واحد في شريط التنقل ، وهو ، وهو زر دون أن يكون محتاجًا. إنه استخدام العلامة A ثم إضافة نمط الفئة ، بدلاً من علامة الزر التي يوفرها الموقع الرسمي-> <a href = "#"> left </a> </iv> <viv> <a href = "#" data-toggle = "tropdown"> المنسدلة <span> </span> </button> <ul rob = "menu"> <li> <a href = "#"
تغيير الناجح BTN في سمة الفصل إلى BTN-PRIMARY ، BTN-Danger ، وما إلى ذلك يمكن أن يغير لون هذا الزر!
(3) جزء الشاشة العملاقة
تتم كتابة الشاشة العملاقة على النحو التالي. المفتاح هو تقديم الخلفية التي رسمناها للتو في Photoshop.
السبب في أنني يجب أن أضيف الكثير هنا <br> إدخال هو أنني أريد زيادة حجم هذه الشاشة العملاقة
<div style = "background-image: url (صور /bg.jpg) ؛ تكرار الخلفية: تكرار ؛ align-align: center"> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> </viv>
(4) قسم العمود
هنا ، يتم استخدام تنظيم شبكة Bootstrap لتكتب الأعمدة الثلاثة
للحصول على التفاصيل ، يمكنك الرجوع إلى المقالة "bootstrap" التي تتكيف تلقائيًا مع نظام شبكة الكمبيوتر المحمول والكمبيوتر اللوحي والهاتف المحمول. قسّم 12 شبكات من صفحة الويب بأكملها إلى 3 قطع ، وكل 4 شبكة صحيحة. كل عمود عبارة عن لوحة بدون رأس لوحة ، مع عنوان H3 كبير في الداخل ، ثم نص فقرة من P ، واثنين من الأزرار.
تجدر الإشارة إلى أنه يجب وضع هذه الأشياء في حاوية ، وإلا فإن هذه الأشياء الثلاثة ستملأ الصفحة بأكملها:
<viv> <viv> <viv> <viv> <viv> <h3> column1 </h3> <p> ... </p> <p> <p> <a href = "#" role = "button"> الزر </a> <a href = "#" rob = "button"> زر </a> </p> </p> <p> <a href = "#" rode = "button"> الزر </a> <a href = "#" rob = "button"> button </a> </p> </viv> </viv> </v> <div> <vir> <viv> <viv> <div> <h3> column2 </ h3> <a href = "#" rod = "button"> زر </a> </p> </viv> </viv> </viv> </viv> </viv> </viv> </viv>
(5) جزء معلومات حقوق الطبع والنشر
لا يوجد شيء يمكن قوله ، مجرد لوحة
<viv> <div style = "text-align: center"> معلومات حقوق الطبع والنشر </div> </viv>
3. الصفحة الداخلية
إذا كنت تعرف كيفية إنشاء الصفحة الرئيسية ، فستكون فكرة الصفحة الداخلية هي نفسها تمامًا. لن أكررها مرة أخرى. وبالمثل ، فإن الرمز كما يلي:
<! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3 xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "text/html ؛ charset = utf-8"/> <title> undled document </title> <meta name = content = "width = width device ، scal-scale = 1.0 ، ster-scalable = no"> <link href = "css/bootstrap.css" rel = "stylesheet" media = "screen"> <script type = "text/javascript" src = "js/jquery-1.1.1.js src = "js/bootstrap.js"> </script> <style type = "text/css"> h1 ، h2 ، h3 ، h4 ، h5 {font-family: W3 "،" Wenquanyi Micro Hei "، Sans-Serif ؛ } </style> </head> <body> <div style = "الموضع: المطلق ؛ أعلى: 0 ؛ اليسار: 0 ؛ العرض: 100 ٪ ؛"> <viv> <a href = "#"> اليسار </a> </iv> <viv> <a href = "#"> middle </a> </div> <a href = "#" data-toggle = "sropdown"> المنسدلة <span> </span> </button> <ul rob = "menu"> <li> <A Href = "#" url (صور/bg.jpg)ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.