Team:NAU-CHINA/oranjia test home
/* 清除页面边距 */
- {
margin: 0; padding: 0; }
ol,ul{ list-style-type: none; /*清楚列表标识*/ }
a{ color: gray; /*a的默认样式是蓝色还有下划线*/ text-decoration: none; /*下划线去掉*/ }
.left{ float: left; } .right{ float: right; }
.fade{ opacity: 0; /*透明度为0*/ } .show{ opacity: 1; }
- top,#accessory,#banner,#header,#nav,#star,#footer,#serve{
height: 100px; width: 100%; /* border: 1px solid red; */ } .container{ width: 1280px; /* border: 1px solid black; */ margin: 0px auto; /*上下0像素 左右auto 居中*/ }
/* 页面头部 */
- header{
height: 30px; margin-top: 0.3125rem; background-color:black; /* position: fixed; top: 5px; */ } /* 别忘了中间空格. */
- header .txwb{
width: 1.25rem; height: 1.25rem; /*大小也可以通过ps算*/ background: url(../img/icons.png) no-repeat -27px -92px; /* 后面的是偏移量,可以通过ps算,到边上的距离*/ }
- header .xlwb{
width: 1.25rem; height: 1.0625rem; background: url(../img/icons.png) no-repeat -47px -95px;
}
- header .tel{
color: aqua; }
- header .header_left div{
float: left; margin: 6px 10px 0px; /* gouqi边框居中 */ }
- header ul li{
float: left; line-height: 30px; /*右边的居中*/ }
- header li a{
color: white; font-size: 14px; border-right:2px solid grey ; padding: 0px 15px; /* 上下0 左右15*/ }
- header li a:hover{ /*a:后面不能有空格*/
color: blue;
}
- header .tu{
border: none; padding-left: 8px; }
- header .tu span{
width: 19px; height: 16px; display: inline-block; /* 因为span是行内元素不能设置行高,所以改一下 改成行内元素 */ vertical-align: middle; margin-right: 0.625rem; background: url(../img/icons.png) no-repeat 0px -96px;
}
/* 设置导航栏 */
- nav{
height: 60px; background-color: #EEEEEE;
/* position:fixed; top: 35px; */ } /* #nav ul { position: fixed;
} */
- nav li{
float: left; margin: 0px 15px; }
- nav a{
line-height: 60px; font-weight: bold;
}
- nav a:hover{
line-height: 60px; color: lime;
}
- nav li ul{
display: none; border: 2px solid blue;
}
- nav li:hover ul{
display: block;
}
- nav li ul li{
margin: 0rem; float: none; border: 2px solid red;
}
- nav ul ul li{
background-color: bisque; }
- nav ul ul li:hover{
background-color: pink; }
- star{
height: 600px; background-color: #808080 }
- star .star_top{
text-align: center; margin: 10px; }
- star .star_top p{
font-size: 30px; font-weight: bold; }
- star ul{
width: 1280px; margin: 20px 60px; /* border: 2px solid black; */
}
- star ul li{
width: 250px; /* border: 2px solid red; */ float: left; margin: 0px 10px; border-bottom: 4px solid wheat; transition: all .3s; /* 给个过度的时间否则很丑 */ }
- star ul li:hover{
border-bottom: 4px solid green; transform: translateY(-10px); /* 向上动一点 */
}
- star .container{
height: 600px; background-image: url(../img/余生在别处.jpg); }
- star li img{
width: 250px;
}
- star li h2,p{
text-align: center; } /* #star .line{ width: 0px; height: 540px; border-left:0.0625rem solid white ; margin: 0px 10px; } */
/* 配件 */
- accessory{
height: 950px; /* background-color:#ABABAB; */ /* background: url(../img/gunbo2.png) no-repeat ; */ /* background-size: 100% 100%; */ background-image: linear-gradient(-225deg, #2CD8D5 0%, #C5C1FF 56%, #FFBAC3 100%); }
- accessory .acc_top{
text-align: center; margin: 0px 0px; }
- accessory .acc_main{
width: 1200px; }
- accessory .acc_left{
width: 540px; /* 防止浮动到右边,控制再左边的框内 */
height: 950px;
/* border: 2px solid #000000; */
}
- accessory .acc_left>div{
float: left; border-bottom: 3px solid #F5DEB3; margin: 10px; transition: all .3s; }
- accessory .acc_left>div div{
border-bottom: 3px solid #F5DEB3;
transition: all .3s; }
- accessory .acc_left>div:hover{
border-bottom: 3px solid #00FFFF; transform: translateY(-10px); }
- accessory .acc_left img{
width: 250px; }
- accessory .acc_left >div:last-child img{ /* 高级选择器最后一个div */
width: 520px; }
- accessory .acc_all{
width: 250px; height: 250px; /* border: 3px solid red; */ background-color: #F5DEB3; padding: 20px; box-sizing: border-box; /* 改变所占的大小 */ }
- accessory .acc_all p:first-child{
text-align: center; font-weight: bold; border-bottom:2px solid gray ; padding-bottom: 10px; }
- accessory .acc_all li{
float: left; width: 100px; height: 40px; text-align: center; line-height: 40px; }
- accessory .acc_all .line{
width: 200px; height: 0; border-top: 1px solid grey; clear: both; /* 把浮动删除 */ }
- accessory .acc_right{
width: 540px; }
- accessory .acc_right div{
float: left; margin: 5px; border-bottom:3px solid #F5DEB3 ; transition: .3s; }
- accessory .acc_right div:hover{
border-bottom:3px solid #00FFFF ; transform: translateY(-10px); }
- accessory .acc_right img{
width: 250px; }
- accessory .acc_right div:first-child img{
width: 540px; }
/* 返回顶部 */
- totop{
width: 80px; height: 80px; position: fixed; right: 0px; bottom: 50px; z-index: 100;
}
- totop #btn{
display: block; width: 80px; height: 80px; background: url(../img/totop.png) no-repeat 0px 0px; border-radius: 9px; }
- totop a:hover{
background: url(../img/totop.png) no-repeat -84px 0px; border-radius: 9px; }
My Project
-
Work
This is our works
-
Work
This is our works
-
Work
This is our works
-
Work
This is our works
progect 2
这就是一句话
- 哈哈
- 哈哈
- 哈哈
- 哈哈
- 哈哈
- 哈哈
哈哈哈哈
