HTML笨方法仿写站酷
阅读原文时间:2023年07月08日阅读:2


<head>  
    <meta charset="UTF-8">  
    <title></title>  
    <style type="text/css">  
        #header {  
            height: 60px;  
            /\*高度60\*/  
            background: yellow;  
            /\*背景颜色黄色\*/  
        }

        #h-nav {  
            width: 1740px;  
            /\*宽带1740\*/  
            height: 60px;  
            /\*background: red;\*/  
            margin: 0px auto;  
            /\*\*/  
            /\*overflow: hidden;\*/  
        }

        #logo {  
            width: 120px;  
            height: 20px;  
            background: yellowgreen;  
            background: url(img/logo.svg) no-repeat;  
            margin-top: 20px;  
            float: left;  
        }

        #nav {  
            width: 648px;  
            height: 60px;  
            /\*background:aqua;\*/  
            float: left;  
            margin-left: 400px;  
        }

        #denglu {  
            width: 257px;  
            height: 60px;  
            /\*background: olive;\*/  
            float: right;  
        }  
        #lu{

height: 23px;  
display: inline-block;  
margin-left: 12px;  
        }  
        ul li {  
            list-style: none;  
        }

        \* {  
            margin: 0;  
            padding: 0;  
        }

        .shouye li {  
            float: left;  
            line-height: 60px;  
            margin-right: 43px;  
        }

        .shouye>li a {  
            text-decoration: none;  
            color: #222;  
        }

        #fang {  
            width: 128px;  
            height: 56px;  
            margin-top: 20px;  
        }

        #da {  
            float: left;  
            width: 20px;  
            height: 20px;  
            background: url(img/nav-search.svg)no-repeat;  
        }  
        #xiao{width: 20px;  
        height: 20px;  
        background: url(img/nav-upload.svg);  
        float: left;  
        margin-left: 20px;  
        }  
        #tu {  
            width: 1380px;  
            height: 350px;  
            background: url(img/33.png);  
            margin: 0px auto;  
            margin-top: 20px;  
            cursor: pointer;  
        }

        #xiaotu {  
            width: 1380px;  
            height: 210px;  
            margin: 0px auto;  
            margin-top: 20px;  
        }

        .ul1 li {  
            width: 260px;  
            height: 208px;  
            background: red;  
            cursor: pointer;  
        }

        .ul1 li {  
            float: left;  
            margin-left: 20px;  
        }

        ul.ul1 {  
            overflow: hidden;  
        }

        li#tu1 {  
            margin-left: 0px;  
        }

        #id1 {  
            height: 60px;  
            /\*background: cyan;\*/  
                position: relative;  
        }

        #id2 {  
            width: 1380px;  
            height: 60px;  
            /\*background: yellowgreen;\*/  
            margin: 0px auto;  
        }

        #div3 {  
            width: 372px;  
            height: 60px;  
            /\*background: red;\*/  
            margin: 0px auto;  
        }

        .ul2 li {  
            margin-top: 20px;  
            float: left;  
            margin-left: 45px;  
            cursor: pointer;  
        }

        #hui {  
            height: 3100px;  
            background: #f4f4f4;  
        }

        #id3 {  
            width: 1387px;  
            height: 345px;  
            /\*background: red;\*/  
            margin: 0px auto;  
        }

        .ul3 li {  
            width: 260px;  
            height: 195px;  
            /\*background: cyan;\*/  
            cursor: pointer;  
        }

        .ul3 li {  
            width: 260px;  
            height: 345px;  
            /\*background: yellowgreen;\*/  
            /\*display: inline-block;\*/  
            float: left;  
            margin-right: 19px;  
            margin-bottom: 20px;  
        }

        #pian5 {  
            margin-right: 0;  
        }

        .pian-img {  
            width: 260px;  
            height: 195px;  
            /\*background: cyan;\*/  
        }

        .pian-font {  
            width: 260px;  
            height: 100px;  
            background: #ffffff;  
        }

        .pian-btu {  
            width: 260px;  
            height: 50px;  
            background:#ffffff;  
            margin-top: 2px;  
        }

        .pian-yu {  
            width: 228px;  
            height: 20px;  
            /\*background: hotpink;\*/  
            margin: 0px auto;  
            position: relative;  
            Left: 0;  
            top: 6px;  
        }

        .pian-zui {  
            width: 228px;  
            height: 18px;  
            /\*background: lightsalmon;\*/  
            margin: 0px auto;  
            position: relative;  
            Left: 0;  
            top: 3px;  
        }

        .pian-zui p {  
            color: #bbb;  
        }

        .pian-nan {  
            width: 228px;  
            height: 16px;  
            /\*background: red;\*/  
            margin-top: 30px;  
        }

        .yanjin1 {  
            width: 50px;  
            height: 16px;  
            /\*background: yellow;\*/  
            margin-left: 10px;  
            display: inline-block;  
        }

        .span1 {  
            color: #bbb;  
        }

        .pl {  
            width: 30px;  
            height: 17px;  
            /\*background: yellowgreen;\*/  
            margin-left: 20px;  
            display: inline-block;  
        }

        .zan {  
            width: 46px;  
            height: 17px;  
            /\*background: yellow;\*/  
            margin-left: 30px;  
            display: inline-block;  
        }

        .pian-bu {  
            width: 150px;  
            height: 26px;  
            /\*background: lightcoral;\*/  
            margin-top: 6px;  
            margin-left: 14px;  
            display: inline-block;  
        }

        .pian-sha>img {  
            border-radius: 50%;  
            margin-right: 10px;  
            width: 24px;  
            height: 24px;  
            /\*background: url(img/\_100sh.jpg);\*/  
            border: none;  
            vertical-align: middle;  
        }

        .pian-sha {  
            color: #333;  
            font-size: 12px;  
        }

        .pian-w {  
            width: 49px;  
            height: 26px;  
            /\*background: cyan;\*/  
            margin-top: 6px;  
            margin-right: 20px;  
            display: inline-block;  
            float: right;  
        }  
        #div4{  
            width: 1903px;  
            height: 40px;  
            background: #F4F4F4;  
            margin-top: -17px;  
            clear: both;  
        }  
        .zhenfangxing{  
            width: 500px;  
            height: 40px;  
            /\*background: blue;\*/  
            margin: 0px auto;  
        }  
        .pian-zheng{  
            width: 40px;  
            height: 40px;  
            /\*background: #333;\*/  
            float: left;  
            margin-left: 3px;  
            /\*background-color: #333 ;\*/  
            border-radius: 4px;  
                border: 1px solid #333;  
                line-height: 44px;  
                text-align: center;  
        }  
        .div5{  
            width: 1903px;  
            height: 400px;  
            background: #f4f4f4;  
            /\*margin-top: -20px;\*/  
        }

        .div6{  
            width: 1903px;  
            height: 115px;  
        }  
        .div7{  
            width: 1903px;  
            height: 61px;

        }  
        .div9{  
            width: 680px;  
            height: 115px;  
            background: yellow;  
            margin-top: -90px;  
            margin-left: 210px;  
        }  
        .div8{  
            width: 680px;  
            height: 115px;  
            margin-top: -115px;  
            margin-left: 971px;  
        }  
        .div10{  
            width: 1380px;  
            height: 19px;  
            /\*background: yellow;\*/  
            margin-left: 235px;  
            margin-top: -244px;  
        }  
        .huan{  
            margin-left: 1263px;  
        }  
        .div12 li{  
            width: 260px;  
            height: 145.99px;  
            background: cyan;  
            float: left;  
            margin-left: 13px;  
        }  
        .div11{  
            width:1380px;  
            height: 210px;  
            background: #ffffff;  
            margin:0px auto;  
            margin-top: 15px;  
        }  
        .div13{  
            width: 1903px;  
            height: 229px;  
            background: #282828;  
            margin: 0px auto;  
            margin-top: 20px;  
        }  
        .div14 li{  
            width: 250px;  
            height: 19px;  
            margin-top: 4px;  
            white-space: nowrap;  
            text-overflow: ellipsis;  
            float: left;  
            margin-left: 20px;  
            margin-top: 20px ;  
        }  
        .div15{  
            width: 1380px;  
            height: 131px;  
            background: #282828;  
            margin: 0px auto;  
        }  
        .div16{  
            width:1253px ;  
            height: 21px;  
            /\*background: yellow;\*/  
            margin: 0px auto;  
            /\*margin-top: 20px;\*/  
           line-height: 138px;  
        }  
        .div16 a{  
            margin-left: 31px;  
            cursor: pointer;  
            text-decoration: none;  
            color: #666;

        }  
        .div17{  
            width: 877px;  
            height: 19px;  
            /\*background: red;\*/  
            color: #666;  
            margin-top: 110px;  
            margin-left: 205px;  
        }  
        .div17 a{  
            color: #666;  
        }  
        .div17 a{

                text-decoration: none;  
                font-size: 12px;

        }  
        .ass{  
            width: 131px;  
            height: 21px;  
            /\*background: yellow;\*/  
            float: right;  
        }  
        .ass1{  
            margin-left: 32px;  
        }  
        .ass2{  
            width: 770px;  
            height: 19px;  
            /\*background: yellow;\*/  
            margin-top: 11px;  
            margin-left: 207px;  
                font-size: 12px  
        }  
        .ass2 a{  
            color: #666;  
            text-decoration: none;  
        }  
        .police{  
                background: url(img/下载.png)  
                no-repeat;  
                padding-left: 20px;  
                  background-position:0px 3px;

        }  
        .shouye{

        }  
        .hide{  
            background-color: #FF0000;  
        }  
        .ui-hide{  
            width: 152px;  
            height: 100px;  
            background: #fff;  
            position: absolute;  
            top: 60px;  
            left: 0px;  
            display: none;  
        }  
        .shouye>li{  
            position: relative;  
        }  
        .shouye>li:hover .ui-hide{  
            display: block;

        }  
        #ce{  
            width: 33px;  
