-----
8 Tạo hiệu ứng đếm số (counter up) bằng thư viện
waypoints.js và counterup.js
– Vào trang Google, gõ từ khóa “counter up demo” hoặc vào trực
tiếp trang: http://bfintal.github.io/Counter-Up/demo/demo.html
– Chuột phải vào trang web vừa mở, chọn View page source để
xem mã nguồn
– Cuối trang mã nguồn sẽ có liên kết tới thư viện waypoints,
và counterup
– Lấy mã nguồn waypoints, và counterup về máy (ví dụ: lưu
vào thư mục js)
– Liên kết vào trang web đang làm
<script
src="js/waypoints.min.js"></script>
<script
src="js/counterup.min.js"></script>
– Dùng jQuery để gắn vào phần tử chứa số, ví dụ:
$(function(){
$('.number').counterUp({
delay:
10,
time:
3000
});
});
Một số lỗi và cách khắc phục,
– Lỗi do chưa nhúng thư viện
jQuery và trang web, sẽ có thông báo lỗi như sau:
Uncaught ReferenceError: $ is not defined
Cách khắc phục: tải thư viện
jQuery về máy và nhúng vào trang web
– Lỗi thư viện jQuery không tương
thích với phiên bản đã được sử dụng để tạo ra thư viện waypoints và counterup.
Thường có thông báo lỗi như sau:
Uncaught TypeError: a.indexOf is not a function” error.
Vì waypoints và counterup được tạo
ra bằng jQuery phiên bản 2.x, nên cần tải đúng phiên bản này thì mới chạy được.
Ví dụ tải phiên bản 2.2.5 tại đây:
9 Tạo vùng các giáo viên
[HTML]
<!-- begin the our team -->
<div
class="our-team">
<div
class="container">
<div
class="row">
<div
class="row courses-title text-center wow bounceInUp">
<h2
class="line-over">Đội ngũ giảng viên</h2>
</div>
</div>
<div
class="row">
<div
class="col-sm-3 wow bounceInUp">
<a
href="" class="one-course our-team">
<img
src="images/our-team.jpg" alt="">
<span
class="course-info">
<h4
class="name">Văn Tèo</h4>
<div
class="course-group">Front-end</div>
</span>
</a>
</div>
<div
class="col-sm-3 wow bounceInUp" data-wow-delay="0.3s">
<a
href="" class="one-course our-team">
<img
src="images/our-team.jpg" alt="">
<span
class="course-info">
<h4
class="name">Văn Tèo</h4>
<div
class="course-group">Front-end</div>
</span>
</a>
</div>
…
[CSS]
.our-team .line-over {
display: inline-block;
margin-bottom: 60px;
}
.our-team h4.name {
font-size: 17px;
}
.our-team .course-group {
font-size: 14px;
}
[Hình ảnh minh họa]
10 Vùng footer
[HTML]
<!-- begin footer -->
<footer
class="footer">
<div
class="container">
<div
class="row text-center">
<a
href="" class="logo-footer"><img
src="images/logo.png" alt=""></a>
<div
class="copyright">
Copyright
2018 by <span class="green-color">ABC</span>
</div>
</div>
</div>
</footer>
<!-- end
footer -->
[CSS]
Chèn ảnh nền cho footer:
footer.footer {
min-height: 200px;
padding: 66px;
background:
url(../images/bg_footer.jpg);
color: white;
position: relative;
margin-top: 100px;
}
Phủ màu nền cho footer, làm màu sáng hai bên, tối màu ở giữa:
footer.footer:after {
content: "";
width: 100%;
height: 100%;
background-image:
-webkit-linear-gradient(left, rgba(0, 0, 0, 0.21), rgba(3, 4, 4, 0.81), rgba(0,
0, 0, 0.04) 100%);
position: absolute;
top: 0;
left: 0;
}
[Hình kết quả]
Đọc thêm về background-gradient: https://css-tricks.com/css3-gradients/
11 Responsive cho trang web
Tham khảo danh sách các kích thước màn hình dùng trong
Bootstrap2, 3, 4:
Đây là các kích thước màn hình của Bootstrap 3:
/*========== Mobile First
Method ==========*/
/* Custom, iPhone Retina */
@media only screen and (min-width : 320px) {
}
/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px) {
}
/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
}
/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
}
/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
}
Nên áp dụng theo kiểu mobile first và dùng min-width chứ không nên sử dụng cả max-width và min-width. Tham khảo thêm tại đây: https://stackoverflow.com/questions/45772609/media-query-when-max-width-is-set-to-767px
Để ảnh nền phủ đầy phần tử, sử dụng thuộc tính
background-size: cover.
Nên có luật *{} trong @media, để hiển thị vùng mã CSS tương ứng
ra cửa sổ Developer Tools. Ví dụ:
@media (min-width: 768px){
*{}
.top-header {
background:
url(../images/bg02.jpg);
background-size: cover;
}
}
Xử lý cho logo căn giữa:
– Sử dụng outline để quan sát vị trí của các phần tử
– Cho navbar-header không float, text-align căn giữa
– Bỏ chế độ float của navbar-brand
– Cho hình ảnh (img) hiển thị ở chế độ inline
/* tablet ipad*/
@media (min-width: 768px){
*{
outline: 1px dashed
red;
}
.container>.navbar-header {
float: none;
text-align: center;
}
.navbar>.container .navbar-brand {
float: none;
}
.container>.navbar-header img {
display: inline;
}
}
-----------
Cập nhật [02/10/2018]
-----------
Xem thêm: Làm web (05) - Wordpress_cài đặt_Starter theme (01)