ساخت فروشگاه اینترنتی با html ، css و bootstrap - بخش سوم

در ادامه بخش قبل وارد فایل index.html شده و درون بخش body شروع به ایجاد header خود می کنیم ، مانند کد های زیر ابتدا یک تگ header ایجاد کرده و درون آن تگ div باکلاس top_header را قرار می دهیم (در ادامه کد های مربوط به این کلاس را در فایل css خود ایجاد می کنیم) ، سپس تگ div دیگری ایجاد کرده و از کلاس container که مربوط به بوت استرپ است اسفاده میکنیم تا محتوای ما در یک قالب استاندارد قرار بگیرند.

    <header>
        <div class="top_header">
            <div class="container">
                <div class="row align-items-center justify-content-between">
                    <div class="col-lg-6 col-12">
                        <ul class="top-menu top-menu-list list-unstyled">
                            <li><a href="#">خرید اقساطی </a></li>
                            <li><a href="#">موجودی کالا ها</a></li>
                            <li><a href="#">درباره ما</a></li>
                            <li><a href="#">تماس با ما</a></li>
                        </ul>
                    </div>
                    <div class="col-lg-5 col-12 ">
                        <div class="header-lang ">
                            <ul class="top-menu top-menu-lang list-unstyled">
                                <li><a href="/"  class="link-active">فارسی</a></li>
                                <li><a href="/" class="">English</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="header_main">
                    <div class="row">
                        <div class="col-lg-3 col-md-4 col-12"><a href="/" class="">
                            <div class="header_logo text-center">
                                <img src="img/logo.svg" alt="logo1" class="logo">
                            </div>
                        </a></div>
                        <div class="col-lg-5 col-md-8 col-12">
                            <div class="c-header__search">
                                <form>
                                    <div class="input-group input-group-sm mb-3 search_top_header">
                                        <div class="input-group-prepend">
                        <span class="input-group-text input-group-text-custom" id="inputGroup-sizing-sm"><i
                                class="fa fa-search"></i></span>
                                        </div>
                                        <input type="text" class="input_custom form-control"
                                               aria-label="Sizing example input"
                                               aria-describedby="inputGroup-sizing-sm"
                                               placeholder="جستجو ... ">
                                    </div>
                                </form>
                            </div>
                        </div>
                        <div class="col-lg-4 d-none d-lg-block">
                            <ul class="float-left list-inline header_main_nav list-unstyled">
                                <li class="list-inline-item">
                                    <a><i class="fa fa-user"></i>ورود</a>
                                </li>

                                <li class="list-inline-item">
                                    <a href="#" class="profile"><span class="iconprofile"><i
                                            class="fa fa-cart-arrow-down"></i></span>سبد خرید</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <nav class="navbar navbar-expand-lg navbar-light shadow-sm bg-white">
                    <div class="container">
                        <button class="navbar-toggler navbar-toggler-right border-0" type="button" data-toggle="collapse"
                                data-target="#navbar4">
                            <span class="navbar-toggler-icon"></span>
                        </button>

                        <div class="collapse navbar-collapse" id="navbar4">
                            <ul class="navbar-nav pl-lg-4">
                                <li class="nav-item px-lg-2 active"><a class="nav-link" href="#"> <span
                                        class="d-inline-block d-lg-none icon-width"><i class="fas fa-home"></i></span>
                                    خانه</a></li>
                                <li class="nav-item px-lg-2 active"><a class="nav-link" href="#"> <span
                                        class="d-inline-block d-lg-none icon-width"><i class="fas fa-home"></i></span>پرفروش‌ترین‌ها</a>
                                </li>
                                <li class="nav-item px-lg-2 active"><a class="nav-link" href="#"> <span
                                        class="d-inline-block d-lg-none icon-width"><i class="fas fa-home"></i></span>
                                        تخفیف‌ها و پیشنهادها
                                    </a></li>
                                <li class="nav-item px-lg-2 active"><a class="nav-link" href="#"> <span
                                        class="d-inline-block d-lg-none icon-width"><i class="fas fa-home"></i></span>شگفت‌انگیزها</a>
                                </li>

                                <li class="nav-item px-lg-2 dropdown d-menu">
                                    <a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown"
                                       aria-haspopup="true" aria-expanded="false"><span
                                            class="d-inline-block d-lg-none icon-width"><i
                                            class="far fa-caret-square-down"></i></span>

                                            دسته‌بندی کالاها
                                    </a>
                                    <div class="dropdown-menu shadow-sm sm-menu" aria-labelledby="dropdown01">
                                        <a class="dropdown-item" href="#">پوشاک</a>
                                        <a class="dropdown-item" href="#">مواد غذایی</a>
                                        <a class="dropdown-item" href="#">محصولات دیجیتال</a>
                                    </div>
                                </li>
                            </ul>

                        </div>
                    </div>
                </nav>
            </div>
        </div>
    </header>

