نصائح إنتاج صفحة الويب: كود XHTML و CSS و JS

الكاتب：Eve Cole وقت التحديث：2025-04-21 07:00:03

wulin.com (www.vevb.com) مقالة مقدمة: مهارات إنتاج صفحة الويب: XHTML ، CSS و JS.

تفاصيل 1 ....................................................................................................................................................................................................... ....................................................................................................................................................................................................................................... ....................................................................................................................................................................................................................................... .......................................................................................................................................................................................................................................

1. عندما يكون النص والصورة على نفس الخط ، يجب محاذاة النص مع أسفل الصورة ، ويجب أن تتم كتابته مثل هذا:

<li> تذكر كلمة المرور <img src = align = النمط السفلي = margin-bottom: -4px/> </li>

2. عندما تكون النص والصورة على نفس السطر ، يجب تركيز النص والصورة على هذا النحو:

<li> تذكر كلمة المرور <img src = static/img/xyx.jpg align = middle/> </li>

3. قم بتغيير المحرر الذي تم فتحه بواسطة قائمة رمز المصدر IE View

افتح محرر التسجيل وأدخل Regedit في البداية

ابحث عن الموقع التالي: HKEY_LOCAL_MACHINESOFTWAREMAREMORSOFT Internet Explorerview sourceeditored اسم تعديل البيانات الافتراضية إلى D: Program FileseMeditoreMeditor.exe

قم بالتبديل إلى IE لعرض رمز المصدر ويمكنك رؤية التأثير.

إذا لم يكن عنصر اسم محرر المصدر لا يحتوي عليه ، فيمكنك إنشاءه بنفسك.

4. تعظيم النافذة تلقائيًا وإضافة بين <Body> و </body>:

<لغة البرنامج النصي = javaScript>

setTimeout ('top.moveto (0،0)' ، 5000) ؛

setTimeout ('top.resizeto (screen.availwidth ، screen.availheight)' ، 5000) ؛

< /script>

5. Window.Opener هو في الواقع الشكل الأصل للنموذج المفتوح مع Window.Open.

على سبيل المثال ، في نموذج الوالدين ParentForm ، تم تمرير window.open (subform.html) ، ثم في subform.html window.opener

وهذا يعني ParentForm ، يمكنك تعيين قيمة النموذج الأصل أو استدعاء طريقة JS بهذه الطريقة.

1 ، window.opener.test () ؛ --- استدعاء طريقة الاختبار () في النموذج الأصل ؛

2. إذا كانت Window.Opener موجودة ، فقم بتعيين قيمة صندوق المخزون في ParentForm.

if (window.opener &&! window.opener.closed)

{

window.opener.document.parentform.stockbox.value = الرمز ؛

}

6. كيفية تحديث الصفحة

كيفية تحديث الصفحة في JavaScript:

1 History.Go (0)

2 location.reload ()

3 موقع = الموقع

4 location.assign (موقع)

5 document.execcommand ('Refresh')

6 window.navity (موقع)

7 location.replace (موقع)

8 document.url = location.href

كيفية تحديث الصفحة تلقائيًا:

1. تحديث الصفحة التلقائية: إضافة <meta http-equiv = تحديث المحتوى = 20> إلى منطقة <Head>

2. قفزة الصفحة التلقائية: إضافة <meta http-equiv = تحديث المحتوى = 20 ؛ url = http: //www.webjx.com> إلى <head> المنطقة

3. JS تحديث الصفحة تلقائيًا

<لغة البرنامج النصي = javaScript>

وظيفة myrefresh ()

{

window.location.reload () ؛

}

setTimeout ('myrefresh ()' ، 1000) ؛ // حدد تحديث مرة واحدة في 1 ثانية

< /script>

4.JS تحديث إطار

أ) تحديث الصفحة التي تحتوي على الإطار

<لغة البرنامج النصي = javaScript>

parent.location.reload () ؛

< /script>

ب) نافذة الطفل تحديث النافذة الأصل

<لغة البرنامج النصي = javaScript>

self.opener.location.reload () ؛

< /script>

(أو <a href = javaScript: Opener.location.reload ()> تحديث </a>)

ج) قم بتحديث صفحة إطار آخر

<لغة البرنامج النصي = javaScript>

Parent.Another Frameid.location.reload () ؛

< /script>

7. إذا كنت قد استخدمت اختراقات CSS ، فيجب أن تعلم أن التسمية مع السطحية هي اختراق. إذا كنت تستخدم _style ، فيمكن أن تجعل معظم المتصفحات خارج IE تجاهل تعريف هذا النمط ، لذلك باستخدام _ كفاصل عندما لا يكون التسمية موحدة. ستظهر رسالة خطأ عند إجراء عمليات فحص CSS.

8. أي طريقة كتابة التعليقات الشرطية الشرطية

<!-[if! ie]> يمكن التعرف عليه باستثناء ie <! [endif]->

<!-[إذا كان ie]> جميع IES يمكن التعرف عليها <! [endif]->

<!-[إذا كان IE 5.0]> فقط IE 5.0 يمكنه التعرف على <! [endif]->

9. طريقة كتابة الاختراق CSS

النوع الأول:

.div {

الخلفية: البرتقالي.

*الخلفية: أخضر! مهم ؛

*الخلفية: الأزرق.

}

النوع الثاني:

.div {

الهامش: 10px ؛

*الهامش: 15px ؛

_margin: 15px ؛

}

النوع الثالث:

#div {color: #333 ؛ }

*+html #div {color: #999 ؛ }

* html #div {color: #666 ؛ }

تفاصيل 2 ............................................................................................................................................................................................................................... ....................................................................................................................................................................................................................................... ....................................................................................................................................................................................................................................... .......................................................................................................................................................................................................................................

1. IE6 وما يلي لا يتعرفون على: حوم الفئة الزائفة خارج العلامة. في Firefox ، IE7 ، يمكن تحقيق التأثير بشكل صحيح. حل:

#show li.s1 {border: 1px solid #ff9900 ؛ الخلفية:#454242 ؛}

#show li.s2 {border: 1px solid #d9d8d8 ؛ الخلفية:#312e2e ؛}

2. تعيين haslayout للعناصر

يمكن حل العديد من مشاكل IE6 (أو IE7) عن طريق تحديد قيمة Haslayout. أسهل طريقة لتعيين قيمة haslayout لعنصر ما هي إضافة ارتفاع أو عرض CSS (بالطبع ، يمكن أيضًا استخدام التكبير ، ولكن هذا ليس جزءًا من CSS). على سبيل المثال ، ضبط على الارتفاع: 1 ٪. إذا لم يحدد العنصر الأصل الارتفاع ، فلن يتغير الارتفاع الفعلي للعنصر ، ولكن لديه بالفعل خاصية Haslayout.

3. تظهر الشخصيات مرارًا وتكرارًا في IE6

تأكد من أن العرض: تم ضبطه على العنصر العائم ؛

استخدام يمين الهامش: -3px في العناصر العائمة ؛

4. أولوية النمط

1. نمط مضمّن [1.0.0.0]

2. محدد المعرف [0.1.0.0]

3. الفصل ، سمة ، محدد الفئة الزائفة [0.0.1.0]

4. علامات العناصر ، محدد العناصر الزائفة [0.0.0.1]

5. طريقة كتابة CSS لعنصر واحد يركز على عنصر واحد

#EXM {

الموقف: مطلق ؛

اليسار: 50 ٪ ؛

أعلى: 50 ٪ ؛

Z-index: 1 ؛

العرض: 200 بكسل ؛

الارتفاع: 100px ؛

الهامش اليساري: -100px ؛

الهامش: -52px ؛

}

6. التكبير: عادي | رقم

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

7. عندما يتم ترتيب الصورة والنص جنبًا إلى جنب ، يجب أن يتمركز نص الصورة رأسياً:

