عوض نشدن رنگ color,background color در قسمت تگa

جامعه‌ها وبلاگ شروع یادگیری برنامه نویسی

در تگ aرنگ متن و رنگ زمینه تغییر نمیکنه،با توجه به اینکه text-decoration=none هست

سلام. وقت بخیر

لطفا کدتون رو قرار بدید تا چک کنیم.

سحر پاشائی ۱۳ شهریور ۱۴۰۳، ۱۳:۵۰

چیزی نیومده، مجدد قرار بدید.

محسن موحد ۱۴ شهریور ۱۴۰۳، ۰۴:۰۹

سلام اون مشکل حل شد ،جوال این سوال مو بدین،من قبل و بعد spanگذاشتمbefore ,after جواب نمیده دقیقا مثل استاده

سمیرا کرمی ۱۴ شهریور ۱۴۰۳، ۱۳:۴۸

سلام‌. لطفا کد تمرینتون رو قرار بدید تا بتونیم بررسی کنیم ببینیم مشکل کجا هست‌‌. یا در کد ادیتور سایت بذارید کدتون رو یا در کدپن آپلود کنید و لینکش رو برای ما بذارید.

سحر پاشائی ۱۴ شهریور ۱۴۰۳، ۱۳:۵۵

چیزی نیومده متاسفانه.

سحر پاشائی ۱۴ شهریور ۱۴۰۳، ۱۴:۰۱

کد ادیتور سایت کجاست؟ کدپن چی کجاست؟

سمیرا کرمی ۱۴ شهریور ۱۴۰۳، ۱۵:۴۱

اگر دارین عکس آپلود میکنین بعد قرار دادن عکس، چند ثانیه ای باید صبر کنید تا آپلود بشه.

نشونه اش یه علامت تیک سبز رنگ گوشه راست بالا تصویر، میادو میره. بعد میتونید روی دکمه ارسال بزنید.

اگر هم میخواید کدتون رو کپی کنید، روی این آیکون بزنید و کدهاتون رو در باکسی که میاد قرار بدید:

اگرم داخل کدپن بخواید بزارید باید عضو سایت codepen.io بشید. کدتون رو قرار بدید و لینکشو اینجا بذارید.

محسن موحد ۱۴ شهریور ۱۴۰۳، ۲۰:۲۸

<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>صفحه اصلی</title>
      <link rel="stylesheet" href="../css/style-grid-system.css">
      <link rel="stylesheet" href="js/main.js">
      <link rel="stylesheet" href="../css/style.css">
      <link rel="stylesheet" href="../css/header.css">
      <link rel="stylesheet" href="../css/_course.css">
      <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
</head>
<body>
    <div class="container-fluid container-fluid-custom">
      <div class="row">
            <div class="container">
                  <div class="col-xs-6  col-m-6 col-l-6 col-xl-6 contact">
                        <i class="material-symbols-outlined">Call<span>021222222</span></i>
                     <i class="material-symbols-outlined xs-hidden">Mail<span class="xs-hidden">va.yahoo.com</span> </i>
                 </div> 
                 <div class="col-xs-6 col-m-6 col-l-6 col-xl-6 social-media">
               <a href=""><i class="material-symbols-outlined">Nat</i> </a>
                  <a href=""><i class="material-symbols-outlined">Wifi </i> </a>
                 <a href=""><i class="material-symbols-outlined">Spoke</i></a>
                 </div>
            </div>
      </div>     
