first commit

历届学生/zheng-yuqing/项目练习/学生项目/酷我音乐/css/index.css

@@ -0,0 +1,256 @@
+.header {
+    height: 67px;
+    border-bottom: 1px solid #f0f0f0;
+}
+
+.header .logo {
+    line-height: 67px;
+
+}
+
+.header .logo img {
+    width: 131px;
+    height: 39px;
+    margin-right: 39px;
+    margin-top: 14px;
+}
+
+.logo ul {}
+
+.logo ul li {
+    float: left;
+    font-weight: 300;
+    margin-right: 4px;
+    position: relative;
+}
+
+.logo ul li a {
+    display: block;
+    height: 100%;
+    color: #333;
+    font-size: 16px;
+    padding: 0 14px;
+}
+
+.logo ul .active {
+    font-weight: 600;
+    background: #ffe443;
+}
+
+.menu {
+    line-height: 50px;
+    position: absolute;
+    width: 170px;
+    height: 155px;
+    background: #fff;
+    box-shadow: 0 0 30px 0 rgb(65 67 70 / 8%);
+    left: 50%;
+    margin-left: -85px;
+    top: 61px;
+    display: none;
+    z-index: 3;
+}
+
+.menu .item:hover {
+    background: #ffdf1f;
+}
+
+.logo ul li:hover .menu {
+    display: inline-block;
+}
+
+.header .search {}
+
+.search .search_wrap {
+    width: 294px;
+    height: 34px;
+    background: #f5f5f5;
+    ;
+    margin-top: 16.5px;
+}
+
+.search .search_wrap i {
+    top: 50%;
+    margin-top: -8px;
+    left: 8px;
+    font-size: 16px;
+    color: #999;
+}
+
+.search .search_wrap input {
+    background: #504e4e00;
+    width: 100%;
+    height: 100%;
+    padding-left: 30px;
+}
+
+.search .logo_text {
+    line-height: 67px;
+    font-size: 14px;
+    color: #333;
+}
+
+.sub_nav {
+    height: 54px;
+    line-height: 54px;
+}
+
+.sub_nav ul {
+    margin-left: 206px;
+}
+
+.sub_nav ul li {
+    float: left;
+    margin-right: 34px;
+    position: relative;
+}
+
+.sub_nav ul .active::after {
+    content: "";
+    position: absolute;
+    height: 6px;
+    width: 100%;
+    background: #ffe443;
+    bottom: 19px;
+    left: 0;
+    z-index: -1;
+}
+
+.sub_nav ul li a {
+    font-size: 14px;
+    font-family: 300;
+    color: #333;
+}
+
+.banner {
+    height: 350px;
+}
+
+.banner img {
+    width: 100%;
+    height: 100%;
+}
+
+.banner i {
+    width: 60px;
+    height: 60px;
+    text-align: center;
+    line-height: 60px;
+    background: #00000038;
+    color: #fff;
+    border-radius: 100%;
+    top: 50%;
+    margin-top: -30px;
+}
+
+.icon-htmal5icon39 {
+    left: 25px;
+}
+
+.icon-htmal5icon39-copy {
+    right: 25px;
+}
+
+.banner ul {
+    width: 100%;
+    height: 60px;
+    bottom: 0;
+    background: rgba(0, 0, 0, .15);
+}
+
+.banner ul li {
+    float: left;
+    width: 25%;
+    text-align: center;
+    color: #fff;
+    font-size: 16px;
+    position: relative;
+
+}
+
+.banner ul li ::after {
+    position: absolute;
+    width: 1px;
+    height: 28px;
+    background: hsla(0, 0%, 100%, .1);
+    content: "";
+    right: 0;
+    top: 50%;
+    margin-top: -14px;
+}
+
+.banner ul li:last-child::after {
+    width: 0px !important;
+}
+
+/* last-child 选中最后一个  */
+
+.recommend {
+    margin-top: 60px;
+    margin-bottom: 24px;
+
+}
+
+.recommend .recommend_title {
+    width: 1192px;
+    margin: 0 auto;
+    height: 40px;
+    line-height: 50px;
+}
+
+.recommend .recommend_title h3 {
+    font-size: 28px;
+    margin-right: 40px;
+    line-height: 40px;
+    display: block;
+    width: 112px;
+    height: 40px;
+    color: #333;
+    
+
+}
+
+.recommend .recommend_title .data {}
+
+.recommend .recommend_title .data li {
+    float: left;
+    margin-right: 34px;
+    position: relative;
+    
+}
+
+.recommend .recommend_title .data li a {
+    color: #333;
+}
+
+.recommend .recommend_title .data .active::after {
+    content: "";
+    position: absolute;
+    height: 6px;
+    width: 100%;
+    background: #ffe443;
+    bottom: 17px;
+    left: 0;
+    z-index: -1;
+}
+
+.recommend_list {
+ 
+}
+.recommend_list {
+    width: 1192px;
+    height: 100%;
+    float: left;
+    margin-left: 163px;
+
+}
+.recommend_list li {
+    width: 20%;
+    float: left;
+}
+
+.recommend_list .top {
+    width: 177px;
+    height: 177px;
+}
+.recommend_list .text {}