تم تنفيذ تخطيط ويب بسيط يحتوي على خمسة مربعات مختلفة، لكل منها صورة خلفية مختلفة وبعض المسافات بينها. عندما تقوم بالتمرير فوق مربع، تصبح صورة الخلفية باهتة ويتحول النص إلى اللون الأبيض. يتم وضع الصناديق والأزرار في حاوية وتبدو الصفحة بأكملها وكأنها معرض.
<div class="container">
<div معرف = "الشريحة">
<div class="item" style="background-image:url('./img/Zhang Ruonan01.jpg')"></div>
<div class="item" style="background-image:url('./img/Ju Jingyi01.jpg')"></div>
<div class="item" style="background-image:url('./img/Ju Jingyi02.jpg')"></div>
<div class="item" style="background-image:url('./img/Ju Jingyi06.jpg')"></div>
<div class="item" style="background-image:url('./img/Ju Jingyi04.jpg')"></div>
<div class="item" style="background-image:url('./img/Ju Jingyi07.jpg')"></div>
</div>
<div class="buttons">
<div class="left">
<السابق</div>
<div class="center">تنزيل الخلفية</div>
<div class="right">التالي </div>
</div>
</div>
</div> * {
الهامش: 0;
الحشو: 0؛
تحجيم الصندوق: صندوق الحدود؛
}
.حاوية {
العرض: 100 فولت واط؛
الارتفاع: 100 فولت؛
الموقف: نسبي؛
الفائض: مخفي؛
}
.غرض {
العرض: 240 بكسل؛
الارتفاع: 160 بكسل؛
الموقف: مطلق؛
أعلى: 50%؛
اليسار: 0؛
تحويل: ترجمة Y(-50%);
نصف قطر الحدود: 10 بكسل؛
ظل الصندوق: 0 30px 50px #505050;
حجم الخلفية: الغلاف؛
موقف الخلفية: المركز؛
الانتقال: 1S؛
}
.item:nth-child(1),
.البند:نث-الطفل(2) {
اليسار: 0؛
أعلى: 0؛
العرض: 100%؛
الارتفاع: 100%؛
تحويل: ترجمة Y(0);
ظل الصندوق: لا شيء؛
نصف قطر الحدود: 0؛
}
.البند:نث-الطفل(3) {
اليسار: 70%؛
}
.البند:نث-الطفل(4) {
اليسار: احسب (70% + 250 بكسل)؛
}
.البند:نث-الطفل(5) {
اليسار: احسب (70% + 500 بكسل)؛
}
.البند:ن-الطفل(ن+6) {
اليسار: احسب (70% + 750 بكسل)؛
العتامة: 0؛
}
أزرار {
العرض: 100%؛
الموقف: مطلق؛
أسفل: 50 بكسل؛
الهامش الأيسر: -50 بكسل؛
محاذاة النص: مركز؛
العرض: فليكس؛
ضبط المحتوى: مركز؛
}
أزرار شعبة {
العرض: 120 بكسل؛
الارتفاع: 50 بكسل؛
ارتفاع الخط: 50 بكسل؛
محاذاة النص: مركز؛
نصف قطر الحدود: 5 بكسل؛
الهامش: 0 25 بكسل؛
الانتقال: .5 ثانية؛
المؤشر: المؤشر؛
تحديد المستخدم: لا شيء؛
حجم الخط: 20 بكسل؛
اللون: #ففف؛
لون الخلفية: rgba(0, 0, 0, 0.4);
ظل الصندوق: 2px 2px 2px rgba(0, 0, 0, 0.2);
} const leftBtn = document.querySelector(".buttons .left")
const rightBtn = document.querySelector(".buttons .right")
شريحة ثابتة = document.querySelector("#slide")
Let openClick = true // المعالجة الخانقة (لضمان عدم النقر فوق الزر بشكل متكرر لضمان عملية تنفيذ الرسوم المتحركة)
leftBtn.addEventListener("انقر"، () => {
إذا (افتح كليك) {
openClick = false // بعد تشغيل النقرة، قم بتعطيل الزر const items = document.querySelectorAll(".item")
Slide.prepend(العناصر[items.length - 1])
setTimeout(() => openClick = true, 1000) // 1 ثانية لفتح الزر مرة أخرى}
})
rightBtn.addEventListener("انقر"، () => {
إذا (افتح كليك) {
openClick = false
عناصر ثابتة = document.querySelectorAll(".item")
Slide.appendChild(العناصر[0])
setTimeout(() => openClick = صحيح، 1000)
}
}) * {
الهامش: 0;
الحشو: 0؛
تحجيم الصندوق: صندوق الحدود؛
}يعيّن هذا الرمز نمط CSS العام، بما في ذلك تعيين نموذج الصندوق للعنصر على مربع الحدود، أي أن عرض نموذج الصندوق وارتفاعه يتضمنان حدود العنصر وحشوه، بدلاً من محتوى العنصر فقط.
.حاوية {
العرض: 100 فولت واط؛
الارتفاع: 100 فولت؛
الموقف: نسبي؛
الفائض: مخفي؛
}يقوم هذا الكود بتعيين نمط CSS للحاوية، بما في ذلك ضبط عرض وارتفاع الحاوية على 100vw و100vh، وهما عرض وارتفاع منفذ العرض. في الوقت نفسه، قم بتعيين موضع الحاوية على الموضع النسبي، أي الموضع بالنسبة إلى العنصر الأصلي. أخيرًا، قم بتعيين خاصية تجاوز السعة للحاوية على مخفية، أي لن يتم عرض العناصر التي تتجاوز نطاق الحاوية.
.غرض {
العرض: 240 بكسل؛
الارتفاع: 160 بكسل؛
الموقف: مطلق؛
أعلى: 50%؛
اليسار: 0؛
تحويل: ترجمة Y(-50%);
نصف قطر الحدود: 10 بكسل؛
ظل الصندوق: 0 30px 50px #505050;
حجم الخلفية: الغلاف؛
موقف الخلفية: المركز؛
الانتقال: 1S؛
}يقوم هذا الكود بتعيين نمط CSS للمربع، بما في ذلك ضبط عرض المربع وارتفاعه على 240 بكسل و160 بكسل، وهو حجم المربع. في الوقت نفسه، قم بتعيين موضع الصندوق على الموضع المطلق، أي الموضع بالنسبة إلى العنصر الأصلي الخاص به. أخيرًا، اضبط نصف قطر حدود المربع على 10 بكسل، وهي الزاوية المستديرة للمربع. حجم صورة الخلفية للمربع هو الغلاف، الذي يغطي الصندوق بأكمله. يتم توسيط صورة الخلفية. أخيرًا، اضبط تأثير الانتقال للمربع على ثانية واحدة، أي أن وقت تأثير الانتقال هو ثانية واحدة.
.item:nth-child(1),
.البند:نث-الطفل(2) {
اليسار: 0؛
أعلى: 0؛
العرض: 100%؛
الارتفاع: 100%؛
تحويل: ترجمة Y(0);
ظل الصندوق: لا شيء؛
نصف قطر الحدود: 0؛
}يقوم هذا الكود بتعيين أنماط CSS للمربعين الأول والثاني، بما في ذلك تعيين مواضعهما على 0، مما يعني أنهما يغطيان الجزء العلوي من الحاوية. أيضًا، اضبط ارتفاعها على 100%، مما يعني أنها تغطي ارتفاع الحاوية بالكامل. وأخيرًا، قم بتعيين خصائص التحويل الخاصة بهم إلى TranslationY(0)، مما يعني أنهم لن يتحركوا للأسفل. قم أيضًا بتعيين نصف قطر الظل والحدود على 0، أي ليس لديهم ظل وحدود.
.البند:نث-الطفل(3) {
اليسار: 70%؛
}يقوم هذا الكود بتعيين نمط CSS للمربع الثالث، بما في ذلك تحديد موضعه على 70% من الجانب الأيسر للحاوية.
.البند:نث-الطفل(4) {
اليسار: احسب (70% + 250 بكسل)؛
}يقوم هذا الكود بتعيين نمط CSS للمربع الرابع، بما في ذلك تحديد موضعه على 250 بكسل من الجانب الأيمن للمربع الثالث.
.البند:نث-الطفل(5) {
اليسار: احسب (70% + 500 بكسل)؛
}يقوم هذا الكود بتعيين نمط CSS للمربع الخامس، بما في ذلك تحديد موضعه على 500 بكسل من الجانب الأيمن للمربع الثالث.
.البند:ن-الطفل(ن+6) {
اليسار: احسب (70% + 750 بكسل)؛
العتامة: 0؛
}يقوم هذا الكود بتعيين أنماط CSS لجميع المربعات، بما في ذلك تحديد موضعها على 750 بكسل من يمين المربع الثالث. أيضًا، اضبط درجة التعتيم على 0، أي أنها غير مرئية.
أزرار {
العرض: 100%؛
الموقف: مطلق؛
أسفل: 50 بكسل؛
الهامش الأيسر: -50 بكسل؛
محاذاة النص: مركز؛
العرض: فليكس؛
ضبط المحتوى: مركز؛
}يهدف هذا الرمز إلى تعيين نمط CSS للزر، بما في ذلك ضبط عرض الزر على 100%، أي أن حجم الزر هو نفس حجم الحاوية. في الوقت نفسه، اضبط موضع الزر على 50 بكسل من أسفل الحاوية. أخيرًا، قم بضبط محاذاة الزر على محاذاة المركز، مما يعني أن الزر يتم توسيطه أفقيًا.
أزرار شعبة {
العرض: 120 بكسل؛
الارتفاع: 50 بكسل؛
ارتفاع الخط: 50 بكسل؛
محاذاة النص: مركز؛
نصف قطر الحدود: 5 بكسل؛
الهامش: 0 25 بكسل؛
الانتقال: .5 ثانية؛
المؤشر: المؤشر؛
تحديد المستخدم: لا شيء؛
حجم الخط: 20 بكسل؛
اللون: #ففف؛
لون الخلفية: rgba(0, 0, 0, 0.4);
ظل الصندوق: 2px 2px 2px rgba(0, 0, 0, 0.2);
}هذا الكود مخصص لتعيين نمط CSS للزر، بما في ذلك ضبط عرض الزر على 120 بكسل وارتفاعه على 50 بكسل، وهو حجم الزر. وفي الوقت نفسه، اضبط ارتفاع صف الزر على 50 بكسل، وهو ارتفاع الزر. يتم توسيط محاذاة النص للزر، أي أن النص يتم توسيطه أفقيًا. يبلغ نصف قطر حدود الزر 5 بكسل، وهي الزوايا الدائرية للزر. هامش الزر هو 0 25 بكسل، أي أن المسافة بين الجانبين الأيسر والأيمن للزر في الاتجاه الأفقي هي 25 بكسل. تأثير انتقال الزر هو 0.5 ثانية، أي أن وقت تأثير الانتقال هو 0.5 ثانية. خاصية المؤشر الخاصة بالزر هي المؤشر، أي أنه عندما يمرر الماوس فوق الزر، سيتغير شكل الماوس إلى شكل اليد. سمة تحديد المستخدم للزر هي لا شيء، أي أنه لا يمكن للمستخدم تحديد النص الموجود في الزر. حجم خط الزر هو 20 بكسل، وهو حجم نص الزر. لون نص الزر هو الأبيض، وهو لون نص الزر. لون خلفية الزر هو rgba(0, 0, 0, 0.4)، أي أن لون خلفية الزر أسود والشفافية 0.4. خاصية ظل الزر هي 2px 2px 2px rgba(0, 0, 0, 0.2)، أي أن ظل الزر هو 2px 2px 2px أسود والشفافية هي 0.2.
وبهذا تنتهي هذه المقالة حول نموذج التعليمات البرمجية للعرض الدائري البانورامي لـ HTML+CSS لمزيد من المحتوى الدائري البانورامي لـ HTML CSS، يرجى البحث في المقالات السابقة على downcodes.com أو الاستمرار في تصفح المقالات ذات الصلة التالية، أتمنى منكم جميعًا دعم downcodes.com المزيد في المستقبل!