</div>
<script src="asset/js/main.js"></script>
<nav class="nav" id="mynav">
      <a href=""><i class="material-symbols-outlined">School</i></a>
      <a href="">دوره‌های آموزشی</a>
      <a href="">درباره ما</a>
      <a href="">تیم ما</a>
      <a href="">مطالب جدید</a>
      <a href="" class="ic" onclick="myFunc();"><i class="material-symbols-outlined">Menu</i></a>    
 </nav>
   <header class="container-fluid">
      <div class="row">
            <div class="col-xs-12 col-md-12 col-l-12 col-xl-12 p0">
                  <figure>
                        <div class="overlay absolute">
                              <div class="header-titel">
                              <h1 class="mb">مبتکر آموزش نوین</h1>
                              <h3>برگزار کننده دوره‌های دیجیتال مارکتینگ</h3>
                              <a href="">بیشتر بدانید ...</a>
                                                     </div>
                        </div>
                        <img  class="img-header img-responsive"
                        src="../img/1.jpg" alt="">
                  </figure>
            </div>
      </div>
   </header>
   <section class="container ">
      <div class="row">
       <div class="section-title text-center">
                  <h5>
                        <span>دوره‌های آموزشی</span>
                  </h5>
            </div>
            <div class="col-xs-12 col-md-4 col-l-4 col-xl-4 ">
                  <div class="row">
                        <div class="card ">
                              <div class="card-header relative">
                               <div class="overlay-card">cfffg</div>
                                 <img class="img-course img-responsive"src="img/cat1.jpeg" alt="" >
                              </div>
                        <div class="card-body relative ">
                          <img src="img/My Music.png" alt="" class="absolute">
                          <div class="course-title absolute">
                              <a href=""> دوره طراحی وب</a>
                              <p>دوره تخصصی طراحی وب</p>
                          </div>
                         </div>
                        </div>
                  </div>
            </div>   
      </div>
   </section>
</html>

سمیرا کرمی ۱۷ شهریور ۱۴۰۳، ۲۰:۲۸

.section-title h5 span{
      position: relative;
      display: inline-block;
}
.section-title h5 span::before{
content: '';
display: block;
width: 40px;
height: 3px;
background-color: orange;
position: absolute;
top: 15px;
right: -50px;
}
.section-title h5 span::after{
      content: '';
display: block;
width: 40px;
height: 3px;
background-color: orange;
position: absolute;
top: 15px;
left: -50px;
}
.card-body img{
width: 32px;
height: 32px;
filter: grayscale(.9) brightness(.5);
right: 0px;
}
.card-body .course-title {
      top: 0px;
      right: 30px;
}
.card-body .course-title a{
      font-size: 14px;
}
.card-body .course-title p{
    font-size: 16px;
}
.card
{
      box-shadow: 1px 2px 3px 2px #6c1a1a;
}
.overlay-card{
      width: 100%;
      top: 0px;
      right: 0px;
background-color: black;
opacity: 0;
transition: 1s ease-in;
}
.card:hover .overlay-card{
      opacity: 1;
}

سمیرا کرمی ۱۷ شهریور ۱۴۰۳، ۲۰:۲۹

سلام کلاس .card جواب نمیده.

مثلا باکس را دور card-header و card-body قرار نمیده

overlay هم جواب نمیده.یعنی میوفته زیر عکس به جای اینکه روی عکس بیوفته

سمیرا کرمی ۱۷ شهریور ۱۴۰۳، ۲۰:۳۱

سلام. وقت بخیر

در کد HTML تگ body رو نبستید.

برای overlay، می‌تونید به المانی که می‌خواید overlay روش اعمال شه پوزیشن relative بدید و به کلاس overlay پوزیشن absolute و با عرض و ارتفاع 100% و مقادیر top, right, bottom, left برار 0 تنظیم کنید مکان قرار گیریش رو.

سحر پاشائی ۱۸ شهریور ۱۴۰۳، ۱۱:۳۷

top,bottom,left,right چه فرقی با padding-topو.... داره

سمیرا کرمی ۲۰ شهریور ۱۴۰۳، ۲۰:۴۰

درود.
وقتی دارید از position استفاده می‌کنید (مثلاً absolute یا relative)، مقادیر top, right, bottom, left به موقعیت اون المان توی صفحه اشاره دارن. یعنی با این مقادیر مشخص می‌کنید که المانتون از لبه‌ی بالایی، راست، پایین یا چپ صفحه یا والدش (اگه از relative استفاده کنید) چقدر فاصله بگیره. مثلاً وقتی یه المان absolute دارید و top: 10px می‌ذارید، یعنی المان باید ۱۰ پیکسل از بالای صفحه فاصله بگیره.

اما padding کلاً یه چیز دیگه‌ست! padding-top, padding-right و... فاصله‌ی بین محتوای داخل المان و لبه‌های داخلی اون المان رو مشخص می‌کنن. به عبارت دیگه، با padding مشخص می‌کنید چقدر فاصله بین محتوا و لبه‌ی داخلی جعبه‌ی المانتون وجود داشته باشه. مثلاً اگه یه div داشته باشید و توش متنی باشه، با padding-top: 10px اون متن ۱۰ پیکسل از لبه‌ی بالای جعبه فاصله می‌گیره.

بهترین پاسخ

سحر پاشائی ۲۱ شهریور ۱۴۰۳، ۱۰:۵۴

سلام خسته نباشید

در جلسه هفتم قسمت کدنویسی آمار،در دقیقه 21 که div‌ها را درست میکند ، چرا انقد div تو در تو استفاده میکند مثلا یه container-fluid گذاشته با یک row

بعد دوباره یه container گذاشته با یک row دیگر

کلا من معنی انقدر div تو در تو را نمی‌دانم به طور کلی چه زمانی از div استفاده میکنیم من میدانم که div ظرفی است برای نگهداری تگ‌های دیگه ولی در بعضی فیلم‌ها خیلی تگ div تو در تو داره ، که با خودم فک میکنم اگه بعضی از این تگها را حذف کنم هم بازم خروجی همون جواب رو میده

اگه میشه فلسسفه این div‌های تو در تو رو بهم بگین

ممنون

سمیرا کرمی ۰۱ مهر ۱۴۰۳، ۱۴:۴۸

سلام خسته نباشید

میشه بی زحمت در مورد خاصیت owerflow و مقادیری که میتونه بگیره توضیح کامل بدین با مثال؟

سمیرا کرمی ۰۱ مهر ۱۴۰۳، ۱۵:۲۹

سلام خسته نباشید

در دقیقه 30 جلسه هفتم چرا transition:scale(1.2) را به card اعمال نکرده، به سیستم grid داده

سمیرا کرمی ۰۱ مهر ۱۴۰۳، ۱۵:۵۳

سلام در دقیقه 17 جلسه هشتم تگi را درون تگ span گذاشته که به آن استایل اعمال کند مگه به همون تگ i نمیشه استایل داد؟ حتما باید داخل span باشه؟

سمیرا کرمی ۰۲ مهر ۱۴۰۳، ۰۷:۲۳

چرا وقتی می‌نویسیم margin:0 10px; یعنی مارجین از بالا و پایین صفر باشه و از چپ و راست 10 باشه مگه حالت ساعت گرد نداره؟

سمیرا کرمی ۰۲ مهر ۱۴۰۳، ۰۷:۵۸

سلام خسته نباشید

در جلسه نهم که انیمیشن به یک تصویر داده وقتی آن را من کپی میکنم حتی تصویرم عوض کردم ، وقتی به حالت اجرا میروم انیمیشن به همه تصاویر همزمان اعمال میشود یعنی هر چهار تصویر با هم scale و rotate شون تغییر میکنه چه کار کنم که همه با هم تغییر نکنه؟؟؟؟؟؟؟؟؟

سمیرا کرمی ۰۳ مهر ۱۴۰۳، ۰۶:۱۷

سلام. وقت شما بخیر
سوال اولتون:
همون‌طور که خودتونم اشاره کردید، div یک عنصر بلاک در HTML هست که برای ساختاردهی به محتوا استفاده می‌شه. چرا بعضی وقت‌ها از چندین div تو در تو استفاده می‌کنیم:

