Home / Lập Trình / HTML CSS / cách thêm thông tin liên hệ ở mobi đẹp

cách thêm thông tin liên hệ ở mobi đẹp

cách thêm thông tin liên hệ ở mobi đẹp
cách thêm thông tin liên hệ ở mobi đẹp
cách thêm thông tin liên hệ ở mobi đẹp

Nay rãnh ngồi code thông tin liên hệ ở mobi cho anh em sử dụng, mình lấy mẫu chợ tốt thôi, anh em cần thì cứ coppy qua sài nhé

bước 1: coppy html vào footer

<div class="menu-footer-mobi">
  <ul>
    <li><div class="name-menu-mobi"><a href="https://mohinhthuyenbuom.com/"><img src="https://mohinhthuyenbuom.com/wp-content/uploads/2020/doi-tac/icon-home.png" alt="mô hình thuyền buồm"><span>Trang chủ</span></a></div></li>
    <li><div class="name-menu-mobi"><a href="https://www.facebook.com/mo.hinh.thuyen.wooden.model.boats/"><img src="https://mohinhthuyenbuom.com/wp-content/uploads/2020/doi-tac/icon-facebook.png" alt="facebook mô hình thuyền buồm"><span>Facebook</span></a></div></li>   
    <li>
      <div class="menu-hot-mobi-img"><img class="" src="https://mohinhthuyenbuom.com/wp-content/uploads/2020/doi-tac/icon-menufooter.png" alt="shop mô hình"></div>
      <div class="menu-hot-mobi"></div>
      <div class="name-menu-mobi"><a href="tel:0942180667"><img src="https://mohinhthuyenbuom.com/wp-content/uploads/2020/doi-tac/icon-phone.png" alt="gọi điện thoại mô hình thuyền buồm"><span style="color:#000">Gọi Điện</span></a></div></li>   
    <li><div class="name-menu-mobi"><a href="https://zalo.me/0942180667"><img src="https://mohinhthuyenbuom.com/wp-content/uploads/2020/doi-tac/icon-zalo.png" alt="zalo mô hình thuyền buồm"><span>Zalo</span></a></div></li>   
    <li><div class="name-menu-mobi"><a href="https://g.page/mo-hinh-thuyen-buom?share"><img src="https://mohinhthuyenbuom.com/wp-content/uploads/2020/doi-tac/icon-ban-do.png" alt="bản đồ đến mô hình thuyền buồm"><span>Bản đồ</span></a></div></li>   
  </ul>
</div>

Bước 2: coppy css vào file style.css nhé

.menu-footer-mobi {
    display: none;
}
@media only screen and (max-width: 768px) {.caption h1{
		padding:0
}
.caption{
		font-size:11px;
}
  .menu-footer-mobi{
    display: block;
    position: fixed;
    bottom: 0;
    height: 50px;
    width: 100%;
    min-width: 320px;
    background-color: #fff;
    margin: 0 auto;
    z-index: 3;
    will-change: transform; 
  }
  .menu-footer-mobi ul{
    display: flex;
    height: 100%;
    grid-template-columns: repeat(5, 1fr);
    padding: 0;
    margin: 0;
    list-style: none;
    box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.25);
  }
  .menu-footer-mobi ul li{
    flex: 1 1 auto;
    text-align: center;
    position: relative;
		margin-bottom:0;
  }
  .name-menu-mobi:first-child {
    padding-right: 0;
  }
  .name-menu-mobi{
    float: none;
    height: 100%;
    line-height: 35px;
  }
  .menu-footer-mobi ul li a{  
    color: #000000;
    text-decoration: none;
    display: block;
    position: relative;
    height: 100%;
  }
  .menu-footer-mobi ul li a span{
    display: block;
    font-size: 11px;
    line-height: initial;
    height: 17px;
    width: 100%;
    bottom: 0;
    position: absolute;
    color: #717071;
  }
  .menu-footer-mobi ul li a img{
    width: 28px;
    height: 28px;
  }

 .menu-hot-mobi-img{
    position: absolute;
    bottom: 55px;
    text-align: center;
    width: 70px;
    left: calc(50% - 35px);
    height: 9px;
  }
  .menu-hot-mobi-img img{
    width: 100%;
  }
  .menu-hot-mobi{
    height: 70px !important;
    width: 70px;
    line-height: 3.35 !important;
    top: -10px;
    left: calc(50% - 35px);
    background: #74d4fe;
    color: #fff;
    font-size: 15px;
    font-stretch: normal;
    font-style: normal;
    letter-spacing: normal;
    border-radius: 50%;
    text-decoration: none;
    position: absolute;
    padding: 0 !important;
		}}

vậy là xong, các bạn update lai và xem kết quả nhé,

nếu thấy hay thì click quảng cáo ủng hộ mình gói mì tôm nha! :V

About admin

congdongblog.com và congdongshop.com là một nhé mọi người, trang website đều do admin là Nguyễn Trung Thông sở hữu và quản lý, với đam mê CNTT , trang này dùng để chia sẽ kinh nghiệm những gì mình có, những gì mình làm được lên đây cho mọi người cùng học nhé, có gì sai sót mọi người bỏ qua nhé

Bạn Chưa biết ?

Code Responsive Table in html css

Code Responsive Table in html css

Code Responsive Table in html css Cộng đồng shop chào các bạn, Code Responsive Table là …

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Đánh giá facebook