height: 23px;  
display: block;  
float: left;  
        }  
        #xiao2{  
            width: 100px;  
height: 56px;  
margin-top: -55px;  
margin-left: 104px;  
        }  


<body>  
    <div id="header">  
        <div id="h-nav">  
            <div id="logo"></div>  
            <div id="nav">  
                <ul class="shouye">  
                    <li>  
                        <a class = "souye" href="javascript:;">首页</a>  
                         <div class="hide">  
                            <ul class="ui-hide">  
                                <li>站酷首页</li>  
                                <li>我的首页</li>  
                            </ul>  
                         </div>  
                    </li>  
                    <li>  
                        <a href="">发现</a>  
                    </li>  
                    <li>  
                        <a href="">职位</a>  
                    </li>  
                    <li>  
                        <a href="">活动</a>  
                    </li>  
                    <li>  
                        <a href="">正版素材</a>  
                    </li>  
                    <li>  
                        <a href="">课程</a>  
                    </li>  
                    <li>  
                        <a href="">版权保护</a>  
                    </li>  
                    <li>  
                        <a href="">...</a>  
                    </li>  
                </ul>  
            </div>  
            <div id="denglu">  
                <div id="fang">  
                    <div id="da"></div>  
                    <div id="xiao"></div>  
                </div>  
                <div id="xiao2">  
                    <div id="lu">登录</div>  
                    <div id="ce">注册</div>  
                </div>

            </div>  
        </div>  
        <div id="content">  
            <div id="tu"></div>  
            <div id="xiaotu">  
                <ul class="ul1">  
                    <li id="tu1"><img src="img/8d09bb93091801c62c13ceb0f73437f3.jpg" width="260" height="208" /></li>  
                    <li id="tu2"><img src="img/b5e3252142ca.jpg" width="260" height="208" /></li>  
                    <li id="tu3"><img src="img/23316d6480c7bc561462951226ee28a1.jpg" width="260" height="208" /></li>  
                    <li id="tu4"><img src="img/3015c205f995828b157518e6e5d6a9ff.jpg" width="260" height="208" /></li>  
                    <li id="tu5"><img src="img/9f2cb14efd6e397a82f3078e73310f41.jpeg" width="260" height="208" /></li>  
                </ul>  
            </div>  
            <div id="id1">  
                <div id="id2">  
                    <div id="div3">  
                        <ul class="ul2">  
                            <li>首页推荐</li>  
                            <li>我的关注</li>  
                            <li>全部推荐</li>  
                        </ul>  
                    </div>  
                </div>  
            </div>  
        </div>  
        </style>  
        <div id="hui">  
            <div id="id3">  
                <ul class="ul3">  
                    <li id="pian">  
                        <div class="pian-img"><img src="img/100sh.jpg" /></div>  
                        <div class="pian-font">  
                            <div class="pian-yu">  
                                <p>疫情沙盘可视化构建-Visuali...</p>  
                                <div class="pian-zui">  
                                    <p>UI-软件界面</p>  
                                </div>  
                                <div class="pian-nan">  
                                    <div class="yanjin1">  
                                        <span class="span1"><img src="img/yanjin (1).svg"/> 234</span>  
                                    </div>  
                                    <div class="pl">  
                                        <span class="span1"><img src="img/laji.svg"/> 3</span>  
                                    </div>  
                                    <div class="zan">  
                                        <span class="span1"><img src="img/-zan.svg"/>999</span>  
                                    </div>  
                                </div>  
                            </div>  
                        </div>  
                        <div class="pian-btu">  
                            <div class="pian-bu">  
                                <div class="pian-sha"><img src="img/\_100sh.jpg" width="24" height="24" />糟老头</div>  
                            </div>  
                            <div class="pian-w">2天</div>  
                        </div>  
                    </li>  
                    <li id="pian2">  
                        <div class="pian-img"><img src="img/1c\_1e\_1o\_100sh.jpg" /></div>  
                        <div class="pian-font">  
                            <div class="pian-yu">  
                                <p>  
                                    <font size="2">QQ飞车X圣闘士星矢联动A车宣传视频</font>  
                                </p>  
                                <div class="pian-zui">  
                                    <p>网页-企业官网</p>  
                                </div>  
                                <div class="pian-nan">  
                                    <div class="yanjin1">  
                                        <span class="span1"><img src="img/yanjin (1).svg"/> 524</span>  
                                    </div>  
                                    <div class="pl">  
                                        <span class="span1"><img src="img/laji.svg"/> 9</span>  
                                    </div>  
                                    <div class="zan">  
                                        <span class="span1"><img src="img/-zan.svg"/>239</span>  
                                    </div>  
                                </div>  
                            </div>  
                        </div>  
                        <div class="pian-btu">  
                            <div class="pian-bu">  
                                <div class="pian-sha"><img src="img/QQ图片20201022085107.jpg" width="24" height="24" />周鑫</div>  
                            </div>  
                            <div class="pian-w">22天</div>  
                        </div>  
                    </li>  
                    <li id="pian3">  
                        <div class="pian-img"><img src="img/@260w\_\_100sh.jpg" /></div>  
                        <div class="pian-font">  
                            <div class="pian-yu">  
                                <p>  
                                    <font size="2">漫画 /520的崩溃从"算了"开始...</font>  
                                </p>  
                                <div class="pian-zui">  
                                    <p>书法字体设计|第120回</p>  
                                </div>  
                                <div class="pian-nan">  
                                    <div class="yanjin1">  
                                        <span class="span1"><img src="img/yanjin (1).svg"/> 834</span>  
                                    </div>  
                                    <div class="pl">  
                                        <span class="span1"><img src="img/laji.svg"/> 9</span>  
                                    </div>  
                                    <div class="zan">  
                                        <span class="span1"><img src="img/-zan.svg"/>799</span>  
                                    </div>  
                                </div>  
                            </div>  
                        </div>  
                        <div class="pian-btu">  
                            <div class="pian-bu">  
                                <div class="pian-sha"><img src="img/0sh.jpg" width="24" height="24" />彭渝</div>  
                            </div>  
                            <div class="pian-w">2小时</div>  
                        </div>  
                    </li>  
                    <li id="pian4">  
                        <div class="pian-img"><img src="img/0143786100sh.jpg" /></div>  
                        <div class="pian-font">  
                            <div class="pian-yu">  
                                <p>  
                                    <font size="2">"化作自然 系列作品相可为龙"</font>  
                                </p>  
                                <div class="pian-zui">  
                                    <p>手工艺-手办/模玩</p>  
                                </div>  
                                <div class="pian-nan">  
                                    <div class="yanjin1">  
                                        <span class="span1"><img src="img/yanjin (1).svg"/> 124</span>  
                                    </div>  
                                    <div class="pl">  
                                        <span class="span1"><img src="img/laji.svg"/> 6</span>  
                                    </div>  
                                    <div class="zan">  
                                        <span class="span1"><img src="img/-zan.svg"/>987</span>  
                                    </div>  
                                </div>  
                            </div>  
                        </div>  
                        <div class="pian-btu">  
                            <div class="pian-bu">  
                                <div class="pian-sha"><img src="img/10sh.jpg" width="24" height="24" />郭书宏</div>  
                            </div>  
                            <div class="pian-w">3小时</div>  
                        </div>  
                    </li>  
                    <li id="pian5">  
                        <div class="pian-img"><img src="img/01495c60a5c3c311013e3b7dc5fcff.jpg" width="260" height="195" /></div>  
                        <div class="pian-font">  
                            <div class="pian-yu">  
                                <p>  
                                    <font size="2">“酸掉牙”的设计就交给你了!</font>  
                                </p>  
                                <div class="pian-zui">  
                                    <p>特别企划</p>  
                                </div>  
                                <div class="pian-nan">  
                                    <div class="yanjin1">  
                                        <span class="span1"><img src="img/yanjin (1).svg"/> 24</span>  
                                    </div>  
                                    <div class="pl">  
                                        <span class="span1"><img src="img/laji.svg"/> 0</span>  
                                    </div>  
                                    <div class="zan">  
                                        <span class="span1"><img src="img/-zan.svg"/>99</span>  
                                    </div>  
                                </div>  
                            </div>  
                        </div>  
                        <div class="pian-btu">  
                            <div class="pian-bu">  
                                <div class="pian-sha"><img src="img/@260w\_\_100sh.jpg" width="24" height="24" />召财猫</div>  
                            </div>  
                            <div class="pian-w">4天</div>  
                        </div>  
                    </li>  
                </ul>

                  <ul class="ul3">  
                    <li id="pian">  
                        <div class="pian-img"><img src="img/图一h.jpg" /></div>  
                        <div class="pian-font">  
                            <div class="pian-yu">  
                                <p>彩虹糖·魔性动画CHT缩写梗篇</p>  
                                <div class="pian-zui">  
                                    <p>动漫</p>  
                                </div>  
                                <div class="pian-nan">  
                                    <div class="yanjin1">  
                                        <span class="span1"><img src="img/yanjin (1).svg"/> 344</span>  
                                    </div>  
                                    <div class="pl">  
                                        <span class="span1"><img src="img/laji.svg"/> 0</span>  
                                    </div>  
                                    <div class="zan">  
                                        <span class="span1"><img src="img/-zan.svg"/>99</span>  
                                    </div>  
                                </div>  
                            </div>  
                        </div>  
                        <div class="pian-btu">  
                            <div class="pian-bu">  
                                <div class="pian-sha"><img src="img/23316d6480c7bc561462951226ee28a1.jpg"24" height="24" />老头</div>  
                            </div>  
                            <div class="pian-w">1天</div>  
                        </div>  
                    </li>  
                    <li id="pian2">  
                        <div class="pian-img"><img src="img/图二.jpg" /></div>  
                        <div class="pian-font">  
                            <div class="pian-yu">  
                                <p>  
                                    <font size="2">非人哉688-689</font>  
                                </p>  
                                <div class="pian-zui">  
                                    <p>动漫短篇-企业官网</p>  
                                </div>  
                                <div class="pian-nan">  
                                    <div class="yanjin1">  
                                        <span class="span1"><img src="img/yanjin (1).svg"/> 524</span>  
                                    </div>  
                                    <div class="pl">  
                                        <span class="span1"><img src="img/laji.svg"/> 0</span>  
                                    </div>  
                                    <div class="zan">  
                                        <span class="span1"><img src="img/-zan.svg"/>29</span>  
                                    </div>  
                                </div>  
                            </div>  
                        </div>  
                        <div class="pian-btu">  
                            <div class="pian-bu">  
                                <div class="pian-sha"><img src="img/QQ图片20201022085107.jpg" width="24" height="24" />赵芳</div>  
                            </div>  
                            <div class="pian-w">2天</div>  
                        </div>  
                    </li>  
                    <li id="pian3">  
                        <div class="pian-img"><img src="img/图三100sh.jpg"/></div>  
                        <div class="pian-font">  
                            <div class="pian-yu">  
                                <p>  
                                    <font size="2">爱很明显,不爱也是。</font>  
                                </p>  
                                <div class="pian-zui">  
                                    <p>三维-动画/影视</p>  
                                </div>  
                                <div class="pian-nan">  
                                    <div class="yanjin1">  
                                        <span class="span1"><img src="img/yanjin (1).svg"/> 34</span>  
                                    </div>  
                                    <div class="pl">  
                                        <span class="span1"><img src="img/laji.svg"/> 0</span>  
                                    </div>  
                                    <div class="zan">  
                                        <span class="span1"><img src="img/-zan.svg"/>626</span>  
                                    </div>  
                                </div>  
                            </div>  
                        </div>  
                        <div class="pian-btu">  
                            <div class="pian-bu">  
                                <div class="pian-sha"><img src="img/3015c205f995828b157518e6e5d6a9ff.jpg" width="24" height="24" />星辰</div>  
                            </div>  
                            <div class="pian-w">57分</div>  
                        </div>  
                    </li>  
                    <li id="pian4">  
                        <div class="pian-img"><img src="img/图四\_100sh.jpg"/></div>  
                        <div class="pian-font">  
                            <div class="pian-yu">  
                                <p>  
                                    <font size="2">十二生肖系列插画</font>  
                                </p>  
                                <div class="pian-zui">  
                                    <p>插画-艺术插画</p>  
                                </div>  
                                <div class="pian-nan">  
                                    <div class="yanjin1">  
                                        <span class="span1"><img src="img/yanjin (1).svg"/> 14</span>  
                                    </div>  
                                    <div class="pl">  
                                        <span class="span1"><img src="img/laji.svg"/>5</span>  
                                    </div>  
                                    <div class="zan">  
                                        <span class="span1"><img src="img/-zan.svg"/>7</span>  
                                    </div>  
                                </div>  
                            </div>  
                        </div>  
                        <div class="pian-btu">  
                            <div class="pian-bu">  
                                <div class="pian-sha"><img src="img/@260w\_\_100sh.jpg" width="24" height="24" />新河</div>  
                            </div>  
                            <div class="pian-w">3小时</div>  
                        </div>  
                    </li>  
                    <li id="pian5">  
                        <div class="pian-img"><img src="img/图五00sh.jpg" width="260" height="195" /></div>  
                        <div class="pian-font">  
                            <div class="pian-yu">  
                                <p>  
                                    <font size="2">小Z的旅城 & 寻味美食~</font>  
                                </p>  
                                <div class="pian-zui">  
                                    <p>美食街</p>  
                                </div>  
                                <div class="pian-nan">  
                                    <div class="yanjin1">  
                                        <span class="span1"><img src="img/yanjin (1).svg"/> 4</span>  
                                    </div>  
                                    <div class="pl">  
                                        <span class="span1"><img src="img/laji.svg"/> 3</span>  
                                    </div>  
                                    <div class="zan">  
                                        <span class="span1"><img src="img/-zan.svg"/>45</span>  
                                    </div>  
                                </div>  
                            </div>  
                        </div>  
                        <div class="pian-btu">  
                            <div class="pian-bu">  
                                <div class="pian-sha"><img src="img/@260w\_\_100sh.jpg" width="24" height="24" />猫</div>  
                            </div>  
                            <div class="pian-w">4分</div>  
                        </div>  
                    </li>  
                </ul>

                <ul class="ul3">  
                    <li id="pian">  
                        <div class="pian-img"><img src="img/图6sh.jpg" /></div>  
                        <div class="pian-font">  
                            <div class="pian-yu">  
                                <p>The Sleeping Beauty...</p>  
                                <div class="pian-zui">  
                                    <p>动物世界</p>  
                                </div>  
                                <div class="pian-nan">  
                                    <div class="yanjin1">  
                                        <span class="span1"><img src="img/yanjin (1).svg"/> 434</span>  
                                    </div>  
                                    <div class="pl">  
                                        <span class="span1"><img src="img/laji.svg"/> 2</span>  
                                    </div>  
                                    <div class="zan">  
                                        <span class="span1"><img src="img/-zan.svg"/>349</span>  
                                    </div>  
                                </div>  
                            </div>  
                        </div>  
                        <div class="pian-btu">  
                            <div class="pian-bu">  
                                <div class="pian-sha"><img src="img/1c\_1e\_1o\_100sh.jpg" width="24" height="24" />温柔</div>  
                            </div>  
                            <div class="pian-w">2年</div>  
                        </div>  
                    </li>  
                    <li id="pian2">  
                        <div class="pian-img"><img src="img/图七h.jpg" /></div>  
                        <div class="pian-font">  
                            <div class="pian-yu">  
                                <p>  
                                    <font size="2">这里不是火星,这里是喵星球</font>  
                                </p>  
                                <div class="pian-zui">  
                                    <p>三维-动画/影视</p>  
                                </div>  
                                <div class="pian-nan">  
                                    <div class="yanjin1">  
                                        <span class="span1"><img src="img/yanjin (1).svg"/> 554</span>  
                                    </div>  
                                    <div class="pl">  
                                        <span class="span1"><img src="img/laji.svg"/> 9</span>  
                                    </div>  
                                    <div class="zan">  
                                        <span class="span1"><img src="img/-zan.svg"/>239</span>  
                                    </div>  
                                </div>  
                            </div>  
                        </div>  
                        <div class="pian-btu">  
                            <div class="pian-bu">  
                                <div class="pian-sha"><img src="img/图七h.jpg" width="24" height="24" />喵喵</div>  
                            </div>  
                            <div class="pian-w">22天</div>  
                        </div>  
                    </li>  
                    <li id="pian3">  
                        <div class="pian-img"><img src="img/图八.jpg" /></div>  
                        <div class="pian-font">  
                            <div class="pian-yu">  
                                <p>  
                                    <font size="2">【POPIC】1、2、3,开跳</font>  
                                </p>  
                                <div class="pian-zui">  
                                    <p>书法字体设计</p>  
                                </div>  
                                <div class="pian-nan">  
                                    <div class="yanjin1">  
                                        <span class="span1"><img src="img/yanjin (1).svg"/> 34</span>  
                                    </div>  
                                    <div class="pl">  
                                        <span class="span1"><img src="img/laji.svg"/> 9</span>  
                                    </div>  
                                    <div class="zan">  
                                        <span class="span1"><img src="img/-zan.svg"/>359</span>  
                                    </div>  
                                </div>  
                            </div>  
                        </div>  
                        <div class="pian-btu">  
                            <div class="pian-bu">  
                                <div class="pian-sha"><img src="img/图三100sh.jpg" width="24" height="24" />臣退</div>  
                            </div>  
                            <div class="pian-w">2小时</div>  
                        </div>  
                    </li>  
                    <li id="pian4">  
                        <div class="pian-img"><img src="img/图九.jpg" /></div>  
                        <div class="pian-font">  
                            <div class="pian-yu">  
                                <p>  
                                    <font size="2">Wallet project/大阳阳</font>  
                                </p>  
                                <div class="pian-zui">  
                                    <p>UI-APP界面</p>  
                                </div>  
                                <div class="pian-nan">  
                                    <div class="yanjin1">  
                                        <span class="span1"><img src="img/yanjin (1).svg"/> 334</span>  
                                    </div>  
                                    <div class="pl">  
                                        <span class="span1"><img src="img/laji.svg"/> 4</span>  
                                    </div>  
                                    <div class="zan">  
                                        <span class="span1"><img src="img/-zan.svg"/>87</span>  
                                    </div>  
                                </div>  
                            </div>  
                        </div>  
                        <div class="pian-btu">  
                            <div class="pian-bu">  
                                <div class="pian-sha"><img src="img/yanjin (1).svg" width="24" height="24" />红叶</div>  
                            </div>  
                            <div class="pian-w">1小时</div>  
                        </div>  
                    </li>  
                    <li id="pian5">  
                        <div class="pian-img"><img src="img/图10sh.jpg" width="260" height="195" /></div>  
                        <div class="pian-font">  
                            <div class="pian-yu">  
                                <p>  
                                    <font size="2">#2021青春答卷#荣誉&神童</font>  
                                </p>  
                                <div class="pian-zui">  
                                    <p>纯艺术-实验艺术</p>  
                                </div>  
                                <div class="pian-nan">  
                                    <div class="yanjin1">  
                                        <span class="span1"><img src="img/yanjin (1).svg"/> 54</span>  
                                    </div>  
                                    <div class="pl">  
                                        <span class="span1"><img src="img/laji.svg"/> 0</span>  
                                    </div>  
                                    <div class="zan">  
                                        <span class="span1"><img src="img/-zan.svg"/>29</span>  
                                    </div>  
                                </div>  
                            </div>  
                        </div>  
                        <div class="pian-btu">  
                            <div class="pian-bu">  
                                <div class="pian-sha"><img src="img/@260w\_\_100sh.jpg" width="24" height="24" />失策</div>  
                            </div>  
                            <div class="pian-w">9时</div>  
                        </div>  
                    </li>  
                </ul>

                <ul class="ul3">  
                    <li id="pian">  
                        <div class="pian-img"><img src="img/图11h.jpg" /></div>  
                        <div class="pian-font">  
                            <div class="pian-yu">  
                                <p>「魔女的盛宴3」站酷线上展</p>  
                                <div class="pian-zui">  
                                    <p>活动-专题策划</p>  
                                </div>  
                                <div class="pian-nan">  
                                    <div class="yanjin1">  
                                        <span class="span1"><img src="img/yanjin (1).svg"/> 34</span>  
                                    </div>  
                                    <div class="pl">  
                                        <span class="span1"><img src="img/laji.svg"/> 3</span>  
                                    </div>  
                                    <div class="zan">  
                                        <span class="span1"><img src="img/-zan.svg"/>49</span>  
                                    </div>  
                                </div>  
                            </div>  
                        </div>  
                        <div class="pian-btu">  
                            <div class="pian-bu">  
                                <div class="pian-sha"><img src="img/\_100sh.jpg" width="24" height="24" />吸取</div>  
                            </div>  
                            <div class="pian-w">2天</div>  
                        </div>  
                    </li>  
                    <li id="pian2">  
                        <div class="pian-img"><img src="img/图12h.jpg" /></div>  
                        <div class="pian-font">  
                            <div class="pian-yu">  
                                <p>  
                                    <font size="2">插画-概念设定</font>  
                                </p>  
                                <div class="pian-zui">  
                                    <p>【Wasteland】</p>  
                                </div>  
                                <div class="pian-nan">  
                                    <div class="yanjin1">  
                                        <span class="span1"><img src="img/yanjin (1).svg"/> 54</span>  
                                    </div>  
                                    <div class="pl">  
                                        <span class="span1"><img src="img/laji.svg"/> 9</span>  
                                    </div>  
                                    <div class="zan">  
                                        <span class="span1"><img src="img/-zan.svg"/>23</span>  
                                    </div>  
                                </div>  
                            </div>  
                        </div>  
                        <div class="pian-btu">  
                            <div class="pian-bu">  
                                <div class="pian-sha"><img src="img/QQ图片20201022085107.jpg" width="24" height="24" />唐婉芹</div>  
                            </div>  
                            <div class="pian-w">14天</div>  
                        </div>  
                    </li>  
                    <li id="pian3">  
                        <div class="pian-img"><img src="img/图12.jpg" /></div>  
                        <div class="pian-font">  
                            <div class="pian-yu">  
                                <p>  
                                    <font size="2">为游戏《三国杀》创作的角色插画</font>  
                                </p>  
                                <div class="pian-zui">  
                                    <p>插画-游戏原画</p>  
                                </div>  
                                <div class="pian-nan">  
                                    <div class="yanjin1">  
                                        <span class="span1"><img src="img/yanjin (1).svg"/> 504</span>  
                                    </div>  
                                    <div class="pl">  
                                        <span class="span1"><img src="img/laji.svg"/> 1</span>  
                                    </div>  
                                    <div class="zan">  
                                        <span class="span1"><img src="img/-zan.svg"/>339</span>  
                                    </div>  
                                </div>  
                            </div>  
                        </div>  
                        <div class="pian-btu">  
                            <div class="pian-bu">  
                                <div class="pian-sha"><img src="img/0sh.jpg" width="24" height="24" />渝儿</div>  
                            </div>  
                            <div class="pian-w">0.2秒</div>  
                        </div>  
                    </li>  
                    <li id="pian4">  
                        <div class="pian-img"><img src="img/图13.jpg" /></div>  
                        <div class="pian-font">  
                            <div class="pian-yu">  
                                <p>  
                                    <font size="2">摩菜菜市场VI视觉识别</font>  
                                </p>  
                                <div class="pian-zui">  
                                    <p>平面-品牌</p>  
                                </div>  
                                <div class="pian-nan">  
                                    <div class="yanjin1">  
                                        <span class="span1"><img src="img/yanjin (1).svg"/> 144</span>  
                                    </div>  
                                    <div class="pl">  
                                        <span class="span1"><img src="img/laji.svg"/> 5</span>  
                                    </div>  
                                    <div class="zan">  
                                        <span class="span1"><img src="img/-zan.svg"/>357</span>  
                                    </div>  
                                </div>  
                            </div>  
                        </div>  
                        <div class="pian-btu">  
                            <div class="pian-bu">  
                                <div class="pian-sha"><img src="img/10sh.jpg" width="24" height="24" />红菱</div>  
                            </div>  
                            <div class="pian-w">9小时</div>  
                        </div>  
                    </li>  
                    <li id="pian5">  
                        <div class="pian-img"><img src="img/图14h.jpg" width="260" height="195" /></div>  
                        <div class="pian-font">  
                            <div class="pian-yu">  
                                <p>  
                                    <font size="2">NiceLab-Studio品牌升级-VI应用设计</font>  
                                </p>  
                                <div class="pian-zui">  
                                    <p>平面-品牌</p>  
                                </div>  
                                <div class="pian-nan">  
                                    <div class="yanjin1">  
                                        <span class="span1"><img src="img/yanjin (1).svg"/> 64</span>  
                                    </div>  
                                    <div class="pl">  
                                        <span class="span1"><img src="img/laji.svg"/> 0</span>  
                                    </div>  
                                    <div class="zan">  
                                        <span class="span1"><img src="img/-zan.svg"/>110</span>  
                                    </div>  
                                </div>  
                            </div>  
                        </div>  
                        <div class="pian-btu">  
                            <div class="pian-bu">  
                                <div class="pian-sha"><img src="img/100sh.jpg" width="24" height="24" />不要放手</div>  
                            </div>  
                            <div class="pian-w">4天</div>  
                        </div>  
                    </li>  
                </ul>

                <ul class="ul3">  
                    <li id="pian">  
                        <div class="pian-img"><img src="img/图15.jpg" /></div>  
                        <div class="pian-font">  
                            <div class="pian-yu">  
                                <p>《德佑》品牌/包装设计</p>  
                                <div class="pian-zui">  
                                    <p>平面-品牌</p>  
                                </div>  
                                <div class="pian-nan">  
                                    <div class="yanjin1">  
                                        <span class="span1"><img src="img/yanjin (1).svg"/> 504</span>  
                                    </div>  
                                    <div class="pl">  
                                        <span class="span1"><img src="img/laji.svg"/> 8</span>  
                                    </div>  
                                    <div class="zan">  
                                        <span class="span1"><img src="img/-zan.svg"/>909</span>  
                                    </div>  
                                </div>  
                            </div>  
                        </div>  
                        <div class="pian-btu">  
                            <div class="pian-bu">  
                                <div class="pian-sha"><img src="img/图10sh.jpg" width="24" height="24" />爱</div>  
                            </div>  
                            <div class="pian-w">5天</div>  
                        </div>  
                    </li>  
                    <li id="pian2">  
                        <div class="pian-img"><img src="img/图16h.jpg" /></div>  
                        <div class="pian-font">  
                            <div class="pian-yu">  
                                <p>  
                                    <font size="2">《滚》</font>  
                                </p>  
                                <div class="pian-zui">  
                                    <p>动漫-短篇/格漫</p>  
                                </div>  
                                <div class="pian-nan">  
                                    <div class="yanjin1">  
                                        <span class="span1"><img src="img/yanjin (1).svg"/> 999</span>  
                                    </div>  
                                    <div class="pl">  
                                        <span class="span1"><img src="img/laji.svg"/> 9</span>  
                                    </div>  
                                    <div class="zan">  
                                        <span class="span1"><img src="img/-zan.svg"/>999</span>  
                                    </div>  
                                </div>  
                            </div>  
                        </div>  
                        <div class="pian-btu">  
                            <div class="pian-bu">  
                                <div class="pian-sha"><img src="img/8d09bb93091801c62c13ceb0f73437f3.jpg" width="24" height="24" />离我远点</div>  
                            </div>  
                            <div class="pian-w">24天</div>  
                        </div>  
                    </li>  
                    <li id="pian3">  
                        <div class="pian-img"><img src="img/图17h.jpg" /></div>  
                        <div class="pian-font">  
                            <div class="pian-yu">  
                                <p>  
                                    <font size="2">JOOCYEE 酵色-乐乐茶系列</font>  
                                </p>  
                                <div class="pian-zui">  
                                    <p>摄影-时尚/艺术摄影</p>  
                                </div>  
                                <div class="pian-nan">  
                                    <div class="yanjin1">  
                                        <span class="span1"><img src="img/yanjin (1).svg"/> 44</span>  
                                    </div>  
                                    <div class="pl">  
                                        <span class="span1"><img src="img/laji.svg"/> 9</span>  
                                    </div>  
                                    <div class="zan">  
                                        <span class="span1"><img src="img/-zan.svg"/>79</span>  
                                    </div>  
                                </div>  
                            </div>  
                        </div>  
                        <div class="pian-btu">  
                            <div class="pian-bu">  
                                <div class="pian-sha"><img src="img/01495c60a5c3c311013e3b7dc5fcff.jpg" width="24" height="24" />爱和恨</div>  
                            </div>  
                            <div class="pian-w">16时</div>  
                        </div>  
                    </li>  
                    <li id="pian4">  
                        <div class="pian-img"><img src="img/图17.jpg" /></div>  
                        <div class="pian-font">  
                            <div class="pian-yu">  
                                <p>  
                                    <font size="2">带你去2050的世界</font>  
                                </p>  
                                <div class="pian-zui">  
                                    <p>手工艺-手办/模玩</p>  
                                </div>  
                                <div class="pian-nan">  
                                    <div class="yanjin1">  
                                        <span class="span1"><img src="img/yanjin (1).svg"/> 554</span>  
                                    </div>  
                                    <div class="pl">  
                                        <span class="span1"><img src="img/laji.svg"/> 6</span>  
                                    </div>  
                                    <div class="zan">  
                                        <span class="span1"><img src="img/-zan.svg"/>667</span>  
                                    </div>  
                                </div>  
                            </div>  
                        </div>  
                        <div class="pian-btu">  
                            <div class="pian-bu">  
                                <div class="pian-sha"><img src="img/9f2cb14efd6e397a82f3078e73310f41.jpeg" width="24" height="24" />宏</div>  
                            </div>  
                            <div class="pian-w">6小时</div>  
                        </div>  
                    </li>  
                    <li id="pian5">  
                        <div class="pian-img"><img src="img/图18o\_100sh.jpg" width="260" height="195" /></div>  
                        <div class="pian-font">  
                            <div class="pian-yu">  
                                <p>  
                                    <font size="2">Hisense 海信电视 XDR功能展示用视频</font>  
                                </p>  
                                <div class="pian-zui">  
                                    <p>三维-场景</p>  
                                </div>  
                                <div class="pian-nan">  
                                    <div class="yanjin1">  
                                        <span class="span1"><img src="img/yanjin (1).svg"/> 214</span>  
                                    </div>  
                                    <div class="pl">  
                                        <span class="span1"><img src="img/laji.svg"/> 1</span>  
                                    </div>  
                                    <div class="zan">  
                                        <span class="span1"><img src="img/-zan.svg"/>674</span>  
                                    </div>  
                                </div>  
                            </div>  
                        </div>  
                        <div class="pian-btu">  
                            <div class="pian-bu">  
                                <div class="pian-sha"><img src="img/@260w\_\_100sh.jpg" width="24" height="24" />鲲</div>  
                            </div>  
                            <div class="pian-w">2时</div>  
                        </div>  
                    </li>  
                </ul>

                <ul class="ul3">  
                    <li id="pian">  
                        <div class="pian-img"><img src="img/图19h.jpg" /></div>  
                        <div class="pian-font">  
                            <div class="pian-yu">  
                                <p>无人机Rendering</p>  
                                <div class="pian-zui">  
                                    <p>三维-产品</p>  
                                </div>  
                                <div class="pian-nan">  
                                    <div class="yanjin1">  
                                        <span class="span1"><img src="img/yanjin (1).svg"/> 454</span>  
                                    </div>  
                                    <div class="pl">  
                                        <span class="span1"><img src="img/laji.svg"/> 3</span>  
                                    </div>  
                                    <div class="zan">  
                                        <span class="span1"><img src="img/-zan.svg"/>520</span>  
                                    </div>  
                                </div>  
                            </div>  
                        </div>  
                        <div class="pian-btu">  
                            <div class="pian-bu">  
                                <div class="pian-sha"><img src="img/图6sh.jpg" width="24" height="24" />暴龙</div>  
                            </div>  
                            <div class="pian-w">7分</div>  
                        </div>  
                    </li>  
                    <li id="pian2">  
                        <div class="pian-img"><img src="img/图21h.jpg" /></div>  
                        <div class="pian-font">  
                            <div class="pian-yu">  
                                <p>  
                                    <font size="2">蛋黄猫22职场篇</font>  
                                </p>  
                                <div class="pian-zui">  
                                    <p>动漫-网络表情</p>  
                                </div>  
                                <div class="pian-nan">  
                                    <div class="yanjin1">  
                                        <span class="span1"><img src="img/yanjin (1).svg"/> 904</span>  
                                    </div>  
                                    <div class="pl">  
                                        <span class="span1"><img src="img/laji.svg"/> 9</span>  
                                    </div>  
                                    <div class="zan">  
                                        <span class="span1"><img src="img/-zan.svg"/>999</span>  
                                    </div>  
                                </div>  
                            </div>  
                        </div>  
                        <div class="pian-btu">  
                            <div class="pian-bu">  
                                <div class="pian-sha"><img src="img/016.jpg" width="24" height="24" />地球人</div>  
                            </div>  
                            <div class="pian-w">18天</div>  
                        </div>  
                    </li>  
                    <li id="pian3">  
                        <div class="pian-img"><img src="img/图20.jpg" /></div>  
                        <div class="pian-font">  
                            <div class="pian-yu">  
                                <p>  
                                    <font size="2">你在一座城市做过最孤独的一件事...</font>  
                                </p>  
                                <div class="pian-zui">  
                                    <p>动漫-动画片</p>  
                                </div>  
                                <div class="pian-nan">  
                                    <div class="yanjin1">  
                                        <span class="span1"><img src="img/yanjin (1).svg"/> 867</span>  
                                    </div>  
                                    <div class="pl">  
                                        <span class="span1"><img src="img/laji.svg"/> 5</span>  
                                    </div>  
                                    <div class="zan">  
                                        <span class="span1"><img src="img/-zan.svg"/>199</span>  
                                    </div>  
                                </div>  
                            </div>  
                        </div>  
                        <div class="pian-btu">  
                            <div class="pian-bu">  
                                <div class="pian-sha"><img src="img/0sh.jpg" width="24" height="24" />喵星人</div>  
                            </div>  
                            <div class="pian-w">21时</div>  
                        </div>  
                    </li>  
                    <li id="pian4">  
                        <div class="pian-img"><img src="img/图22.jpg" width="260" height="195"/></div>  
                        <div class="pian-font">  
                            <div class="pian-yu">  
                                <p>  
                                    <font size="2">C4D+AE 动态视觉 电商广告</font>  
                                </p>  
                                <div class="pian-zui">  
                                    <p>《C4D+AE动态视觉综合提升班》</p>  
                                </div>  
                                <div class="pian-nan">  
                                    <div class="yanjin1">  
                                        <span class="span1"><img src="img/yanjin (1).svg"/> 14</span>  
                                    </div>  
                                    <div class="pl">  
                                        <span class="span1"><img src="img/laji.svg"/> 0</span>  
                                    </div>  
                                    <div class="zan">  
                                        <span class="span1"><img src="img/-zan.svg"/>97</span>  
                                    </div>  
                                </div>  
                            </div>  
                        </div>  
                        <div class="pian-btu">  
                            <div class="pian-bu">  
                                <div class="pian-sha"><img src="img/图10sh.jpg" width="24" height="24" />山人</div>  
                            </div>  
                            <div class="pian-w">3小时</div>  
                        </div>  
                    </li>  
                    <li id="pian5">  
                        <div class="pian-img"><img src="img/图23.jpg" width="260" height="195" /></div>  
                        <div class="pian-font">  
                            <div class="pian-yu">  
                                <p>  
                                    <font size="2">孩子的鞋子<UpSheep>儿童羊毛...</font>  
                                </p>  
                                <div class="pian-zui">  
                                    <p>网页-电商</p>  
                                </div>  
                                <div class="pian-nan">  
                                    <div class="yanjin1">  
                                        <span class="span1"><img src="img/yanjin (1).svg"/> 294</span>  
                                    </div>  
                                    <div class="pl">  
                                        <span class="span1"><img src="img/laji.svg"/> 0</span>  
                                    </div>  
                                    <div class="zan">  
                                        <span class="span1"><img src="img/-zan.svg"/>449</span>  
                                    </div>  
                                </div>  
                            </div>  
                        </div>  
                        <div class="pian-btu">  
                            <div class="pian-bu">  
                                <div class="pian-sha"><img src="img/图八.jpg" width="24" height="24" />绝望</div>  
                            </div>  
                            <div class="pian-w">7天</div>  
                        </div>  
                    </li>  
                </ul>

                <ul class="ul3">  
                    <li id="pian">  
                        <div class="pian-img"><img src="img/图24h.jpg" /></div>  
                        <div class="pian-font">  
                            <div class="pian-yu">  
                                <p>一文读懂智能汽车HMI设计...</p>  
                                <div class="pian-zui">  
                                    <p>文章</p>  
                                </div>  
                                <div class="pian-nan">  
                                    <div class="yanjin1">  
                                        <span class="span1"><img src="img/yanjin (1).svg"/> 134</span>  
                                    </div>  
                                    <div class="pl">  
                                        <span class="span1"><img src="img/laji.svg"/> 3</span>  
                                    </div>  
                                    <div class="zan">  
                                        <span class="span1"><img src="img/-zan.svg"/>900</span>  
                                    </div>  
                                </div>  
                            </div>  
                        </div>  
                        <div class="pian-btu">  
                            <div class="pian-bu">  
                                <div class="pian-sha"><img src="img/图二.jpg" width="24" height="24" />站酷规划</div>  
                            </div>  
                            <div class="pian-w">2天</div>  
                        </div>  
                    </li>  
                    <li id="pian2">  
                        <div class="pian-img"><img src="img/图25h.jpg" /></div>  
                        <div class="pian-font">  
                            <div class="pian-yu">  
                                <p>  
                                    <font size="2">2021腾讯QQ飞车发布会</font>  
                                </p>  
                                <div class="pian-zui">  
                                    <p>企业官网</p>  
                                </div>  
                                <div class="pian-nan">  
                                    <div class="yanjin1">  
                                        <span class="span1"><img src="img/yanjin (1).svg"/> 54</span>  
                                    </div>  
                                    <div class="pl">  
                                        <span class="span1"><img src="img/laji.svg"/> 9</span>  
                                    </div>  
                                    <div class="zan">  
                                        <span class="span1"><img src="img/-zan.svg"/>29</span>  
                                    </div>  
                                </div>  
                            </div>  
                        </div>  
                        <div class="pian-btu">  
                            <div class="pian-bu">  
                                <div class="pian-sha"><img src="img/图21h.jpg" width="24" height="24" />腾讯</div>  
                            </div>  
                            <div class="pian-w">11天</div>  
                        </div>  
                    </li>  
                    <li id="pian3">  
                        <div class="pian-img"><img src="img/图26h.jpg" /></div>  
                        <div class="pian-font">  
                            <div class="pian-yu">  
                                <p>  
                                    <font size="2">WISEMIND - 和平精英 x ASTON...</font>  
                                </p>  
                                <div class="pian-zui">  
                                    <p>平面设计</p>  
                                </div>  
                                <div class="pian-nan">  
                                    <div class="yanjin1">  
                                        <span class="span1"><img src="img/yanjin (1).svg"/> 84</span>  
                                    </div>  
                                    <div class="pl">  
                                        <span class="span1"><img src="img/laji.svg"/> 9</span>  
                                    </div>  
                                    <div class="zan">  
                                        <span class="span1"><img src="img/-zan.svg"/>9</span>  
                                    </div>  
                                </div>  
                            </div>  
                        </div>  
                        <div class="pian-btu">  
                            <div class="pian-bu">  
                                <div class="pian-sha"><img src="img/3015c205f995828b157518e6e5d6a9ff.jpg" width="24" height="24" />渝</div>  
                            </div>  
                            <div class="pian-w">2小时</div>  
                        </div>  
                    </li>  
                    <li id="pian4">  
                        <div class="pian-img"><img src="img/图27.jpg" /></div>  
                        <div class="pian-font">  
                            <div class="pian-yu">  
                                <p>  
                                    <font size="2">使命召唤。</font>  
                                </p>  
                                <div class="pian-zui">  
                                    <p>平面-海报</p>  
                                </div>  
                                <div class="pian-nan">  
                                    <div class="yanjin1">  
                                        <span class="span1"><img src="img/yanjin (1).svg"/> 124</span>  
                                    </div>  
                                    <div class="pl">  
                                        <span class="span1"><img src="img/laji.svg"/> 6</span>  
                                    </div>  
                                    <div class="zan">  
                                        <span class="span1"><img src="img/-zan.svg"/>7</span>  
                                    </div>  
                                </div>  
                            </div>  
                        </div>  
                        <div class="pian-btu">  
                            <div class="pian-bu">  
                                <div class="pian-sha"><img src="img/图16h.jpg" width="24" height="24" />fd</div>  
                            </div>  
                            <div class="pian-w">4小时</div>  
                        </div>  
                    </li>  
                    <li id="pian5">  
                        <div class="pian-img"><img src="img/图28h.jpg" width="260" height="195" /></div>  
                        <div class="pian-font">  
                            <div class="pian-yu">  
                                <p>  
                                    <font size="2">樱花派对,落樱缤纷</font>  
                                </p>  
                                <div class="pian-zui">  
                                    <p>工业/产品-生活用品</p>  
                                </div>  
                                <div class="pian-nan">  
                                    <div class="yanjin1">  
                                        <span class="span1"><img src="img/yanjin (1).svg"/> 24</span>  
                                    </div>  
                                    <div class="pl">  
                                        <span class="span1"><img src="img/laji.svg"/> 0</span>  
                                    </div>  
                                    <div class="zan">  
                                        <span class="span1"><img src="img/-zan.svg"/>99</span>  
                                    </div>  
                                </div>  
                            </div>  
                        </div>  
                        <div class="pian-btu">  
                            <div class="pian-bu">  
                                <div class="pian-sha"><img src="img/nav-upload.svg" width="24" height="24" />你的数学老师</div>  
                            </div>  
                            <div class="pian-w">4天</div>  
                        </div>  
                    </li>  
                </ul>

                <ul class="ul3">  
                    <li id="pian">  
                        <div class="pian-img"><img src="img/图29.jpg" /></div>  
                        <div class="pian-font">  
                            <div class="pian-yu">  
                                <p>云飞的小公园</p>  
                                <div class="pian-zui">  
                                    <p>插画-儿童插画</p>  
                                </div>  
                                <div class="pian-nan">  
                                    <div class="yanjin1">  
                                        <span class="span1"><img src="img/yanjin (1).svg"/> 34</span>  
                                    </div>  
                                    <div class="pl">  
                                        <span class="span1"><img src="img/laji.svg"/> 3</span>  
                                    </div>  
                                    <div class="zan">  
                                        <span class="span1"><img src="img/-zan.svg"/>59</span>  
                                    </div>  
                                </div>  
                            </div>  
                        </div>  
                        <div class="pian-btu">  
                            <div class="pian-bu">  
                                <div class="pian-sha"><img src="img/图14h.jpg" width="24" height="24" />鱼子</div>  
                            </div>  
                            <div class="pian-w">81天</div>  
                        </div>  
                    </li>  
                    <li id="pian2">  
                        <div class="pian-img"><img src="img/30.jpg" /></div>  
                        <div class="pian-font">  
                            <div class="pian-yu">  
                                <p>  
                                    <font size="2">鱼子记录·2021.4.30~5.4,济南&...</font>  
                                </p>  
                                <div class="pian-zui">  
                                    <p>摄影-人文/纪实摄影</p>  
                                </div>  
                                <div class="pian-nan">  
                                    <div class="yanjin1">  
                                        <span class="span1"><img src="img/yanjin (1).svg"/> 724</span>  
                                    </div>  
                                    <div class="pl">  
                                        <span class="span1"><img src="img/laji.svg"/> 9</span>  
                                    </div>  
                                    <div class="zan">  
                                        <span class="span1"><img src="img/-zan.svg"/>39</span>  
                                    </div>  
                                </div>  
                            </div>  
                        </div>  
                        <div class="pian-btu">  
                            <div class="pian-bu">  
                                <div class="pian-sha"><img src="img/30.jpg" width="24" height="24" />鱼儿</div>  
                            </div>  
                            <div class="pian-w">5分钟</div>  
                        </div>  
                    </li>  
                    <li id="pian3">  
                        <div class="pian-img"><img src="img/图31.jpg" /></div>  
                        <div class="pian-font">  
                            <div class="pian-yu">  
                                <p>  
                                    <font size="2">外网大神都在用的“液态艺术”海...</font>  
                                </p>  
                                <div class="pian-zui">  
                                    <p>文章-多领域</p>  
                                </div>  
                                <div class="pian-nan">  
                                    <div class="yanjin1">  
                                        <span class="span1"><img src="img/yanjin (1).svg"/> 4</span>  
                                    </div>  
                                    <div class="pl">  
                                        <span class="span1"><img src="img/laji.svg"/> 9</span>  
                                    </div>  
                                    <div class="zan">  
                                        <span class="span1"><img src="img/-zan.svg"/>7</span>  
                                    </div>  
                                </div>  
                            </div>  
                        </div>  
                        <div class="pian-btu">  
                            <div class="pian-bu">  
                                <div class="pian-sha"><img src="img/图11h.jpg" width="24" height="24" />拆白</div>  
                            </div>  
                            <div class="pian-w">7小时</div>  
                        </div>  
                    </li>  
                    <li id="pian4">  
                        <div class="pian-img"><img src="img/图32h.jpg" /></div>  
                        <div class="pian-font">  
                            <div class="pian-yu">  
                                <p>  
                                    <font size="2">【POPIC】美美的睡醒后,做什么呢?</font>  
                                </p>  
                                <div class="pian-zui">  
                                    <p>三维-动画/影视</p>  
                                </div>  
                                <div class="pian-nan">  
                                    <div class="yanjin1">  
                                        <span class="span1"><img src="img/yanjin (1).svg"/> 124</span>  
                                    </div>  
                                    <div class="pl">  
                                        <span class="span1"><img src="img/laji.svg"/> 6</span>  
                                    </div>  
                                    <div class="zan">  
                                        <span class="span1"><img src="img/-zan.svg"/>9</span>  
                                    </div>  
                                </div>  
                            </div>  
                        </div>  
                        <div class="pian-btu">  
                            <div class="pian-bu">  
                                <div class="pian-sha"><img src="img/图32h.jpg" width="24" height="24" />梦琪</div>  
                            </div>  
                            <div class="pian-w">3小时</div>  
                        </div>  
                    </li>  
                    <li id="pian5">  
                        <div class="pian-img"><img src="img/图33.jpg" width="260" height="195" /></div>  
                        <div class="pian-font">  
                            <div class="pian-yu">  
                                <p>  
                                    <font size="2">《北瓜·杂集》 界面风格祭</font>  
                                </p>  
                                <div class="pian-zui">  
                                    <p>UI-APP界面</p>  
                                </div>  
                                <div class="pian-nan">  
                                    <div class="yanjin1">  
                                        <span class="span1"><img src="img/yanjin (1).svg"/> 24</span>  
                                    </div>  
                                    <div class="pl">  
                                        <span class="span1"><img src="img/laji.svg"/> 0</span>  
                                    </div>  
                                    <div class="zan">  
                                        <span class="span1"><img src="img/-zan.svg"/>49</span>  
                                    </div>  
                                </div>  
                            </div>  
                        </div>  
                        <div class="pian-btu">  
                            <div class="pian-bu">  
                                <div class="pian-sha"><img src="img/@260w\_\_100sh.jpg" width="24" height="24" />子猫</div>  
                            </div>  
                            <div class="pian-w">4天</div>  
                        </div>  
                    </li>  
                </ul>  
            </div>  
                            <div id="div4">  
                <div class="zhenfangxing">  
                    <div class="pian-zheng"> < </div>  
                    <div class="pian-zheng"> 1 </div>  
                    <div class="pian-zheng"> 2 </div>  
                    <div class="pian-zheng"> 3 </div>  
                    <div class="pian-zheng"> 4 </div>  
                    <div class="pian-zheng"> 5 </div>  
                    <div class="pian-zheng"> 6 </div>  
                    <div class="pian-zheng"> 7 </div>  
                    <div class="pian-zheng">...</div>  
                    <div class="pian-zheng"> 99 </div>  
                    <div class="pian-zheng"> > </div>  
                </div>  
        </div>  
        <div id="footer">  
            <div class="div5">  
                <div class="div6">  
                    <div class="div7"></div>  
                </div>  
                <div class="div9"><img src="img/长图2.jpg" width="680" height="115"/></div>  
                <div class="div8"><img src="img/长图1.jpeg" width="680" height="115"/></div>  
            </div>  
            <div class="div10">  
                <span>推荐课程</span>  
                <span class="huan">换一换</span>  
            </div>  
            <div class="div11">  
                <ul class="div12">  
                    <li><img src="img/图34.jpg" width="260" height="145.99"/></li>  
                    <li><img src="img/1c\_1e\_1o\_100sh.jpg" width="260" height="145.99"/></li>  
                    <li><img src="img/30.jpg" width="260" height="145.99"/></li>  
                    <li><img src="img/图11h.jpg" width="260" height="145.99"/></li>  
                    <li><img src="img/01495c60a5c3c311013e3b7dc5fcff.jpg"width="260" height="145.99"/></li>  
                </ul>  
                <ul class="div14">  
                    <li>臆想画:创意图形的拓展与剪影</li>  
                    <li>Logo·字体·品牌·包装设计实战班(即</li>  
                    <li>UI设计进阶班(1V1作品辅导)</li>  
                    <li>电商设计系统实训班(即将停售)</li>  
                    <li>C4D+AE动态视觉综合提升班</li>  
                </ul>  
            </div>  
            <div class="div13">  
                <div class="div15">  
                    <div class="div16">  
                        <a href="">移动版</a>  
                        <a href="">关于我们</a>  
                        <a href="">用户协议</a>  
                        <a href="">隐私政策</a>  
                        <a href="">侵权申诉</a>  
                        <a href="">企业服务</a>  
                        <a href="">帮助中心</a>  
                        <a href="">联系我们</a>  
                        <a href="">中文</a>  
                        <a href="">English</a>  
                        <div class="ass">  
                            <img src="img/下载 (1111).svg" "width="25"" "height="21""/>  
                            <img src="img/下载 (微博).svg" "width="25"" "height="21"" class="ass1"/>  
                        </div>  
                    </div>  
                    <div class="div17">  
                        <span class="police">  
                            <a href="">京公网安备11010502000501号</a>  
                        </span>  
                        <span >丨</span>  
                        <a href="">广播电视节目制作经营许可证(京)字第06990号</a>  
                        <span >丨</span>  
                        <a href="">京ICP备11017824号</a>  
                        <span >丨</span>  
                        <a href="">京ICP证130164号</a>  
                        <span >丨</span>  
                        <a href="">人力资源服务许可证</a>  
                    </div>  
                    <div class="ass2">  
                        <span>  
                            <a href="">营业执照</a>  
                        </span>  
                        <span >丨</span>  
                        <a href="">网上有害信息举报专区</a>  
                        <span >丨</span>  
                        <a href="">不良信息举报电话:010-56538658</a>  
                        <span >丨</span>  
                        <a href="">举报邮箱  jubao@zcool.com.cn</a>  
                        <span >丨</span>  
                        <a href="">联系电话:010-56538600</a>  
                    </div>  
                </div>  
            </div>  
        </div>  
</body>