Tiaxgame.Tk
Trang chủ | Forum | Register Wap4.Co Free
Đăng Nhập » Đăng Ký
ForumMã NguồnHTML
Lượt xem: 108

▼ 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%;
}
}


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

demo:
-
-
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 buoi oil



<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 * 7
*   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: