音悦列表样式 
  1 /* flex布局 */
  2 .content{
  3     background-color: #CCCCCC;
  4 }
  5 .content .type-container{
  6     background-color: white;
  7 }
  8 .content .type{
  9     border: 1px solid #CCCCCC;
 10     width: 1000px;
 11     margin: 20px auto;
 12     /* padding:一个参数为上下左右；
 13      两个参数：上下，左右；
 14      三个参数：上左，右下；
 15      四个参数：上，下，左，右；
 16      */
 17     padding: 10px 20px;
 18     height: 120px;
 19 }
 20 .content .type dl{
 21     position: relative;
 22 }
 23 .content .type dl:first-child{
 24     padding-bottom: 10px;
 25     border-bottom:1px dotted #ccc;
 26 }
 27 .content .type dt{
 28     font-size: 18px;
 29     font-weight: bolder;
 30 }
 31 .content .type dd{
 32     color: #666;
 33     font-size: 12px;
 34     position: absolute;
 35     top: -10px;
 36     line-height: 30px;
 37 }
 38 .content .type dd ul li{
 39     display: inline-table;
 40     width: 120px;
 41 }
 42 .content .list{
 43     width: 1042px;
 44     margin: 0px auto;
 45     
 46 }
 47 .content .list ul{
 48     padding-left:0 ;
 49 }
 50 .content .list a{
 51     text-decoration: none;
 52     color: #666666;
 53 }
 54 .content .list ul li{
 55     width: 160px;
 56     display: inline-table;
 57     background-color: white;
 58     padding: 10px;
 59     margin: 15px;
 60 }
 61 .content .list ul li:nth-child(5n+1){
 62     /* padding-left: 0; */
 63     margin-left: 0;
 64 }
 65 .content .list ul li:nth-child(5n){
 66     /* padding-left: 0; */
 67     margin-right: 0;
 68 }
 69 .content .list img{
 70     width: 160px;
 71 }
 72 .content .list .title{
 73     display: block;
 74 }
 75 .content .list div{
 76     text-align: center;
 77 }
 78 .content .list div .money{
 79     color: #DE4767;
 80 }
 81 .content .list div .love{
 82     height: 12px;
 83     width: 12px;
 84     display: inline-block;
 85     background-image: url(../img/icon/ico.png);
 86     background-repeat: no-repeat;
 87     background-position: 0px -73px;
 88     margin: 1px 5px;
 89 }
 90 .content .list div .num{
 91     color: #666666;
 92 }
 93 .dibu{
 94     width: 1042px;
 95     margin: 0px auto;
 96     background-color: #FFFFFF;
 97 }
 98 .dibu p{
 99     width: 1041px;
100     height: 80px;
101     background-image: url(../img/footer_v180123.png);
102     background-repeat: no-repeat;
103     background-position: -64px 20px;
104 }
105 .footer{
106     width: 1500px;
107     height: 110px;
108     background-color: #333333;
109     margin: 0px;
110     text-align: center;
111 }
112 .footer ul li{
113     display: inline-block;
114     margin-top: 45px;
115 }
116 .footer ul li a{
117     font-size: 18px;
118     text-decoration: none;
119     color: #CCCCCC;
120     border-left: 1px solid #CCCCCC;
121 }
122 .footer ul li:first-child a{
123     border: none;
124 }

 

posted on 2021-10-26 17:32  于凡芮  阅读(17)  评论(0)    收藏  举报