Trang chủ » Tạo header width search

Website

Tạo header width search

Luxubu

04/10/2023

4 Views 0

SaveSavedRemoved 0

Trong header width search chia làm 3 phần đó là header__logo, header__search và header__cart

<div class="header-with-search">
      <div class="header__logo">
      </div>
      <div class="header__search">
      </div>
      <div class="header__cart">      
      </div>
</div>

Css cho phần header-with-search

.header-with-search{
    height: var(--header-with-search-height);
    display: flex;
    align-items: center;
    padding: 0 8px;
}

• Đặt chiều cao cho header-with-search là biến –header-with-search-height. Biến này được khai báo trong file base.css với giá trị:

–header-with-search-height: calc(var(–header-height) – var(–navbar-height));

• Trình bày theo trục ngang
• Canh giữa các phần tử
• Đệm trên dưới giá trị 0 trái phải là 8px

Html và css cho phần header__logo

Đặt giá trị chiều rộng cho phần logo là 200px

.header__logo{
    width: 200px;
}

Html cho nội dung trong header_logo

• Tạo thẻ a với class=”header__logo-link” để tạo link cho logo
• Tạo thẻ img với class=”header__logo-img” để chứa logo

<a href="/" class="header__logo-link">
   <img src="/assets/img/gophukien.png" class="header__logo-img" />
</a>

Css cho nội dung trong header_logo

.header__logo-link{
    text-decoration: none;
    color: transparent;
}
.header__logo-img{
    width: 180px;
}

• Xóa bỏ gạch chân
• Tạo màu trong suốt
• Chiều rộng ảnh logo 180px

Html và css cho phần header__search

Tạo các giá trị thuộc tính cho header__search, các thông số này đã diễn giãi cho các bài trước

.header__search{
    height: 40px;
    background-color: var(--white-color);
    flex: 1;
    border-radius: 2px;
    display: flex;
    align-items: center;
    position: relative;
}

Html cho nội dung trong header__search

<div class="header__search-input-wrap">
                            <input type="text" class="header__search-input" placeholder="Tìm kiếm sản phẩm">
                            <div class="header__search-history">
                                <h3 class="header__search-history-heading">
                                    Lịch sử tìm kiếm
                                </h3>
                                <ul class="header__search-history-list">
                                    <li class="header__search-history-item">
                                        <a href="">Kem dưỡng trắng</a>
                                    </li>
                                    <li class="header__search-history-item">
                                        <a href="">Kem trị mụn</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="header__search-select">
                            <span class="header__search-select-label">Trong shop</span>
                            <i class="header__search-select-icon fa-solid fa-chevron-down"></i>
                            <ul class="header__search-option">
                                <li class="header__search-option-item header__search-option-item--active">
                                    <span>Trong shop</span>
                                    <i class="fa-solid fa-check"></i>
                                </li>
                                <li class="header__search-option-item">
                                    <span>Ngoài shop</span>
                                    <i class="fa-solid fa-check"></i>
                                </li>
                            </ul>
                        </div>
                        <button class="header__search-btn">
                            <i class="header__search-btn-icon fa-solid fa-magnifying-glass"></i>
                        </button>

Css cho nội dung trong header__search

Css cho phần nhập vào

.header__search-input-wrap{
    flex: 1;
    height: 100%;
}
.header__search-input{
    width: 100%;
    height: 100%;
    border: none;
    outline: none;
    font-size: 1.5rem;
    color: var(--text-color);
    padding: 0 16px;
    border-radius: 2px;
}
.header__search-input:focus ~ .header__search-history{
    display: block;
}

• Flex bằng 1 lấy hết chiều ngang có thể
• Chiều cao 100% thẻ chứa nó
• Thêm một số thuộc tính cho header__search-input
• Khi nhấp vào ô tìm kiếm thì trình bày khối lịch sử tìm kiếm

Css cho phần lựa chọn

Quy định một số thuộc tính cho phần lựa chọn:

.header__search-select{
    border-left: 1px solid #ccc;
    padding-left: 16px;
    position: relative;
    cursor: pointer;
    
}
.header__search-select-label{
    font-size: 1.4rem;
    color: var(--text-color);
}
.header__search-select-icon{
    font-size: 1.4rem;
    color: #a39e9e;
    margin: 0 16px 0 8px;
    position: relative;
    top: 1px;
}
.header__search-select:hover .header__search-option{
    display: block;
}

Css cho phần lựa chọn con

.header__search-option{
    position: absolute;
    right: 0;
    top: calc(100% + 3px);
    width: 130px;
    list-style: none;
    box-shadow: 0 1px 2px #ccc;
    padding-left: 0;
    border-radius: 2px;
    display: none;
    animation: fadeIn ease-in 0.2s;
}
.header__search-option::after{
    content: "";
    display: block;
    width: 100%;
    height: 10px;
    position: absolute;
    top: -10px;
    left: 0;
}
.header__search-option-item{
    background-color: var(--white-color);
    padding: 8px 8px;
}
.header__search-option-item:first-child{
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
}
.header__search-option-item:last-child{
    border-bottom-left-radius: 2px;
    border-bottom-right-radius: 2px;
}
.header__search-option-item:hover{
    background-color: #fafafa;
    cursor: pointer;
}
.auth-firn__help-link
.header__search-option-item span{
    font-size: 1.4rem;
    color: var(--text-color);
    margin-left: 8px;
}
.header__search-option-item i{
    color: var(--primary-color);
    font-size: 1.2rem;
    margin-left: 12px;
    display: none;

}
.header__search-option-item--active i{
    display: inline-block;
}

Css cho phần nút

.header__search-btn{
    background-color: var(--primary-color);
    border: none;
    height: 36px;
    width: 63px;
    border-radius: 2px;
    margin-right: 3px;
    color: var(--white-color);
    outline: none;
}
.header__search-btn:hover{
    cursor: pointer;
    background-color: #3e4eff;
}
.header__search-btn-icon{
    font-size: 1.6rem;
    color: var(--white-color);
}

Css cho phần Search history

.header__search-history{
    position: absolute;
    top:calc(100% + 1px);
    left: 0;
    width: calc(100% - 16px);
    background-color: var(--white-color);
    border-radius: 2px;
    box-shadow: 0 1px 5px #c9c5c5;
    display: none;
    overflow: hidden;
}
.header__search-history-heading{
    margin: 6px 16px;
    font-size: 1.6rem;
    font-weight: 300;
    color: #666;
}
.header__search-history-list{
    padding-left: 0;
    list-style: none; 
    margin-bottom: 6px 0 0;
}
.header__search-history-item{
    height: 38px;
    padding: 0 16px;
}

.header__search-history-item:hover{
    background-color: #fafafa;
}
.header__search-history-item a{
    text-decoration: none;
    font-size: 1.4rem;
    color: var(--text-color);
    line-height: 38px;
    display: block;
}

Html và css cho phần header__cart

Html cho phần header_cart

<div class="header__cart">
                        <div class="header__cart-wrap">
                            <i class="header__cart-icon fa-solid fa-cart-shopping"></i> 
                            <span class="header__cart-notice">3</span>
                            <!--No cart: header__cart-list--no-cart -->
                            <div class="header__cart-list">
                                <img src="/assets/img/no-cart.png" alt="" class="header__cart-no-cart-img">
                                <span class="header__cart-list-no-cart-msg">Chưa có sản phẩm</span>
                                <h4 class="header__cart-heading">Sản phẩm đã thêm</h4>
                                <ul class="header__cart-list-item">
                                    <!-- Cart item -->
                                    <li class="header__cart-item">
                                        <img src="https://product.hstatic.net/200000117693/product/a6ff3a1501baa767db1a1c86058dce2d_48c291984d074cccafd637306e356fd9_medium.jpg" alt="" class="header__cart-img">
                                        <div class="header__cart-item-info">
                                            <div class="header__cart-item-head">
                                                <h5 class="header__cart-item-name">Bộ kem đặc trị vùng mắt</h5>
                                               <div class="header__cart-item-price-wrap">
                                                <span class="header__cart-item-price">1.600.000đ</span>
                                                <span class="header__cart-item-multiply">x</span>
                                                <span class="header__cart-item-qnt">2</span>
                                               </div>
                                            </div>
                                            <div class="header__cart-item-body">
                                                <span class="header__cart-item-description">Phân loại: Bạc</span>
                                                <span class="header__cart-item-remove">Xóa</span>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="header__cart-item">
                                        <img src="https://product.hstatic.net/200000117693/product/a6ff3a1501baa767db1a1c86058dce2d_48c291984d074cccafd637306e356fd9_medium.jpg" alt="" class="header__cart-img">
                                        <div class="header__cart-item-info">
                                            <div class="header__cart-item-head">
                                                <h5 class="header__cart-item-name">Bộ kem đặc trị vùng mắt</h5>
                                               <div class="header__cart-item-price-wrap">
                                                <span class="header__cart-item-price">1.600.000đ</span>
                                                <span class="header__cart-item-multiply">x</span>
                                                <span class="header__cart-item-qnt">2</span>
                                               </div>
                                            </div>
                                            <div class="header__cart-item-body">
                                                <span class="header__cart-item-description">Phân loại: Bạc</span>
                                                <span class="header__cart-item-remove">Xóa</span>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="header__cart-item">
                                        <img src="https://product.hstatic.net/200000117693/product/a6ff3a1501baa767db1a1c86058dce2d_48c291984d074cccafd637306e356fd9_medium.jpg" alt="" class="header__cart-img">
                                        <div class="header__cart-item-info">
                                            <div class="header__cart-item-head">
                                                <h5 class="header__cart-item-name">Bộ kem đặc trị vùng mắt</h5>
                                               <div class="header__cart-item-price-wrap">
                                                <span class="header__cart-item-price">1.600.000đ</span>
                                                <span class="header__cart-item-multiply">x</span>
                                                <span class="header__cart-item-qnt">2</span>
                                               </div>
                                            </div>
                                            <div class="header__cart-item-body">
                                                <span class="header__cart-item-description">Phân loại: Bạc</span>
                                                <span class="header__cart-item-remove">Xóa</span>
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                                <a href="#" class="header__cart-view-cart btn btn-primary">Xem giỏ hàng</a>
                             </div>
                        </div>
                        
                    </div>

Css cho phần header_cart

.header__cart{
    width: 150px;
    text-align: center;
}
.header__cart-icon{
    font-size: 2.4rem;
    color: var(--white-color);
    margin-top: 6px;
}
.header__cart-wrap{
    position: relative;
    display: inline-block;
    padding: 0 12px;
    cursor: pointer;
}
.header__cart-wrap:hover .header__cart-list{
    display: block;
    cursor: pointer;
}
.header__cart-list{
    position: absolute;
    top: calc(100% + 5px);
    right: 0px;
    background-color: var(--white-color);
    width: 400px;
    border-radius: 2px;
    box-shadow: 0 1px 3.125rem 0 rgba(0,0,0,0.2);
    display: none;
    animation: fadeIn ease-in 0.2s;
    cursor: default;
}
.header__cart-heading{
    text-align: left;
    margin: 8px 0 8px 12px;
    font-size: 1.4rem;
    color: #999;
    font-weight: 400;
}
.header__cart-list-item{
    padding-left: 0;
    list-style: none;
}
.header__cart-item{
    display: flex;
    align-items: center;
}
.header__cart-item:hover{
    background-color: #f8f8f8;
    
}
.header__cart-img{
   width: 42px;
   height: 42px;
   margin: 12px;
   border: 1px solid #e8e8e8;
}

.header__cart-item-info{
    width: 100%;
    margin-right: 12px;
}
.header__cart-item-head{
    display: flex;
    align-items: center;
    justify-content: space-between;
    
}
.header__cart-item-name{
    font-size: 1.4rem;
    font-weight: 500;
    color: var(--text-color);
    margin: 0;
}
.header__cart-item-price{
    font-size: 1.4rem;
    font-weight: 400;
    color: var(--primary-color);
}
.header__cart-item-multiply{
    font-size: 0.9rem;
    margin: 0 4px;
    color: #757575;
}
.header__cart-item-qnt{
    font-size: 1.2rem;
    color: #757575;
}
.header__cart-item-body{
   display: flex;
   justify-content: space-between;
}
.header__cart-item-description{
    font-size: 1.3rem;
    color: #757575;
    font-weight: 300;
}
.header__cart-item-remove{
    font-size: 1.4rem;
    color: var(--text-color);
    cursor: pointer;
}
.header__cart-item-remove:hover{
    color: var(--primary-color);
}
.header__cart-view-cart{
    float: right;
    margin: 0 12px 12px 0;
}
.header__cart-view-cart:hover{
    background-color: #f05d41;
}
.header__cart-list::after{
    content: "";
    position:absolute;
    right: 3px;
    top: -25px;
    border-width: 16px 20px;
    border-style: solid;
    border-color: transparent transparent var(--white-color) transparent;
}
.header__cart-no-cart-img{
    width: 50%;
    display: none;
}
.header__cart-list--no-cart{
    padding: 24px 0;
}
.header__cart-list--no-cart .header__cart-no-cart-img,
.header__cart-list--no-cart .header__cart-list-no-cart-msg{
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.header__cart-list-no-cart-msg{
    font-size: 1.4rem;
    margin-top: 14px;
    color: var(--text-color);
    display: none;
}
.header__cart-notice{
    position:absolute;
    padding: 1px 6px;
    font-size: 1.4rem;
    line-height: 1.4rem;
    border-radius: 10px;
    top: -4px;
    right: -4px;
    border: 2px solid #EE4D2D;
    color: var(--primary-color);
    background-color: var(--white-color);
}

Xem thêm: Tạo khung thân trang web với các thẻ cơ bản