ClassContent/历届学生/逯帅帅/项目开发/学生项目/应越波/day2/小米首页/css/index.css

/* 头部开始 */

.nav{
    height: 40px;
    background-color: #333;
    line-height: 40px;
}

.nav_left li,.nav_right li{
    display: inline-block;
}

.nav a{
    color: rgb(189, 187, 184);
    font-size: 15px;
}

.nav_left a:hover{
    color: #fff;
}

.nav_right li:nth-child(-n+5) a:hover{
    color: #fff;
}

.nav span{
    position: relative;
    top: -1px;
    color: #636060;
    margin-left: 5px;
}

.nav_right li:last-child{
    width:100px;
    height: 40px;
    background-color: #424242;
    text-align: center;
}

.nav_right li:last-child:hover{
    background-color: #fff;
}

.asdf{
    position: relative;
}

.dorp{
    display: none;
    width: 300px;
    height: 100px;
    position: absolute;
    right: 0px;
    background-color: #f9f9f9;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.asdf:hover .dorp{
    display: block;
}

.dorp p{
    font-size: 12px;
    line-height: 100px;
}
/* 头部结束 */

/* 导航栏开始 */
.log{
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
}

.log_left{
	width:50px;
	height:50px;
	position:relative;

	color:black;
	transition:all.3s;
	transform-style:preserve-3d;
}

.log_left div{
    text-align: center;
    line-height: 50px;
}

.log_left div{
	width:100%;
	height:100%;
	position:absolute;
}

.log_left div:first-child{
	background-color:skyblue;
	/* 里盒子，Y轴移动50px（父盒子的一半） */
	transform:translateY(25px);
	/* 里盒子，X轴向前旋转90*/
	transform:rotateX(-90deg);
}

.log_left div:last-child{
	background-color:skyblue;
	/* 外盒子向Z轴移动50 */
	transform:translateZ(25px);
}

.log_left:hover{
	/* 旋转90 */
	transform:rotateX(90deg);
}

.log_mid{
    display: flex;
    align-items: center;
}

.log_mid a{
   color: black;
   margin: 0 5px;
}

.log_mid a:hover{
    color: orangered;
}

.log_right{
    box-sizing: border-box;
    display: flex; 
    align-items: center;
    border: 1px solid #e0e0e0;
}

.log_right div:nth-child(2){
    border-left: 1px solid #e0e0e0;
    width: 51px;
    height: 48px;
    text-align: center;
    line-height: 48px;
}

.log_right div:nth-child(2):hover{
    background-color: rgb(187, 134, 35);
}

.log_right div input{
    width: 245px;
    height: 48px;
    border: none;
    outline: none;
    box-sizing: border-box;
   
}
/* 导航栏结束 */

/* 商品图开始 */
.tu{
    margin-top: 20px;
    width: 1226px;
    height: 570px;
    background: url(../img/1.webp) repeat; 
    background-position: center;
}

.sp1{
    background-color: rgba(0,0,0,0.2);
    float: left;
}

.sp2{
    width: 234px;
    height: 570px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}

.sp2 a{
    color: #fff;
    font-size: 16px;
}

.sp2 a span{
    margin-left: 75px;
    color: #fff;
}

.shouji_fu{
    position: relative;
    display: inline-block;
}

.shouji{
    display: none;
    left: 234px;
    width: 992px;
    height: 571px;
    top: -1px;
    left: 233px;
    position: absolute;
    background-color: #f9f9f9;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.shouji span{
    color: black;
}

.shouji_fu:hover .shouji{
    display: block;
}

.sp2 li{
    line-height: 55px;
    text-align: center;
    width: 234px;
    height: 55px;
}

.shouji span{
   margin:0 100px
}
/* 商品图结束 */

/* 长图部分开始 */
.changtu{
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
}

.changtu_letf span{
    font-size: 12px;
    color: rgb(223, 219, 219);
}

.changtu_letf{
    width: 234px;
    height: 170px;
    background: #5f5750;
    display: flex;
    flex-flow:row wrap;
    justify-content: space-between;
}

.changtu_letf li{
    width:33%;
}

.changtu_letf a{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.changtu_letf img{
    width: 24px;
    height: 24px;
    display: inline-block;
}

.changtu_letf li:nth-child(-n+3){
    margin-top:20px;
}

.changtu_letf :hover{
    color: #fff;
}
/* 长图部分结束 */