Thực đơn
trang chủWindows 10

Mẫu wbs trang đích kinh doanh. Dành cho những ai đang tìm kiếm hosting. Landing Zero - Trang đích có video nền

Xin chào các độc giả thân yêu của tôi. Hôm nay chúng ta sẽ nói về điểm kỹ thuật, với sự trợ giúp của nó, chúng tôi có thể tăng chuyển đổi doanh số bán hàng hóa hoặc dịch vụ của mình. Một trong điểm quan trọngđược suy nghĩ kỹ lưỡng trang đích với hàng hóa. Cái gọi là trang đích, việc tạo ra trang này mà chúng ta sẽ nói sau và lấy mã trang làm sẵn.

Trang đích là gì? Đây là trang mà mọi người thường truy cập sau khi nhấp vào quảng cáo. Được tạo cho một ưu đãi: sản phẩm, dịch vụ hoặc đăng ký. Trang đích hiệu quả là nền tảng của hoạt động tiếp thị trực tuyến thành công. Sản phẩm có thể tốt nhất thị trường, quảng cáo được hoàn thiện nhưng nếu không có landing page tốt thì nỗ lực không mang lại kết quả 100%. Nó cho khách truy cập biết những gì được cung cấp và tại sao họ nên muốn nó. Cảm giác cấp bách góp phần đưa ra quyết định nhanh chóng và chuyển đổi người dùng sang danh mục khách hàng.

Làm cách nào để tạo Trang đích? Thật sai lầm khi tin rằng câu trả lời nằm ở khả năng sắp chữ. Một trang đích tốt là kết quả công việc phối hợp về mục tiêu, văn bản, thiết kế và mã. Các trang đích, ví dụ sẽ được trình bày bên dưới, sẽ giúp người mới bắt đầu tìm hiểu những kiến ​​thức cơ bản về cách làm việc với bố cục, nhưng sẽ không thay thế các văn bản chuyển đổi và sự hiểu biết về đối tượng mục tiêu. Bạn cũng có thể tạo chúng bằng cách sử dụng nhiều nhà thiết kế Trang đích khác nhau.

Vì vậy, trước khi tạo trang đích, tự hỏi bản thân minh:

  • Một người sẽ làm gì sau khi truy cập trang đích? Liệu anh ấy có mua gì không? Bạn sẽ điền vào mẫu đơn chứ? Đăng ký nhận bản tin? Trước khi bạn theo dõi tỷ lệ chuyển đổi, hãy đặt mục tiêu rõ ràng.
  • Đối thủ cạnh tranh của tôi là ai? Trên thực tế, đây là ba câu hỏi: họ là ai, thành công như thế nào và thành tựu của họ có thể được áp dụng như thế nào? Bắt chước là hình thức chân thành của nịnh hót. Nếu đối thủ cạnh tranh của bạn đang làm điều gì đó hiệu quả, hãy sao chép nó trên trang web của bạn.
  • Khán giả của tôi là ai? Bạn càng hiểu rõ về thị trường ngách và đối tượng mục tiêu của mình thì cơ hội nỗ lực của bạn sẽ được đền đáp càng lớn.

Chúng tôi cần cung cấp mọi thứ thông tin cần thiết, nhưng không đến mức ngăn cản và xua đuổi một khách hàng tiềm năng.

Ví dụ về tạo trang đích + mã hóa cho người giả

Trước khi bắt đầu, chúng ta hãy xem nhanh HTML và CSS. Hiểu cách chúng hoạt động sẽ giúp bạn tạo ra một cuộc đổ bộ.

HTML là ngôn ngữ đánh dấu trình duyệt để hiển thị trang web. Được viết bằng cách sử dụng các thẻ được đặt trong dấu ngoặc nhọn để xác định nội dung.

Thẻ mở () và đóng () xung quanh phần điền:

nội dung

Để tinh chỉnh, các thuộc tính được thêm vào sau tên:

nội dung

CSS - xác định cách định vị phần tử HTML. Bao gồm các bộ chọn, thuộc tính và giá trị:

#selector (thuộc tính: giá trị;)

Bộ chọn khớp với tên của một thẻ cụ thể trong html. Thay đổi giá trị và thêm thuộc tính điều chỉnh vẻ bề ngoài. Bạn có thể tạo các trang trông khác nhau bằng cách áp dụng các kiểu CSS khác nhau cho cùng một HTML.

