
@media screen and (max-width: 600px) {
.sm--hide {
display: none;
}
.img > img {
width: 150px
}
}
برای یادآوری ،یک display: none
از عناصر مورد استفاده را پنهان نمی کند.هر کلاس .sm--hide
در تلفن همراه پنهان می شود. فقط کافی است این کلاس را به عنصر مورد نظر اضافه کنید.نحوه کار:<p class=”sm–hide”>Unknown Artist</p> <p class=”sm–hide”>2016 . Charts . ۱۰۰ songs</p>
و ما این را داریم: پس از مرتب کردن نما در تلفن همراه ، برای صفحه های بزرگتر این مشکل را برطرف کنیم.بازگشت بهgrid
والدین.برای صفحه های بزرگتر ، ما به یک grid
دو ستونی نیاز داریم. مناطق باید به این صورت تقسیم شوند:@media only screen and (min-width:600px) {
.main__header {
grid-template-columns: 250px 1fr;
grid-template-areas: "img dtls"
}
}
من مطمئن هستم که شما می فهمید آنجا چه خبر است. grid
تعریف شده است که دارای دو ستون باشد. یکی در ۲۵۰ پیکسل ثابت و دیگری برای پر کردن فضای باقی مانده.
ببینید چه چیزی داریم!من می دانم که چیزهای زیادی به زمین بازی بالا رفته است …نگاهی بیندازید و فراموش نکنید که به درس فوق مراجعه کنید.اگر گیر کردید ، لطفاً با من تماس بگیرید.@media screen and (max-width: 600px) {
.main__header > .details {
text-align: center;
}
}
ما تقریباً به هدف نهایی نزدیک شده ایم. فقط چند اصلاح دیگر.نگران نباشید ، یک زمین بازی برای جبران همه این تغییرات وجود دارد!پاراگراف های دارای متن ، هنرمند ناشناخته ، وتمام جزییات باید در تلفن همراه پنهان شود.تصویر نیز باید کوچکتر باشد.@media screen and (max-width: 600px) {
.sm--hide {
display: none;
}
.img > img {
width: 150px
}
}
برای یادآوری ،یک display: none
از عناصر مورد استفاده را پنهان نمی کند.هر کلاس .sm--hide
در تلفن همراه پنهان می شود. فقط کافی است این کلاس را به عنصر مورد نظر اضافه کنید.نحوه کار:<p class=”sm–hide”>Unknown Artist</p> <p class=”sm–hide”>2016 . Charts . ۱۰۰ songs</p>
و ما این را داریم: پس از مرتب کردن نما در تلفن همراه ، برای صفحه های بزرگتر این مشکل را برطرف کنیم.بازگشت بهgrid
والدین.برای صفحه های بزرگتر ، ما به یک grid
دو ستونی نیاز داریم. مناطق باید به این صورت تقسیم شوند:@media only screen and (min-width:600px) {
.main__header {
grid-template-columns: 250px 1fr;
grid-template-areas: "img dtls"
}
}
من مطمئن هستم که شما می فهمید آنجا چه خبر است. grid
تعریف شده است که دارای دو ستون باشد. یکی در ۲۵۰ پیکسل ثابت و دیگری برای پر کردن فضای باقی مانده.
ببینید چه چیزی داریم!من می دانم که چیزهای زیادی به زمین بازی بالا رفته است …نگاهی بیندازید و فراموش نکنید که به درس فوق مراجعه کنید.اگر گیر کردید ، لطفاً با من تماس بگیرید.@media screen and (max-width: 600px) {
.main__header {
justify-items: center;
}
}
اکنون موارد grid
در مرکز grid
قرار می گیرند (در امتداد ردیف)
متن را در . detailsalign
به مرکز تراز کنید :@media screen and (max-width: 600px) {
.main__header > .details {
text-align: center;
}
}
ما تقریباً به هدف نهایی نزدیک شده ایم. فقط چند اصلاح دیگر.نگران نباشید ، یک زمین بازی برای جبران همه این تغییرات وجود دارد!پاراگراف های دارای متن ، هنرمند ناشناخته ، وتمام جزییات باید در تلفن همراه پنهان شود.تصویر نیز باید کوچکتر باشد.@media screen and (max-width: 600px) {
.sm--hide {
display: none;
}
.img > img {
width: 150px
}
}
برای یادآوری ،یک display: none
از عناصر مورد استفاده را پنهان نمی کند.هر کلاس .sm--hide
در تلفن همراه پنهان می شود. فقط کافی است این کلاس را به عنصر مورد نظر اضافه کنید.نحوه کار:<p class=”sm–hide”>Unknown Artist</p> <p class=”sm–hide”>2016 . Charts . ۱۰۰ songs</p>
و ما این را داریم: پس از مرتب کردن نما در تلفن همراه ، برای صفحه های بزرگتر این مشکل را برطرف کنیم.بازگشت بهgrid
والدین.برای صفحه های بزرگتر ، ما به یک grid
دو ستونی نیاز داریم. مناطق باید به این صورت تقسیم شوند:@media only screen and (min-width:600px) {
.main__header {
grid-template-columns: 250px 1fr;
grid-template-areas: "img dtls"
}
}
من مطمئن هستم که شما می فهمید آنجا چه خبر است. grid
تعریف شده است که دارای دو ستون باشد. یکی در ۲۵۰ پیکسل ثابت و دیگری برای پر کردن فضای باقی مانده.
ببینید چه چیزی داریم!من می دانم که چیزهای زیادی به زمین بازی بالا رفته است …نگاهی بیندازید و فراموش نکنید که به درس فوق مراجعه کنید.اگر گیر کردید ، لطفاً با من تماس بگیرید..main__header {
display: grid;
grid-template-areas: "img"
"dtls";
}
.main__header
زمینه قالب بندی grid
را تعیین می کند. مناطق نیز تراز شده اند تا به صورت عمودی روی دیگری قرار بگیرند. ابتدا .img
سپس dtls
این به این دلیل است که ما با رویکرد همراه اول کار می کنیم. خوبدر این مرحله ، هیچ چیز زیادی تغییر نکرده است.
این نمای مورد نظر ما در تلفن همراه نیست. برای صفحه های موبایل ، موارد باید در مرکز قرار بگیرند. بگذارید آن را برطرف کنیم.@media screen and (max-width: 600px) {
.main__header {
justify-items: center;
}
}
اکنون موارد grid
در مرکز grid
قرار می گیرند (در امتداد ردیف)
متن را در . detailsalign
به مرکز تراز کنید :@media screen and (max-width: 600px) {
.main__header > .details {
text-align: center;
}
}
ما تقریباً به هدف نهایی نزدیک شده ایم. فقط چند اصلاح دیگر.نگران نباشید ، یک زمین بازی برای جبران همه این تغییرات وجود دارد!پاراگراف های دارای متن ، هنرمند ناشناخته ، وتمام جزییات باید در تلفن همراه پنهان شود.تصویر نیز باید کوچکتر باشد.@media screen and (max-width: 600px) {
.sm--hide {
display: none;
}
.img > img {
width: 150px
}
}
برای یادآوری ،یک display: none
از عناصر مورد استفاده را پنهان نمی کند.هر کلاس .sm--hide
در تلفن همراه پنهان می شود. فقط کافی است این کلاس را به عنصر مورد نظر اضافه کنید.نحوه کار:<p class=”sm–hide”>Unknown Artist</p> <p class=”sm–hide”>2016 . Charts . ۱۰۰ songs</p>
و ما این را داریم: پس از مرتب کردن نما در تلفن همراه ، برای صفحه های بزرگتر این مشکل را برطرف کنیم.بازگشت بهgrid
والدین.برای صفحه های بزرگتر ، ما به یک grid
دو ستونی نیاز داریم. مناطق باید به این صورت تقسیم شوند:@media only screen and (min-width:600px) {
.main__header {
grid-template-columns: 250px 1fr;
grid-template-areas: "img dtls"
}
}
من مطمئن هستم که شما می فهمید آنجا چه خبر است. grid
تعریف شده است که دارای دو ستون باشد. یکی در ۲۵۰ پیکسل ثابت و دیگری برای پر کردن فضای باقی مانده.
ببینید چه چیزی داریم!من می دانم که چیزهای زیادی به زمین بازی بالا رفته است …نگاهی بیندازید و فراموش نکنید که به درس فوق مراجعه کنید.اگر گیر کردید ، لطفاً با من تماس بگیرید..main__header > .img {
grid-area: img;
}
.main__header > .details {
grid-area: dtls;
}
div حاوی تصویر img نامگذاری شده است. بخش حاوی جزئیات آلبوم dtls نامگذاری شده استحالا ، خود grid را تعریف کنید:.main__header {
display: grid;
grid-template-areas: "img"
"dtls";
}
.main__header
زمینه قالب بندی grid
را تعیین می کند. مناطق نیز تراز شده اند تا به صورت عمودی روی دیگری قرار بگیرند. ابتدا .img
سپس dtls
این به این دلیل است که ما با رویکرد همراه اول کار می کنیم. خوبدر این مرحله ، هیچ چیز زیادی تغییر نکرده است.
این نمای مورد نظر ما در تلفن همراه نیست. برای صفحه های موبایل ، موارد باید در مرکز قرار بگیرند. بگذارید آن را برطرف کنیم.@media screen and (max-width: 600px) {
.main__header {
justify-items: center;
}
}
اکنون موارد grid
در مرکز grid
قرار می گیرند (در امتداد ردیف)
متن را در . detailsalign
به مرکز تراز کنید :@media screen and (max-width: 600px) {
.main__header > .details {
text-align: center;
}
}
ما تقریباً به هدف نهایی نزدیک شده ایم. فقط چند اصلاح دیگر.نگران نباشید ، یک زمین بازی برای جبران همه این تغییرات وجود دارد!پاراگراف های دارای متن ، هنرمند ناشناخته ، وتمام جزییات باید در تلفن همراه پنهان شود.تصویر نیز باید کوچکتر باشد.@media screen and (max-width: 600px) {
.sm--hide {
display: none;
}
.img > img {
width: 150px
}
}
برای یادآوری ،یک display: none
از عناصر مورد استفاده را پنهان نمی کند.هر کلاس .sm--hide
در تلفن همراه پنهان می شود. فقط کافی است این کلاس را به عنصر مورد نظر اضافه کنید.نحوه کار:<p class=”sm–hide”>Unknown Artist</p> <p class=”sm–hide”>2016 . Charts . ۱۰۰ songs</p>
و ما این را داریم: پس از مرتب کردن نما در تلفن همراه ، برای صفحه های بزرگتر این مشکل را برطرف کنیم.بازگشت بهgrid
والدین.برای صفحه های بزرگتر ، ما به یک grid
دو ستونی نیاز داریم. مناطق باید به این صورت تقسیم شوند:@media only screen and (min-width:600px) {
.main__header {
grid-template-columns: 250px 1fr;
grid-template-areas: "img dtls"
}
}
من مطمئن هستم که شما می فهمید آنجا چه خبر است. grid
تعریف شده است که دارای دو ستون باشد. یکی در ۲۵۰ پیکسل ثابت و دیگری برای پر کردن فضای باقی مانده.
ببینید چه چیزی داریم!من می دانم که چیزهای زیادی به زمین بازی بالا رفته است …نگاهی بیندازید و فراموش نکنید که به درس فوق مراجعه کنید.اگر گیر کردید ، لطفاً با من تماس بگیرید..aside {
...
justify-items: center;
align-items: center;
}
هنوز گیج هستید ، هنگام تایپ کردن ، تغییرات مربوط به نوار کناری را تماشا کنید.اکنون ما آیکون های کاملاً خوبی را در نوار کناری قرار داده ایم.
چند مقدار دیگر از justify-items و align-items می توانند شامل شوند:stretch start end centerاگر با Flexbox
کار کرده اید ، این موارد باید آشنا باشند.ما ادامه می دهیم تا محتوای بیشتری را در طراحی فعلی قرار دهیم.قسمت اصلی ، قسمت آبی تیره را در تصویر بالا هدف قرار دهید. دو بخش را در داخل قرار دهید:<div class=”main”> <div class=”main__header”></div> <div class=”main__body”></div> </div>
توجه:.main__header
شامل هنر موسیقی و پخش خواهد بود.
.main__body جزئیات را در خود جای می دهد:
در این بخش ، ما بر روی .main__header
تمرکز خواهیم کردابتدا html مورد نیاز را اضافه کنید<div class=”main__header”> <div class=”img”> <img src=”http://bit.ly/2sc2NJd”/>
</div> <section class=”details”> <div> <p>CattyBoard Top ۱۰۰ Single Charts (۱۱٫۰۶٫۳۶)</p> <p class=”sm–hide”>Unknown Artist</p> <p class=”sm–hide”>2016 . Charts . ۱۰۰ songs</p> </div> <div> <i class=”fa fa-play”> Play all</i> <i class=”fa fa-plus”> Add to</i> <i class=”fa fa-ellipsis-h”> More</i> </div> </section> </div>
به نحوه ساختار سند توجه کنید..main__header
دارای دو فرزند مستقیم است. div
که شامل یک تصویر است و بخشی شامل جزئیات آلبوم ، .details
نتیجه اضافه شده در بالا، این تصویر نسبتاً زشت است:بیایید این را زیبا کنیم
آنچه ما نیاز داریم grid ای است که فرزندان خود را به طور مناسب تراز کند. بیایید از دانش جدید شما در موردgrid area
استفاده کنیم.اولین مرحله تعریف grid area
است:.main__header > .img {
grid-area: img;
}
.main__header > .details {
grid-area: dtls;
}
div حاوی تصویر img نامگذاری شده است. بخش حاوی جزئیات آلبوم dtls نامگذاری شده استحالا ، خود grid را تعریف کنید:.main__header {
display: grid;
grid-template-areas: "img"
"dtls";
}
.main__header
زمینه قالب بندی grid
را تعیین می کند. مناطق نیز تراز شده اند تا به صورت عمودی روی دیگری قرار بگیرند. ابتدا .img
سپس dtls
این به این دلیل است که ما با رویکرد همراه اول کار می کنیم. خوبدر این مرحله ، هیچ چیز زیادی تغییر نکرده است.
این نمای مورد نظر ما در تلفن همراه نیست. برای صفحه های موبایل ، موارد باید در مرکز قرار بگیرند. بگذارید آن را برطرف کنیم.@media screen and (max-width: 600px) {
.main__header {
justify-items: center;
}
}
اکنون موارد grid
در مرکز grid
قرار می گیرند (در امتداد ردیف)
متن را در . detailsalign
به مرکز تراز کنید :@media screen and (max-width: 600px) {
.main__header > .details {
text-align: center;
}
}
ما تقریباً به هدف نهایی نزدیک شده ایم. فقط چند اصلاح دیگر.نگران نباشید ، یک زمین بازی برای جبران همه این تغییرات وجود دارد!پاراگراف های دارای متن ، هنرمند ناشناخته ، وتمام جزییات باید در تلفن همراه پنهان شود.تصویر نیز باید کوچکتر باشد.@media screen and (max-width: 600px) {
.sm--hide {
display: none;
}
.img > img {
width: 150px
}
}
برای یادآوری ،یک display: none
از عناصر مورد استفاده را پنهان نمی کند.هر کلاس .sm--hide
در تلفن همراه پنهان می شود. فقط کافی است این کلاس را به عنصر مورد نظر اضافه کنید.نحوه کار:<p class=”sm–hide”>Unknown Artist</p> <p class=”sm–hide”>2016 . Charts . ۱۰۰ songs</p>
و ما این را داریم: پس از مرتب کردن نما در تلفن همراه ، برای صفحه های بزرگتر این مشکل را برطرف کنیم.بازگشت بهgrid
والدین.برای صفحه های بزرگتر ، ما به یک grid
دو ستونی نیاز داریم. مناطق باید به این صورت تقسیم شوند:@media only screen and (min-width:600px) {
.main__header {
grid-template-columns: 250px 1fr;
grid-template-areas: "img dtls"
}
}
من مطمئن هستم که شما می فهمید آنجا چه خبر است. grid
تعریف شده است که دارای دو ستون باشد. یکی در ۲۵۰ پیکسل ثابت و دیگری برای پر کردن فضای باقی مانده.
ببینید چه چیزی داریم!من می دانم که چیزهای زیادی به زمین بازی بالا رفته است …نگاهی بیندازید و فراموش نکنید که به درس فوق مراجعه کنید.اگر گیر کردید ، لطفاً با من تماس بگیرید.@media only screen and (min-width:600px) {
.aside {
display: grid;
}
.aside i {
border: 1px solid red;
}
}
من جلوتر رفته ام تا به هر نماد border اضافه کنم تا از نظر بصری قابل تشخیص باشند.آنجا چه اتفاقی می افتد؟
ما هیچ ردیف یا ستونی را در نوار کناری تنظیم نکرده ایم. اما آیکون های ارائه شده را به خوبی داریم.الگوریتمauto-placement grid
در تنظیم شده است.این مربوط به قرار دادن پیش فرض موارد در grid
است – در امتداد یک ردیف.همچنین ، موارد شبکه به گونه ای تنظیم شده اند که در صورت لزوم فضای ظرف grid
را اشغال کنند.در اینجا سس شیرین می آید.یک شبکه می تواند آیتم های خود را با استفاده از هر یک از ویژگی های justify-items
یا align-items
، تراز کند.موارد توجیهی موارد را در امتداد محور ردیف تراز می کند.در بیشتر موارد ، ردیف تقریباً مترادف با جهت افقی است.align-items
را در امتداد محور ستون تراز می کنند.در بیشتر موارد ، ستون نیز با جهت عمودی مترادف است.این را روی نوار کناری اعمال کنید ، و ما آیکون هایی را به خوبی ارائه داده ایم..aside {
...
justify-items: center;
align-items: center;
}
هنوز گیج هستید ، هنگام تایپ کردن ، تغییرات مربوط به نوار کناری را تماشا کنید.اکنون ما آیکون های کاملاً خوبی را در نوار کناری قرار داده ایم.
چند مقدار دیگر از justify-items و align-items می توانند شامل شوند:stretch start end centerاگر با Flexbox
کار کرده اید ، این موارد باید آشنا باشند.ما ادامه می دهیم تا محتوای بیشتری را در طراحی فعلی قرار دهیم.قسمت اصلی ، قسمت آبی تیره را در تصویر بالا هدف قرار دهید. دو بخش را در داخل قرار دهید:<div class=”main”> <div class=”main__header”></div> <div class=”main__body”></div> </div>
توجه:.main__header
شامل هنر موسیقی و پخش خواهد بود.
.main__body جزئیات را در خود جای می دهد:
در این بخش ، ما بر روی .main__header
تمرکز خواهیم کردابتدا html مورد نیاز را اضافه کنید<div class=”main__header”> <div class=”img”> <img src=”http://bit.ly/2sc2NJd”/>
</div> <section class=”details”> <div> <p>CattyBoard Top ۱۰۰ Single Charts (۱۱٫۰۶٫۳۶)</p> <p class=”sm–hide”>Unknown Artist</p> <p class=”sm–hide”>2016 . Charts . ۱۰۰ songs</p> </div> <div> <i class=”fa fa-play”> Play all</i> <i class=”fa fa-plus”> Add to</i> <i class=”fa fa-ellipsis-h”> More</i> </div> </section> </div>
به نحوه ساختار سند توجه کنید..main__header
دارای دو فرزند مستقیم است. div
که شامل یک تصویر است و بخشی شامل جزئیات آلبوم ، .details
نتیجه اضافه شده در بالا، این تصویر نسبتاً زشت است:بیایید این را زیبا کنیم
آنچه ما نیاز داریم grid ای است که فرزندان خود را به طور مناسب تراز کند. بیایید از دانش جدید شما در موردgrid area
استفاده کنیم.اولین مرحله تعریف grid area
است:.main__header > .img {
grid-area: img;
}
.main__header > .details {
grid-area: dtls;
}
div حاوی تصویر img نامگذاری شده است. بخش حاوی جزئیات آلبوم dtls نامگذاری شده استحالا ، خود grid را تعریف کنید:.main__header {
display: grid;
grid-template-areas: "img"
"dtls";
}
.main__header
زمینه قالب بندی grid
را تعیین می کند. مناطق نیز تراز شده اند تا به صورت عمودی روی دیگری قرار بگیرند. ابتدا .img
سپس dtls
این به این دلیل است که ما با رویکرد همراه اول کار می کنیم. خوبدر این مرحله ، هیچ چیز زیادی تغییر نکرده است.
این نمای مورد نظر ما در تلفن همراه نیست. برای صفحه های موبایل ، موارد باید در مرکز قرار بگیرند. بگذارید آن را برطرف کنیم.@media screen and (max-width: 600px) {
.main__header {
justify-items: center;
}
}
اکنون موارد grid
در مرکز grid
قرار می گیرند (در امتداد ردیف)
متن را در . detailsalign
به مرکز تراز کنید :@media screen and (max-width: 600px) {
.main__header > .details {
text-align: center;
}
}
ما تقریباً به هدف نهایی نزدیک شده ایم. فقط چند اصلاح دیگر.نگران نباشید ، یک زمین بازی برای جبران همه این تغییرات وجود دارد!پاراگراف های دارای متن ، هنرمند ناشناخته ، وتمام جزییات باید در تلفن همراه پنهان شود.تصویر نیز باید کوچکتر باشد.@media screen and (max-width: 600px) {
.sm--hide {
display: none;
}
.img > img {
width: 150px
}
}
برای یادآوری ،یک display: none
از عناصر مورد استفاده را پنهان نمی کند.هر کلاس .sm--hide
در تلفن همراه پنهان می شود. فقط کافی است این کلاس را به عنصر مورد نظر اضافه کنید.نحوه کار:<p class=”sm–hide”>Unknown Artist</p> <p class=”sm–hide”>2016 . Charts . ۱۰۰ songs</p>
و ما این را داریم: پس از مرتب کردن نما در تلفن همراه ، برای صفحه های بزرگتر این مشکل را برطرف کنیم.بازگشت بهgrid
والدین.برای صفحه های بزرگتر ، ما به یک grid
دو ستونی نیاز داریم. مناطق باید به این صورت تقسیم شوند:@media only screen and (min-width:600px) {
.main__header {
grid-template-columns: 250px 1fr;
grid-template-areas: "img dtls"
}
}
من مطمئن هستم که شما می فهمید آنجا چه خبر است. grid
تعریف شده است که دارای دو ستون باشد. یکی در ۲۵۰ پیکسل ثابت و دیگری برای پر کردن فضای باقی مانده.
ببینید چه چیزی داریم!من می دانم که چیزهای زیادی به زمین بازی بالا رفته است …نگاهی بیندازید و فراموش نکنید که به درس فوق مراجعه کنید.اگر گیر کردید ، لطفاً با من تماس بگیرید..aside i {
display: none;
}
@media only screen and (min-width:600px) {
.aside i {
display: block;
}
}
نمادها نمایش داده می شوند ، اما با هم تراز نشده اند.تراز کردن نمادها
برچسب های i عناصر درون خطی هستند – و این توضیح می دهد که چرا هر ۲ نماد روی یک خط قرار می گیرند.بیایید ترتیب را درست کنیم.موارد داخلgrid
می توانند خود grid
باشند. چرا که نهمرحله ۱: نوار کناری را به یک ظرف Grid
تبدیل کنید
با این کار می توانید از ویژگی های ترازبندی Grid
استفاده کنید.از آنجا که نوار کناری فقط در صفحه های بزرگتر دیده می شود ، فراموش نکنید که این مورد را media query
قرار دهید.@media only screen and (min-width:600px) {
.aside {
display: grid;
}
.aside i {
border: 1px solid red;
}
}
من جلوتر رفته ام تا به هر نماد border اضافه کنم تا از نظر بصری قابل تشخیص باشند.آنجا چه اتفاقی می افتد؟
ما هیچ ردیف یا ستونی را در نوار کناری تنظیم نکرده ایم. اما آیکون های ارائه شده را به خوبی داریم.الگوریتمauto-placement grid
در تنظیم شده است.این مربوط به قرار دادن پیش فرض موارد در grid
است – در امتداد یک ردیف.همچنین ، موارد شبکه به گونه ای تنظیم شده اند که در صورت لزوم فضای ظرف grid
را اشغال کنند.در اینجا سس شیرین می آید.یک شبکه می تواند آیتم های خود را با استفاده از هر یک از ویژگی های justify-items
یا align-items
، تراز کند.موارد توجیهی موارد را در امتداد محور ردیف تراز می کند.در بیشتر موارد ، ردیف تقریباً مترادف با جهت افقی است.align-items
را در امتداد محور ستون تراز می کنند.در بیشتر موارد ، ستون نیز با جهت عمودی مترادف است.این را روی نوار کناری اعمال کنید ، و ما آیکون هایی را به خوبی ارائه داده ایم..aside {
...
justify-items: center;
align-items: center;
}
هنوز گیج هستید ، هنگام تایپ کردن ، تغییرات مربوط به نوار کناری را تماشا کنید.اکنون ما آیکون های کاملاً خوبی را در نوار کناری قرار داده ایم.
چند مقدار دیگر از justify-items و align-items می توانند شامل شوند:stretch start end centerاگر با Flexbox
کار کرده اید ، این موارد باید آشنا باشند.ما ادامه می دهیم تا محتوای بیشتری را در طراحی فعلی قرار دهیم.قسمت اصلی ، قسمت آبی تیره را در تصویر بالا هدف قرار دهید. دو بخش را در داخل قرار دهید:<div class=”main”> <div class=”main__header”></div> <div class=”main__body”></div> </div>
توجه:.main__header
شامل هنر موسیقی و پخش خواهد بود.
.main__body جزئیات را در خود جای می دهد:
در این بخش ، ما بر روی .main__header
تمرکز خواهیم کردابتدا html مورد نیاز را اضافه کنید<div class=”main__header”> <div class=”img”> <img src=”http://bit.ly/2sc2NJd”/>
</div> <section class=”details”> <div> <p>CattyBoard Top ۱۰۰ Single Charts (۱۱٫۰۶٫۳۶)</p> <p class=”sm–hide”>Unknown Artist</p> <p class=”sm–hide”>2016 . Charts . ۱۰۰ songs</p> </div> <div> <i class=”fa fa-play”> Play all</i> <i class=”fa fa-plus”> Add to</i> <i class=”fa fa-ellipsis-h”> More</i> </div> </section> </div>
به نحوه ساختار سند توجه کنید..main__header
دارای دو فرزند مستقیم است. div
که شامل یک تصویر است و بخشی شامل جزئیات آلبوم ، .details
نتیجه اضافه شده در بالا، این تصویر نسبتاً زشت است:بیایید این را زیبا کنیم
آنچه ما نیاز داریم grid ای است که فرزندان خود را به طور مناسب تراز کند. بیایید از دانش جدید شما در موردgrid area
استفاده کنیم.اولین مرحله تعریف grid area
است:.main__header > .img {
grid-area: img;
}
.main__header > .details {
grid-area: dtls;
}
div حاوی تصویر img نامگذاری شده است. بخش حاوی جزئیات آلبوم dtls نامگذاری شده استحالا ، خود grid را تعریف کنید:.main__header {
display: grid;
grid-template-areas: "img"
"dtls";
}
.main__header
زمینه قالب بندی grid
را تعیین می کند. مناطق نیز تراز شده اند تا به صورت عمودی روی دیگری قرار بگیرند. ابتدا .img
سپس dtls
این به این دلیل است که ما با رویکرد همراه اول کار می کنیم. خوبدر این مرحله ، هیچ چیز زیادی تغییر نکرده است.
این نمای مورد نظر ما در تلفن همراه نیست. برای صفحه های موبایل ، موارد باید در مرکز قرار بگیرند. بگذارید آن را برطرف کنیم.@media screen and (max-width: 600px) {
.main__header {
justify-items: center;
}
}
اکنون موارد grid
در مرکز grid
قرار می گیرند (در امتداد ردیف)
متن را در . detailsalign
به مرکز تراز کنید :@media screen and (max-width: 600px) {
.main__header > .details {
text-align: center;
}
}
ما تقریباً به هدف نهایی نزدیک شده ایم. فقط چند اصلاح دیگر.نگران نباشید ، یک زمین بازی برای جبران همه این تغییرات وجود دارد!پاراگراف های دارای متن ، هنرمند ناشناخته ، وتمام جزییات باید در تلفن همراه پنهان شود.تصویر نیز باید کوچکتر باشد.@media screen and (max-width: 600px) {
.sm--hide {
display: none;
}
.img > img {
width: 150px
}
}
برای یادآوری ،یک display: none
از عناصر مورد استفاده را پنهان نمی کند.هر کلاس .sm--hide
در تلفن همراه پنهان می شود. فقط کافی است این کلاس را به عنصر مورد نظر اضافه کنید.نحوه کار:<p class=”sm–hide”>Unknown Artist</p> <p class=”sm–hide”>2016 . Charts . ۱۰۰ songs</p>
و ما این را داریم: پس از مرتب کردن نما در تلفن همراه ، برای صفحه های بزرگتر این مشکل را برطرف کنیم.بازگشت بهgrid
والدین.برای صفحه های بزرگتر ، ما به یک grid
دو ستونی نیاز داریم. مناطق باید به این صورت تقسیم شوند:@media only screen and (min-width:600px) {
.main__header {
grid-template-columns: 250px 1fr;
grid-template-areas: "img dtls"
}
}
من مطمئن هستم که شما می فهمید آنجا چه خبر است. grid
تعریف شده است که دارای دو ستون باشد. یکی در ۲۵۰ پیکسل ثابت و دیگری برای پر کردن فضای باقی مانده.
ببینید چه چیزی داریم!من می دانم که چیزهای زیادی به زمین بازی بالا رفته است …نگاهی بیندازید و فراموش نکنید که به درس فوق مراجعه کنید.اگر گیر کردید ، لطفاً با من تماس بگیرید.در انتهای این بخش ، ما طرح برنامه Catty Music
ساخته شده را خواهیم داشت.تمرکز این درس قرار دادن و همسویی مطالب در داخل شبکه ها است.بیایید شروع کنیم.۱٫ قرار دادن محتوا در نوار کناری
به نظر می رسد این آسان ترین کار برای شروع است. بیا بریم دنبالشنوار کناری متشکل از ۸ نماد است که به طور مساوی در کل طول میله کناری فاصله دارند.نمادها را مانند این وارد کنید:<div class=”aside”> <i class=”fa fa-bars”></i> <i class=”fa fa-home”></i> <i class=”fa fa-search”></i> <i class=”fa fa-volume-up”></i> <i class=”fa fa-user”></i> <i class=”fa fa-spotify”></i> <i class=”fa fa-cog”></i> <i class=”fa fa-soundcloud”></i> </div>
در زیر نتیجه آن است: همچنین ، وقتی در تلفن همراه هستید نمادها را پنهان کنید. هنگام بازدید از برنامه در صفحه بزرگتر ، آنها را نشان دهید. این اولین رویکرد تلفن همراه است..aside i {
display: none;
}
@media only screen and (min-width:600px) {
.aside i {
display: block;
}
}
نمادها نمایش داده می شوند ، اما با هم تراز نشده اند.تراز کردن نمادها
برچسب های i عناصر درون خطی هستند – و این توضیح می دهد که چرا هر ۲ نماد روی یک خط قرار می گیرند.بیایید ترتیب را درست کنیم.موارد داخلgrid
می توانند خود grid
باشند. چرا که نهمرحله ۱: نوار کناری را به یک ظرف Grid
تبدیل کنید
با این کار می توانید از ویژگی های ترازبندی Grid
استفاده کنید.از آنجا که نوار کناری فقط در صفحه های بزرگتر دیده می شود ، فراموش نکنید که این مورد را media query
قرار دهید.@media only screen and (min-width:600px) {
.aside {
display: grid;
}
.aside i {
border: 1px solid red;
}
}
من جلوتر رفته ام تا به هر نماد border اضافه کنم تا از نظر بصری قابل تشخیص باشند.آنجا چه اتفاقی می افتد؟
ما هیچ ردیف یا ستونی را در نوار کناری تنظیم نکرده ایم. اما آیکون های ارائه شده را به خوبی داریم.الگوریتمauto-placement grid
در تنظیم شده است.این مربوط به قرار دادن پیش فرض موارد در grid
است – در امتداد یک ردیف.همچنین ، موارد شبکه به گونه ای تنظیم شده اند که در صورت لزوم فضای ظرف grid
را اشغال کنند.در اینجا سس شیرین می آید.یک شبکه می تواند آیتم های خود را با استفاده از هر یک از ویژگی های justify-items
یا align-items
، تراز کند.موارد توجیهی موارد را در امتداد محور ردیف تراز می کند.در بیشتر موارد ، ردیف تقریباً مترادف با جهت افقی است.align-items
را در امتداد محور ستون تراز می کنند.در بیشتر موارد ، ستون نیز با جهت عمودی مترادف است.این را روی نوار کناری اعمال کنید ، و ما آیکون هایی را به خوبی ارائه داده ایم..aside {
...
justify-items: center;
align-items: center;
}
هنوز گیج هستید ، هنگام تایپ کردن ، تغییرات مربوط به نوار کناری را تماشا کنید.اکنون ما آیکون های کاملاً خوبی را در نوار کناری قرار داده ایم.
چند مقدار دیگر از justify-items و align-items می توانند شامل شوند:stretch start end centerاگر با Flexbox
کار کرده اید ، این موارد باید آشنا باشند.ما ادامه می دهیم تا محتوای بیشتری را در طراحی فعلی قرار دهیم.قسمت اصلی ، قسمت آبی تیره را در تصویر بالا هدف قرار دهید. دو بخش را در داخل قرار دهید:<div class=”main”> <div class=”main__header”></div> <div class=”main__body”></div> </div>
توجه:.main__header
شامل هنر موسیقی و پخش خواهد بود.
.main__body جزئیات را در خود جای می دهد:
در این بخش ، ما بر روی .main__header
تمرکز خواهیم کردابتدا html مورد نیاز را اضافه کنید<div class=”main__header”> <div class=”img”> <img src=”http://bit.ly/2sc2NJd”/>
</div> <section class=”details”> <div> <p>CattyBoard Top ۱۰۰ Single Charts (۱۱٫۰۶٫۳۶)</p> <p class=”sm–hide”>Unknown Artist</p> <p class=”sm–hide”>2016 . Charts . ۱۰۰ songs</p> </div> <div> <i class=”fa fa-play”> Play all</i> <i class=”fa fa-plus”> Add to</i> <i class=”fa fa-ellipsis-h”> More</i> </div> </section> </div>
به نحوه ساختار سند توجه کنید..main__header
دارای دو فرزند مستقیم است. div
که شامل یک تصویر است و بخشی شامل جزئیات آلبوم ، .details
نتیجه اضافه شده در بالا، این تصویر نسبتاً زشت است:بیایید این را زیبا کنیم
آنچه ما نیاز داریم grid ای است که فرزندان خود را به طور مناسب تراز کند. بیایید از دانش جدید شما در موردgrid area
استفاده کنیم.اولین مرحله تعریف grid area
است:.main__header > .img {
grid-area: img;
}
.main__header > .details {
grid-area: dtls;
}
div حاوی تصویر img نامگذاری شده است. بخش حاوی جزئیات آلبوم dtls نامگذاری شده استحالا ، خود grid را تعریف کنید:.main__header {
display: grid;
grid-template-areas: "img"
"dtls";
}
.main__header
زمینه قالب بندی grid
را تعیین می کند. مناطق نیز تراز شده اند تا به صورت عمودی روی دیگری قرار بگیرند. ابتدا .img
سپس dtls
این به این دلیل است که ما با رویکرد همراه اول کار می کنیم. خوبدر این مرحله ، هیچ چیز زیادی تغییر نکرده است.
این نمای مورد نظر ما در تلفن همراه نیست. برای صفحه های موبایل ، موارد باید در مرکز قرار بگیرند. بگذارید آن را برطرف کنیم.@media screen and (max-width: 600px) {
.main__header {
justify-items: center;
}
}
اکنون موارد grid
در مرکز grid
قرار می گیرند (در امتداد ردیف)
متن را در . detailsalign
به مرکز تراز کنید :@media screen and (max-width: 600px) {
.main__header > .details {
text-align: center;
}
}
ما تقریباً به هدف نهایی نزدیک شده ایم. فقط چند اصلاح دیگر.نگران نباشید ، یک زمین بازی برای جبران همه این تغییرات وجود دارد!پاراگراف های دارای متن ، هنرمند ناشناخته ، وتمام جزییات باید در تلفن همراه پنهان شود.تصویر نیز باید کوچکتر باشد.@media screen and (max-width: 600px) {
.sm--hide {
display: none;
}
.img > img {
width: 150px
}
}
برای یادآوری ،یک display: none
از عناصر مورد استفاده را پنهان نمی کند.هر کلاس .sm--hide
در تلفن همراه پنهان می شود. فقط کافی است این کلاس را به عنصر مورد نظر اضافه کنید.نحوه کار:<p class=”sm–hide”>Unknown Artist</p> <p class=”sm–hide”>2016 . Charts . ۱۰۰ songs</p>
و ما این را داریم: پس از مرتب کردن نما در تلفن همراه ، برای صفحه های بزرگتر این مشکل را برطرف کنیم.بازگشت بهgrid
والدین.برای صفحه های بزرگتر ، ما به یک grid
دو ستونی نیاز داریم. مناطق باید به این صورت تقسیم شوند:@media only screen and (min-width:600px) {
.main__header {
grid-template-columns: 250px 1fr;
grid-template-areas: "img dtls"
}
}
من مطمئن هستم که شما می فهمید آنجا چه خبر است. grid
تعریف شده است که دارای دو ستون باشد. یکی در ۲۵۰ پیکسل ثابت و دیگری برای پر کردن فضای باقی مانده.
ببینید چه چیزی داریم!من می دانم که چیزهای زیادی به زمین بازی بالا رفته است …نگاهی بیندازید و فراموش نکنید که به درس فوق مراجعه کنید.اگر گیر کردید ، لطفاً با من تماس بگیرید.