درود! در این مقاله میخواهیم با هم یک نمونه کار فقط با کد های html css بنویسیم تا هنگامی که بعنوان کاراموز به شرکتی رزومه فرستاده میشود, نمونه کار همراه رزومه ارسال گردد. به این ترتیب شانس همکاری با شرکت مربوطه افزایش می یابد. این کد ها بسیار ساده هستند و اگر بیشتر وقت بگذارید قطعا نمونه کار زیباتری طراحی خواهید کرد.
لطفا از این لینک کدها را دانلود کنید! تمام فایل ها و دایرکتوری ها به این ترتیب هستند.
htmlcss/index.html htmlcss/img/header-image.jpg htmlcss/css/style.css htmlcss/css/header-image.css htmlcss/css/menu.css
در پوشه htmlcss بروید و روی index.html کلیک نمایید تا در بروزر باز شود. همانطور که در تصویر مشاهده میشود, این همان نمای نتیجه است. در ادامه این مقاله, قطعه به قطعه از کدهای استایل نوشته شده توضیح داده میشود.
کد های index.html که دانلود کردید به صورت زیر نمایش داده میشود:
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>nemoone kar html css</title> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/menu.css"> <link rel="stylesheet" href="css/header-image.css"> </head> <body> <div class="header"> <div class="nav"> <ul class="menu"> <li class="menu__li">Home</li> <li class="menu__li">Blog</li> <li class="menu__li">About Us</li> <li class="menu__li">Contact Us</li> </ul> <!-- menu --> </div> <!-- nav --> <div class="header-image"> <div class="header-image__intro"> <h3 class="header-image__h3">Welcome to this Sample Work!</h3> <p class="header-image__p">It would be a simple test for zero starter!</p> </div> <!-- header-image__intro --> </div> <!-- header-image --> </div> <!-- header --> </body> </html>
همانطور که در شکل ملاحظه میفرمایید بسیار مختصر است. برای شروع همین کافیست. به مرور نمونه کارهایتان را قوی میکنید. در کدهای بالا از قاعده BEM برای نامگذاری namespacing در کلاس ها استفاده شده است. همینطور در بالای صفحه html میبینید که سه تگ <link> وجود دارد. هرکدام به یک برگه css مربوط میشوند. اگر توجه کنید در پوشه css هم سه فایل وجود دارد.
سوال: چرا چند فایل css ایجاد شده است؟
پاسخ: زیرا از قاعده BEM برای css file structure استفاده شده است. به فارسی به ان موقعیت و معماری پوشه بندی میگویند. برای توضیح بیشتر این قاعده یک بلاک مانند کلاس menu را درنظر بگیرید! این کلاس به تگ <ul> داده شده است. کلاس menu به عنوان بلاک و کلاس های menu__li که به تگ <li> داده شده اند المنت هستند.
اینجا نمیتوان درباره همه ویژگی کدهای css صحبت کرد. به همین دلیل به چند قطعه از مهمترین انها اشاره میشود. احتمالا بقیه را خودتان میدانید. شاید هم تمام کدها و توضیحات اینجا را بلدید و فقط دوست دارید یک مقاله برای مرور بخوانید!
در برگ menu.css این کد ها را مشاهده میکنید!
وبلاگ با برنامه
مطلب مرتبط
آموزش Communication در هوانوردی.menu{
padding: 0;
}
.menu__li{
font-size: 1.2em;
list-style: none;
display: inline-block;
width: 120px;
text-align: center;
box-shadow: 3px 3px gold;
margin-right: 10px;
background-color: white;
}
نکته 1: در قطعه کد بالا list-style: none باعث میشود نقاطی که کنار هر تگ li قرار دارند محو شوند.
نکته 2: در قطعه کد بالا display: inline-block باعث میشود تگ های li بجای اینکه زیر هم قرار بگیرند، از چپ به راست چیده شوند.
نکته 3: در قطعه کد بالا width: 120px باعث میشود تا اندازه هریک از تگ های li با هم برابر باشد. در حالت پیشفرض اندازه عرض هریک از این تگ های li بستگی به مقدار متن داخل ان دارد و برای هریک کوچک و بزرگ میشود و ظاهر زیبایی به ان نمیدهد. ما این جا همه کادرهای سفید رنگ را برابر 120 پیکسل کردیم.
نکته 4: در قطعه کد بالا text-align: center باعث میشود همه متن ها در وسط کادر سفید رنگ قرار بگیرند. در غیراینصورت به سمت چپ چسبیده بودند.
نکته 5: در قطعه کد بالا margin-right: 10px باعث میشود هریک از تگ های li با تگ سمت راستی خود مقداری فاصله بگیرد تا به زیبایی سایت کمک کند. این مارجین را در سمت راست قرار دادیم زیرا زبان این سایت لاتین است. چنانچه زبان سایت فارسی بود مارجین را برای سمت چپ قرار میدادیم. بجای margin-right مینوشتیم margin-left تا با سمت چپی خود فاصله را حفظ کند.
اینجا فقط کدهای کلاس header-image را می اوریم. مهمتر از بقیه هستند.
.header-image{
height: 400px;
background-image: url('../img/header-image.jpg');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
display: flex;
justify-content: center;
align-items: center;
}
نکته 1: در قطعه کد بالا height: 400px مشاهده میکنید. اگر این قطعه کد نبود اصلا تصویری در بروزر نمایش داده نمیشد.
نکته 2: در قطعه کد بالا background-image مشاهده میکنید که مقدارش داخل url قرار داده شده است. واضح است که ادرس بصورت لوکال (ادرس نسبی relative) داده شده است.
نکته 3: در قطعه کد بالا background-size: cover مشاهده میکنید که باعث میشود تصویر به اندازه تگ <div> فیت شود و بزرگتر از ابعاد ان نشان داده نشود. تصویر header-image.jpg ابعاد بزرگتری نسبت به انچه در بروزر نمایش داده شده دارد.
در قطعه کد بالا سه قطعه کد مربوط به سیستم ستون بندی flex مشاهده میکنید.
نکته 4: اولین قطعه کد display: flex است که تعیین میکند layout بر اساس flexbox باشد.
نکته 5: دومین کد یعنی justify-content: center تعیین میکند که دیو کلاس بچه یعنی کلاس header-image__intro بصورت افقی در center قرار گیرد.
نکته 6: سومین کد یعنی align-items: center تعیین میکند که کلاس header-image__intro بصورت عمودی نیز در مرکز قرار گرفته شود.
برای مطالعه بیشتر و تست کردن کدهای html css بصورت انلاین میتوانید به سایت w3schools.com بروید! یکی از بهترین منابع اموزشی است.
از مطالعه این مقاله سپاسگذارم!
تبلیغات افزایش بازدید و افزایش فروش در ارم بلاگ
مشاهده
