前端學習-佈局練習

效果圖:

<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-10-02 10:16:08
 * @LastEditTime: 2019-10-02 19:54:30
 * @LastEditors: Please set LastEditors
 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>imooc</title>
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style-type: none;
        }

        /* header */

        .header {
            height: 60px;
            box-shadow: 0 1px 2px whitesmoke;
            min-width: 1200px;
        }

        .header img {
            float: left;
        }

        .header li {
            height: 60px;
            line-height: 60px;
            color: #4D555D;
        }

        .header_menu {
            float: left;
        }

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

        .header_menu li:nth-child(1) {
            margin-left: 0;
        }

        li:hover {
            color: black;
            cursor: pointer;
        }

        .header_menu_right {
            float: right;
        }

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

        /* banner_div */
        .banner_div {
            padding: 20px;
            box-shadow: 0 1px 2px whitesmoke;
            background: #f6f5f9;
        }

        .banner {
            margin: 0 auto;
            width: 1150px;
            border-radius: 8px;
            box-shadow: 0 1px 2px #2B333B;
        }

        .banner ul {
            float: left;
            background: #2B333B;
            border-top-left-radius: 8px;
            border-bottom-left-radius: 8px;
            width: 200px;
            padding: 10px 0 10px 10px;
        }

        .banner li {
            height: 50px;
            line-height: 50px;
            font-size: 14px;
            color: #93979C;
            padding-left: 20px;
            border-top-left-radius: 8px;
            border-bottom-left-radius: 8px;
        }

        .banner li:hover {
            color: white;
            background: #6b7176;
        }

        .banner img {
            width: 940px;
            height: 370px;
            display: block;
            border-top-right-radius: 8px;
            border-bottom-right-radius: 8px;
        }

        .dj {
            margin: 20px auto;
            width: 1150px;
        }

        .dj span:nth-child(1) {
            font-size: 24px;
            font-weight: bold;
        }

        .dj span:nth-child(2) {
            font-size: 14px;
            color: #6b7176;
        }

        .dj_ul {
            margin: 20px auto;
            width: 1150px;
            overflow: hidden;
        }

        .dj_ul li {
            float: left;
            background: #f3f5f6;
            padding: 15px 10px;
            width: 190px;
            border-radius: 5px;
            margin-right: 20px;
        }

        .dj_ul:nth-child(5) {
            clear: both;
        }

        .dj_ul li:hover {
            box-shadow: 2px 2px 2px 2px #93979C;

        }

        .dj_ul li img {
            width: 40px;
            height: 40px;
            float: left;
            margin-right: 10px;
        }

        .dj_ul li p:nth-child(2) {
            font-weight: bold;
            font-size: 16px;
        }

        .dj_ul li p:nth-child(3) {
            font-size: 12px;
        }

        .kc {
            padding: 20px;
            box-shadow: 0 1px 2px whitesmoke;
            background: #f8fafc;
        }

        .kc .dj:nth-child(1) {
            font-size: 24px;
            font-weight: bold;
        }

        .kc ul {
            margin: 20px auto;
            width: 1150px;
            overflow: hidden;
        }

        .kc ul li {
            float: left;
            margin-top: 20px;
            margin-right: 30px;
        }

        .kc ul li div img {
            width: 250px;
            border-radius: 5px;
        }

        .kc ul li div span {
            position: absolute;
            margin-left: -240px;
            margin-top: 110px;
            background: #2B333B;
            color: white;
            font-size: 10px;
            padding: 3px 5px;
            border-radius: 2px;
        }

        .pa {
            font-weight: bold;
            max-width: 250px;
            max-lines: 2;
            height: 40px;
            line-height: 20px;
            overflow: hidden;
        }

        .pa:hover {
            color: rebeccapurple;
        }

        .bb {
            color: #93979C;
            font-size: 12px;
        }

        .bc {
            color: #2B333B;
            font-size: 12px;
        }
    </style>
</head>

