web练习-优快云博客

本文链接：https://blog.youkuaiyun.com/lcanfly/article/details/145352953

HTML部分：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>school</title>
    <link rel="stylesheet" href="/css/reset.css">
</head>

<body>
    <header class="header">
        <div class="header_logo">
            <svg t="1737606786151" class="icon" viewBox="0 0 1025 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6821" width="200" height="200"><path d="M1020.080737 463.71018l-108.698654-27.545356c-2.060939-0.5137-4.375657-2.703575-4.956895-4.889357l-11.904121-44.212968c-0.515746-2.187829 0.254803-5.212722 1.929955-6.822382l80.252789-78.192873c1.607614-1.674129 2.058892-4.50664 0.964978-6.437619l-44.277436-76.518744c-1.093914-1.995447-3.730974-3.024893-6.049786-2.444679l-108.054995 30.632671c-2.057869 0.580215-5.14723-0.193405-6.693446-1.737574l-31.209816-31.277354c-1.548262-1.673106-2.448772-4.762467-1.740644-6.821359l30.891568-107.990526c0.5137-2.187829-0.514723-4.761444-2.573615-5.983271l-76.391854-44.342927c-1.930979-1.159406-4.826935-0.773619-6.435573 0.835018l-78.387301 80.252789c-1.478677 1.545192-4.568039 2.446725-6.819313 1.803066l-44.795229-12.100596c-2.249227-0.577145-4.502547-2.895957-4.953825-5.084808l-27.608801-108.697631c-0.512676-2.058892-2.831488-3.859911-5.018294-3.859911l-88.426959 0c-2.186805 0-4.505617 1.801019-5.084808 3.859911L436.43293 114.832352c-0.451278 2.188852-2.703575 4.50664-4.892427 5.084808l-44.920072 12.100596c-2.188852 0.514723-5.278213-0.257873-6.819313-1.803066L301.412794 49.960879c-1.545192-1.608637-4.50664-1.995447-6.436596-0.835018l-76.326363 44.342927c-2.059915 1.221828-2.960425 3.795443-2.508123 5.983271l30.826076 107.990526c0.64366 2.058892-0.128937 5.148253-1.804089 6.821359l-31.146371 31.277354c-1.610684 1.544169-4.699022 2.317789-6.823406 1.737574l-107.926058-30.632671c-2.252297-0.579191-4.825912 0.449231-5.983271 2.444679l-44.342927 76.518744c-1.094938 1.929955-0.641613 4.762467 0.964978 6.437619l80.316234 78.192873c1.545192 1.609661 2.446725 4.63353 1.865487 6.822382l-11.904121 44.212968c-0.51677 2.186805-2.895957 4.375657-5.02034 4.889357L6.40078 463.71018c-2.058892 0.514723-3.859911 2.895957-3.859911 5.083785l0 88.361467c0 2.188852 1.801019 4.632507 3.859911 5.146207l108.764146 27.54638c2.124384 0.578168 4.502547 2.702552 5.02034 5.019317l11.904121 44.085054c0.581238 2.186805-0.320295 5.341658-1.865487 6.692423l-80.316234 78.450746c-1.607614 1.478677-2.059915 4.440126-0.964978 6.370081l44.342927 76.390831c1.157359 2.060939 3.794419 3.15383 5.983271 2.574638l107.926058-30.697139c2.124384-0.64366 5.212722 0.192382 6.823406 1.736551l31.146371 31.404244c1.675152 1.546216 2.447748 4.570085 1.804089 6.693446l-30.826076 107.993596c-0.451278 2.185782 0.448208 4.952802 2.508123 6.046716l76.326363 44.342927c1.929955 1.157359 4.891404 0.707105 6.436596-0.964978l78.388325-80.059384c1.541099-1.609661 4.630461-2.446725 6.819313-1.865487l44.920072 12.098549c2.188852 0.579191 4.441149 2.832512 4.892427 4.89038l27.607778 108.760053c0.578168 2.12336 2.898003 3.927449 5.084808 3.927449l88.426959 0c2.187829 0 4.505617-1.804089 5.018294-3.927449l27.608801-108.760053c0.450255-2.058892 2.704598-4.311189 4.953825-4.89038l44.795229-12.098549c2.251274-0.580215 5.340635 0.255827 6.819313 1.865487l78.387301 80.059384c1.608637 1.673106 4.504594 2.122337 6.435573 0.964978l76.391854-44.342927c2.058892-1.093914 3.087315-3.860934 2.573615-6.046716l-30.891568-107.993596c-0.707105-2.12336 0.192382-5.14723 1.740644-6.693446l31.209816-31.404244c1.546216-1.544169 4.635577-2.38021 6.693446-1.736551l108.054995 30.697139c2.254344 0.579191 4.955872-0.5137 6.049786-2.574638l44.277436-76.390831c1.092891-1.929955 0.642636-4.89038-0.964978-6.370081l-80.252789-78.450746c-1.675152-1.350764-2.445702-4.505617-1.929955-6.692423l11.904121-44.085054c0.580215-2.317789 2.895957-4.441149 4.956895-5.019317l108.698654-27.54638c2.124384-0.5137 3.989871-2.958378 3.989871-5.146207l0-88.361467C1024.071631 466.606137 1022.205121 464.224904 1020.080737 463.71018zM513.272993 845.535399c-184.186929 0-333.945745-150.013619-333.945745-334.137103 0-184.123484 149.758816-334.073658 333.945745-334.073658 184.317912 0 334.077751 149.950174 334.077751 334.073658C847.349721 695.52178 697.590905 845.535399 513.272993 845.535399z" fill="#333333" p-id="6822"></path><path d="M703.060477 658.901745c29.991058-39.706327 47.88152-89.261976 47.88152-142.933363 0-88.748277-23.489994-142.680607-95.440699-190.237739 0 0-7.91425 76.840062-32.56672 100.008738 0 0 33.015951 46.01501 33.015951 90.229001 0 32.434713-10.875698 62.425771-29.27986 86.49291l0 0c-4.183276 6.888897-6.759961 15.124466-6.759961 23.877827 0 26.322505 21.239743 47.494711 47.433312 47.494711C679.82631 673.833829 694.566012 666.817018 703.060477 658.901745L703.060477 658.901745z" fill="#333333" p-id="6823"></path><path d="M608.395444 330.62c0 52.579519-42.606377 95.118358-95.122451 95.118358-52.385091 0-94.990444-42.538839-94.990444-95.118358 0-12.420891 2.382257-24.326035 6.823406-35.266202 27.28646-10.94119 57.017598-16.863063 88.166015-16.863063 31.213909 0 77.036537 12.743232 88.361467 16.927531C601.633437 295.418266 608.395444 318.199109 608.395444 330.62z" fill="#333333" p-id="6824"></path><path d="M459.086883 453.927373 440.423825 690.630377l72.848145 57.020668 72.981175-57.020668L568.490595 459.141118c-16.153912 8.172123-35.71748 7.979742-54.895261 7.979742C493.967298 467.12086 475.433176 462.292901 459.086883 453.927373z" fill="#333333" p-id="6825"></path><path d="M323.294151 659.032728c-30.247908-39.514969-48.269353-89.007173-48.39522-142.744052-0.38681-88.683808 22.779819-142.677537 94.604658-190.559057 0 0 8.172123 76.840062 32.821523 99.881848 0 0-32.632211 46.077432-32.437783 90.355891 0.128937 32.434713 11.007705 62.36028 29.607318 86.364997l0 0c4.117784 6.887874 6.820336 15.059997 6.820336 23.877827 0.128937 26.254967-21.109784 47.493687-47.236837 47.622624C346.591763 673.961742 331.658655 667.01247 323.294151 659.032728L323.294151 659.032728z" fill="#333333" p-id="6826"></path></svg>
        </div>
        <div class="item">
            <a href="#1"class="item_text">学校新闻</a>
            <a href="#2"class="item_text">学校概况</a>
            <a href="#3"class="item_text">院系设计</a>
            <a href="#4"class="item_text">科学研究</a>
            <a href="#5"class="item_text">招生就业</a>
            <a href="#6"class="item_text">合作交流</a>
        </div>
        <div class="field_search">
            <div class="search">
                <input type="text" class="search_box">
                <button class="sousuo"><svg t="1737695869192" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2799" width="200" height="200"><path d="M929.4 872.9L775.4 719c23.3-28.6 42.4-60.2 56.8-94.4 20.3-48.1 30.7-99.2 30.7-151.8S852.6 369.1 832.3 321c-19.6-46.4-47.8-88.1-83.6-124-35.8-35.8-77.5-63.9-124-83.6-48.1-20.3-99.2-30.7-151.8-30.7S369.2 93 321.1 113.4c-46.4 19.6-88.1 47.8-124 83.6s-63.9 77.5-83.6 124c-20.3 48.1-30.7 99.2-30.7 151.8s10.3 103.7 30.7 151.8c19.6 46.4 47.8 88.1 83.6 124s77.5 63.9 124 83.6c48.1 20.3 99.2 30.7 151.8 30.7s103.7-10.3 151.8-30.7c34.1-14.4 65.6-33.4 94.1-56.6l153.9 153.9c7.8 7.8 18 11.7 28.3 11.7s20.5-3.9 28.3-11.7c15.7-15.7 15.7-41 0.1-56.6z m-456.5-90.1c-82.8 0-160.7-32.2-219.2-90.8s-90.8-136.4-90.8-219.2 32.2-160.7 90.8-219.2 136.4-90.8 219.2-90.8 160.7 32.2 219.2 90.8c58.6 58.6 90.8 136.4 90.8 219.2S750.7 633.5 692.1 692c-58.5 58.6-136.4 90.8-219.2 90.8z" p-id="2800"></path></svg></button>
            </div>
        </div>
    </header>

    <div class="table-top">
            <div class="img"><a href="1"><img src="https://www.tsinghua.edu.cn/__local/4/54/7D/0533CB268686466FC8EECD88FC0_8A9D356B_95110.jpg" ></a></div>
    </div>
    <div class="box">
        <div class="events">
            <div class="title">
                <div>events</div>
                <h2>校园看点</h2>
            </div>
            <p>大师讲座、学术论坛、文体活动、演出展览…… 365天精彩活动，邀您共见。</p>
            <div class="more"><a href="#">查看更多</a></div>
            <div class="arrow">
                <a href="" class="prev"></a>
                <a href="" class="next"></a>
            </div>
        </div>
    </div>
    <div class="box1">
        <ul class="list">     
            <li>
                <div class="name"><a href="1">论坛</a></div>
                <div class="img"><a href="1"><img src="https://www.tsinghua.edu.cn/__local/D/49/EB/2F64DB937E92C84973A219E1EB8_4873F25A_187E1.jpg"></a></div>
                <div class="name"><a href="1" target="_blank" title="清华三农论坛2025 | 深化农村改革：探索乡村全面振兴新路径">清华三农论坛2025 | 深化农村改革：探索乡村全面振兴新路径</a></div>
                <dl class="info">
                    <dd>2025年1月11日 9:00</dd>
                    <dd>大学主楼后厅/在线直播</dd>
                </dl>
            </li>   
        <li>
                <div class="name"><a href="2">展览</a></div>
                <div class="img"><a href="2"><img src="https://www.tsinghua.edu.cn/__local/4/72/AA/A808E57351427F11DC2AEA5E3F8_1BAED208_2050FC.jpg"></a></div>
                <div class="name"><a href="2" target="_blank" title="怒海丹心：甲午风云人物墨迹展">怒海丹心：甲午风云人物墨迹展</a></div>
                <dl class="info">
                    <dd>2025年1月1日 - 2025年3月30日</dd>
                    <dd>大学艺术博物馆</dd>
                </dl>
            </li>   
        <li>
                <div class="name"><a href="3">舞蹈诗剧</a></div>
                <div class="img"><a href="3"><img src="https://www.tsinghua.edu.cn/__local/1/F0/7F/C34DB77F05D329A67F59A01D026_FB67DEFF_20190.jpg"></a></div>
                <div class="name"><a href="3" target="_blank" title="舞蹈诗剧《只此青绿》">舞蹈诗剧《只此青绿》</a></div>
                <dl class="info">
                    <dd>2025年1月4日- 2025年1月6日</dd>
                    <dd>大学新清华学堂</dd>
                </dl>
            </li>   
        <li>
                <div class="name"><a href="4">读书活动</a></div>
                <div class="img"><a href="4"><img src="https://www.tsinghua.edu.cn/__local/F/D4/78/8DDDFD2D7582BED0CA72FC4C40D_0DCEBF9D_24BBCF.jpg"></a></div>
                <div class="name"><a href="4" target="_blank" title="“‘京’彩文化 青春绽放”行动计划 | 名家讲经典暨真人图书馆65期">“‘京’彩文化 青春绽放”行动计划 | 名家讲经典暨真人图书馆65期<span> | 阎晶明：文学经典新阐释——鲁迅小说《祝福》再解读</span></a></div>
                <dl class="info">
                    <dd>2024年10月10日 19:00</dd>
                    <dd>大学西阶梯教室/在线直播</dd>
                </dl>
            </li>   
        </ul>
    </div>
    <div class="box">
        <div class="imgs">
            <div class="image"><img src="https://www.tsinghua.edu.cn/__local/1/3D/20/7F9676FF055ACBB5FE6D2E14616_EB0E2128_C36A9.jpg"></div>
            <div class="image"><img src="https://www.tsinghua.edu.cn/__local/E/71/FD/A5B12ED996117EA953BF86F8406_69B932F1_C9045.jpg"></div>
            <div class="image"><img src="https://www.tsinghua.edu.cn/__local/D/60/27/59AFCDC9ECB51A173429D3CF2B0_02104294_BD4D6.jpg"></div>
        </div>
    </div>
    <div class="foot">
        <div class="foot_logo">    	
            <svg t="1737606786151" class="icon" viewBox="0 0 1025 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6821" width="200" height="200"><path d="M1020.080737 463.71018l-108.698654-27.545356c-2.060939-0.5137-4.375657-2.703575-4.956895-4.889357l-11.904121-44.212968c-0.515746-2.187829 0.254803-5.212722 1.929955-6.822382l80.252789-78.192873c1.607614-1.674129 2.058892-4.50664 0.964978-6.437619l-44.277436-76.518744c-1.093914-1.995447-3.730974-3.024893-6.049786-2.444679l-108.054995 30.632671c-2.057869 0.580215-5.14723-0.193405-6.693446-1.737574l-31.209816-31.277354c-1.548262-1.673106-2.448772-4.762467-1.740644-6.821359l30.891568-107.990526c0.5137-2.187829-0.514723-4.761444-2.573615-5.983271l-76.391854-44.342927c-1.930979-1.159406-4.826935-0.773619-6.435573 0.835018l-78.387301 80.252789c-1.478677 1.545192-4.568039 2.446725-6.819313 1.803066l-44.795229-12.100596c-2.249227-0.577145-4.502547-2.895957-4.953825-5.084808l-27.608801-108.697631c-0.512676-2.058892-2.831488-3.859911-5.018294-3.859911l-88.426959 0c-2.186805 0-4.505617 1.801019-5.084808 3.859911L436.43293 114.832352c-0.451278 2.188852-2.703575 4.50664-4.892427 5.084808l-44.920072 12.100596c-2.188852 0.514723-5.278213-0.257873-6.819313-1.803066L301.412794 49.960879c-1.545192-1.608637-4.50664-1.995447-6.436596-0.835018l-76.326363 44.342927c-2.059915 1.221828-2.960425 3.795443-2.508123 5.983271l30.826076 107.990526c0.64366 2.058892-0.128937 5.148253-1.804089 6.821359l-31.146371 31.277354c-1.610684 1.544169-4.699022 2.317789-6.823406 1.737574l-107.926058-30.632671c-2.252297-0.579191-4.825912 0.449231-5.983271 2.444679l-44.342927 76.518744c-1.094938 1.929955-0.641613 4.762467 0.964978 6.437619l80.316234 78.192873c1.545192 1.609661 2.446725 4.63353 1.865487 6.822382l-11.904121 44.212968c-0.51677 2.186805-2.895957 4.375657-5.02034 4.889357L6.40078 463.71018c-2.058892 0.514723-3.859911 2.895957-3.859911 5.083785l0 88.361467c0 2.188852 1.801019 4.632507 3.859911 5.146207l108.764146 27.54638c2.124384 0.578168 4.502547 2.702552 5.02034 5.019317l11.904121 44.085054c0.581238 2.186805-0.320295 5.341658-1.865487 6.692423l-80.316234 78.450746c-1.607614 1.478677-2.059915 4.440126-0.964978 6.370081l44.342927 76.390831c1.157359 2.060939 3.794419 3.15383 5.983271 2.574638l107.926058-30.697139c2.124384-0.64366 5.212722 0.192382 6.823406 1.736551l31.146371 31.404244c1.675152 1.546216 2.447748 4.570085 1.804089 6.693446l-30.826076 107.993596c-0.451278 2.185782 0.448208 4.952802 2.508123 6.046716l76.326363 44.342927c1.929955 1.157359 4.891404 0.707105 6.436596-0.964978l78.388325-80.059384c1.541099-1.609661 4.630461-2.446725 6.819313-1.865487l44.920072 12.098549c2.188852 0.579191 4.441149 2.832512 4.892427 4.89038l27.607778 108.760053c0.578168 2.12336 2.898003 3.927449 5.084808 3.927449l88.426959 0c2.187829 0 4.505617-1.804089 5.018294-3.927449l27.608801-108.760053c0.450255-2.058892 2.704598-4.311189 4.953825-4.89038l44.795229-12.098549c2.251274-0.580215 5.340635 0.255827 6.819313 1.865487l78.387301 80.059384c1.608637 1.673106 4.504594 2.122337 6.435573 0.964978l76.391854-44.342927c2.058892-1.093914 3.087315-3.860934 2.573615-6.046716l-30.891568-107.993596c-0.707105-2.12336 0.192382-5.14723 1.740644-6.693446l31.209816-31.404244c1.546216-1.544169 4.635577-2.38021 6.693446-1.736551l108.054995 30.697139c2.254344 0.579191 4.955872-0.5137 6.049786-2.574638l44.277436-76.390831c1.092891-1.929955 0.642636-4.89038-0.964978-6.370081l-80.252789-78.450746c-1.675152-1.350764-2.445702-4.505617-1.929955-6.692423l11.904121-44.085054c0.580215-2.317789 2.895957-4.441149 4.956895-5.019317l108.698654-27.54638c2.124384-0.5137 3.989871-2.958378 3.989871-5.146207l0-88.361467C1024.071631 466.606137 1022.205121 464.224904 1020.080737 463.71018zM513.272993 845.535399c-184.186929 0-333.945745-150.013619-333.945745-334.137103 0-184.123484 149.758816-334.073658 333.945745-334.073658 184.317912 0 334.077751 149.950174 334.077751 334.073658C847.349721 695.52178 697.590905 845.535399 513.272993 845.535399z" fill="#333333" p-id="6822"></path><path d="M703.060477 658.901745c29.991058-39.706327 47.88152-89.261976 47.88152-142.933363 0-88.748277-23.489994-142.680607-95.440699-190.237739 0 0-7.91425 76.840062-32.56672 100.008738 0 0 33.015951 46.01501 33.015951 90.229001 0 32.434713-10.875698 62.425771-29.27986 86.49291l0 0c-4.183276 6.888897-6.759961 15.124466-6.759961 23.877827 0 26.322505 21.239743 47.494711 47.433312 47.494711C679.82631 673.833829 694.566012 666.817018 703.060477 658.901745L703.060477 658.901745z" fill="#333333" p-id="6823"></path><path d="M608.395444 330.62c0 52.579519-42.606377 95.118358-95.122451 95.118358-52.385091 0-94.990444-42.538839-94.990444-95.118358 0-12.420891 2.382257-24.326035 6.823406-35.266202 27.28646-10.94119 57.017598-16.863063 88.166015-16.863063 31.213909 0 77.036537 12.743232 88.361467 16.927531C601.633437 295.418266 608.395444 318.199109 608.395444 330.62z" fill="#333333" p-id="6824"></path><path d="M459.086883 453.927373 440.423825 690.630377l72.848145 57.020668 72.981175-57.020668L568.490595 459.141118c-16.153912 8.172123-35.71748 7.979742-54.895261 7.979742C493.967298 467.12086 475.433176 462.292901 459.086883 453.927373z" fill="#333333" p-id="6825"></path><path d="M323.294151 659.032728c-30.247908-39.514969-48.269353-89.007173-48.39522-142.744052-0.38681-88.683808 22.779819-142.677537 94.604658-190.559057 0 0 8.172123 76.840062 32.821523 99.881848 0 0-32.632211 46.077432-32.437783 90.355891 0.128937 32.434713 11.007705 62.36028 29.607318 86.364997l0 0c4.117784 6.887874 6.820336 15.059997 6.820336 23.877827 0.128937 26.254967-21.109784 47.493687-47.236837 47.622624C346.591763 673.961742 331.658655 667.01247 323.294151 659.032728L323.294151 659.032728z" fill="#333333" p-id="6826"></path></svg>
        </div>
        <div class="list">
            <ul> 
                <li><p>010-12345678</p></li>
                <li><p>webmaster@XYYCD.edu.cn</p></li>
                <li><p>XY市CD区大学</p></li>
                <li><p><a href="#">意见反馈</a></p></li>
            </ul>
        </div>
        <div class="info">
            <div><p>版权所有 © 大学</p><p><a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">京ICP备15006448号</a></p><p><a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=110402430053" target="_blank">京公网安备 110402430053 号</a></p></div>
    </div>
