音悦首页样式 
  1 body{
  2     background-color: #CCCCCC;
  3 }
  4 .content ul{
  5     padding-left: 0;
  6 }
  7 .content ul li{
  8     /* 设置为一行 */
  9     display: inline-block;
 10 }
 11 .content{
 12     width: 1000px;
 13     margin: 0 auto;
 14 }
 15 .content .banner img{
 16     width: 1000px;
 17 }
 18 .content .biaoti1{
 19     margin-top: 20px;
 20 }
 21 .content .biaoti1 .title{
 22     background-image: url(../img/zhuxing.png);
 23     background-repeat: no-repeat;
 24     height: 45px;
 25 }
 26 .content .biaoti1 li{
 27     background-color: white;
 28     vertical-align: bottom;
 29     /* 水平对齐 */
 30 }
 31 .content .biaoti1 li:last-child{
 32     height: 135px;
 33     margin-left: 20px;
 34 }
 35 .content .biaoti1 li:last-child img{
 36     height: 135px;
 37     width: 240px;
 38 }
 39 .content .biaoti1 li img{
 40     width: 180px;
 41 }
 42 
 43 .content .biaoti1 li span{
 44     padding: 10px;
 45     text-align: center;
 46     display: block;
 47 }
 48 .content .top{
 49         margin-top: 20px;
 50 }
 51 .content .top .title{
 52     height: 40px;
 53     background-image: url(../img/shop_title2.png);
 54     background-repeat: no-repeat;
 55     background-position: 0 -60px;
 56 }
 57 .content .top li{
 58     margin: 0 3px;
 59     width: 115px;
 60     background-color: #FFFFFF;
 61 }
 62 .content .top li:first-child{
 63     margin-left: 0;
 64 }
 65 .content .top li:last-child{
 66     margin-right: 0;
 67 }
 68 .content .top img{
 69     width: 115px;
 70 }
 71 .content .top ul li a{
 72     text-decoration: none;
 73     color: #333333;
 74     
 75 }
 76 .content .list li{
 77     background-color: #FFFFFF;
 78     width: 320px;
 79     margin: 10px 5px;
 80     height: 154px;
 81 }
 82 .content .list li:nth-child(3n+1){
 83     margin-left: 0;
 84 }
 85 .content .list li:nth-child(3n){
 86     margin-right: 0;
 87 }
 88 .content .list img{
 89     width:154px;
 90     height: 154px;
 91 }
 92 .content .list .right{
 93     display: inline-block;
 94     vertical-align: top;
 95     
 96 }
 97 .content .list .right span{
 98     display: block;
 99     color: #999;
100     margin: 10px 5px;
101     width: 150px;
102     
103 }
104 .content .list .right .title{
105     margin-top: 30px;
106     text-overflow: -o-ellipsis-lastline;
107     overflow: hidden;
108     text-overflow: ellipsis;
109     display: -webkit-box;
110     -webkit-line-clamp: 2;
111     line-clamp: 2;
112     -webkit-box-orient: vertical;
113 
114 }
115 .content .list .right .money{
116     color: #DE4767;
117 }
118 .content .list .right div{
119     margin-top: -8px;
120 }
121 .content .list .right div span{
122     display: inline-block;
123 }
124 .content .list .right .love{
125     
126     height: 12px;
127     width: 12px;
128     background-image: url(../img/icon/ico.png);
129     background-position: 0px -74px;
130     margin-top: 18px;
131 }
132 .content .list .right .numer{
133     width: 100px;
134     vertical-align: top;
135 }
136 .content2{
137     background-color: white;
138 }
139 .dibu{
140     width: 1042px;
141     margin: 0px auto;
142     background-color: #FFFFFF;
143 }
144 .dibu p{
145     width: 1041px;
146     height: 80px;
147     background-image: url(../img/footer_v180123.png);
148     background-repeat: no-repeat;
149     background-position: -64px 20px;
150 }
151 .content2 .footer{
152     width: 1550px;
153     height: 110px;
154     background-color: #333333;
155     margin: 0px;
156     text-align: center;
157 }
158 .footer ul li{
159     display: inline-block;
160     margin-top: 45px;
161 }
162 .footer ul li a{
163     font-size: 18px;
164     text-decoration: none;
165     color: #CCCCCC;
166     border-left: 1px solid #CCCCCC;
167 }
168 .footer ul li:first-child a{
169     border: none;
170 }

 

posted on 2021-10-27 18:30  于凡芮  阅读(46)  评论(0)    收藏  举报