ساختار بندی: استفاده از divهای مختلف به ما کمک می‌کنه تا محتوا رو به شکل منطقی و مرتب‌تری سازماندهی کنیم. مثلاً وقتی شما یک container-fluid می‌سازید، هدف اینه که کل صفحه رو بپوشونه و فضای داخلی رو مدیریت کنه. بعد می‌تونید یک row درون اون قرار بدید تا عناصر رو در سطرهای مختلف بچینید.
استایل دهی: هر div می‌تونه استایل و کلاس‌های مخصوص به خودش رو داشته باشه. این یعنی شما می‌تونید هر قسمت رو به طور جداگانه تنظیم کنید. مثلاً ممکنه بخواید یک بخش خاص از صفحه رو متفاوت نمایش بدید یا به یک div خاص یک پس‌زمینه یا حاشیه خاص بدید.
گریدینگ: در فریم‌ورک‌هایی مثل بوتسترپ، divهای تو در تو معمولاً برای طراحی گرید و ریسپانسیو بودن صفحه استفاده می‌شن. این کمک می‌کنه که صفحات روی دستگاه‌های مختلف به درستی نمایش داده بشن.
مدیریت فضا: بعضی وقت‌ها می‌تونید divها رو حذف کنید و نتیجه هم همون باشه، اما در طراحی‌های پیچیده‌تر، این divها به شما کمک می‌کنن تا فضای بین عناصر رو به درستی مدیریت کنید.

به طور کلی، استفاده از divهای تو در تو به شما این امکان رو می‌ده که صفحه رو منظم‌تر و قابل مدیریت‌تر کنید. اگر حس می‌کنید یک div خاص اضافه‌ست، می‌تونید امتحان کنید که آیا حذفش تأثیری داره یا نه، اما بهتره تا زمانی که با ساختار کلی کار آشنا بشید، از این روش‌ها استفاده کنید.

سحر پاشائی ۰۳ مهر ۱۴۰۳، ۰۶:۳۴

سوال دومتون:

خاصیت overflow در CSS برای کنترل نحوه نمایش محتوای یک عنصر وقتی که محتوا از ابعاد عنصر فراتر می‌ره، استفاده می‌شه. این خاصیت می‌تونه چهار مقدار اصلی بگیره:

visible: این حالت پیش‌فرضه. یعنی اگر محتوا از اندازه‌ی عنصر بزرگتر باشه، خارج می‌شه و قابل مشاهده می‌مونه. مثلاً یک تصویر بزرگتر از div می‌شه و قسمتی ازش از div بیرون می‌زنه.

<div class="box" style="width: 200px; height: 100px; overflow: visible; border: 1px solid;">
    <p>این یک متن طولانی است که از دیوار فراتر می‌رود و قابل مشاهده است.</p>
</div>

hidden: این حالت باعث می‌شه هر چیزی که از ابعاد عنصر فراتر بره، پنهان بشه. یعنی دیگه نمی‌تونید اون قسمت‌ها رو ببینید و هیچ نوار اسکرولی هم نمایش داده نمی‌شه.

<div class="box" style="width: 200px; height: 100px; overflow: hidden; border: 1px solid;">
    <p>این یک متن طولانی است که از دیوار فراتر می‌رود و دیگر دیده نمی‌شود.</p>
</div>

scroll: حتی اگر محتوا به اندازه‌ی عنصر جا بشه، نوار اسکرول همیشه نمایش داده می‌شه. این یعنی کاربر می‌تونه به محتوای اضافی دسترسی داشته باشه.

<div class="box" style="width: 200px; height: 100px; overflow: scroll; border: 1px solid;">
    <p>این یک متن طولانی است که از دیوار فراتر می‌رود و نوار اسکرول همیشه نمایش داده می‌شود.</p>
</div>

auto: این حالت به صورت خودکار نوار اسکرول رو نمایش می‌ده. اگر محتوا بیشتر از ابعاد عنصر باشه، نوار اسکرول ظاهر می‌شه، وگرنه ناپدید می‌شه.

<div class="box" style="width: 200px; height: 100px; overflow: auto; border: 1px solid;">
    <p>این یک متن کوتاه است.</p>
    <p>این یک متن طولانی است که از دیوار فراتر می‌رود و نوار اسکرول فقط در صورت نیاز نمایش داده می‌شود.</p>
</div>

