Bootstrap mẫu một trang với hiệu ứng thị sai
|
Nhiều tính năng và công nghệ hiện đại làm cho mẫu này trở thành một mẫu để có được. Để bắt đầu, thiết kế bóng bẩy, sạch sẽ và tối thiểu cùng với mã dựa trên SASS làm cho nó mạnh hơn cả ở mặt trước và mặt sau. Sau đó, Bootstrap 4 đảm bảo khả năng phản hồi trên mọi màn hình. Hơn nữa, hiệu ứng thị sai đẹp mắt chạy xuyên suốt để làm dịu tầm nhìn của bất kỳ ai ghé thăm. Ngoài ra, một số tính năng khác như cuộn hoạt hình, bộ đếm, hiệu ứng khi di chuột, các nút cần thiết khác nhau (gọi hành động, bóng ma, quay lại đầu trang), menu thả xuống nhiều cấp làm cho tạm thời này Các mẫu này bao gồm các chủ đề khác nhau, chẳng hạn như danh mục đầu tư, người mẫu, spa, nhiếp ảnh và lĩnh vực kinh doanh Mỗi mẫu có thiết kế ban đầu và phong cách riêng, nhưng điều quan trọng nhất là tất cả chúng đều dựa trên các kỹ thuật HTML5 & CSS3 với khung Bootstrap và có hiệu ứng cuộn thị sai trong bố cục của chúng. Các mẫu được trình bày hoàn toàn có thể tùy chỉnh và dễ bảo trì, vì vậy bạn có thể nhanh chóng thiết lập các trang web trong tương lai của mình Đây là đánh dấu tối thiểu cho phép chúng tôi sử dụng tính chất đáp ứng của Bootstrap. Bây giờ chúng ta có thể bắt đầu với việc thêm các phần tử mới vào trang Menu điều hướng trên cùngĐây là thanh điều hướng cố định. Đây là đánh dấu Về cơ bản, đây là menu dựa trên UL-LI (như thường lệ). Có các liên kết đến các phần khác nhau của trang Phần 1 – Trang chủPhần đầu tiên là trang lời chào có kích thước đầy đủ Văn bản lời chào được căn giữa theo chiều dọc Phần 2 – Giới thiệuCó hai cột, hình ảnh nằm ở cột đầu tiên và văn bản được căn giữa ở cột bên phải
Phần 3 – Dịch vụPhần màu xanh lam này bao gồm bốn thành phần với các biểu tượng glyph do bootstrap cung cấp
Phần 4 – Thông tinĐây là phần rộng thứ hai với nền kích thước đầy đủ, ngoài ra, có hai khối (bảng) bổ sung
Phần 5 – Danh bạ và Chân trangTrên thực tế, có ba yếu tố – đường dịch vụ hẹp màu xanh lam (để thêm một số thông tin), bản đồ google, nơi bạn có thể đặt địa chỉ công ty của mình (dưới dạng ghim trên bản đồ)
Bước 2. CSSBạn có thể nhận thấy rằng hầu hết các phần tử đã nhận được tất cả các kiểu cần thiết cùng một lúc. Tuy nhiên, chúng tôi vẫn phải xác định kiểu cho tất cả các phần tử không chuẩn mới css/kiểu. css/* general styles */
html, body {
height: 100%;
width: 100%;
}
/* padded section */
.pad-section {
padding: 50px 0;
}
.pad-section img {
width: 100%;
}
/* vertical-centered text */
.text-vcenter {
display: table-cell;
text-align: center;
vertical-align: middle;
}
.text-vcenter h1 {
font-size: 4.5em;
font-weight: 700;
margin: 0;
padding: 0;
}
/* additional sections */
#home {
background: url(../images/home.jpg) no-repeat center center fixed;
display: table;
height: 100%;
position: relative;
width: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#about {
}
#services {
background-color: #306d9f;
color: #ffffff;
}
#services .glyphicon {
border: 2px solid #FFFFFF;
border-radius: 50%;
display: inline-block;
font-size: 60px;
height: 140px;
line-height: 140px;
text-align: center;
vertical-align: middle;
width: 140px;
}
#information {
background: url(../images/estate.jpg) no-repeat center center fixed;
display: table;
height: 800px;
position: relative;
width: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#information .panel {
opacity: 0.85;
}
#google_map {
height: 500px;
}
footer {
padding: 20px 0;
}
footer .glyphicon {
color: #333333;
font-size: 60px;
}
footer .glyphicon:hover {
color: #306d9f;
}
Bước 3. JavaScriptCuối cùng là google map, để khởi tạo nó (với địa chỉ định sẵn) ta thêm đoạn code sau js/chính. js$(document).ready(function (){
// create a LatLng object containing the coordinate for the center of the map
var latlng = new google.maps.LatLng(-33.86455, 151.209);
// prepare the map properties
var options = {
zoom: 15,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
navigationControl: true,
mapTypeControl: false,
scrollwheel: false,
disableDoubleClickZoom: true
};
// initialize the map object
var map = new google.maps.Map(document.getElementById('google_map'), options);
// add Marker
var marker1 = new google.maps.Marker({
position: latlng, map: map
});
// add listener for a click on the pin
google.maps.event.addListener(marker1, 'click', function() {
infowindow.open(map, marker1);
});
// add information window
var infowindow = new google.maps.InfoWindow({
content: 'Bản thử trực tiếp[người khóa mạng xã hội] tải về trong gói[/xã hội khóa] Sự kết luậnĐó là tất cả cho đến bây giờ, chúng tôi vừa hoàn thành bố cục của trang của chúng tôi. Tôi hy vọng rằng bạn thích kết quả. Một ưu điểm khác là mẫu này đáp ứng theo mặc định và điều đó có nghĩa là nó trông đẹp trên tất cả các thiết bị có thể (bao gồm cả điện thoại di động) |
