🐬 Wapmaster share code hay: Bố trí 2-3-4 cột cho website

Bố trí 2-3-4 cột cho website

Bố cục 2 cột 3 cột 4 cột cho website
2 Cột

Nội_dung_cột_1

aassssssss

Nội_dung_cột_2

bbbbbbbbnnbn

3 Cột

Nội_dung_cột_1

aassssssss

Nội_dung_cột_2

bbbbbbbbnnbn

Nội_dung_cột_3

ccccccccccvvhhhhh

4 Cột

Nội_dung_cột_1

aassssssss

Nội_dung_cột_2

bbbbbbbbnnbn

Nội_dung_cột_3

ccccccccccvvhhhhh

Nội_dung_cột_4

ccccccccccvvhhhhh

Bố cục cột đáp ứng mọi trình duyệt

Chạm vào để copy

.row::after {
  content: "";
  clear: both;
  display: table;
}

[class*="col-"] {
  float: left;
  padding: 15px;
}

html {
  font-family: "Lucida Sans", sans-serif;
}

.header {
  background-color: #9933cc;
  color: #ffffff;
  padding: 15px;
}

.menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.menu li {
  padding: 8px;
  margin-bottom: 7px;
  background-color: #33b5e5;
  color: #ffffff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.menu li:hover {
  background-color: #0099cc;
}

.aside {
  background-color: #33b5e5;
  padding: 15px;
  color: #ffffff;
  text-align: center;
  font-size: 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.footer {
  background-color: #0099cc;
  color: #ffffff;
  text-align: center;
  font-size: 12px;
  padding: 15px;
}

/* For mobile phones: */
[class*="col-"] {
  width: 100%;
}

@media only screen and (min-width: 600px) {
  /* For tablets: */
  .col-s-1 {width: 8.33%;}
  .col-s-2 {width: 16.66%;}
  .col-s-3 {width: 25%;}
  .col-s-4 {width: 33.33%;}
  .col-s-5 {width: 41.66%;}
  .col-s-6 {width: 50%;}
  .col-s-7 {width: 58.33%;}
  .col-s-8 {width: 66.66%;}
  .col-s-9 {width: 75%;}
  .col-s-10 {width: 83.33%;}
  .col-s-11 {width: 91.66%;}
  .col-s-12 {width: 100%;}
}
@media only screen and (min-width: 768px) {
  /* For desktop: */
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}
}
</style>

<div class="row">
  <div class="col-3 col-s-3 menu">
    <ul>
      <li>aaaaaaaa</li>
      <li>bbbbbbbb</li>
      <li>cccccccc</li>
      <li>dddddddd</li>
    </ul>
  </div>

<div class="col-6 col-s-9">
    <h1> Tại sao bầu trời lại màu xanh </h1>
    <p> chào các bạn đến với website Dat007 của chúng tôi </p>
  </div>

<div class="col-3 col-s-12">
    <div class="aside">
      <h2>hello</h2>
      <p> một ngày không có em là lòng anh tan nát.</p>
      <h2>abcd</h2>
      <p>nếu chiều nay không có em </p>
    </div></div>
  </div>

<div class="footer">
  <p> Chiều Chủ Nhật chờ anh trước lối cũ.</p>
</div>

Tự chia cột trên giao điện lớn nhỏ

Link Link Link

Cột 1

Chúng tôi sẽ thay các cột cho các trình duyệt lớn nhỏ điện thoại máy tính nó sẽ tự sắp xếp.

Cột 2

1 cột (thường được sử dụng cho trình duyệt di động) 2 cột (thường được sử dụng cho máy tính bảng và máy tính xách tay) Bố cục 3 cột (chỉ được sử dụng cho máy tính để bàn):

Cột 3

Mẹo: Để tạo bố cục 2 cột, hãy thay đổi chiều rộng thành 50%. Để tạo bố cục 4 cột, sử dụng 25%, v.v..

Chạm vào để copy

body {
  margin: 0;
}

/* Style the header */
.header {
  background-color: #f1f1f1;
  padding: 20px;
  text-align: center;
}

/* Style the top navigation bar */
.topnav {
  overflow: hidden;
  background-color: #333;
}

/* Style the topnav links */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* Change color on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}
  overflow: hidden;
  background-color: #333;
}

/* Style the topnav links */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* Change color on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Create three equal columns that floats next to each other */
.column {
  float: left;
  width: 33.33%;
  padding: 15px;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width:600px) {
  .column {
    width: 100%;
  }
}
</style>
<div class="header">
  <h1>Header</h1>
  <p>Mẹo: Để tạo bố cục 2 cột, hãy thay đổi chiều rộng thành 50%. Để tạo bố cục 4 cột, sử dụng 25%, v.v..</p>
</div>

<div class="row">
  <div class="column">
    <h2>Cột 1</h2>
    <p> Chúng tôi sẽ thay các cột cho các trình duyệt lớn nhỏ điện thoại máy tính nó sẽ tự sắp xếp.</p>
  </div>
  
  <div class="column">
    <h2>Cột 2</h2>
    <p>
