first commit

历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/6-6作业/haokan.css

@@ -0,0 +1,280 @@
+.menu {
+    width: 240px;
+    height: 100vh;
+    position: fixed;
+    border-right: 1px solid #e6e6e8;
+    box-sizing: border-box;
+    z-index: 999;
+}
+
+.menu .logo {
+    width: 146px;
+    height: 36px;
+    display: block;
+    padding-top: 18px;
+    padding-bottom: 34px;
+    margin: 0 auto;
+
+}
+
+.menu ul {
+    margin: 0px 28px;
+}
+
+.menu ul li {
+    height: 40px;
+    line-height: 40px;
+    margin-bottom: 8px;
+}
+
+.menu ul li a {
+    font-size: 16px;
+    color: #111622
+}
+
+.menu ul .active {
+    background: #f7f7f7;
+    border-radius: 3px;
+}
+
+.menu ul li a img {
+    vertical-align: text-top;
+    margin-left: 4.5px;
+}
+
+.menu ul li span {}
+
+
+
+
+
+
+
+
+
+
+.header {
+    width: calc(100% - 240px);
+    height: 64px;
+    position: fixed;
+    z-index: 999;
+    left: 240px;
+    border-bottom: 1px solid #e6e6e8;
+    box-sizing: border-box;
+    background: #fff;
+}
+
+.header .search {
+    width: 440px;
+    height: 36px;
+    background: #f7f7f7;
+    border: 1px solid #e6e6e8;
+    border-radius: 3px;
+    box-sizing: border-box;
+    margin: 14px 0 0 32px;
+}
+
+.header .search input {
+    background: #0000;
+    height: 100%;
+    padding-left: 17px;
+    width: 343px;
+    box-sizing: border-box;
+}
+
+.header .search div {
+    height: 100%;
+    width: 75px;
+    position: relative;
+    line-height: 34px;
+    padding-left: 20px;
+}
+
+.header .search div::before {
+    content: " ";
+    width: 1px;
+    height: 16px;
+    background: #e6e6e6;
+    position: absolute;
+    left: -5px;
+    top: 8px;
+}
+
+.header .search div i {}
+
+.header .search div span {
+    font-size: 16px;
+    color: #666;
+}
+
+
+
+.header-r {
+    width: 611px;
+
+
+}
+
+.header-r .header-r-l {
+    line-height: 64px
+}
+
+.header-r .header-r-l li {
+    float: left;
+    font-size: 14px;
+    color: #111622;
+    margin-right: 16px;
+    padding-right: 10px;
+
+}
+
+
+.header-r .header-r-l li a {
+    color: #111622;
+}
+
+.header-r .header-r-l li a span {}
+
+.header-r .header-r-l li i {}
+
+
+.header-r .header-r-r {
+    margin-top: 14px;
+}
+
+.header-r .header-r-r li:first-child {
+    border: 1px solid #e6e6e8;
+    height: 30px;
+    border-radius: 5px;
+    padding: 0 8px;
+}
+
+.header-r .header-r-r li:last-child {
+    padding: 0 26px;
+    height: 30px;
+    background-color: #ff2626;
+    border-radius: 5px;
+    color: #fff;
+}
+
+.header-r .header-r-r li {
+    float: left;
+    line-height: 32px;
+    margin-right: 24px;
+    font-size: 16px;
+}
+
+.header-r .header-r-r li i {}
+
+.header-r .header-r-r li span {}
+
+
+
+
+
+
+
+
+
+
+
+
+.content {
+    margin-left: 240px;
+    padding-top: 64px;
+
+}
+
+.content ul {}
+
+.content ul li {
+    float: left;
+    padding-right: 16px;
+    margin-top: 44px;
+}
+
+.content .one img {
+    width: 500px;
+    height: 222px;
+}
+
+
+.content ul .two {
+    width: 242.2px;
+}
+
+
+.content .two .tupian:hover {
+    transform: scale(1.1);
+}
+
+.content ul .two .tu .tupian {
+    height: 135.8px;
+    width: 242px;
+    border-radius: 0%;
+    margin-bottom: 17px;
+    transition: all 0.3s;
+}
+
+.content ul .two .tu {
+    position: relative;
+}
+
+.content ul .two .tu .name {
+    width: 36px;
+    height: 20px;
+    line-height: 20px;
+    padding-left: 22px;
+    padding-right: 12px;
+    background: red;
+    color: white;
+    font-size: 12px;
+    border-radius: 10px;
+    position: absolute;
+    left: 12px;
+    top: 12px;
+    background-image: url(https://pic.rmb.bdstatic.com/baidu-rmb-video-cover-1/2022-5/1652689008111/9557bd3b37a1.gif);
+    background-size: 12px 12px;
+    background-repeat: no-repeat;
+    background-position: 6px;
+}
+
+.content ul .two .tu .time {
+    font-size: 14px;
+    color: #fff;
+    position: absolute;
+    text-align: right;
+    top: 112px;
+    right: 10px;
+}
+
+
+.content ul .two div {}
+
+.content ul .two div img {
+    width: 36px;
+    height: 36px;
+    border-radius: 100%;
+    float: left;
+
+
+}
+
+.content ul .two div div {
+
+    float: right;
+    width: 198.2px;
+}
+
+.content ul .two div .t {
+    font-size: 16px;
+    color: #111622;
+}
+
+.content ul .two div .c,
+.content ul .two div .u {
+    margin-top: 7px;
+    font-size: 14px;
+    color: #505666;
+    display: block;
+}