Hướng dẫn css tab responsive - tab css đáp ứng

Bước 1: Tạo cấu trúc HTML

 
 
 
   
Đăng ký thành viên VIP365
 
   
 
     
 
      
  Chi tiết
      
 
      
  Video
      
 
      
  Hướng dẫn đăng ký
      
 
      
  Hướng dẫn thanh toán
      
 
      
  Bình luận
      
 
     
 
     
 
      
 
        
 
        
 
        
 
         
Đăng ký thành viên VIP365
 
         
HocwebGiare.com chuyên đào tạo các khóa học Thiết kế web, Lập trình Web. Đặc biệt HocwebGiare.com có nhiều năm kinh nghiệm chuyên sâu trong giảng dạy Thiết kế web và Lập trình Web với các thế mạnh đào tạo nổi trội như: Khóa học Chuyên viên website lành nghề Online, Khóa học Thiết kế giao diện website Online, Khóa học Lập trình HTML5, CSS3, RWD, Javascript, Bootstrap Online, Khóa học Lập trình PHP Cơ Bản Online vv....
 
         
Với mong muốn tạo điều kiện thuận lợi nhất cho các bạn sinh viên, học viên có thể theo học các khóa học thiết kế web & lập trình web, HocwebGiare.com tổ chức chương trình: ĐĂNG KÝ THÀNH VIÊN VIP ĐỂ CÓ THỂ HỌC ĐƯỢC NHIỀU HƠN VỚI HOCWEBGIARE
 
Xem chi tiết 
 
        
 
       



 
      
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
 
      
 
        
  
        
 
        
 
         
Hướng dẫn đăng ký
 
         
Khi đăng ký thành viên VIP / 1 năm học là 500.000 đ/năm - học viên sẽ được HỌC TOÀN BỘ TẤT CẢ CÁC KHÓA HỌC THIẾT KẾ WEB & LẬP TRÌNH WEB TẠI WEBSITE HOCWEBGIARE.COM trong vòng 1 năm (365 ngày).
 
         
HỌC VIÊN ĐƯỢC LỢI GÌ VỚI TÀI KHOẢN VIP365:
 
         
 1. Hỗ trợ kỹ thuật thiết kế web lâu dài sau khóa học.
          
 2. Hỗ trợ Download các công cụ thiết kế web có giá trị trong suốt khóa học.
          
 3. Được học nhiều hơn với tất cả các khóa học thiết kế web & lập trình web tại hocwebgiare.com với giá rẻ nhất Việt Nam.
          
 4. Học viên được học với giáo viên có nhiều kinh nghiệm thiết kế web thực tế (Xem một vài dự án đã thiết kế)
          
 5. Học viên được hướng dẫn nhiều đồ án thực tế từng bước trong suốt năm học.
          
 - Nhanh tay đăng ký ghi danh TẠI ĐÂY (Lưu ý nhập mã voucher VIP365 khi đăng ký)
         
 
        
 
       



 
      
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
 
       
     
 
    

Bước 2: Định dạng CSS

.nav-tabs {	
border-bottom: 2px solid #DDD;
}

.nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover {	border-width: 0;}
.nav-tabs > li > a {	border: none;	color: #ffffff;	background: #5a4080;}
.nav-tabs > li.active > a, .nav-tabs > li > a:hover {	border: none;	color: #5a4080 !important;	background: #fff;} 
.nav-tabs > li > a::after {
content: "";
background: #5a4080;
height: 2px;
position: absolute;
width: 100%;
left: 0px;
bottom: -1px;
transition: all 250ms ease 0s;transform: scale(0);
} 

.nav-tabs > li.active > a::after, .nav-tabs > li:hover > a::after {transform: scale(1);}
.tab-nav > li > a::after {
background: ##5a4080 none repeat scroll 0% 0%;
color: #fff;
}

.tab-pane {	padding: 15px 0;}
.tab-content {	padding:20px}
.nav-tabs > li {	width:20%;	text-align:center;}
.card {	
background: #FFF none repeat scroll 0% 0%;	
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);	
margin-bottom: 30px;
}

body {	
background: #EDECEC;	
padding:10px
} 

@media all and (max-width:724px) {.
nav-tabs > li > a > span {display:none;
}
.nav-tabs > li > a {padding: 5px 5px;}
}

Bước 3: Gọi thư viện Bootstrap và Font awesome

Bước 4: Gọi thư viện JQUERY