<body>
    <header class="header">
        <img style="height: 60px;" src="https://www.imooc.com/static/img/index/logo.png" alt="immoc">
        <ul class="header_menu">
            <li>免費課程</li>
            <li>實戰課程</li>
            <li>就業班</li>
            <li>專欄</li>
            <li>猿問</li>
            <li>手記</li>
        </ul>
        <ul class="header_menu_right">
            <li>下載APP</li>
            <li><i class="fa cart-plus"></i>購物車</li>
            <li><i class="fa ofbell"></i></li>
            <li>我的課程</li>
            <li>頭像</li>
        </ul>
    </header>

    <div class="banner_div">
        <div class="banner">
            <ul>
                <li>前沿/區塊鏈/人工智能</li>
                <li>前端/小程序/JS</li>
                <li>後端/JAVA/Python</li>
                <li>移動/Android/iOS</li>
                <li>雲計算/大數據/容器</li>
                <li>運維/測試/數據庫</li>
                <li>UI設計/3D動畫/遊戲</li>
            </ul>
            <img src="https://img.mukewang.com/5d90545e0001e28118720764.jpg" alt="提示文字">
        </div>
        <div class="dj">
            <span>就業班</span>
            <span>零基礎快速就業</span>
        </div>
        <ul class="dj_ul">
            <li>
                <img
                    src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1569998487514&di=7d7f1aaea9578652772a47c1119c383a&imgtype=0&src=http%3A%2F%2Fwww.logicsolutions.com%2Fwp-content%2Fuploads%2F2015%2F06%2Fhtml5.png">
                <p>Web前端工程師</p>
                <p>從未接觸經驗也可以學好</p>
            </li>
            <li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1569998627337&di=8f706a9abfa4dd66e1fe45d60367b3cb&imgtype=0&src=http%3A%2F%2Fpic.51yuansu.com%2Fpic2%2Fcover%2F00%2F31%2F76%2F5810c9866ceca_610.jpg"
                    alt="">
                <p>Web前端工程師</p>
                <p>從未接觸經驗也可以學好</p>
            </li>
            <li><img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2246437286,3797043391&fm=26&gp=0.jpg"
                    alt="">
                <p>Web前端工程師</p>
                <p>從未接觸經驗也可以學好</p>
            </li>
            <li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1569998664542&di=45fa79b0cd7f66c6e385f42bb642f719&imgtype=0&src=http%3A%2F%2Fattach.bbs.miui.com%2Fforum%2F201506%2F28%2F132730d7g9xbx9uo7qxrog.jpg"
                    alt="">
                <p>Web前端工程師</p>
                <p>從未接觸經驗也可以學好</p>
            </li>
            <li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1569998680036&di=5216ff5dd448f05b2e4571c354f4b778&imgtype=0&src=http%3A%2F%2Fimage.flaticon.com%2Ficons%2Fpng%2F512%2F919%2F919830.png"
                    alt="">
                <p>Web前端工程師</p>
                <p>從未接觸經驗也可以學好</p>
            </li>
        </ul>
        <div class="dj">
            <span>職場進階</span>
            <span>1年以上開發經驗系統成長</span>
        </div>
    </div>

    <div class="kc">
        <div class="dj">
            <p>課程推薦</p>
        </div>
        <ul>
            <li>
                <div>
                    <img src="https://img4.mukewang.com/szimg/5d4ceaef09c3cb6612000676-360-202.png">
                    <span>Java</span>
                </div>
                <p><a class="pa">Java併發編程精講</a></p>
                <div class="bb">中級 999 評分:10.0</div>
                <div class="bc">$348.0</div>
            </li>
            <li>
                <div>
                    <img src="https://img1.mukewang.com/szimg/5ad05dc00001eae705400300-360-202.jpg">
                    <span>算法</span>
                </div>
                <!--  更適合0算法基礎入門到進階（java版） -->
                <p><a class="pa">玩轉算法系列--玩轉數據結構</a></p>
                <div class="bb">中級 999 評分:10.0</div>
                <div class="bc">$348.0</div>
            </li>
            <li>
                <div>
                    <img src="https://img4.mukewang.com/szimg/5d4ceaef09c3cb6612000676-360-202.png">
                    <span>Java</span>
                </div>
                <p><a class="pa">Java併發編程精講</a></p>
                <div class="bb">中級 999 評分:10.0</div>
                <div class="bc">$348.0</div>
            </li>
            <li>
                <div>
                    <img src="https://img4.mukewang.com/szimg/5d4ceaef09c3cb6612000676-360-202.png">
                    <span>Java</span>
                </div>
                <p><a class="pa">Java併發編程精講</a></p>
                <div class="bb">中級 999 評分:10.0</div>
                <div class="bc">$348.0</div>
            </li>
            <li>
                    <div>
                        <img src="https://img4.mukewang.com/szimg/5d4ceaef09c3cb6612000676-360-202.png">
                        <span>Java</span>
                    </div>
                    <p><a class="pa">Java併發編程精講</a></p>
                    <div class="bb">中級 999 評分:10.0</div>
                    <div class="bc">$348.0</div>
                </li>
                <li>
                    <div>
                        <img src="https://img1.mukewang.com/szimg/5ad05dc00001eae705400300-360-202.jpg">
                        <span>算法</span>
                    </div>
                    <!--  更適合0算法基礎入門到進階（java版） -->
                    <p><a class="pa">玩轉算法系列--玩轉數據結構</a></p>
                    <div class="bb">中級 999 評分:10.0</div>
                    <div class="bc">$348.0</div>
                </li>
                <li>
                    <div>
                        <img src="https://img4.mukewang.com/szimg/5d4ceaef09c3cb6612000676-360-202.png">
                        <span>Java</span>
                    </div>
                    <p><a class="pa">Java併發編程精講</a></p>
                    <div class="bb">中級 999 評分:10.0</div>
                    <div class="bc">$348.0</div>
                </li>
                <li>
                    <div>
                        <img src="https://img4.mukewang.com/szimg/5d4ceaef09c3cb6612000676-360-202.png">
                        <span>Java</span>
                    </div>
                    <p><a class="pa">Java併發編程精講</a></p>
                    <div class="bb">中級 999 評分:10.0</div>
                    <div class="bc">$348.0</div>
                </li>
        </ul>
    </div>

    <footer>

    </footer>
</body>

</html>

練習中知識

設置列表無樣式

list-style-type: none;

設置陰影

box-shadow: 0 1px 2px whitesmoke;

設置圓角

border-radius: 8px;

清除浮動

overflow: hidden;

又是滿滿的一天,搞起!

前端學習-佈局練習

練習中知識

設置列表無樣式

設置陰影

設置圓角

清除浮動

【SQL進階】CASE語句的使用

npm error Cannot read properties of null (reading 'isDescendantOf')

前端新手的初級前端面試學習筆記(有答案,有些我自己覺得可以)

前端學習-React基礎

前端學習-React基礎1-傳值

前端學習-CSS3學習第一步

學習筆記之ANR_OOM

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結