Files
ClassContent/历届学生/front-end-team-10/项目练习/学生项目/韩孟雪/2023-2-13/天猫.css
2024-09-27 02:06:13 +08:00

238 lines
4.1 KiB
CSS

/* 页面具体样式表 */
.head{
width: 100%;
}
.head_menu{
width:100%;
height: 26px;
background: #f2f2f2;
border-bottom: 1px solid #e5e5e5;
}
.header_left > li,
.header_right > li{
float: left;
}
.header_left a,
.header_right a{
font-size: 12px;
color:#999;
}
.header_left > li:first-child{
margin-right: 20px;
}
.header_left > li:last-child{
margin-left: 20px;
}
.header_right > li{
margin-left: 10px;
margin-right: 14px;
position: relative;
}
.header_right > li i{
font-size: 12px;
color: #999;
transition: all 0.3s;
display: inline-block ;
}
.header_right .ic{
zoom: 0.6;
/* transform: scale(0.6); */
}
.header_right > li:hover .ic{
transform: rotate(180deg);
}
.header_right .li_hover:hover {
background: #fff;
}
.header_right .li_hover:hover .drop_menu{
display: inline-block;
}
.header_right .drop_menu{
position: absolute;
top: 27px;
left: 0;
width: 96px;
height: 57px;
background: #fff;
border: 1px solid rgb(238,238,238);
padding: 8px 10px;
box-sizing: border-box;
line-height: 1.2;
display: none;
z-index: 99;
}
.head_logo{
height: 158px;
border-bottom: 1px solid #7a45e5;
}
.head_logo .logo_left{
line-height: 158px;
}
.head_logo .logo_left img:first-child{
width: 116px;
height: 40px;
float: left;
margin-top: 53px;
margin-right: 20px;
}
.head_logo .logo_left img:last-child{
width: 175px;
height: 16px;
}
.head_logo .input{
width: 437px;
height:36px;
font-size: 0;
box-sizing: border-box;
margin-top: 36px;
}
.head_logo .input input{
width: 347px;
height: 36px;
border: 3px solid #7a45e5;
box-sizing: border-box;
}
.head_logo .input .button{
width: 90px;
height: 36px;
line-height: 36px;
color: #fff;
font-size:16px;
text-align: center;
background: linear-gradient(to right,#7a45e5 20%,#b23cef 80%);
}
.center {
width: 1190px;
margin: 0 auto;
}
.conternt .type{
height: 461px;
}
.type_left{
width: 200px;
height: 100%;
}
.type_right{
width: calc(100% - 200px);
height: 100%;
}
.content .type{
height: 461px;
position: relative;
top:-38px;
}
.type_left{
width: 200px;
height: 100%;
}
.type_left .title{
height: 38px;
line-height: 38px;
background: linear-gradient(90deg,#7a45e5 20%,#b23cef 80%);
padding-left: 20px;
box-sizing: border-box;
font-size: 14px;
color: #fff;
}
.type_right{
width: calc(100% - 200px);
height: 100%;
}
.type_left ul{
height: 420px;
background: #333;
}
.type_left ul li{
width: 160px;
height: 84px;
margin-left: 20px;
color: #fff;
font-size: 0;
border-bottom: 1px dotted #545454 ;
box-sizing: border-box;
}
.type_left ul li .icon {
margin-bottom :10px ;
padding-top: 15.5px;
}
.type_left ul li .text a{
font-size: 12px;
color: #fff;
}
.type_left ul li .icon img{
width: 24px;
height: 24px;
margin-right: 10px;
}
.type_left ul li .icon span{
font-size: 16px;
color: #fff;
font-weight: 700px;
}
.type_right{
height: 38px;
}
.type_right .title{
padding-left: 40px;
box-sizing: border-box;
line-height: 38px;
}
.type_right .title li{
float: left;
margin-right: 40px;
}
.type_right .title li .active{
color: #7a45e5;
font-weight: 600;;
}
.type_right .title li a{
font-size: 14px;
color: #333
}
.banner .text{
text-align: center;
width: 250px;
}
.text .tm_text{
font-size: 30px;
font-weight: bold;
margin-top: 30px;
color: rgb(122, 69, 229);
}
.text .tm_desc{
font-size: 20px;
margin-top: 10px;
font-weight: bold;
color: rgb(122, 69, 229);
}
text.tm_fg{
margin: 28px 0;
}
.banner .text .code{
display: block;
margin: 0 auto;
}
.banner .text .tm_t{
font-size: 14px;
font-weight: bold;
color: rgb(51,51,51);
margin-bottom: 8px;
margin-top: 10px;
}
.banner .text .tm_s{
font-size: 12px;
color: rgb(165,165,165);
}
.title_list{
}
.block{
width: 100px;
height: 200px;
background:red;
position: absolute;
}