Css cho các bạn dùng làm wap 2 cột

SpiderSilk (Member) [Off]
48

215

Cách đây 3 tuần

Hi, cũng lâu rồi mình không đăng cái gì lên đây thì hôm nay rảnh rảnh thấy trên w3space còn cái này mình không nhớ từ đâu nhưng mà cũng lâu rồi nên mình edit lại xíu để cho hợp lý hơn xíu và cũng gọn hơn ( cụ thể là mình bỏ sạch mấy cái như là ảnh nền của wap và mấy cái div không dùng đến).
Cụ thể là mình không biết bạn có css chưa nên mình lấy lại mấy cái cần thiết lại để bạn thêm vào css hiện tại của bạn cho hợp lý hơn thôi chứ cũng không có gì. Css đây:

* {
box-sizing: border-box;
}
body {
font-family: Arial;
background: #f1f1f1;
}

.navbar {
overflow: hidden;
background-color: #444;
position: fixed;
top: 0;
left: 0;
width: 100%;
padding-left: 14%;
}

.navbar a {
float: left;
display: block;
color: #fff;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}

.navbar a:hover {
background: #000;
color: #bcbcbc;
}

.leftcolumn {
float: left;
width: 75%;
}

.rightcolumn {
float: left;
width: 25%;
padding-left: 20px;
}

.fakeimg {
background-color: #aaa;
width: 100%;
padding: 20px;
}

.card {
background-color: white;
padding: 20px;
margin-top: 20px;
}
.row {
padding: 16px;
margin-top: 30px;
}
ul.breadcrumb {
padding: 10px 16px;
list-style: none;
background-color: #eee;
border: 1px solid #2CAAD3;
}
ul.breadcrumb li {
display: inline;
font-size: 18px;
}
ul.breadcrumb li+li:before {
padding: 8px;
color: black;
content: "»";
}
ul.breadcrumb li a {
color: #2CAAD3;
text-decoration: none;
}
ul.breadcrumb li a:hover {
color: red;
text-decoration: underline;
}
.pagination {
display: inline-block;
margin: 4px;

}

.pagination a {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
border: 1px solid #2CAAD3;
}

.pagination a.active {
background-color: #ddd;
color: #000;
border: 1px solid #2CAAD3;
}

.pagination a:hover:not(.active) {background-color: #ddd;}

.pagination a:first-child {
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}

.pagination a:last-child {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
.row:after {
content: "";
display: table;
clear: both;
}

.footer_col {
float: left;
width: 25%;
padding: 10px;
}
.footer_in4 {
float: left;
width: 50%;
padding: 10px;
}
.footer:after {
content: "";
display: table;
clear: both;
}
.footer{background: #444;color: #bcbcbc;padding: 10px;margin-top: 20px;left: 0; right: 0}
.footer_copy {background: #000;color: #fff;padding: 10px; text-align: center;}
.footer_copy a {font-weight: bold; color: #fff}
.footer a{color:#fff;}
.footer a:hover {color: #E74946;}
.footer_title {padding-bottom: 4px;text-transform: uppercase;border-bottom: 1px solid #2CAAD3;font-size: 14px;margin-bottom: 6px;color: #EEE;margin-top: 5px;display: block}

@media screen and (max-width: 800px) {
.leftcolumn, .rightcolumn {
width: 100%;
padding: 0;
}
.footer_col, .footer_in4 {
width: 100%;
}
}

* {
  box-sizing: border-box;
}
body {
  font-family: Arial;
  background: #f1f1f1;
}

.navbar {
  overflow: hidden;
  background-color: #444;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding-left: 14%;
}

.navbar a {
  float: left;
  display: block;
  color: #fff;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.navbar a:hover {
  background: #000;
  color: #bcbcbc;
}

.leftcolumn {   
  float: left;
  width: 75%;
}

.rightcolumn {
  float: left;
  width: 25%;
  padding-left: 20px;
}

.fakeimg {
  background-color: #aaa;
  width: 100%;
  padding: 20px;
}

.card {
   background-color: white;
   padding: 20px;
   margin-top: 20px;
}
.row {
  padding: 16px;
  margin-top: 30px;
     }
     ul.breadcrumb {
  padding: 10px 16px;
  list-style: none;
  background-color: #eee;
  border: 1px solid #2CAAD3;
}
ul.breadcrumb li {
  display: inline;
  font-size: 18px;
}
ul.breadcrumb li+li:before {
  padding: 8px;
  color: black;
  content: "»";
}
ul.breadcrumb li a {
  color: #2CAAD3;
  text-decoration: none;
}
ul.breadcrumb li a:hover {
  color: red;
  text-decoration: underline;
}
.pagination {
  display: inline-block;
  margin: 4px;
  
}

.pagination a {
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
  border: 1px solid #2CAAD3;
}

.pagination a.active {
  background-color: #ddd;
  color: #000;
  border: 1px solid #2CAAD3;
}

.pagination a:hover:not(.active) {background-color: #ddd;}

.pagination a:first-child {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

.pagination a:last-child {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}
.row:after {
  content: "";
  display: table;
  clear: both;
}

.footer_col {
  float: left;
  width: 25%;
  padding: 10px;
}
.footer_in4 {
  float: left;
  width: 50%;
  padding: 10px; 
}
.footer:after {
  content: "";
  display: table;
  clear: both;
}
.footer{background: #444;color: #bcbcbc;padding: 10px;margin-top: 20px;left: 0; right: 0}
.footer_copy {background: #000;color: #fff;padding: 10px; text-align: center;}
.footer_copy a {font-weight: bold; color: #fff}
.footer a{color:#fff;}
.footer a:hover {color: #E74946;}
.footer_title {padding-bottom: 4px;text-transform: uppercase;border-bottom: 1px solid #2CAAD3;font-size: 14px;margin-bottom: 6px;color: #EEE;margin-top: 5px;display: block}

@media screen and (max-width: 800px) {
  .leftcolumn, .rightcolumn {   
    width: 100%;
    padding: 0;
  }
  .footer_col, .footer_in4 {
    width: 100%;
  }
}

Ở đầy mình giữ lại gồm:
- Header
- Footer
- Pagination phân trang
- Breadcrumb của tiaxgame troll

hết :))

demo:
- https://spidersilk.w3spaces.com/css.html
- https://spidersilk.w3spaces.com/css-copy.html
HDSD:
Thì trong css có header và footer bạn bỏ đi cũng được nhưng mà nhớ để lại .row, .leftcolumn và .rightcolumn
Thì khi bạn sử dụng thì bạn dùng row bọc 2 lớp còn lại là nó tự động co lại giãn ra troll

<div class="row">
<div class="leftcolumn">Cột bên trái cũng là main luôn</div>
<div class="rightcolumn">Cột bên phải, dùng làm bài viết ngẫu nhiên, danh sách online, chuyên mục các thứ</div>
</div>

Áp dụng cho mọi css, bạn nào không dùng được thì ib cho mình nhen.
Thích 3 cột co diễn đàn cũng ib mình luôn

Edited by: SpiderSilk

[Like=6] Min , bakawap , khanh , tiaxgame , OFF , ThanhTam

OFF (Member) [Off]
6

Cách đây 3 tuần

Thanks, cháu giỏi thật đấy yeu

[Like=1] ThanhTam

Tổng số: 2

- Share:
BBCode:

Link: