Bagaimana untuk membuat: bar social tetap
Belajar bagaimana untuk menggunakan CSS untuk membuat bar ikon media sosial tetap/meragut.
Bagaimana untuk membuat bar social tetap
Langkah pertama - Tambahkan HTML:
<!-- Load Font Awesome icons --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <!-- Bar ikon sosial media --> <div class="icon-bar"> <a href="#" class="facebook"><i class="fa fa-facebook"></i></a> <a href="#" class="twitter"><i class="fa fa-twitter"></i></a> <a href="#" class="google"><i class="fa fa-google"></i></a> <a href="#" class="linkedin"><i class="fa fa-linkedin"></i></a> <a href="#" class="youtube"><i class="fa fa-youtube"></i></a> </div>
Kesempatan kedua - Tambahkan CSS:
/* Bar ikon tetap/berlekat (penjajaran ke atas 50% layar) */ .icon-bar { posisi: tetap; tinggi: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } /* Atur gaya ikon bar tautan */ .icon-bar a { tampilan: blok; telah-tengah-teks: tengah; keluasan: 16px; transisi: semua 0.3s mudah; warna: putih; ukuran-font: 20px; } /* Jika perlu, atur gaya warna untuk ikon sosial media */ .icon-bar a:hover { warna-latar: #000; } .facebook { latar belakang: #3B5998; warna: putih; } .twitter { latar belakang: #55ACEE; warna: putih; } .google { latar belakang: #dd4b39; warna: putih; } .linkedin { latar belakang: #007bb5; warna: putih; } .youtube { latar belakang: #bb0000; warna: putih; }
相关页面
教程:CSS 定位