Bố cục thích ứng. Văn bản hai cột có hình ảnh. Xóa nhận xét trên Google Plus
Để tiếp tục chủ đề của mình, tôi cung cấp cho bạn bản dịch của một bài viết đi sâu hơn về thuộc tính nhiều cột với các ví dụ đơn giản và rõ ràng.
Báo chí và tạp chí cũng đã chứng minh trên thực tế rằng văn bản được chia thành nhiều cột sẽ dễ nhận biết hơn nhiều. Trên các trang web, cho đến gần đây, việc hiển thị nội dung theo cách này là một vấn đề, đến mức người thiết kế bố cục phải chia văn bản thành nhiều div. Nhưng mọi thứ có thể trở nên đơn giản hơn nhiều với CSS3 Multi Column Module.
Tạo nội dung chia thành nhiều cột Sử dụng thẻ bài viết HTML5:Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc libero magna, venenatis quis aliquet et, rutrum in ague. Donec vel tạm thời buồn bã. Donec volutpat fringilla porta. Đình chỉ hành vi không nulla. Quisque commodo ornare mi, sit amet aliquet justo bibendum non. Integer bibendum convallis sapien, sit amet tincidunt orci placerat in. Sơ yếu lý lịch có hậu quả. //vân vân.
Chúng ta chia văn bản thành hai cột:
Bài viết ( -webkit-column-count:2; -moz-column-count:2; columns-count:2; )
Sử dụng thuộc tính chiều rộng cột, bạn có thể đặt độ rộng cần thiết cho cột:
Bài viết ( -moz-column-width: 150px; -webkit-column-width: 150px; chiều rộng cột: 150px; )
Khoảng cách giữa các cột Khoảng cách được đặt bởi thuộc tính khoảng cách cột tính bằng px hoặc em và không thể âm:
Bài viết ( -webkit-cột-gap: 30px; -moz-cột-gap: 30px; khoảng cách cột: 30px; )
Column Separator Thuộc tính Column-Rule cho phép bạn thêm dấu phân cách giữa các cột, nguyên lý hoạt động tương tự như border.
Bài viết ( -moz-column-rule: 1px chấm #ccc; -webkit-column-rule: 1px chấm #ccc; quy tắc cột: 1px chấm #ccc; )
Hợp nhất các cột Thuộc tính cột-span hoạt động tương tự như thuộc tính colspan của table, trải rộng trên các cột mong muốn.
Bài viết h1 ( -webkit-column-span: all; cột-span:all; )
Tóm tắt Nhờ Mô-đun nhiều cột CSS3, bạn có thể chia văn bản thành các cột có thể đọc được rất dễ dàng và nhanh chóng. Danh sách các trình duyệt được hỗ trợ đã đủ để thử chức năng nhiều cột trong các dự án đang hoạt động. Đối với các trình duyệt lỗi thời, bạn có thể sử dụng một trình duyệt đặc biệtCột CSS3 là một khái niệm đánh dấu nhiều cột cho phép bạn chia nội dung thành các cột. Cột có thể chứa tiêu đề, văn bản, bảng, hình ảnh và bất kỳ phần tử nội tuyến nào khác.
Tạo đánh dấu nhiều cột bằng mô hình cột CSS3 Hỗ trợ trình duyệtTỨC LÀ: 10.0
Firefox: 9.0 -moz-
Chrome: 4.0 -webkit-
Safari: 3.0 -webkit-
Opera: 11.1, 15.0 -webkit-
iOS Safari: 9, 7.1 -webkit-
Opera Mini: 8
Trình duyệt Android: 2.1 -webkit-
Trình duyệt Chrome dành cho Android: 44 -webkit-
Thuộc tính cho phép bạn đặt rõ ràng số lượng cột cần thiết và chiều rộng của chúng sẽ được tính dựa trên chiều rộng không gian có sẵn. Theo mặc định, trình duyệt thêm khoảng cách ngang 1em giữa các cột. Nếu chiều rộng hình ảnh chiều rộng hơn cột, nó sẽ bị cắt bỏ. Nếu chiều rộng cột được chỉ định cùng lúc với số lượng cột thì số lượng cột sẽ được coi là số lượng cột tối đa. Tài sản không được thừa kế.
Cú pháp
Phần ( -webkit-column-count: 3; -moz-column-count: 3; cột-count: 3; ) 
Cơm. 1. Ví dụ về bố cục nhiều cột
Thuộc tính cho phép bạn chia nội dung thành các cột mà không cần đặt thuộc tính đếm cột. Số lượng cột sẽ phụ thuộc vào số lượng cột có chiều rộng nhất định có thể vừa với vùng chứa. Không được thừa kế.
Cú pháp
Phần ( -webkit-column-width: 100px; -moz-column-width: 100px; chiều rộng cột: 100px; )
3. Chiều rộng khoảng trống khoảng cách giữa các cộtThuộc tính kiểm soát khoảng cách giữa các cột. Nếu bạn đặt đường phân chia cho các cột bằng thuộc tính quy tắc cột thì đường này sẽ nằm ở giữa khoảng trống và chiều rộng của nó sẽ không thay đổi chiều rộng tổng thể. Tài sản không được thừa kế.
Cú pháp
Phần ( -webkit-cột-gap: 40px; -moz-cột-gap: 40px; khoảng cách cột: 40px; ) 
Cơm. 2. Khoảng cách giữa các cột
Thuộc tính chỉ định số cột sẽ giao nhau với phần tử đã chọn. Nó được chỉ định không phải cho khối vùng chứa mà cho một phần tử cụ thể bên trong, chẳng hạn như tiêu đề.
Nếu bạn muốn hình ảnh trải dài trên tất cả các cột, hãy đặt img (display: block; -webkit-column-span: all; colum-span: all;) . Tài sản không được thừa kế.
Cú pháp
H1 ( -webkit-column-span: tất cả; cột-span: tất cả; ) Cơm. 3. Định vị tiêu đề trên tất cả các cột
Thuộc tính tạo khoảng trống bên trong giữa các cột sọc dọc- đường phân chia. Nếu màu đường không được chỉ định, một số hiệu ứng sẽ không được hiển thị. Không được thừa kế.
| Giá trị: | |
| không có | Giá trị mặc định có nghĩa là không có dòng. Màu sắc và chiều rộng được chỉ định cho dòng sẽ bị bỏ qua. |
| ẩn giấu | Tương tự như với giá trị none , dòng này bị ẩn. |
| say mê | Hiển thị một đường dưới dạng một tập hợp các dấu chấm vuông. |
| nét đứt | Hiển thị một dòng dưới dạng một chuỗi dấu gạch ngang. |
| chất rắn | Dòng thường xuyên. |
| gấp đôi | Hiển thị đường phân chia là hai đường thẳng song song nếp nhăn, nằm cách nhau một khoảng. Độ rộng của đường phân chia không được chỉ định nhưng tổng các dòng và khoảng cách giữa chúng bằng giá trị chiều rộng quy tắc cột. |
| rãnh | Hiển thị một đường thể tích được ép vào khung vẽ. Điều này đạt được bằng cách tạo ra bóng có hai màu, một màu đậm hơn và một màu nhạt hơn. |
| cây rơm | Hiển thị đường phân chia âm lượng, tức là. tác dụng ngược lại với rãnh. |
| chèn vào | Hiển thị một đường liền nét có màu đậm hơn màu đường được chỉ định. |
| sự bắt đầu | Hiển thị một đường liền nét với màu được chỉ định bởi thuộc tính màu quy tắc cột. |
| ban đầu | Đặt giá trị thuộc tính thành giá trị mặc định. |
| thừa kế | Kế thừa giá trị thuộc tính từ phần tử cha. |
Cú pháp
Phần ( -webkit-column-rule-style: chấm; -moz-column-rule-style: chấm; kiểu quy tắc cột: chấm; ) 
Cơm. 4. Kiểu đường phân chia
Thuộc tính thiết lập độ rộng của đường phân chia. Không hoạt động nếu không có thuộc tính kiểu quy tắc cột. Không được thừa kế.
Cú pháp
Phần ( -webkit-column-rule-style: chấm; -moz-column-rule-style: chấm; kiểu quy tắc cột: chấm; -webkit-column-rule-width: 10px; -moz-column-rule- chiều rộng: 10px; chiều rộng quy tắc cột: 10px) 
Cơm. 5. Chiều rộng đường phân chia
Thuộc tính cho phép bạn thay đổi màu của đường phân chia, nó kế thừa màu của văn bản. Không được thừa kế.
Cú pháp
Phần ( -webkit-column-rule-style: chấm; -webkit-column-rule-width: 5px; -webkit-column-rule-color: #59ACE7; -moz-column-rule-style: chấm; -moz- chiều rộng quy tắc cột: 5px; -moz-column-rule-color: #59ACE7; 
Cơm. 6. Màu đường phân chia
Thuộc tính này cho phép bạn đặt ba thuộc tính đường phân chia trong một khai báo—độ rộng quy tắc cột, kiểu quy tắc cột và màu quy tắc cột. Không được thừa kế.
Cú pháp
Phần ( -webkit-column-rule: 5px chấm #59ACE7; -moz-column-rule: 5px chấm #59ACE7; quy tắc cột: 5px chấm #59ACE7; )
9. Đặt cột bằng thuộc tính cột đơnThuộc tính này là phiên bản ngắn của thuộc tính chiều rộng cột và số lượng cột; nó đồng thời đặt chiều rộng và số lượng cột. Không được thừa kế.
Cú pháp
Phần ( -webkit-columns: 100px 3; -moz-columns: 100px 3; columns: 100px 3; )
19/07/16 2.9KTrong bài viết này, chúng ta sẽ xem xét từng bước các quy tắc bố cục của một trang web có hai cột. Mã chúng tôi cung cấp sẽ cho phép bạn thêm đầu trang và chân trang trải rộng trên hai cột này.
Giới thiệuĐể hoàn thành các nhiệm vụ trong bài viết này, bạn phải có kỹ năng viết mã bằng cả HTML và CSS. Nếu không đúng như vậy thì tốt hơn hết bạn nên sử dụng trình chỉnh sửa trực quan.
Xin lưu ý rằng bạn không cần phải là chuyên gia về HTML hoặc CSS. Bạn chỉ cần có kiến thức cơ bản về những công nghệ này, nếu không bài viết này sẽ không rõ ràng với bạn.
Sử dụng thuộc tính float để tạo hai cộtCó nhiều phương pháp sử dụng CSSđể tạo một trang web có hai cột. TRONG hướng dẫn này chúng ta sẽ sử dụng thuộc tính float để thả nổi một cột bên cạnh một cột khác. Về nhiều mặt, phương pháp này đơn giản và linh hoạt hơn phương pháp định vị tuyệt đối các phần tử. Nó cũng cho phép bạn thêm đầu trang và chân trang tùy chọn trải dài trên hai cột này.
Bản thân tôi không sử dụng phương pháp này, vì bố cục tài nguyên của tôi được tạo khi tôi mới thực hiện những bước đầu tiên trong quá trình phát triển CSS và không biết gì về các quy tắc bố cục cơ bản. Nhưng đừng lo lắng. Tôi đã tạo một số trang demo sử dụng định dạng này mà bạn có thể xem sau.
Mã HTML cơ bản cho trang web có hai cộtPhần HTML của mã khá đơn giản. Chúng ta chỉ cần hai div, một div cho mỗi cột:
Menu điều hướng nội dung
Các từ “Menu điều hướng” và “Nội dung” chỉ là con trỏ đến thanh điều hướng bên cạnh và nội dung chính. Bạn sẽ xóa những từ này sau khi bạn đã thêm nội dung thực tế vào các khối. Div "container" là một khối chứa hai cột. Nó có thể được sử dụng nếu bạn cần áp dụng một số kiểu nhất định cho cả hai cột.
Mã CSS cho trang web có hai cộtMã CSS sau sử dụng tỷ lệ phần trăm (“%”) để xác định độ rộng của cả hai cột. Vì chúng được đo bằng đơn vị tương đối nên chúng sẽ mở rộng hoặc co lại để lấp đầy toàn bộ cửa sổ trình duyệt, bất kể nó rộng bao nhiêu. Ví dụ: nếu bạn thay đổi kích thước cửa sổ trình duyệt của mình, mẫu sẽ sắp xếp lại cột để vừa khít nhất có thể với ranh giới của cửa sổ.
Mã CSS rất đơn giản:
#content ( float: right ; width: 80% ; ) #navbar ( float: right; width: 20%; )
Theo quy tắc bố cục trang web, mã CSS phải được đặt trong phần kiểu của trang web hoặc trong tệp bên ngoài.
Bạn có thể xem cách hoạt động của đoạn mã trên trong thực tế tại đây .
Cách thức hoạt động: giải thích về mã CSSQuy tắc "float: right" xác định cách DIV được thả nổi ra khỏi luồng tài liệu và được đặt ở bên phải của tất cả các phần tử khác nổi ở bên trái của nó. Khối DIV đầu tiên xuất hiện trên trang HTML được bù đầu tiên.
Trong ví dụ trên, "#content" được dịch chuyển sang bên phải trước tiên và được đặt thành 80% chiều rộng của cửa sổ trình duyệt. Quy tắc tiếp theo của chúng tôi cũng đưa "#navbar" ra khỏi luồng tài liệu và đặt nó ở bên phải.
Vì chúng ta đã có phần tử nổi ở vị trí này. Theo quy định đã cho bố cục thích ứng, khối thứ hai được đặt ở bên trái phần tử hiện có nếu có đủ không gian cho nó. Nếu không nó sẽ được đặt dưới phần tử đầu tiên. Với suy nghĩ này, tổng các cạnh của cả hai khối phải bằng 100% hoặc ít hơn, nếu không chúng ta sẽ không có đủ không gian để đặt chúng cạnh nhau.
Cách đặt cột điều hướng ở bên phảiĐoạn mã trên đặt menu điều hướng ở cột bên trái. Nếu bạn muốn menu điều hướng ở bên phải thì thay đổi đoạn code như sau:
#content ( float: left ; width: 80% ; ) #navbar ( float: left ; width: 20% ; )
Bạn có thể thấy mã này hoạt động ở đây bằng cách nhấp vào nút chuyển đổi ở cột bên phải của menu điều hướng.
Cách thay đổi độ rộng chính xácTheo thành lập quy tắc kỹ thuật bố cục, các kiểu trên đặt chiều rộng của cột bên thành 20% chiều rộng của cửa sổ trình duyệt và chiều rộng của cột nội dung thành 80%, tổng cộng lên tới 100%.
Nếu bạn dự định thay đổi những giá trị này, hãy đảm bảo rằng chúng tổng cộng bằng hoặc nhỏ hơn 100%, nếu không trình duyệt sẽ đặt một cột bên dưới cột kia.
Nếu một trong các cột bị dịch chuyển xuống dưới cột kia: cách khắc phụcNếu bạn thấy rằng một trong các cột nằm gọn dưới cột kia thay vì cạnh nhau, điều này có nghĩa là tổng chiều rộng của cả hai cột lớn hơn 100% chiều rộng cửa sổ trình duyệt.
Điều này có thể xảy ra ngay cả khi bạn sử dụng giá trị "20%" và "80%" của tôi. Ví dụ: nếu bạn thêm lề, đường viền và phần đệm vào một hoặc cả hai cột. Chiều rộng của các cột này cũng sẽ tăng lên khiến tổng số vượt quá 100%.
Các quy tắc bố cục và tương thích giữa nhiều trình duyệt ngụ ý hai cách để giải quyết vấn đề này:
- Giảm độ rộng cột cho đến khi trình duyệt hiển thị chúng theo cách bạn muốn. Nhưng hãy nhớ rằng lãi suất là đơn vị tương đốiđo. Nó được gắn với chiều rộng của cửa sổ trình duyệt của người dùng. Vì vậy, nếu bạn đã kiểm tra bố cục trên hệ thống của mình và nhận thấy rằng việc thêm 10 px vào phần đệm bên trái vào một trong các cột và giảm chiều rộng xuống 1% là ổn, thì bạn không thể kết luận rằng 1% = 10 px. Nói cách khác, 1% của 1024 pixel khác với 1% của 1920 pixel, v.v. Đảm bảo bạn tính đến sự khác biệt về độ rộng cửa sổ trong các trình duyệt và đường chéo màn hình khác;
- Giải pháp tôi thích hơn là tạo một DIV lồng nhau bên trong các khối "#navbar" và "#content", đồng thời đặt tất cả phần đệm, lề, đường viền và nội dung thực tế vào bên trong nó. Do đó, đối với các khối bên ngoài, bạn có thể để lại 20% và 80% cũ mà không phải lo lắng về việc điều chỉnh lề, phần đệm, v.v.
Ví dụ: trang web demo hai cột sử dụng HTML sau để tạo DIV lồng nhau:
Menu điều hướng nội dung
Gửi những người đã viết trước đó Kiểu CSS thêm các thuộc tính sau cho "#innercontent" và "#innernavbar":
#innercontent ( đệm-trái: 10px ; đệm-phải: 10px ; ) #innernavbar ( đệm-trái: 5px ; đệm-phải: 5px ; )
CSS cho "#content" và "#navbar" vẫn giữ nguyên như được mô tả trong nửa đầu của bài viết này.
Vì vết lõm được áp dụng cho phần bên trong khối DIV, kích thước của các khối bên ngoài vẫn giữ nguyên và chúng tôi duy trì bố cục hai cột.
Cách thêm đầu trang và chân trang trải dài cả hai cộtMột số trang web chứa tiêu đề kéo dài chiều rộng của cả hai cột. Theo quy tắc bố cục trang web hiện có, bạn có thể đặt logo, tiêu đề trang web hoặc thậm chí các biểu ngữ quảng cáo trong đó. Một số tài nguyên cũng chứa phần chân trang trải dài cả hai cột. Ngoài ra, chân trang có thể được sử dụng cho các mục như thông báo bản quyền.
Với sự ra đời của nhiều loại màn hình kích cỡ khác nhau và độ phân giải, việc tạo ra các thiết kế với các khối văn bản cố định chiếm toàn bộ chiều rộng của màn hình đã trở nên cực kỳ phi thực tế. Cách tiếp cận truyền thống là chia văn bản thành hai cột và việc này thường được thực hiện thủ công và tốn thời gian. Hoặc văn bản bị chia cắt khi trợ giúp về javascript, không phù hợp với mọi tình huống. Ngoài ra, chúng ta nên có cơ hội thực hiện điều này với Trợ giúp CSS mà không cần dùng đến hệ thống lưới hoặc các phần tử nổi, phải không?
CSS3 thực sự cung cấp cho bạn khả năng chia văn bản thành nhiều cột, cũng như đặt kích thước khoảng cách (khoảng cách giữa các cột) và bằng cách này bạn có thể nhận được toàn quyền kiểm soát phía trên các cột, thay vì sử dụng hệ thống khung hoặc lưới.
Ngoài ra, chẳng hạn, CSS3 cung cấp các dự phòng tuyệt vời khi người dùng đang sử dụng Netscape Navigator, do đó bố cục trang web của bạn sẽ vẫn trông đẹp mắt.
Hỗ trợ trình duyệt
Điều quan trọng cần lưu ý là, mặc dù thực tế là hầu hết tất cả các trình duyệt hiện đại đều hỗ trợ nhiều cột trong CSS3 (vâng, ngay cả IE10), nhiều cột các trình duyệt trước IE9 dường như không cung cấp hỗ trợ như vậy. Mặc dù khả năng hỗ trợ khá tốt nhưng bạn có thể phải sử dụng tiền tố trình duyệt cho webkit (-webkit-) và mozilla (-moz-). Tuy nhiên, bạn sẽ không phải sử dụng -ms- hoặc -o- cho IE và Opera vì chúng được trang bị một trong hai hỗ trợ đầy đủ, hoặc một phần.
Tùy chọn
Thuộc tính CSS này cung cấp cho bạn khá nhiều quyền kiểm soát cách hiển thị nội dung của bạn trong cửa sổ trình duyệt và hãy xem các tùy chọn đó:
* đếm cột: Tại đây bạn có thể chỉ định số lượng cột sẽ được hiển thị trong phần tử.
*column-width: Chiều rộng của một cột riêng lẻ. Hãy chuẩn bị cho trường hợp trình duyệt đôi khi tự thay đổi giá trị này.
* columns-gap : chiều rộng của rãnh giữa các cột.
* colum-rule-width: Đây giống như đường viền của các cột của bạn và ở đây bạn cần chỉ định độ rộng của đường viền.
* kiểu quy tắc cột : cũng giống như đường viền nếu bạn cần đặt kiểu.
*column-rule-color : Tham số này được sử dụng để chỉ định màu.
* cột-span : Giá trị này cho trình duyệt biết bạn muốn kéo dài bao nhiêu cột - giá trị này rất tốt khi sử dụng cho tiêu đề và hoạt động giống như colspan và rowspan trong bảng.
Với tất cả các tùy chọn này, chúng tôi không nghĩ mình sẽ cần bất cứ thứ gì khác để điều khiển loa. Tất nhiên, đối với hoạt động binh thương nhiều cột, chúng ta không nhất thiết cần tất cả các tham số này. Hơn nữa, nói chung, chúng ta chỉ cần tham số đếm cột, nhưng có thể bạn sẽ luôn sử dụng khoảng cách cột để ngăn văn bản cột hợp nhất với đường viền của nó.
Để thực hiện điều này trong thực tế, chúng ta chỉ cần một vài dòng mã:
/* Điều này sẽ tạo ra bố cục 3 cột với khoảng cách 20px giữa mỗi cột */
.cols3 (
số cột: 3;
khoảng cách cột: 20px;
}
Nếu bạn cũng muốn áp dụng quy tắc cho các cột thì bạn sẽ cần thêm các tham số sau:
/* Điều này sẽ tạo ra bố cục 3 cột và khoảng cách 20px giữa mỗi cột và quy tắc là 1px màu đen */
.cols3 (
số cột: 3;
khoảng cách cột: 20px;
chiều rộng quy tắc cột: 1px;
kiểu quy tắc cột: vững chắc;
cột-quy tắc-màu: #000;
}
Giống như tùy chọn đường viền phổ biến, bạn có thể áp dụng màu sắc, kiểu dáng và chiều rộng như sau:
Cols3 (
số cột: 3;
khoảng cách cột: 20px;
quy tắc cột: 1px Solid #000;
}
Nếu bạn có tiêu đề và bạn cần tiêu đề đó trải dài toàn bộ chiều rộng của tất cả các cột thì bạn cần thêm hàng tiếp theo mã số:
/*H1 này sẽ chiếm không gian của 3 cột*/
.cols3 h1(
nhịp cột: tất cả;
}
Bạn có thể áp dụng kỹ thuật này cho hầu hết mọi mã HTML, từ một đoạn văn cho đến nhiều phần tử "div". Hãy xem bản demo:
Và bây giờ chúng tôi muốn cung cấp cho bạn mã hoàn chỉnh hiệu ứng này:
Bản trình diễn cột CSS3
Cols3 (
-webkit-cột-đếm: 3;
-webkit-cột-gap: 20px;
-webkit-column-rule: 1px Solid #000;
Moz-cột-đếm: 3;
-moz-cột-gap: 20px;
-moz-column-rule: 1px liền khối #000;
Số cột: 3;
khoảng cách cột: 20px;
quy tắc cột: 1px Solid #000;
}
Cols3 h1 (
-webkit-column-span:tất cả;
-moz-cột-span:tất cả;
cột-span: tất cả;
}
Số nguyên posuere tại một ante
Cum sociis natoque penatibus et magnis dis parurient montes, nascetur giễu cợt mus. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam id dolor id nibh ultricies xe cộ ut id elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla sed consectetur.
Cras mattis consectetur purus sit amet fermentum. Số nguyên posuere erat a ante venenatis dapibus posuere velit aliquet. Etiam porta sem Malesuada magna mollis euismod. Etiam porta sem Malesuada magna mollis euismod. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, Tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Cum sociis natoque penatibus et magnis dis parurient montes, nascetur giễu cợt mus. Fusce dapibus, Tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum nulla sed consectetur.
Curabitur blandit tempus porttitor. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur. Donec id elit non mi porta graida at eget metus. Curabitur blandit tempus porttitor.
Hoàn thành
Theo chúng tôi, việc chuyển sang tạo cột bằng CSS mang lại cho chúng tôi nhiều lợi thế - chúng tôi không cần phải tạo bất kỳ cột nào nữa Tính toán toán học, tạo các phần tử nổi và không phải chịu hiện tượng khúc xạ nội dung khi người dùng thay đổi kích thước cửa sổ trình duyệt. Bạn cũng có thể viết mã theo cách ngữ nghĩa hơn và vì phương pháp này được mọi người hỗ trợ trình duyệt hiện đại, bạn có thể chuyển sang nó ngay hôm nay.
Bạn đang tạo kiểu cho các cột của mình bằng CSS3 hay bạn vẫn đang sử dụng float và định vị? Bạn sử dụng phương pháp nào để khắc phục sự cố gặp phải trong các trình duyệt cũ hơn? Chia sẻ với chúng tôi trong các ý kiến.
Bạn chắc chắn đã thấy trên một số trang web có lệnh cấm sử dụng nút chuột phải. Tính năng này chủ yếu chống lại những kẻ muốn đánh cắp nội dung của bạn. Biện pháp này sẽ không bảo vệ bạn hoàn toàn khỏi hành vi trộm cắp, nhưng khỏi sao chép thủ công khá. Sự lựa chọn khác .
Tôi không khuyên bạn nên tắt nó đi nút bên phải chuột nếu bạn đăng tài liệu nhằm mục đích sao chép trên blog của mình. Đây có thể là mã, tập lệnh, công thức nấu ăn, những tài liệu tham khảo và khác. Cấm sao chép trong trường hợp này sẽ khiến khách truy cập rời xa bạn và blog của bạn sẽ trở nên ít hữu ích hơn đối với khách truy cập. Nếu việc bảo vệ chống đạo văn là quan trọng đối với bạn thì tốt hơn là thêm url của bạn vào cuối bản sao. Sau đó, bạn sẽ chắc chắn rằng nếu ai đó muốn xuất bản nội dung nào đó được sao chép của bạn ở nơi khác trên Internet, mục sư sao chép sẽ có nhiều khả năng chia sẻ liên kết tới blog của bạn hơn.
Công thức này phù hợp với bất kỳ trang web nào. Tất cả những gì bạn cần làm là dán mã vào tất cả các trang trong blog của bạn:
Trong Blogger, thêm mã vào tiện ích HTML/Javascript trong tab Thiết kế. Nếu bạn đang sử dụng một trong những chủ đề mới nhất trên blog của mình (Emporio, Contempo, Soho, Notable), thì đừng quên kích hoạt khả năng hiển thị của tiện ích (hộp kiểm bên cạnh “Hiển thị cho mọi người”, “Hiển thị tiện ích " HTML/ JavaScript "").
Trên Wordpress, thêm mã vào tiện ích “Văn bản”.
Ngày lễ đang đến gần - Ngày Quốc tế Phụ nữ. Hãy chuẩn bị cho nó trước. Bạn có thể chúc mừng các cô gái và phụ nữ theo cách nguyên bản bằng cách sử dụng các dịch vụ bưu thiếp được thảo luận bên dưới.
Tạo bưu thiếp ngày 8 tháng 3 trực tuyến Sử dụng các dịch vụ sau để tạo bưu thiếp một cách thực tế ngay từ đầu.
Tôi hy vọng rằng bằng cách sử dụng một trong những máy phát điện này, bạn sẽ có thể chúc mừng xứng đáng những người phụ nữ của mình vào ngày 8 tháng 3!
Nội dung của bài viết:
Google cộng Nền tảng Google Plus đã không đáp ứng được kỳ vọng của các nhà phát triển và sẽ bị xóa hoàn toàn vào ngày 2 tháng 4 năm 2019. Album liên quan đến nó sẽ biến mất cùng với nó. Google Ảnh, ủy quyền trên các trang web có tài khoản Google Plus sẽ không khả dụng. Vào ngày 4 tháng 2 nó đã trở thành chức năng không có sẵn tạo hồ sơ, kênh và trang Google Plus. Nếu nội dung có giá trị được lưu trữ trên tài khoản của bạn thì bạn có thể tải xuống bản sao lưu.Những thay đổi này sẽ ảnh hưởng nhiều nhất đến các blogger điều hành blog của họ trên Blogspot. Một số tiện ích G+, nhận xét G+ và Hồ sơ trên Google+. Điều này được nêu trong thông báo trong bảng quản trị Blogger:
Sau khi có thông báo chấm dứt công việc API Google+, dự kiến ra mắt vào tháng 3 năm 2019, sẽ giới thiệu một số thay đổi đối với việc tích hợp Blogger với Google+ vào ngày 4 tháng 2.
Tiện ích Google+. Thiết kế blog sẽ không còn hỗ trợ các tiện ích Nút +1, Người theo dõi trên Google+ và Huy hiệu Google+ nữa. Tất cả các phiên bản của các tiện ích này sẽ bị xóa khỏi blog của bạn.
nút +1. Các nút +1 và G+ cũng như các liên kết "Xuất bản lên Google+" bên dưới các bài đăng trên blog và trong thanh điều hướng sẽ bị xóa.
Xin lưu ý rằng nếu bạn đang sử dụng một mẫu tùy chỉnh có tính năng của Google+, có thể cần phải thay đổi. Vui lòng liên hệ với người đã cung cấp cho bạn mẫu này để nhận được đề xuất.
Nhận xét trên Google+. Hỗ trợ bình luận sẽ ngừng hoạt động từ sử dụng Google+ và tất cả các blog sử dụng tính năng này sẽ được khôi phục nhận xét Blogger tiêu chuẩn của họ. Rất tiếc, nhận xét được đăng qua Google+ không thể chuyển sang Blogger nên chúng sẽ không xuất hiện trên blog của bạn nữa. Gỡ bỏ Nhận xét của Google Ngoài ra, thật không may, những bình luận đã được đăng trong hệ thống sẽ bị xóa vĩnh viễn. Bạn chỉ có thể sử dụng cùng một công cụ https://takeout.google.comđể nói các nhận xét dự phòng từ Google+ vào máy tính của bạn. Chỉ có điều là không có bộ nạp khởi động cho nó và bạn chỉ có thể khôi phục nhận xét theo cách thủ công theo một cách khá quanh co. Thật tốt là tôi đã đến đúng giờ. Cách thay thế hồ sơ Google Plus bằng hồ sơ Blogger Nếu bạn viết blog trên Blogspot thì bây giờ bạn nên quay lại từ hồ sơ Google Plus về hồ sơ Blogger (dành cho những người đã chuyển sang Google Plus tại một lần). Tôi khuyên bạn nên thực hiện việc này ngay bây giờ để tránh những tình huống không lường trước được có thể xảy ra trong quá trình xóa tài khoản Google Thêm. Cách lấy lại hồ sơ Blogger của bạn. Điều này rất dễ thực hiện trong cài đặt quản trị viên Blogger:
Cài đặt -> Cài đặt tùy chỉnh–> Hồ sơ người dùng – ở đây chọn Blogger
Lưu các thay đổi của bạn.
Xác nhận chuyển sang và nhập tên hoặc biệt hiệu của bạn.
Đừng quên tải hình đại diện lên hồ sơ Blogger của bạn.
Cách xóa hồ sơ Google Plus Nếu bạn quyết định xóa hồ sơ G+ của mình một lần và mãi mãi, hãy truy cập trang Google Plus -> Cài đặt -> cuộn xuống cuối trang -> xóa tài khoản Google Plus:
Hôm nay tôi sẽ cho bạn biết CSS3 là gì, nó được sử dụng với mục đích gì, tìm nó ở đâu và cách viết nó một cách chính xác. Tôi cảnh báo bạn, tôi sẽ tự mình nói, đơn giản hóa cho công chúng, như tôi thấy + ví dụ. Vì vậy, hãy bắt đầu từ xa.
CSS là các kiểu trong đó các thuộc tính của một đối tượng được viết. Điều này có nghĩa là chúng có trong tất cả các công cụ hiện có, nếu bạn không thể tìm thấy chúng, thì có thể bạn đang tìm nhầm chỗ hoặc chúng thực sự không tồn tại ( trang web quanh co). Chúng thường được tìm thấy ở đâu? Thông thường đây là thư mục gốc của trang web, tên của tệp là style.css, mặc dù về nguyên tắc, tên này không quan trọng bằng phần mở rộng .css nếu tệp có phần mở rộng như vậy là tệp kiểu.
Xem thêm trên blog của tôi.