5 bước ban đầu

Để bố trí nhanh, chúng tôi sẽ sử dụng mẫu có thiết kế tối giản trên dựa trên khởi động. Đây là một hệ thống có bộ chọn riêng, được sử dụng trên toàn thế giới để tăng tốc độ bố cục.

Nó có vẻ khiêm tốn.

Từ loài cá này, một trang web dành cho mọi sở thích được tạo ra theo nhiều giai đoạn.

Cấu trúc thư mục trong thư mục:

  • index.html: Cái này tập tin chính, mà chúng tôi sẽ chỉnh sửa.
  • /asset: các tệp phụ trợ được đặt ở đây:
  • /css: Thư mục chứa các kiểu bootstrap và biểu tượng. Tệp chúng tôi sẽ chỉnh sửa là main.css.
  • /img: thư mục chứa hình ảnh của trang web.
  • /fonts: phông chữ biểu tượng.
  • /js: các tập tin javascript khởi động.

Bước 1: Sử dụng Tiêu đề

Tiêu đề và tiêu đề phụ - những nơi quan trọng, giúp truyền đạt rõ ràng đề xuất giá trị.

Hãy thay đổi tiêu đề và tên của trang web. Ở đây, bạn không cần phải có bất kỳ kỹ năng sắp chữ nào - bạn viết văn bản của riêng mình vào những vị trí được đánh dấu màu vàng trên màn hình.

Bước 2. Ngắn gọn là chị em của sự hoán cải. Thêm lợi ích và tỷ lệ

Bạn sẽ cần 4 phần:

  • thuận lợi;
  • giá;
  • đánh giá;
  • kêu gọi hành động.

Hãy tạo một phần của nội dung chính “chính”, trong đó chúng ta sẽ chèn các phần cần thiết:


…..
…..
…..
…..

Điền bằng cách điền thay vì dấu chấm.

Đối với phần lợi ích, bạn sẽ cần mã này:


Thuận lợi
Nhanh

Đáng tin cậy

Sed diam nonummy


Có lợi nhuận

Elit, sed diam nonummy


Về mặt kỹ thuật

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy


Đáng tin cậy

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy


Có lợi nhuận

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy


Về mặt kỹ thuật

Lorem ipsum dolor ngồi amet, consectetuer adipiscing


Đáng tin cậy

Lorem ipsum dolor ngồi amet, consectetuer adipiscing


Có lợi nhuận

Lorem ipsum dolor ngồi amet, consectetuer adipiscing


Nội dung cho rõ ràng:

Trông vẫn còn cẩu thả nhưng không có lý do gì để hoảng sợ, hãy tiếp tục.

Chúng tôi viết ra giá. Nội dung thay đổi tương tự như ở bước đầu tiên. mô tả chung với loại "thuế quan" và ba mức thuế.



Các gói cước

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Với điều kiện tối thiểu là có thể thực hiện được, điều này sẽ không thể thực hiện được khi bạn bị lobortis lobortis và không có đủ tiền sau mỗi giao dịch.


Biểu thuế số 1
$10

mỗi tháng/mỗi người



  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit

  • Lorem ipsum dolor

  • 10 Lorem ipsum


Đặt hàng
Biểu thuế số 2
$20

mỗi tháng/mỗi người



  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit

  • Lorem ipsum dolor

  • 10 Lorem ipsum


Đặt hàng
Biểu thuế số 3
$30

mỗi tháng/mỗi người



  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit

  • Lorem ipsum dolor

  • 10 Lorem ipsum


Đặt hàng

Có vẻ như vậy.

Hiện tại, chúng tôi không quan tâm đến giao diện của trang đích trong tương lai - chúng tôi sẽ xem xét các ví dụ về việc thay đổi kiểu bên dưới.

Bước 3: Tín hiệu tin cậy và Kêu gọi hành động

Việc sử dụng các tín hiệu được nhắm mục tiêu cho khách truy cập biết rằng thương hiệu đó đáng tin cậy. Có thể nhận được tín hiệu các loại khác nhau, nhưng kinh điển là đánh giá của khách hàng.



Phản hồi khách hàng

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labe et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exermination ullamco labis nisi ut aliquip ex ea commodo:



“Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labe et dolore magna aliqua. "Ut enim ad minim veniam, quis nostrud exeritation ullamco labis nisi ut aliquip ex ea commodo."
“Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labe et dolore magna aliqua. "Ut enim ad minim veniam, quis nostrud exeritation ullamco labis nisi ut aliquip ex ea commodo."

Hãy đặt lời kêu gọi hành động.



Lợi ích khi đặt hàng ngay hôm nay

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Nếu bạn có lợi ích tối thiểu, điều này sẽ không xảy ra khi bạn tập thể dục vì lobortis không phải là một khoản tiền nhỏ dẫn đến hậu quả là:


Đặt hàng ngay bây giờ!

Đánh giá sẽ giúp khách hàng tiềm năngđưa ra quyết định mua một sản phẩm. Để rõ ràng, chúng tôi cần hình đại diện, vì vậy chúng tôi sẽ đặt chúng ngay vào vị trí - dưới mỗi câu trích dẫn.


Tên khách hàng.


Bước 4: Tích hợp thân thiện với lưới và thiết bị di động

Để triển khai lưới, chúng ta cần các thùng chứa Bootstrap. Điều quan trọng cần nhớ là tổng số phân đoạn cột hợp lệ - 12. Lớp xác định độ rộng của màn hình hiển thị nội dung. Ưu điểm của lưới làm sẵn này là các thùng chứa được thiết kế có tính đến khả năng thích ứng và có thể sử dụng ngay lập tức cho thiêt bị di động. Miêu tả cụ thể trên trang web chính thức. Lưới trông như thế này.

Nội dung của “chính” sẽ được gói trong một thùng chứa. Để làm điều này, phần sau được viết ở trên cùng:

… .

Nếu bạn cần khối vừa với toàn bộ chiều rộng của màn hình thì vùng chứa sẽ được chèn vào bên trong. Ở đây nó sẽ là một chiếc jumbotron và một lời kêu gọi hành động.

Chúng tôi sẽ gói tất cả các phần tử yêu cầu đặt chồng lên nhau bằng dấu phân cách dòng.

Bây giờ chúng ta có thể điều chỉnh độ rộng của các cột, tập trung vào lưới bootstrap. Sau khi gói, nhân không còn dính vào các cạnh của màn hình và xuất hiện những vết lõm gọn gàng.

Chúng tôi đặt giá liên tiếp bằng cách sử dụng lớp cột col-lg-4. Bên trong các dòng hàng, không cần thiết phải viết các div riêng biệt để gói nữa; chúng có thể được kết hợp với các div hiện có, cách nhau bằng dấu cách.

Bằng cách tương tự, chúng tôi thiết lập các cột cho phần đánh giá và lợi ích. Nếu bạn cần di chuyển một phần tử sang một bên, hãy sử dụng lớp cột offset col-lg-offset-2. Số ở cuối xác định có bao nhiêu cột cơ sở mà sự dịch chuyển sẽ xảy ra.

Bước 5. Phông chữ và biểu tượng

Chúng tôi triển khai phông chữ tiêu đề Google Font. Khi được chọn, hãy mở tab nhập và sao chép dữ liệu từ đó vào tệp main.css. Chúng tôi cũng thêm bộ chọn tiêu đề vào tệp sử dụng phông chữ mới.

@import "https://fonts.googleapis.com/css?family=Roboto+Condensed" /* nhập phông chữ cho tiêu đề */
.navbar-thương hiệu,
h1,
h2,
h3,
h4,
h5,
h6 (
họ phông chữ: "Roboto Condensed", sans-serif; /* Kết quả phông chữ của Google */
}

Để rõ ràng, các ưu điểm được mô tả bằng một lớp có tên dễ hiểu là text-center và các biểu tượng FontAwgie từ bộ bootstrap.

Đến đây công tác chuẩn bị đã hoàn tất.

Trang đích: ví dụ về mã có ưu đãi, thị sai và bộ đếm

Chúng tôi sử dụng ba loại phổ biến nhất: với một câu, một hình thức và với một bộ đếm ngược. Khi bố cục tiến triển, mẫu sẽ được bổ sung các hiệu ứng.

Ví dụ 1: với một câu

Hãy đặt nền của phần chính và phần đệm sao cho màn hình đầu tiên được che phủ.