</body>
</html>

CSS部分：

*{
    padding: 0;
}
header.header {
    display: flex;
    justify-content: space-around;
    position: sticky;
    top: 0;
    z-index: 100;
    height: 70px;
    width: 100%;
    background-image: linear-gradient(to bottom,rgb(191, 219, 209),transparent);
}
.header_logo >.icon{
    height: 70px;
}
.item_text{
    display: inline-block;
    padding:20px 20px;
    align-items: center;
    align-items: center;
    color: #000;
}
a{
    color:rgb(73, 71, 71);
    text-decoration: none;
}
.field_search{
    padding: 15px;
}
button{
    border: 0;
}
.search>.search_box{
    background-color: transparent;
    border-radius: 15px;
}

.search>.sousuo{
    background-color: transparent;
    float:left;
    padding:2px;
}
.search>.sousuo>.icon{
    width:20px;
    height:20px;
    float:left;
    padding:2px;
}


.table_top{
   width: 100%;
   
 } 

.table_top .img a img{
    width: 100%;
    top: 0;
    
}
.box{
    margin-left: 20%;
    margin-right: 20%;
    margin-top: 5%;
}
.events .title{
    position: relative;
    color: #000;
}
.events p,.more a{
    color: #929292;
    font-size: small;
    letter-spacing: 2px;
}
.list{
    margin: 100px;
    display:flex;
    list-style-type: none;
    justify-content: space-between;
}
.list .img{
    width: 250px;
    height: auto;
    overflow: hidden;
    margin: 50px auto;
}
.list .img a img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;

}
.list .img a img:hover{
    transform: scale(1.2);
}
.list .info,.name{
    width: 250px;
    font-size: 10px;
    display: block;
    overflow: hidden;
    position: relative;
}
.list .name{
    font-size: 15px;
    font-weight:800;
}

.imgs {
    display:flex;
    justify-content: space-between;
}
.imgs .image{
    overflow: hidden;
    width: 200px;
    height: auto;
    margin: 50px auto;
}
.imgs .image img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}
.imgs .image img:hover{
    transform: scale(1.2);
}
div {
    display: block;
}
.foot{
    display: flex;
    position: relative;
    margin-top: 120px;
    margin-bottom: 0px;
    width: 100%;
    height: 270px;
    background-color: rgb(191, 219, 209);
}
.foot_logo >.icon{
    position: absolute;
    width: 60px;
    left: 20%;
    bottom: 0;
}
.foot .list{
    list-style-type: none;
    font-size: small;
    position: absolute;
    align-items: center;
    left: 40%;
    top: 0;
}
.foot .info{
    font-size: smaller;
    position: absolute;
    left: 35%;
    bottom: 0;
    color: rgb(73, 71, 71);
}
.foot ,.info div{
    display: -webkit-flex
}

效果：