Mình viết bài này để note lại cái mình sửa trong trang web mutant của mình, sau có muốn sửa lại thì còn có tư liệu. tình hình là mình thấy cái style CSS của class Tagcloud nó rất lộn xộn và xấu như hình1 
 Hình 1
và đây là code style CSS của hình 1
TÊN BẢNG
 .widget-container .tagcloud{
 overflow:hidden;
}
.widget-container .tagcloud a{
 margin:0 10px 10px 0;/* rtl */
 display:inline-block;
 line-height:initial;
 float:left;
 font-weight:400;
}
.widget-container .tagcloud a:hover{
 text-decoration:none;
}

Mình muốn sửa lại phần CSS của tagcloud nó đẹp như hình 2
Hình 2

Giờ mình cần làm là copy cái CSS của hình 2 như sau. ta làm như hình 3 và hình 4 nhé
Hình 3

Hình 4
phần CSS của Hình 4

element.style {
    font-size: 90pt;
}
*, *::before, *::after {
    box-sizing: border-box;
}
*, *::before, *::after {
    box-sizing: border-box;
}
.tagcloud a {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    border-bottom-color: #dfdfdf;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-image-outset: 0 0 0 0;
    border-image-repeat: stretch stretch;
    border-image-slice: 100% 100% 100% 100%;
    border-image-source: none;
    border-image-width: 1 1 1 1;
    border-left-color: #dfdfdf;
    border-left-style: solid;
    border-left-width: 1px;
    border-right-color: #dfdfdf;
    border-right-style: solid;
    border-right-width: 1px;
    border-top-color: #dfdfdf;
    border-top-style: solid;
    border-top-width: 1px;
    color: #444;
    display: inline-block;
    font-size: 12px !important;
    margin-bottom: 5px;
    margin-left: 0;
    margin-right: 2px;
    margin-top: 0;
    padding-bottom: 7px;
    padding-left: 11px;
    padding-right: 11px;
    padding-top: 7px;
}
body a {
    outline-color: -moz-use-text-color !important;
    outline-style: none !important;
    outline-width: medium !important;
}
a {
    text-decoration-color: -moz-use-text-color;
    text-decoration-line: none;
    text-decoration-style: solid;
}
*, *::before, *::after {
    box-sizing: border-box;
}
:-moz-any-link {
    cursor: pointer;
}
body, input, button, select, textarea, .search-query {
    font-family: Open Sans !important;
}
body {
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    line-height: 1.42857;
}


giờ ta sẽ thay style CSS của hình 4 vào hình 1, ta làm như hình5 và hình 6 nhé
Hình 5

Hình 6
 giờ ta quay lại và xem kết quả thôi, gọn và đẹp nhé
Hình 7


Share To:

Post A Comment:

0 comments so far,add yours