1 cột (thường được sử dụng cho trình duyệt di động)
2 cột (thường được sử dụng cho máy tính bảng và máy tính xách tay)
Bố cục 3 cột (chỉ được sử dụng cho máy tính để bàn):
</p>
  </div>
  
  <div class="column">
    <h2>Cột 3</h2>
    <p>Mẹo: Để tạo bố cục 2 cột, hãy thay đổi chiều rộng thành 50%. Để tạo bố cục 4 cột, sử dụng 25%, v.v..</p>
  </div>
</div>

Thay đổi kích thước cửa sổ trình duyệt để xem hiệu ứng đáp ứng (các cột sẽ sắp xếp bố trí lại từ 4 lên 2 trên màn hình rộng ít hơn 900px) Tuy nhiên , trên các màn hình có chiều rộng dưới 600px, các cột sẽ xếp chồng lên nhau trên mỗi khác thay vì nổi bên cạnh nhau

Cot 1

Some text..

Column 1

Some text..

Cot 2

Some text..

Cot 3

Some text..

Cot 4

Some text..

body {
    margin: 0;
}

/* Create four equal columns that floats next to each other */
.column {
    float: left;
    width: 25%;
    padding: 10px;
}

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media (max-width: 900px) {
    .column  {
        width: 50%;
    }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media (max-width: 600px) {
    .column  {
        width: 100%;
    }
}
</style>

<p>Thay đổi kích thước cửa sổ trình duyệt để xem hiệu ứng đáp ứng (các cột sẽ sắp xếp bố trí lại từ 4 lên 2 trên màn hình rộng ít hơn 900px) Tuy nhiên , trên các màn hình có chiều rộng dưới 600px, các cột sẽ xếp chồng lên nhau trên mỗi khác thay vì nổi bên cạnh nhau</p>

<div class="row">
  <div class="column" style="background-color:#aaa;">
    <h2>Cot 1</h2>
    <p>Some text..</p>
    <h2>Column 1</h2>
    <p>Some text..</p>
    
    
    
  </div>
  <div class="column" style="background-color:#bbb;">
    <h2>Cot 2</h2>
    <p>Some text..</p>
  </div>
  <div class="column" style="background-color:#ccc;">
    <h2>Cot 3</h2>
    <p>Some text..</p>
  </div>
  <div class="column" style="background-color:#ddd;">
    <h2>Cot 4</h2>
    <p>Some text..</p>
  </div>
</div>

body {
    margin: 0;
}

/* Create four equal columns that floats next to each other */
.column {
    float: left;
    width: 25%;
    padding: 10px;
    height: 300px; /* Should be removed. Only for demonstration */
}

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media (max-width: 600px) {
    .column {
        width: 100%;
    }
}
</style>

<div class="row">
  <div class="column" style="background-color:#aaa;">
    <h2>Column 1</h2>
    <p>Some text..</p>
  </div>
  <div class="column" style="background-color:#bbb;">
    <h2>Column 2</h2>
    <p>Some text..</p>
  </div>
  <div class="column" style="background-color:#ccc;">
    <h2>Column 3</h2>
    <p>Some text..</p>
  </div>
  <div class="column" style="background-color:#ddd;">
    <h2>Column 4</h2>
    <p>Some text..</p>
  </div>
</div>

Đăng ký: Bài đăng (Atom)

Sắp đến Tết rồi! Chỉ còn...

Ngày

Giờ

Phút

Giây

✔ Hình động Sưu tầm các hình ảnh đẹp chia sẻ cho các bạn

✔ Hình ảnh đẹp Sưu tầm các hình ảnh đẹp chia sẻ cho các bạn

✔ Hình ảnh trái tim bộ sưu tập ảnh trái tim cực đẹp

✔ Icon sưu tầm bộ sưu tập icon cực đẹp

✔ truyện ma truyện ma rùng rợn trẻ em không nên đọc

✔ ứng dụng Android ứng dụng Android đây các ứng dụng do mình thường sử dụng

✔ Game cho Android Game cho Android đây các các game hay mình hay thường chơi và mình thường sử dụng

✔ Ứng dụng Windows Sưu tầm các ứng dụng Windows crack mình thường hay sử dụng nó

✔ Game cho Windows Sưu tầm các game Windows mình thường hay trước đây AD chơi nó rất hay

✔ tTrình duyệt Window Trình duyệt lướt web cho Windows

✔ Trình duyệt Android Trình duyệt lướt web cho Android lũ quét nhanh chóng quảng cáo

✔ Nhạc nền cho wap/web Nhạc nền cho wap/web các bạn có thể thay đổi bản nhạc bằng đường link mp3 khác

✔ Bố cục Chia 2,3,4 cột Thay đổi kích thước cửa sổ trình duyệt để xem hiệu ứng đáp ứng (các cột sẽ sắp xếp bố trí lại từ 4 lên 2 trên màn hình rộng ít hơn 900px

✔ Lớp phủ điều hướng Sidenav Nội dung đẩy Nhấp vào phần tử bên dưới để mở trình đơn điều hướng bên và đẩy nội dung này sang phải..

✔ Thanh trượt tạo một thanh trượt lên xuống bên phải

✔ DIV kéo thả Thành phần DIV có thể kéo được Làm thế nào để - Tạo một thành phần HTML có thể kéo được, code đây

✔ Hiệu ứng xoay ảnh Các hiệu ứng giúp cho bạn làm xoay ảnh

✔ Hiệu ứng ảnh Các hiệu ứng giúp cho bạn làm chạy ảnh

✔ Hiệu ứng chử chạy Hiệu ứng chử hay ảnh chạy qua lại lên xuống

✔ Code thường dùng Code thường dùng cho các bạn nào ích hiểu hay chưa biết vê lập một trang web

✔ Auto nội dung Nội dung Tự đổi mổi lầ truy cập. Và tự động có thể áp dụng cho hình ảnh

✔ Chống copy code chống copy dử liệu của bạn bằng mọi cách click chuột trái phải để xem nguồn trang

✔ Hiệu ứng chuột Hiệu ứng con trỏ chuột đẹp DAT007 chia sẽ cho các bạn đến những hiệu ứng con trỏ chuột có sẵn

✔ Chạy thử Code Công cụ Chạy Thử Code, HTML,SCRIPT.

✔ Chạy thử mã hóa Code Công cụ Chạy Thử và mã hóa việt hhos Code, HTML,SCRIPT.

✔ Lốp Menu Tạo một lớp menu bên trái có thanh kéo lên xuống

✔ Code tổng hợp Tổng hợp các code sưu tầm hay chia sẽ trên trang của bạn

✔ Ẩn hiện nội dung Đơn giản quá phải không, chỉ vài lệnh gọi class là bạn đã có thể ẩn hiện nội dung tùy thích, bạn có thể tham khảo các bài viết

✔ 4 Nút Sidenav 4 Nút Sidenav thiết lập nội dung từ trong một lúc bên trái có thể chuyển động ra vào

✔ Tràn văn bản Khi chúng ta làm văn bản bị tràn ra ngoài code này có thể giúp khác phục

✔ Khung cho blogger Code tạo Khung cho trang thi vụ như đầu trang v.v...

✔ Bo tròn góc Bo tròn các nền link hay các ảnh tùy do bạn thiết kế

✔ Auto Wap/Web wapego Cách auto mình tổng hợp lại những thứ mà mình biết về auto wap web cho wapka và wapego chia sẻ cho các bạn

✔ Auto Wap/Web xtgem Cách auto mình tổng hợp lại những thứ mà mình biết về auto wap web cho xtgem chia sẻ cho các bạn

✔ Đưa website lên google làm thế nào để đưa Website của bạn vào Google một cách nhanh nhất?

✔ Css tooltip Chú giải công cụ thường được sử dụng để chỉ định thêm thông tin về một cái gì đó khi người dùng di chuyển con trỏ chuột qua một phần tử:

✔ Icon đẹp sưu tầm những icon đẹp

✔ Tìm hiểu CSS Tìm hiểu về CSS dành cho những những lập trình viên mới

✔ Mã màu CSS Sưu tập bộ mã màu CSS đầy đủ

✔ Css 1 Việc hiểu biết CSS3 sẽ giúp ích rất nhiều cho các bạn tìm được việc làm ưng ý sau này. Vì thế hôm nay mình xin chia sẻ với các bạn một hiệu ứng đơn giản mà CSS3 mang lại cho chúng ta

✔ Css 2 CSS mô tả phong cách của một tài liệu HTML. CSS mô tả các phần tử được hiển thị như màu nền v.v.. tài liệu kiến thức của bạn

✔ Css 3 CSS mô tả phong cách của một tài liệu HTML. CSS mô tả các phần tử được hiển thị như màu nền v.v.. tài liệu kiến thức của bạn

✔ Css 4 CSS mô tả phong cách của một tài liệu HTML. CSS mô tả các phần tử được hiển thị như màu nền v.v.. tài liệu kiến thức của bạn

✔ Css 5 CSS mô tả phong cách của một tài liệu HTML. CSS mô tả các phần tử được hiển thị như màu nền v.v.. tài liệu kiến thức của bạn

✔ Css 6 CSS mô tả phong cách của một tài liệu HTML. CSS mô tả các phần tử được hiển thị như màu nền v.v.. tài liệu kiến thức của bạn

✔ Css 7 CSS mô tả phong cách của một tài liệu HTML. CSS mô tả các phần tử được hiển thị như màu nền v.v.. tài liệu kiến thức của bạn

✔ Ký tự đặc biệt Các kí tự cổ điển có rất nhiều ý nghĩa, bạn có thể nhận thấy tại đây chứa các biểu tượng về lịch sử như: âm dương, lá bài, vương niệm, các chữ số La Mã

DAT007 KÍNH CHÚC CÁC BẠN THÀNH CÔNG TRONG CÔNG VIỆC

Bố trí 2-3-4 cột cho website

Header

Cột 1

Cột 2

Cột 3

Cot 1

Column 1

Cot 2

Cot 3

Cot 4