欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

JS练习嵌套列表(for循环)_html/css_WEB-ITnose

程序员文章站 2022-05-11 16:37:34
...
CSS:

*{padding: 0;margin: 0;}ul,li{list-style: none;}.cont{    width: 600px;    margin:30px auto;}.cont h3{    border-bottom: 2px solid #bbb;    width: 100%;    height: 38px;}#ul1{    position: relative;    width: 100%;}#ul1>li{    float: left;    margin-top: 15px;    margin-left: 15px;    position: relative;}.pro{    width: 180px;    height: 200px;    overflow: hidden;}.pro img{    width: 180px;    height: 150px;    overflow: hidden;}.pro p{    text-align: center;}.hidden{    display: none;}.active{    width: 300px;    height: 120px;    padding: 10px;    overflow: hidden;    position: absolute;    top: -80px;    left: 20px;    display: block;    background: #eee;    border: 1px solid #ccc;    z-index: 1;}.active li{    color: #e4007e;     font-size: 14px;    padding-left: 12px;    height: 30px;    line-height: 30px;}/* 清除浮动 */.clearfix{    zoom: 1;}.clearfix:after{     content: '.';    height: 0;    display: block;    clear: both;    visibility: hidden;}

HTML:

最近更新

  • JS练习嵌套列表(for循环)_html/css_WEB-ITnose

    开心一刻

    动漫类

  • JS练习嵌套列表(for循环)_html/css_WEB-ITnose

    盆景养成记

    植物类

  • JS练习嵌套列表(for循环)_html/css_WEB-ITnose

    盆景养成记

    植物类

  • JS练习嵌套列表(for循环)_html/css_WEB-ITnose

    插花艺术

    艺术类

  • JS练习嵌套列表(for循环)_html/css_WEB-ITnose

    插花艺术

    艺术类

  • JS练习嵌套列表(for循环)_html/css_WEB-ITnose

    开心一刻

    动漫类

JS: