Jack个人作品

Jack个人作品

Jack博客展示所有ZBLOG主题应用/插件应用等个人作品,联系QQ2126245521进行咨询。

网站首页 >> ul样式

网页中ul、li的外边距和属性样式特殊用法

ul和li的特殊样式用法,如第一个li和最后一个li的样式、第N个li和倒数第N个li的特殊样式、奇数和偶数li的样式以及ul和li百分比排序排列样式用法。

li特殊样式

第一个li的样式:
li:first-child {
  background:#f00;
}

最后一个li的样式:
li:last-child {
  background:#000;
}

第n个li的样式:
li:nth-child(n) {
  background:#000;
}
  
倒数第二个li的样式:
nth-last-of-type(2){
  background:#000;
}
  
奇数列表:
li:nth-child(odd) {
  background:#f00;
}
  
偶数列表:
li:nth-child(even) {
  background:#f00;
}

ul和li布局样式

ul{
    margin: 0;
    padding: 0;
    width: calc(100% + 10px);
    overflow: hidden;
}
ul li {
    margin: 0 10px 10px 0;
    padding: 0;
    width: calc(25% - 10px);
    float: left;
    list-style-type: none;
}

代码布局展示效果可以看本站首页的版块样式,多分辨率适应,经常用的到的排序排列等特殊的样式案例。

Sitemap | TXT地图 | HTML地图 |

Processed : 0.068 SQL : 10