Navbar CSS | Thực hành làm phần Menu Bar | Clone web shopee

Поділитися
Вставка
  • Опубліковано 31 гру 2024

КОМЕНТАРІ •

  • @F8VNOfficial
    @F8VNOfficial  2 роки тому +2

    👉 Xem trang web mẫu tại đây: f8ubuntu.online/ 🎉🎉

  • @duyke1701
    @duyke1701 4 роки тому +15

    Một ngày bạn ra tầm 4 cái video đi bạn !!! Và rất thích cách bạn chỉ tường tận như vậy, người học dễ nắm bắt giai đoạn hơn rất nhiều

    • @F8VNOfficial
      @F8VNOfficial  4 роки тому +8

      Mình sẽ cố gắng ra nhiều hơn nha. Cảm ơn bạn!!!

  • @luchoang4301
    @luchoang4301 Рік тому

    A a a a a
    Anh dạy hay quá
    Từ một đứa chọn sai ngành k có hứng thú vs lập trình mà giờ em đã trở nên "nghiện"
    Một ngày ko xem video ko tiếp thu thêm kiến thức từ anh em ko chịu dc.

    • @F8VNOfficial
      @F8VNOfficial  Рік тому +1

      Úi cảm ơn em nhé. Chúc em học tốt và sớm đạt được mục tiêu nhé.

  • @lexuantungfplhn_k1787
    @lexuantungfplhn_k1787 Рік тому

    anh dạy hay và dễ hiểu quá anh ạ , cảm ơn anh đã ra những video như này chúc anh thật nhiều sức khỏe ạ

  • @congluu8341
    @congluu8341 4 роки тому +3

    em cảm ơn bài dạy rất hữu ích . Dạy đến phần pseodo affter(tạo gạch ngăn cách) anh bảo xem lại bài trước , thì em xem lại bài dạy về pseodo trước của anh thì anh lại bảo đến phần thực hành sẽ nói rõ hơn ^^^^

    • @F8VNOfficial
      @F8VNOfficial  4 роки тому

      Kiến thức về pseodo nó chỉ có vậy thôi em, đâu còn gì rõ hơn nữa em ơi.

  • @minh9871
    @minh9871 2 роки тому

    anh dễ thương quá, nhiệt huyết, mãi đỉnh

  • @vuongle1789
    @vuongle1789 3 роки тому +3

    "cái đẹp thì chúng ta bắt chước thôi, cái xấu thì đừng " :))))))

  • @lynguyenhoang
    @lynguyenhoang 3 роки тому +6

    cái thanh dọc quên cho cái header__navbar-item là relative ngồi mò quài mới fix đc

    • @hoanghuy6829
      @hoanghuy6829 3 роки тому +1

      may quá đọc đc cmt của b :v mk cũng đang loay hoay đoạn đấy mãi :v

    • @Bs.Le_Hieu
      @Bs.Le_Hieu 3 роки тому +1

      Mình cho header__navbar-item là relative mà vẫn không hiện không biết mình sai ở đâu vậy bạn?

    • @googleaccount663
      @googleaccount663 3 роки тому +1

      Hay ban!

  • @binchanhkun8127
    @binchanhkun8127 4 роки тому +4

    cái chỗ anh set grid có cách nào tối ưu k mn mỗi trình duyệt mỗi size mà @@

  • @18_viethoangnhu58
    @18_viethoangnhu58 4 роки тому +3

    cái gạch nhỏ đó mình nghĩ chỉ cần css boder-right cho đơn giản

    • @somebody-17546
      @somebody-17546 3 роки тому

      Làm boder-right chỉ vào nó sẽ nhấp nháy

    • @18_viethoangnhu58
      @18_viethoangnhu58 3 роки тому

      @@somebody-17546 ko hề nhé bro,khi hover mình dùng thuộc tính color nó chỉ làm đổi màu chữ thôi,ko ảnh hưởng đến boder

    •  3 роки тому

      Bạn ơi, sao mình lm cả cách , border-right và ::after , cái gạch đó nó đều ko hiện. có cách nào fix ko bạn

    • @18_viethoangnhu58
      @18_viethoangnhu58 3 роки тому

      ​@ có khi nào b chưa link css ko :)) ,kiểu boder- right như vd trên thì như này:
      .header-navbar-item--separate{border-right:1px solid #fff;}

    • @phuongquangtran6314
      @phuongquangtran6314 3 роки тому +1

      thực tế web shopee cũng dùng boder-right, mình thấy dùng như vậy đơn giản hơn nhưng cách anh Sơn giới thiệu cũng là một cách để tham khảo cho những trường hợp khác sau này cần dùng tới.

  • @tccommunity238
    @tccommunity238 2 роки тому

    Anh giải thích luôn mấy thuộc tính đi ạ, cứ đang hóng nghe thì lại xem lại video cũ

  • @ducvo8771
    @ducvo8771 3 роки тому +1

    Anh ơi chỗ gạch mờ có cách nào làm cho nó hiện margin bên right element lên được không anh. Thay vì phải viết phần tử giả. Em thử rồi mà chỉ hiện được border sau bên phải thôi mà nó hiện sát chứ k cách ra.

    • @atalex6761
      @atalex6761 2 роки тому

      Y hệt tôi mà margin nó cứ đứng im 😅

    • @banmt
      @banmt 2 роки тому

      ​@@atalex6761 .
      header__navbar-item-bar {
      margin-right: 0;
      padding-right: 10px;
      border-right: 1px solid #Fb9086;
      }

  • @te1154
    @te1154 Рік тому

    em cám ơn anh nhìu ạ

  • @hoangucanh4397
    @hoangucanh4397 Рік тому

    Anh dùng imac hay macbook để dùng cho làm việc vậy ạ

  • @youmusic1681
    @youmusic1681 2 роки тому

    a ơi cho e hỏi là e ấn go live sao nó k ra đc css ra hiện đc mỗi html thôi ạ

  • @toanpm810
    @toanpm810 3 роки тому

    dạy kỹ quá rồi anh ạ

  • @huynguyenluonggia6393
    @huynguyenluonggia6393 2 роки тому +1

    mọi người cho em hỏi cái lúc tạo dấu ngăn cách là tạo phần tử giả ::after do nó ở phía sau chữ là em hiểu nhưng tại sao khi chưa căn chỉnh nó lại nằm dưới cái chữ ạ, mong mn giải đáp??

    • @nghiahoang9201
      @nghiahoang9201 2 роки тому

      mình nghĩ là : thanh navbar có 2 ,
      dấu " | " thuộc thứ nhất, mà chữ"kết nỗi" nó chiếm hết dòng rồi nên bị đẩy xuống dòng tiếp theo

  • @Bieno-pb7lo
    @Bieno-pb7lo Рік тому

    tại sao không đặt padding cho item ma lị đặt margin anh nhỉ? em thấy nếu đặt padding thi sau căn bor dễ hơn mà. padding có tác dụng phụ gì à anh?

  • @learningonline5533
    @learningonline5533 4 роки тому +2

    Like anh!

  • @leanhthai9225
    @leanhthai9225 4 роки тому +1

    A làm video về BEM đi ạ :)

  • @lap_trinh_c_cong_cong
    @lap_trinh_c_cong_cong Рік тому

    hay quá ạ

  • @dpsunny
    @dpsunny Рік тому

    05:26

  • @tnln7893
    @tnln7893 4 роки тому

    Có source không ạ, em tham khảo với. Cảm ơn a

    • @AbeoGamingNee
      @AbeoGamingNee 4 роки тому

      bạn có chưa mình đang bị lỗi cái thanh dọc mà ko biết bị gì ko xuất hiện

    • @tnln7893
      @tnln7893 4 роки тому

      ​@@AbeoGamingNee Chưa mà mình làm dc r, set màu sáng lên cho dễ nhìn có khi xuất hiện r mà k thấy đó

  • @hoagaming9751
    @hoagaming9751 4 роки тому +1

    em bị lỗi phần css class có 2 id
    .header__navbar-item--strong{
    font-weight: 400;
    }
    nó không hiện in đâm ạ

    • @nguyenquang97
      @nguyenquang97 4 роки тому

      hic hic minh cũng bị

    • @quangmauhung
      @quangmauhung 4 роки тому

      này là do lúc bạn chọn font bên google font, chọn thiếu weight 400, bạn có thể chọn số lớn hơn như 500, 600 tạm thời nha, hoặc vào trong chỗ link font css ở header, thêm 400 vào

    • @namnguyentrong4330
      @namnguyentrong4330 4 роки тому +1

      vì 400 là mặc định của cái font ấy mà bạn

    • @hoagaming9751
      @hoagaming9751 4 роки тому

      @@namnguyentrong4330 cám ơn bác

    • @tunamusic2314
      @tunamusic2314 4 роки тому

      @PiG Hero vậy rốt cuộc do đâu ạ
      mình đổi lên 800 mới thấy đậm
      còn 400 hay 500 cũng thấy như mấy cái kia

  • @reviewdochoitreem
    @reviewdochoitreem 3 роки тому

    a ơi sao e cho thẻ

  • @taiuc2923
    @taiuc2923 3 роки тому

    Anh ơi sao cái chỗ gạch để separate ấy sao anh ko bài border-right cho dễ v anh

  • @tanlucnguyen9778
    @tanlucnguyen9778 2 роки тому

    anh có thể giải thích cho e vì sao không đặt font size là px mà phải đặt là rem v anh

  • @dongnguyen6471
    @dongnguyen6471 4 роки тому

    Phần cắt web tên gì v a

  • @quannguyen9343
    @quannguyen9343 4 роки тому +2

    phần thuộc tính transform khó hiểu quá anh ơi

  • @docongson
    @docongson 4 роки тому

    sao mk ko dùng được biến vậy ạ

  • @vantai0703
    @vantai0703 Рік тому

    Cái dấu gạch em đặt giá trị âm nó k cho là sao vậy anh. Đặt right = 0 thì nó nằm gần ở giữa nhưng góc trên cùng. còn đặt giá trị âm thì nó sẽ nhảy về đầu dòng và nằm ở dưới cái li

  • @LinhPham-4568
    @LinhPham-4568 2 роки тому

    14:18

  • @MinhThongLe
    @MinhThongLe 4 роки тому

    inspect trên trang web của em, mục element nó kh hiện ra code anh ơi

  • @vanquang02
    @vanquang02 2 роки тому

    mn cho em hoi navbar-item--separate sao phải có pseudo ::after vậy ạ

  • @future1884
    @future1884 Рік тому

    phần item em xài .navbar__item + navbar__item{margin-left} được không anh

  • @hoagaming9751
    @hoagaming9751 4 роки тому

    cams on ad

  • @tungkkaka8290
    @tungkkaka8290 3 роки тому

    A đặt tên class hơi dài nên học hơi rối xíu

  • @BDCCN-LuongMinhTan
    @BDCCN-LuongMinhTan 2 роки тому

    anh ơi link web mẫu ở đâu ạ, cho em xin với

  • @nhat6mui161
    @nhat6mui161 Рік тому

    vi sao phai su dung lop gia after a

  • @nguyenhaithanh1168
    @nguyenhaithanh1168 3 роки тому

    link demo ở dâu vậy anh

  • @turtle6390
    @turtle6390 2 роки тому

    sao e dùng font-weight mà nó cứ bị lỗi k hiện thị đc ạ

  • @peterphan3467
    @peterphan3467 6 місяців тому

    cái dấu gạch đứng mình dùng content :"|" cũng được á anh

  • @darkquys5572
    @darkquys5572 2 роки тому

    sao em không dùng được font weigh ạ ? . ai biết đó lỗi gì không ạ .

  • @hungpoly5781
    @hungpoly5781 3 роки тому

    link web mẫu đâu ạ

  • @maitranthituyet8340
    @maitranthituyet8340 3 роки тому

    Chúa Lươn :))