همانطور که در کد های بالا مشاهده می کنید در این بخش ما از کد های css و کلاس های bootstrap استفاده می کنیم برای مثال از کلاس های align-items ، justify-content ، navbar و... استفاده کرده ایم که روش کار با این کلاس ها و سایر کلاس های بوت استرپ را می توانید در این دوره آموزشی به صورت رایگان یادبگیرید.

در ادامه کلاس های css شخصی سازی شده را که در کد های بالا دیدم به پروژه خود اضافه می کنیم. مانند :top_header ، top-menu ، header_main و...

شروع به کار با css

قبل از شروع به کار با کلاس های شخصی سازی شده ابتدا فایل css خود را کامل می کنیم :

برای این کار ابتدا فونت های خود را مطابق دستور زیر قرار میدهیم :

@font-face {
  font-family: ;
  src: url();
  src: url() format(), url() format(), url() format();
}

بعد از آن ساختار کلی و شکل ظاهری کلی index خود را ایجاد می کنیم :

body {
  background-color: #f6f8f9;
  text-align: right;
  direction: rtl;
  font-family: Yekan-Medium;
  font-weight: 400;
  line-height: 2;
}

برای مثال در کد بالا من نوع فونت استفاده شده در وب سایت را Yekan-Medium قرار دادام.

همینطور تگ های a خود را شخصی سازی می کنیم :

a {
  color: #333;
  text-decoration: none !important;
}

در ادامه کلاس های css شخصی سازی شده را به فایل استایل خود اضافه می کنیم :

.top_header{
  padding: 20px 0;
}

.top-menu-list{ display: flex; justify-content: flex-start; } .top-menu-lang { display: flex; justify-content: flex-end; } .top-menu li:first-child { margin-right: 0; } .top-menu li { font-size: 13px; font-weight: 500; color: #38484d; margin-right: 25px; }

.header-lang ul li a.link-active {
  font-weight: 700;
  color: #385898;
  box-shadow: 0 0 15px 0 rgb(0 0 0 / 10%);
  border-radius: 10px;
  border: 1px solid #385898;
}
.header-lang ul li a {
  padding: 3px 15px;
}

.header_main {
  height: 83px;
  border-bottom: 2px solid #385898 !important;
  background: #fff;
  align-items: center;
  box-shadow: 0 2px 0 0 rgb(169 183 190 / 15%);
  border-radius: 10px 10px 0 0;
  color: #38484d;
}

.header_logo {
  padding: 0 30px;
  display: flex;
  align-items: center;
  box-shadow: -15px 0 15px -15px rgb(0 0 0 / 30%);
  margin-left: 15px;
}

.c-header__search input {
  width: 100%;
  border: 0;
  padding-right: 30px;
  height: 50px;
}

.search_top_header{
  top: 30px;
}

.input-group-text-custom{
  border: 0;
  background: #fff;
  color: #385898;
  font-size: 20px;
}

.input-group-text-custom > i{
  font-size: 18px;
}

.header_main_nav {
  display: flex;
  flex-wrap: wrap;
  text-align: center;
  font-weight: 500;
  font-size: 12px;
  margin-right: auto;
  height: 100%;
}
.header_main_nav li:first-child {
  border-right: none;
}
.header_main_nav li {
  border-right: 1px solid #eaf2f4;
}
.header_main_nav li a {
  display: block;
  padding: 10px;
  font-size: 14px;
  cursor: pointer;
}
a:not([href]):not([class]), a:not([href]):not([class]):hover {
  color: inherit;
  text-decoration: none;
}
.header_main_nav i {
  display: block;
  font-size: 20px;
  padding-bottom: 15px;
}

همانطور که مشاهده میکنید کد های دلخواه css خود را ایجاد کرده و نام کلاس آن را درون تگ های html خود قرار می دهیم شما میتوانید از همین کد های برای ایجاد فروشگاه اینترنتی خود استفاده کنید و یا در آن ها تغییراتی را به وجود اورید.