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;
+}

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

@@ -0,0 +1,219 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link rel="stylesheet" href="http://at.alicdn.com/t/font_3445167_it6ine1mov8.css">
+    <link rel="stylesheet" href="../上课练习/css/clear.css">
+    <link rel="stylesheet" href="../上课练习/css/public.css">
+    <link rel="stylesheet" href="./haokan.css">
+</head>
+
+<body>
+    <div class="menu">
+        <img class="logo" src="./img/下载.png" alt="">
+        <ul class="one">
+            <li class="active">
+                <a href="">
+                    <img src="./img/下载.svg" alt="">
+                    <span>首页</span>
+                </a>
+            </li>
+            <li>
+                <a href="">
+                    <img src="./img/下载.svg" alt="">
+                    <span>首页</span>
+                </a>
+            </li>
+            <li>
+                <a href="">
+                    <img src="./img/下载.svg" alt="">
+                    <span>首页</span>
+                </a>
+            </li>
+            <li>
+                <a href="">
+                    <img src="./img/下载.svg" alt="">
+                    <span>首页</span>
+                </a>
+            </li>
+        </ul>
+    </div>
+
+    <div class="header">
+        <div class="search left hidden">
+            <input class="left" type="text" placeholder="搜索">
+            <div class="right">
+                <i class="iconfont icon-sousuo"></i>
+                <span>搜索</span>
+            </div>
+        </div>
+        <div class="header-r right">
+            <ul class="header-r-l">
+                <li>
+                    <a href="">
+                        <i class="iconfont icon-sousuo"></i>
+                        <span>下载客户端</span>
+                    </a>
+                </li>
+                <li>
+                    <i class="iconfont icon-sousuo"></i>
+                    <span>创作中心</span>
+                </li>
+                <li>
+                    <i class="iconfont icon-sousuo"></i>
+                    <span>消息</span>
+                </li>
+            </ul>
+            <ul class="header-r-r">
+                <li>
+                    <i class="iconfont icon-sousuo"></i>
+                    <span>上传视频</span>
+                </li>
+                <li>
+                    <span>登录</span>
+                </li>
+            </ul>
+        </div>
+    </div>
+
+    <div class="content">
+        <ul>
+            <li class="one">
+                <img src="https://pic.rmb.bdstatic.com/baidu-rmb-video-cover-1/2022-5/1652165445258/1758dd6fa448.png"
+                    alt="">
+            </li>
+            <li class="two">
+                <div class="tu hidden">
+                    <img class="tupian"
+                        src="https://pics2.baidu.com/feed/b2de9c82d158ccbf0bc57b02cc64ce34b03541d0.jpeg?token=43f5549db0d4043a8269cf3a1f8fa654"
+                        alt="">
+                    <div class="name">直播中</div>
+                    <div class="time">00:17</div>
+                </div>
+                <div>
+                    <img src="http://pic.rmb.bdstatic.com/46e7a103845cf50da65284786c80bd58.jpeg@c_1,w_220,h_220,x_0,y_0"
+                        alt="">
+                    <div div="b">
+                        <span class="t">别用502粘了！看下图，比电焊还牛掰，啥都能粘</span>
+                        <span class="c">影视小妖怪</span>
+                        <span class="u">1631次观看 · 正在直播</span>
+                    </div>
+                </div>
+            </li>
+            <li class="two">
+                <div class="tu hidden">
+                    <img class="tupian"
+                        src="https://pics2.baidu.com/feed/b2de9c82d158ccbf0bc57b02cc64ce34b03541d0.jpeg?token=43f5549db0d4043a8269cf3a1f8fa654"
+                        alt="">
+                    <div class="name">直播中</div>
+                    <div class="time">00:17</div>
+                </div>
+                <div>
+                    <img src="http://pic.rmb.bdstatic.com/46e7a103845cf50da65284786c80bd58.jpeg@c_1,w_220,h_220,x_0,y_0"
+                        alt="">
+                    <div div="b">
+                        <span class="t">别用502粘了！看下图，比电焊还牛掰，啥都能粘</span>
+                        <span class="c">影视小妖怪</span>
+                        <span class="u">1631次观看 · 正在直播</span>
+                    </div>
+                </div>
+            </li>
+            <li class="two">
+                <div class="tu hidden">
+                    <img class="tupian"
+                        src="https://pics2.baidu.com/feed/b2de9c82d158ccbf0bc57b02cc64ce34b03541d0.jpeg?token=43f5549db0d4043a8269cf3a1f8fa654"
+                        alt="">
+                    <div class="name">直播中</div>
+                    <div class="time">00:17</div>
+                </div>
+                <div>
+                    <img src="http://pic.rmb.bdstatic.com/46e7a103845cf50da65284786c80bd58.jpeg@c_1,w_220,h_220,x_0,y_0"
+                        alt="">
+                    <div div="b">
+                        <span class="t">别用502粘了！看下图，比电焊还牛掰，啥都能粘</span>
+                        <span class="c">影视小妖怪</span>
+                        <span class="u">1631次观看 · 正在直播</span>
+                    </div>
+                </div>
+            </li>
+            <li class="two">
+                <div class="tu hidden">
+                    <img class="tupian"
+                        src="https://pics2.baidu.com/feed/b2de9c82d158ccbf0bc57b02cc64ce34b03541d0.jpeg?token=43f5549db0d4043a8269cf3a1f8fa654"
+                        alt="">
+                    <div class="name">直播中</div>
+                    <div class="time">00:17</div>
+                </div>
+                <div>
+                    <img src="http://pic.rmb.bdstatic.com/46e7a103845cf50da65284786c80bd58.jpeg@c_1,w_220,h_220,x_0,y_0"
+                        alt="">
+                    <div div="b">
+                        <span class="t">别用502粘了！看下图，比电焊还牛掰，啥都能粘</span>
+                        <span class="c">影视小妖怪</span>
+                        <span class="u">1631次观看 · 正在直播</span>
+                    </div>
+                </div>
+            </li>
+            <li class="two">
+                <div class="tu hidden">
+                    <img class="tupian"
+                        src="https://pics2.baidu.com/feed/b2de9c82d158ccbf0bc57b02cc64ce34b03541d0.jpeg?token=43f5549db0d4043a8269cf3a1f8fa654"
+                        alt="">
+                    <div class="name">直播中</div>
+                    <div class="time">00:17</div>
+                </div>
+                <div>
+                    <img src="http://pic.rmb.bdstatic.com/46e7a103845cf50da65284786c80bd58.jpeg@c_1,w_220,h_220,x_0,y_0"
+                        alt="">
+                    <div div="b">
+                        <span class="t">别用502粘了！看下图，比电焊还牛掰，啥都能粘</span>
+                        <span class="c">影视小妖怪</span>
+                        <span class="u">1631次观看 · 正在直播</span>
+                    </div>
+                </div>
+            </li>
+            <li class="two">
+                <div class="tu hidden">
+                    <img class="tupian"
+                        src="https://pics2.baidu.com/feed/b2de9c82d158ccbf0bc57b02cc64ce34b03541d0.jpeg?token=43f5549db0d4043a8269cf3a1f8fa654"
+                        alt="">
+                    <div class="name">直播中</div>
+                    <div class="time">00:17</div>
+                </div>
+                <div>
+                    <img src="http://pic.rmb.bdstatic.com/46e7a103845cf50da65284786c80bd58.jpeg@c_1,w_220,h_220,x_0,y_0"
+                        alt="">
+                    <div div="b">
+                        <span class="t">别用502粘了！看下图，比电焊还牛掰，啥都能粘</span>
+                        <span class="c">影视小妖怪</span>
+                        <span class="u">1631次观看 · 正在直播</span>
+                    </div>
+                </div>
+            </li>
+            <li class="two">
+                <div class="tu hidden">
+                    <img class="tupian"
+                        src="https://pics2.baidu.com/feed/b2de9c82d158ccbf0bc57b02cc64ce34b03541d0.jpeg?token=43f5549db0d4043a8269cf3a1f8fa654"
+                        alt="">
+                    <div class="name">直播中</div>
+                    <div class="time">00:17</div>
+                </div>
+                <div>
+                    <img src="http://pic.rmb.bdstatic.com/46e7a103845cf50da65284786c80bd58.jpeg@c_1,w_220,h_220,x_0,y_0"
+                        alt="">
+                    <div div="b">
+                        <span class="t">别用502粘了！看下图，比电焊还牛掰，啥都能粘</span>
+                        <span class="c">影视小妖怪</span>
+                        <span class="u">1631次观看 · 正在直播</span>
+                    </div>
+                </div>
+            </li>
+        </ul>
+    </div>
+</body>
+
+</html>

历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/6-6作业/img/下载.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M14.173 4.66l4 2.588A4 4 0 0 1 20 10.606V17a4 4 0 0 1-4 4H8a4 4 0 0 1-4-4v-6.394a4 4 0 0 1 1.827-3.358l4-2.588a4 4 0 0 1 4.346 0zM12 12.358a.8.8 0 0 0-.8.8v3.338a.8.8 0 1 0 1.6 0v-3.338a.8.8 0 0 0-.8-.8z" fill="#111622" fill-rule="evenodd"/></svg>