first commit

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

@@ -0,0 +1,19 @@
+html, body, div, ul, li, h1, h2, h3, h4, h5, h6, p, dl, dt, dd, ol, form, input, textarea, th, td, select {
+    margin: 0;
+    padding: 0;
+}
+li{
+    list-style: none;
+}
+
+a{
+    text-decoration: none;
+}
+
+input{
+    outline: none;
+}
+
+
+
+

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

@@ -0,0 +1,272 @@
+/* 头部开始 */
+
+.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;
+}
+/* 长图部分结束 */

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

@@ -0,0 +1,25 @@
+.center{
+    width: 1226px;
+    margin: 0 auto;
+}
+
+.float_left{
+    float: left;
+}
+
+.float_right{
+    float: right;
+}
+
+input{
+    outline: none;
+}
+
+body{
+    height: 10000px;
+}
+
+.changdu{
+    width: 316px;
+    height: 170px;
+}