1> قم بتعيين رفع الخط: إلى ارتفاع الصورة ، أو ارتفاع العنصر الأصل للصورة.

2> ثم اضبط المحاذاة العمودية: منتصف في CSS من الصورة ؛

8. عندما يحتوي عنصر LI على عنصر IMG ، يظهر فارغ تحت IE6

الحل 1

اجعل li عائمًا وضبط IMG على عنصر على مستوى الحظر

الحل 2

Set UL's Font-Size: 0 ؛

الحل 3

اضبط محاذاة IMG العمودية: أسفل ؛

الحل 4

اضبط القاع الهامش IMG: -5px ؛

تفاصيل 3 ........................................................................................................................................................................................................................... ....................................................................................................................................................................................................................................... ....................................................................................................................................................................................................................................... .......................................................................................................................................................................................................................................

1. أنماط الارتباط التشعبي الذي تمت زيارته من خلال النقر لا تحوم ونشطة

الحل: تغيير ترتيب سمات CSS: LVHA

2. لا يمكن لف الحقول الطويلة المستمرة تحت FF تلقائيًا

الحل: Word-Wrap: Word-Word ؛ Overflow: Hidden ؛

3. لا يمكن أن يكون ارتفاع الحاوية الأصل قابلاً للتكيف بموجب FF

الحل: امسح عائمة عناصر الطفل

4. يتم إنشاء فجوة أسفل الصورة تحت أي

الحل: حدد IMG على أنه عرض: كتلة ، أو محاذاة رأسية كأسعار أعلى/أسفل/متوسطة/نصية

حدد حجم خط الحاوية الأصل إلى الصفر ، حجم الخط: 0

5. هناك فجوة 3 بكسل بين العنصر العائم تحت IE6 وعنصره غير العائم المجاور.

الحل: يتم تعيين عناصر غير عائمة مجاورة أيضًا على تعويم ؛

يتم تعريف العناصر العائمة بالنسبة إلى IE6_Margin-Right: -3px ؛

6. يتم عرض محتوى LI في القطع النارية بعد أن يكون طويلًا جدًا.

الحل: الفضاء الأبيض: Nowrap ؛ (النص لا يلف) Text-Overflow: Ellipsis ؛ -o-text-overflow: ellipsis ؛ الفائض: مخفي.

7. لا يمكن تركز النص رأسياً

الحل: ارتفاع الخط وارتفاع الحاويات هو ارتفاع خط = الارتفاع ؛

8. لا يمكن محاذاة مربع إدخال النص مع النص المجاور.

الحل: اضبط مربع إدخال النص العمودي: الأوسط ؛

9. أي تعيين نمط شريط التمرير

حل:

جسم{

scrollbar-face-color:#f6f6f6 ؛

Scrollbar-Highlight-Color: #fff ؛

Scrollbar-shadow-color: #EEEEE ؛

Scrollbar-3Dlight-Color: #Eeeeee ؛

scrollbar-arrow-color:#000 ؛

scrollbar-track-color: #ffff ؛

scrollbar-darkshadow-color: #fff ؛

}

10. لا يمكن IE6 تحديد الحاويات بارتفاع 1 بكسل

الحل: فائض: مخفي

التكبير: 0.8

ارتفاع الخط: 1 بكسل

تفاصيل 4 ........................................................................................................................................................................................................................... ....................................................................................................................................................................................................................................... ....................................................................................................................................................................................................................................... .......................................................................................................................................................................................................................................

1. دع الطبقة يتم عرضها على الفلاش

الحل: تعيين شفاف <param name = wmode value = tramparent /> أو <param name = wmode value = ePaque /> flash

2. اصنع طبقة مركزية رأسياً في المتصفح

الحل: استخدم النسبة المئوية لتحديد المواقع المطلقة ، مع القيم السلبية للبقع الخارجية.

الموقف: مطلق ؛

أعلى: 50 ٪ ؛

اليسار: 50 ٪ ؛

الهامش: -100px Auto Auto -100px ؛

العرض: 200 بكسل ؛

الارتفاع: 200 بكسل ؛

3. أضف إلى المفضلات

الحل: <script type = text/javaScript>

// <! [CDATA [

وظيفة الإشارة المرجعية () {

var title = document.title

var url = document.location.href

if (window.sidebar) window.sidebar.addpanel (title ، url ،) ؛

آخر if (window.opera && window.print) {

var mbm = document.create_r_relement_x ('a') ؛

MBM.SetAttribute ('rel' ، 'sidebar') ؛

MBM.SetAttribute ('Href' ، url) ؛

MBM.SetAttribute ('title' ، title) ؛

mbm.click () ؛}

آخر if (document.all) window.external.addfavorite (url ، title) ؛

}

//]]>

< /script>

<a href = javaScript: bookmark ()> أضف إلى المفضلة </a>

تفاصيل 5 ................................................................................................................................................................................................................................... ....................................................................................................................................................................................................................................... ....................................................................................................................................................................................................................................... .......................................................................................................................................................................................................................................

1. كيفية كتابة قوائم الأخبار المشتركة:

<li> <span> 6 يونيو 2006 </span> <a href =#> عنوان الأخبار 01 </a> </li>

<li> <span> 6 يونيو 2006 </span> <a href =#> عنوان الأخبار 02 </a> </li>

<li> <span> 6 يونيو 2006 </span> <a href =#> عنوان الأخبار 03 </a> </li>

<li> <span> 6 يونيو 2006 </span> <a href =#> عنوان الأخبار 04 </a> </li>

</ul>

2.IE تنفذ التدرج الخلفية للصفحة (FF والكروم لا يدعمان)

من أعلى إلى أسفل:

body {filter: progid: dimizageTransform.microsoft.gradient (gradientType = 0 ، startColorStr =#ffffff ، endcolorstr =#000000) ؛}

من أعلى اليسار إلى أسفل اليمين:

Filter: alpha (النمط = 1 ، العتامة = 25 ، الانتهاء من الذروة = 100 ، startx = 50 ، finishx = 100 ، Starty = 50 ، finishy = 100) ؛ خلفية اللون: SkyBlue ؛}

من اليسار إلى اليمين

body {filter: progid: dimizageTransform.microsoft.gradient (GradientType = 1 ، StartColorStr =#ffffff ، endcolorstr =#000000) ؛}

من أعلى إلى أسفل

style = filter: progid: dimizageTransform.microsoft.gradient (gradientType = 0 ، startColorStr = Blue ، endColorstr = White) ؛

3. يحقق نمط التحويم مجموعة متنوعة من التأثيرات ويمكن استخدامه بمرونة

#OUter A {Border: 1px Solid #069 ؛}

#outer a: hover {border: 1px sutied #c00 ؛}

4. الحدود: لا شيء ؛ الفرق من الحدود: 0

اختلافات الأداء النظرية:

الحدود: 0 ؛ تعيين الحدود على 0 بكسل على الرغم من أنها غير مرئية على الصفحة ، وفقًا لقيمة الحدود الافتراضية ، لا يزال المتصفح يجعل عرض الحدود/اللون الحدود ، أي أن قيمة الذاكرة قد تم احتلالها. الحدود: لا شيء ؛ حدد الحدود إلى لا شيء ، أي أنه لا يوجد إجراء عرض عندما لا يموت المتصفح أي شيء ، أي لن يتم استهلاك قيمة الذاكرة.

اختلافات التوافق:

الفرق التوافق هو فقط للمتصفحات IE6 ، IE7 ، زر العلامة ، الإدخال ، وسيحدث هذا تحت موضوعات XP من WIN و WIN7 و VISTA. عندما لا تكون الحدود ، يبدو أن الحدود غير صالحة لـ IE6/7 لا تزال موجودة. عندما تكون الحدود 0 ، فإنه يبدو أكثر فعالية من لا شيء. جميع المتصفحات تخفي باستمرار الحدود.

كيفية جعل الحدود: لا شيء ؛ متوافق تمامًا؟ فقط أضف سمات الخلفية إلى نفس المحدد

5.CSS ينفذ تصميم محيط متعدد العمود ، الهامش الداخلي الإيجابي والهامش الخارجي السلبي

قم بتطبيق الأنماط على كل عمود يحتاج إلى تحقيق الكنتور: .e {padding-bottom: 32767px ؛ قاع الهامش: -32767px ؛}

6. الإشارة: النسبية ؛ الاستخدام الخاص؟ ؟ ؟ ؟

* {margin: 0 ؛ padding: 0 ؛ font: normal 12px/25px songti ؛}

body {background:#f8f8f8 ؛}

ul {style style: none ؛ width: 300px ؛ الارتفاع: 25px ؛ الهامش: 20px Auto ؛}

li {float: left ؛ width: 86px ؛ الارتفاع: 25px ؛ محاذاة النص: الوسط ؛ الهامش: 0 -5px ؛ عرض: inline ؛}

A {color: #ffff ؛ تعويم: اليسار ؛ العرض: 86px ؛ الارتفاع: 25px ؛ الأعلى: 0 ؛ اليسار: 0 ؛ الخلفية: url (***. gif) مركز لا يكرر ؛}

a: hover {color:#000 ؛ background: url (***. gif) 0 0 no-repeat ؛ width: 86px ؛ position: recatial ؛}

تفاصيل 6 ................................................................................................................................................................................................................................... ....................................................................................................................................................................................................................................... ....................................................................................................................................................................................................................................... .......................................................................................................................................................................................................................................

1. النص الداخلي: المحتوى من موضع البداية إلى الموضع النهائي ، لا يتضمن العلامة innerhtml

Outerhtml: يحتوي على innerhtml والعلامات

Test.InnerText: Test1 Test2

test.innerhtml: <span> test1 </span> test2

test.outerHtml: <div id = test> <span> test1 </span> test2 </iv>

2. الرقم (): عندما يتم استخدام أي سلسلة تحتوي على أحرف غير رقمية كمعلمة ، فإن النتيجة هي NAN

Parseint (): قم بتحويل السلسلة إلى رقم منخفض قدر الإمكان من اليسار إلى اليمين حتى يتوقف عند مواجهة رقم غير رقمي

isnan (): العودة صحيح عندما لا تكون المعلمة رقم ؛

3. أ = 23.50abc

نوع (أ) = سلسلة

parsefloat (a) = 23.5

Parseint (A) = 23

الرقم (أ) = نان

4. أسماء متغيرات JS تحتوي

5. GetElementsbyTagname_R () يحتاج إلى استرداد بعد تحميل المستند

6. nodetype: 12 نوعًا ، 1 يمثل عقدة العنصر ، و 3 يمثل عقدة نصية

NODENAME: يمثل اسم العقدة. إذا كانت عقدة نصية ، فهذا يعني #Text

قيمة Nodevalue: يمثل قيمة العقدة

على سبيل المثال: احصل على العقدة if (obj.nodename.toLowerCase () == 'li') {}

قم بتغيير المحتوى النص الخاص بـ p document.getElementsByTagname_R ('P') [0] .firstchild.nodevalue = ''

7. العقدة الوالدية لعقدة الطفل

الأطفال: قائمة بجميع العقد الطفل من المستوى الأول في العنصر ، باستثناء العقد العميقة للأطفال

obj.firstchild = obj.childnodes [0]

obj.lastchild = obj.childnodes [obj.childnodes.length-1]

يحدد Haschildnodes () ما إذا كان العنصر لديه أطفال ويعيد قيمة منطقية

7. عقدة الطفل إلى العقدة الوالدية

var parentelm = myLinkItem.ParentNode ؛

بينما (parentelm ، className! = 'syna' && parentelm! = 'document.body')

parentelm = parentelm.parentnode

8. تعديل خصائص العناصر

1) احصل أو تعيين في شكل خصائص الكائن

var mainimage = document.getElementByIdx_x ('nav'). getElementsByTagName ['img'] [0] ؛

mainimage.src = '' ؛

Mainimage. ؛

2) استخدام طرق getAttribute () و setattribute ()

تفاصيل 7 ....................................................................................................................................................................................................................................... ....................................................................................................................................................................................................................................... ....................................................................................................................................................................................................................................... .......................................................................................................................................................................................................................................

1. تحويل الأرقام إلى نموذج يحتوي على وظيفة X Decimal Places Roundto (قاعدة ، دقة)

{var m = math.pow (10 ، الدقة) ؛

var a = math.round (base*m)/m ؛

إرجاع أ ؛

}

var n = 3.942487 ؛

Roundto (n ، 3) = 3.942

Roundto (n ، 0) = 3

2. إنشاء أرقام عشوائية مقيدة

وظيفة RandomBetween (Min ، Max)

{return min+math.floor (math.random ()*(max-min+1))}

3. تحويل الأرقام إلى سلاسل

var a = 10 ؛

a = string (a) ؛/a = a.toString () ؛

4. ترميز عنوان URL

var a =؟ p = e ؛

var b = Escape (a) ؛

var c = (b) ؛

5. تغيير نوع العناصر في المستند

P ---> div

أولاً قم بإنشاء عنصر div ، ثم انسخ عقدة الطفل في div ، وأخيراً استبدال p بـ div

6. كم عدد المعلمات المطلوبة لوظيفة ما

وظيفة إضافة (n1 ، n2) {}

إرجاع num = add.length ؛

7. كم عدد المعلمات التي يتم تمريرها في وظيفة

وظيفة إضافة (n1 ، n2) {

إرجاع الحجج. الطول ؛}

تفاصيل 8 ........................................................................................................................................................................................................................... ....................................................................................................................................................................................................................................... ....................................................................................................................................................................................................................................... .......................................................................................................................................................................................................................................

1). العرض: كتلة مضمنة. كما يوحي الاسم ، إنه شكل كتلة في الخط ، ويمكن ضبط عرض الارتفاع.

العرض: -moz-inline-stack ؛ // Firefox رمز فقط

العرض: كتلة مضمنة. // بعض المتصفحات القياسية

التكبير: 1 ؛ // أي فقط

*العرض: مضمّن ؛ // فقط IE تعرف هذا الرمز (CSS Hack)

}

.clearfix: بعد {الرؤية: مخفي ؛ عرض: block ؛ الحجم الخط: 0 ؛ المحتوى: ؛ واضح: كلاهما ؛ الارتفاع: 0 ؛}

.clearfix {Zoom: 1 ؛}

3). أضف أيقونة مخصصة في شريط العناوين

أولاً ، نحتاج إلى تمثيل ملف رمز مسبقًا بحجم 16*16 بكسل. امتداد الملف هو ICO وتحميله إلى الدليل المقابل. أضف الكود التالي بين ملف مصدر HTML <head> </head>: <link rel = icon name href = عنوان الصورة (لاحظ أنه يتوافق مع الدليل الآن)>. بالطبع ، إذا كان المستخدم يعرض باستخدام IE5 أو أعلى ، فسيكون ذلك أسهل. فقط قم بتحميل الصورة إلى الدليل الجذر لموقع الويب ويمكن التعرف عليه تلقائيًا!

4). عند ضبط الشاشة: حاوية حظر فارغة في IE6 إلى ارتفاع أصغر ، مثل <p style = الارتفاع: 1px ؛> </p> ، ستجد أن ارتفاعه لا يمكن أن يكون أقل من قيمة معينة. الحل: تعيين الفائض: مخفي.

5). يتم قطع النص مع القطع الإهليلجي

div {width: 200px ؛ الارتفاع: 100px ؛ overflow: hidden ؛ text-overflow: ellipsis ؛ white-space: nowrap ؛}