Jumbotron (
nền: #f5f5f5 url(../img/fon.jpg) ở giữa trên cùng không lặp lại;
chiều rộng tối đa: 100%;
phần đệm trên cùng: 250px;
phần đệm dưới cùng: 200px;
căn chỉnh văn bản: giữa;
}

Hãy thay đổi kích thước tiêu đề jumbotron từ h2 thành h1. Tiếp theo, chúng ta viết style cho các phần tử cần thay đổi.

Hãy bắt đầu với các biểu tượng.

Lợi ích tôi(
màu: #cac4c4;
}

Sau dấu băm, một màu được chỉ định. Bạn có thể chọn tùy chọn của riêng mình bằng cách sử dụng bảng màu html hoặc trình chỉnh sửa hình ảnh.

Thụt lề cho tiêu đề phần

phần h2 (
phần đệm trên cùng: 30px;
lề dưới: 25px;
}

Chúng tôi đang thu gọn sự xuất hiện của thuế quan. Để thuận tiện, chúng tôi tạo các lớp riêng cho các thành phần mà chúng tôi muốn làm nổi bật cụ thể.


Biểu thuế số 1
$10

mỗi tháng/mỗi người



  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit

  • Lorem ipsum dolor

  • 10 Lorem ipsum


Đặt hàng

Và rất nhiều CSS. Những vị trí mà các phần chịu trách nhiệm được nêu trong phần nhận xét - /* giữa các dấu gạch chéo có dấu hoa thị */

/* ========= Kiểu thuế quan ========= */
/* hình thức chung thuế quan */
.price_item(
nền: #f2f2f2;
vị trí: tương đối;
hiển thị: -webkit-flex;
hiển thị: linh hoạt;

hướng flex: cột;

căn chỉnh các mục: kéo dài;
căn chỉnh văn bản: giữa;
-webkit-flex: 0 1 330px;
linh hoạt: 0 1 330px;
đệm: 2em 3em;
lề: 1em;
màu sắc: #262b38;
con trỏ: mặc định;
tràn: ẩn;

}
/*thay đổi nền khi nhấn vào */
.pricing_item:di chuột (
màu sắc: #444;
lý lịch: #daebef;
}
/*Nền thẻ giá riêng lẻ trong mỗi biểu giá */
.pricing_item:con đầu lòng .price (
nền: #9ba9b5;
}
.pricing_item:nth-child(2).price (
nền: #1f6098;
}
/* TRÊN màn hình rộng thụt lề và tô sáng cột thuế quan ở giữa */
Màn hình @media và (chiều rộng tối thiểu: 66.250em) (
.price_item(
lề: 1,5em 0;
}
.đặc sắc(
chỉ số z: 10;
lề: 0;
cỡ chữ: 1,15em;
}
}
/* tiêu đề */
.price_item h3 (
cỡ chữ: 2em;
lề: 0,5em 0 0;
màu sắc: #1d211f;
}
/*nền thẻ giá*/
.giá(
cỡ chữ: 2em;
độ dày phông chữ: đậm;
màu sắc: #fff;
vị trí: tương đối;
chỉ số z: 100;
chiều cao dòng: 95px;
chiều rộng: 100px;
chiều cao: 100px;
ký quỹ: 1,15em tự động 1em;
bán kính đường viền: 50%;
nền: #77a5cc;
-webkit-transition: màu 0,3 giây, nền 0,3 giây;
chuyển tiếp: màu 0,3 giây, nền 0,3 giây;
}
/* tiền tệ */
.tiền tệ(
cỡ chữ: 0,5em;
căn dọc: siêu;
}
/*làm rõ đề xuất*/
.câu (
độ dày phông chữ: đậm;
lề: 0 0 1em 0;
phần đệm: 0 0 0,5em;
màu: #2a6496;
}
/* danh sách */
.pricing_item ul (
cỡ chữ: 0,95em;
lề: 0;
phần đệm: 1,5em 0,5em 2,5em;
căn chỉnh văn bản: trái;
}
/* Danh sách sản phẩm */
.price_item li (
phần đệm: 0,15em 0;
}
/*nút xếp hạng thứ tự*/
nút .price_item(
độ dày phông chữ: đậm;
lề trên: tự động;
phần đệm: 1em 2em;
màu sắc: #fff;
bán kính đường viền: 5px;
nền: #428bca;
-webkit-transition: màu nền 0,3 giây;
chuyển tiếp: màu nền 0,3s;
}
/*đổi màu khi nhấn nút */
Nút .pricing_item: di chuột,
Nút .pricing_item:tiêu điểm (
màu nền: #285e8e;
}
/*nền thuế quan*/
.bg-2 (
nền: #dddddd;
}

Kết quả

Phản hồi khách hàng. Hãy cho họ một cái nhìn gọn gàng và cho biết vị trí của họ.

/* ==========Các kiểu chứng thực========= */
lời chứng thực (
phần đệm: 4em 0;
căn chỉnh văn bản: giữa;
}
.lời chứng thực .avatar img (
bán kính đường viền: 50%;
nổi: trái;
Hiển thị nội dòng;
lề phải: 1em;
chiều rộng: 65px;
chiều cao: 65px;
lề dưới: 30px;
}
.lời chứng thực .avatar p (
căn chỉnh văn bản: trái;
phần đệm trên cùng: 1em;
màu: #5d5d5d;
trọng lượng phông chữ: 900;
}

Tất cả những gì còn lại là trang trí lời kêu gọi hành động cuối cùng và phần chân trang.

/* Hoạt động */
.hoạt động(
lý lịch: #476177;
chiều cao tối thiểu: 180px;
chiều rộng: 100%;
phần đệm: 4em 0;
căn chỉnh văn bản: giữa;
}
.action h2 (
màu sắc: #fff;
trọng lượng phông chữ: 300;

}
.action p(
màu sắc: #fff;
bóng văn bản: 0 1px 2px rgba(0, 0, 0, .2);
cỡ chữ: 1,2em;
}
.action .container (
lề trên: 3em;
}
/* Chân trang */
chân trang(
lý lịch: #333333;
phần đệm: 1em 0;
căn chỉnh văn bản: đúng;
}
chân trang p(
màu sắc: #fff;
chiều cao dòng: 1;
chuyển đổi văn bản: chữ hoa;
cỡ chữ: 0,7em;
lề trên: 0,5em;
}

Nút chân trang được gán lớp bootstrap tích hợp btn-default.

Đưa mẫu vào cuộc sống. Hãy thực hiện Cuộn trơn và các nút cho các phần cũng như hoạt ảnh văn bản trên màn hình đầu tiên.

Để quá trình chuyển đổi hoạt động, chúng tôi sẽ thay thế một số lớp phần bằng id - về lợi ích và thuế quan. Và chúng ta sẽ thêm liên kết id vào các nút. Ảnh chụp màn hình - cái gì được gắn vào cái gì, được đánh dấu bằng điểm đánh dấu màu vàng.

Chúng tôi đặt thụt lề cho các nút - jbutton. Cuộn khi nhấn hoạt động nhưng rất đột ngột.

Sự chuyển tiếp mượt mà được tạo ra khi trợ giúp về javascript hoặc jquery. Cái sau được kết nối với các mẫu Bootstrap theo mặc định.

Việc cuộn bây giờ đã mượt mà.

Thêm hoạt ảnh vào văn bản bằng Animate.css (https://raw.githubusercontent.com/daneden/animate.css/master/animate.css). Cái này đã sẵn sàng mã nguồn mở, nó có thể được sử dụng trên bất kỳ trang web nào. Đặt tệp từ Github vào thư mục css và chỉ định đường dẫn.

Chúng tôi chọn các hiệu ứng ở đây: https://daneden.github.io/animate.css/. Chúng tôi đã chọn fadeInDown. Nó được viết bằng mã như thế này:

Bây giờ khi trang được tải hoặc làm mới, văn bản sẽ có hình động. Sẵn sàng.

Ví dụ 2: với hình dạng và hiệu ứng thị sai

Khách truy cập càng được cung cấp nhiều trường biểu mẫu thì khả năng họ điền vào chúng càng ít. Chỉ yêu cầu những thông tin cần thiết tối thiểu.

Nó được lắp ráp bằng cách tương tự. Chúng tôi sẽ thay đổi hình nền và màu sắc. Và tất nhiên, chúng ta sẽ thêm một hình dạng.

Hãy bắt đầu với thị sai.

Hãy thay đổi nền của jumbotron thành trong suốt:

nền: trong suốt;

Bên trong head chúng ta sẽ chèn đoạn script:


$(window).scroll(function(e)(
thị sai();
});
hàm thị sai())(
var cuộn = $(window).scrollTop();
$(".bgparallax").css("top",-(scrolled*0.2)+"px");
}

