تصفح:159
يعد إنشاء موقع ويب سريع الاستجابة مهارة أساسية لأي مطور للواجهة الأمامية. يقوم موقع الويب سريع الاستجابة بتعديل تخطيطه ومحتواه بناءً على حجم الجهاز والشاشة، مما يضمن تجربة مستخدم رائعة عبر جميع الأجهزة. في هذه المقالة، سنرشدك خلال عملية إنشاء موقع ويب أساسي سريع الاستجابة باستخدام HTML وCSS.
قبل البدء، يجب أن يكون لديك فهم أساسي لـ HTML وCSS. سيكون الإلمام بـ CSS Flexbox واستعلامات الوسائط مفيدًا أيضًا.
ابدأ بإنشاء مجلد مشروع جديد وإضافة الملفات التالية:
افتح ملف Index.html وأضف بنية HTML الأساسية التي تريدها أن تكون أي شيء:
Responsive Website
My Responsive Website
Welcome to My Website
This is a simple responsive website built with HTML and CSS.
About Us
We provide excellent web development services.
Our Services
We offer a wide range of web development services.
Contact Us
Feel free to reach out to us for any inquiries.
بعد ذلك، افتح الملف style.css وابدأ بإضافة بعض الأنماط الأساسية:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
line-height: 1.6;
}
header {
background: #333;
color: #fff;
padding: 1rem 0;
}
header h1 {
text-align: center;
}
nav ul {
display: flex;
justify-content: center;
list-style: none;
}
nav ul li {
margin: 0 1rem;
}
nav ul li a {
color: #fff;
text-decoration: none;
}
main {
padding: 2rem;
}
section {
margin-bottom: 2rem;
}
footer {
background: #333;
color: #fff;
text-align: center;
padding: 1rem 0;
position: fixed;
width: 100%;
bottom: 0;
}
لجعل موقع الويب سريع الاستجابة، سنستخدم استعلامات الوسائط. يتيح لنا ذلك تطبيق أنماط مختلفة بناءً على حجم الشاشة. أضف استعلامات الوسائط التالية إلى style.css:
@media (max-width: 768px) {
nav ul {
flex-direction: column;
align-items: center;
}
nav ul li {
margin: 0.5rem 0;
}
main {
padding: 1rem;
}
}
@media (max-width: 480px) {
header h1 {
font-size: 1.5rem;
}
nav ul li {
margin: 0.25rem 0;
}
main {
padding: 0.5rem;
}
}
افتح ملف Index.html في متصفح الويب وقم بتغيير حجم نافذة المتصفح لترى كيف يتم ضبط التخطيط ليتناسب مع أحجام الشاشات المختلفة. من المفترض أن تشاهد قائمة التنقل مكدسة عموديًا وأن المساحة المتروكة حول المحتوى تتناقص مع انخفاض عرض الشاشة.
لقد قمت الآن بإنشاء موقع ويب بسيط وسريع الاستجابة باستخدام HTML وCSS! يغطي هذا المثال أساسيات هيكلة صفحة الويب واستخدام استعلامات الوسائط لإنشاء تصميم سريع الاستجابة. ومع اكتساب المزيد من الخبرة، يمكنك استكشاف التقنيات المتقدمة مثل CSS Grid وFlexbox والصور سريعة الاستجابة لإنشاء تخطيطات أكثر تعقيدًا وديناميكية.
ابقوا متابعين!!!
تنصل: جميع الموارد المقدمة هي جزئيًا من الإنترنت. إذا كان هناك أي انتهاك لحقوق الطبع والنشر الخاصة بك أو الحقوق والمصالح الأخرى، فيرجى توضيح الأسباب التفصيلية وتقديم دليل على حقوق الطبع والنشر أو الحقوق والمصالح ثم إرسالها إلى البريد الإلكتروني: [email protected]. سوف نتعامل مع الأمر لك في أقرب وقت ممكن.
Copyright© 2022 湘ICP备2022001581号-3