سحر پاشائی ۰۳ مهر ۱۴۰۳، ۰۶:۴۵

سوال: سلام در دقیقه 17 جلسه هشتم تگi را درون تگ span گذاشته که به آن استایل اعمال کند مگه به همون تگ i نمیشه استایل داد؟ حتما باید داخل span باشه؟

پاسخ: بله بهتره یک رپر برای آیکون‌ها در نظر بگیرید هم کدتون تمیزتر می‌شه هم مدیریت بهتری دارید برای استایل دهی، چون کلاس‌های اضافه رو بهتره به رپرش بدید نه خود i.

سحر پاشائی ۰۳ مهر ۱۴۰۳، ۰۷:۳۹

سوال: چرا وقتی می‌نویسیم margin:0 10px; یعنی مارجین از بالا و پایین صفر باشه و از چپ و راست 10 باشه مگه حالت ساعت گرد نداره؟

پاسخ:
ببینید برای اعمال مارجین یا می‌تونیم به این صورت عمل کنیم:

margin-top

margin-right

margin-bottom

margin-left

یا خلاصش کنیم هر 4 مقدار به این صورت بنویسیم:

margin: margin-top margin-right margin-bottom margin-left;

یا از shorthand با دو مقدار استفاده کنیم که به این صورت می‌شه:

margin: top and bottom right and left

یعنی مقدار اول مارجین بالا و پایین و مقدار دوم مارجین راست و چپ هست.

یا از shorthand با 3 مقدار استفاده کنیم که به این صورت هست:

margin: 25px 50px 75px;

مقدار اول می‌شه مارجین تاپ (اینجا 25پیکسل)، مقدار دوم مارجین راست و چپ (اینجا 50پیکسل) و مقدار آخر مارجین پایین (اینجا 75پیکسل)

سحر پاشائی ۰۳ مهر ۱۴۰۳، ۰۷:۴۷

بابت دو سوال دیگتون؛

ممنون که اشاره کردید که دقیقه چند هست، دیدم اما برای سوالاتی که این طوری جزئی هستن ممنون می‌شم کد پروژه رو بفرستید (در کدپن یا jsfiddle آپلود کنید) تا ما لایو بتونیم بررسی کنیم، چون باید با اینسپکت و... کار کنیم روش کار یا باگ رو متوجه شیم🙏

سحر پاشائی ۰۳ مهر ۱۴۰۳، ۰۸:۰۷

سلام خسته باشید

کد مربوط به جلسه اول رو دقیقا مثل استاد نوشتم ولی جواب نمیده
<!DOCTYPE html>
<html lang="fa">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>جی کوئری جلسه اول</title>
 <link rel="stylesheet" href="../css/style.css">
</head>
<body>
    <script src="..assets//js/main.js"></script>
 <div class="test">منو مخفی کن</div>
 <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
</body>
</html>

سمیرا کرمی ۱۷ مهر ۱۴۰۳، ۰۷:۳۷

$(function(){
      alert(1);
      $('.test').hide(100000);
});

سمیرا کرمی ۱۷ مهر ۱۴۰۳، ۰۷:۳۸

<!DOCTYPE html>
<html lang="fa">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>جی کوئری جلسه اول</title>
 <link rel="stylesheet" href="../css/style.css">
</head>
<body>
    <script src="../assets/js/main.js"></script>
 <div class="test">منو مخفی کن</div>
 <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
</body>
</html>

سمیرا کرمی ۲۲ مهر ۱۴۰۳، ۱۲:۱۹

$(function(){
      alert(1);
      $('.test').hide(100000);
});

سمیرا کرمی ۲۲ مهر ۱۴۰۳، ۱۲:۲۳

سلام خسته نباشید

من کد جلسه اول رو دقیقا مثل استاد نوشتم ولی جواب نمیده نمی‌تونم جلسات بعدی هم ادامه بدم اصلا انگار با فایل جی کوئری متصل نمیشه

سمیرا کرمی ۲۲ مهر ۱۴۰۳، ۱۲:۲۶