Dòng đầu tiên trong phần nội dung là nơi chứa thị sai:

Và trong CSS hành vi của nó là:

Bgparallax (
nền: lặp lại url(/../img/fon.jpg);
vị trí: cố định;
chiều rộng: 100%;
chiều cao: 300%;
đỉnh: 0;
trái: 0;
chỉ số z: -1;
}

Thị sai đã sẵn sàng. Nhưng việc thay đổi mã và bôi cảnh mơi yêu cầu gán lại bảng màu.

Làm tối menu:

Thanh điều hướng mặc định (
màu nền: #333;
màu viền: #444;
màu sắc: xám đậm;
bán kính đường viền: 0;
}

Thanh điều hướng mặc định .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus (
màu sắc: xám đậm;
màu nền: rgba(0, 0, 0, 0,5);
}

Chúng tôi thay thế câu trong jumbotron bằng một câu mới - bằng mã biểu mẫu:







Trang đích biến khách truy cập thành khách hàng
Quisque tincidunt dui auguesusisse lorem vel diam consectetur posuere vehicula posueret mauris vehicula tortor rhoncus vulputate massa.








  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy.












Và chúng tôi quy định sự xuất hiện

/* hình thức */
.headform-list (
kiểu danh sách: không có;
chiều cao dòng: 26px;
trọng lượng phông chữ: 400;
phần đệm: 0px;
lề dưới: 40px;
}
.headform(
tràn: ẩn;
vị trí: tương đối;
màu nền: rgba(0,0,0,.4);
phần đệm: 35px 40px;
bán kính đường viền: 8px;
}
đầu vào, nút, chọn, vùng văn bản (
chiều rộng: 100%;
lề dưới: 10px;
}
.headform-list li .fa (
vị trí: tuyệt đối;
trên cùng: 0px;
trái: 0px;
chiều rộng: 42px;
cỡ chữ: 24px;
căn chỉnh văn bản: giữa;
}
.headform-list li(
vị trí: tương đối;
chiều cao tối thiểu: 38px;
phần đệm bên trái: 62px;
lề dưới: 20px;
}
.jumbotron p(
màu sắc: #fff;
cỡ chữ: 16px;
kiểu chữ: in nghiêng;
}

Văn bản của jumbotron cũng kết thúc ở đây vì nó yêu cầu thay đổi.

Chúng tôi đang thay đổi thuế quan.

/*Tổng quan về biểu giá */
.price_item(
màu nền: rgba(0,0,0,.4); /* dòng đã thay đổi */
bán kính đường viền: 4px; /* dòng đã thay đổi */
vị trí: tương đối;
hiển thị: -webkit-flex;
hiển thị: linh hoạt;
-webkit-flex-direction: cột;
hướng flex: cột;
-webkit-align-items: kéo dài;
căn chỉnh các mục: kéo dài;
căn chỉnh văn bản: giữa;
-webkit-flex: 0 1 330px;
linh hoạt: 0 1 330px;
đệm: 2em 3em;
lề: 1em;
màu: #f2f2f2; /* dòng đã thay đổi */
con trỏ: mặc định;
tràn: ẩn;
bóng hộp: 0 0 15px rgba(0, 0, 0, 0,05);
}
/*thay đổi nền khi nhấn vào */
.pricing_item:di chuột (
màu sắc: #444;
nền: #ddd; /* dòng đã thay đổi */
}

Bây giờ chúng trông như thế này - nền trong suốt và các góc tròn.

Mẫu đã sẵn sàng.

Ví dụ 3: với bộ đếm ngược

Chúng tôi thay đổi phần điền của jumbotron một lần nữa và tô màu lại mẫu để phù hợp với nền mới, tương tự như mẫu trước đó. Kết nối tập lệnh truy cập:


HTML





Thời gian không chờ đợi
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Với điều kiện tối thiểu là có thể thực hiện được, điều này sẽ không thể thực hiện được khi bạn bị lobortis lobortis và không có đủ tiền sau mỗi giao dịch. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.




  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy.




  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy.





var myCountdown1 = Đếm ngược mới((
thời gian: 86400 * 3, // 86400 giây = 1 ngày
chiều rộng: 300
, chiều cao: 60
, rangeHi: "ngày"
, kiểu: "lật" //