Hongmu Notes
Home Summary of pitfalls Imitate the bottom html of a Douyin footer
Summary of pitfalls

Imitate the bottom html of a Douyin footer

Imitate the bottom html of a Douyin footer

css code:

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
    color: #fff
}

#footers .footer {
    background: #171725;
    min-height: 188px;
    font-size: 14px;
    color: #fff;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    text-align: center;
    padding: 30px 0 0 0;
}

#footers {
    min-width: 960px;
    padding-top: 40px;
    background: #f7f8f9;
}

#footers .top>a {
    color: #fff;
    padding: 0 15px;
    border-left: 1px solid;
}

#footers .top>a:last-child {
    border-right: 1px solid;
}

#footers .bottom {
    padding: 15px 0;
}

#footers .bottom>div {
    padding: 6px 0;
}

#footers .bottom>div a,
#footers .bottom>div span {
    padding: 0 5px;
    border-right: 1px solid;
}

#footers .bottom>div a:last-child,
#footers .bottom>div span:last-child {
    border-right: none;
}

html code:

<footer id="footers">
    <div class="footer">
        <div class="top">
            <a href="//creator.douyin.com/agreement/">帐号授权协议</a>
            <a href=" //www.douyin.com/agreement/">用户服务协议</a>
            <a href=" //www.douyin.com/privacy/">隐私政策</a>
            <a href=" //www.douyin.com/recovery_account/">帐号找回</a>
            <a href=" //www.douyin.com/aboutus/">联系我们</a>
        </div>
        <div class="bottom">
            <div>
                <span>2022 © 抖音</span>
                <a
                    href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11000002002046">京公网安备11000002002046号</a>
                <span>北京微播视界科技有限公司</span>
            </div>
            <div>
                <a href="http://www.12377.cn/">中国互联网举报中心</a>
                <span>网络文化许可证-京网文-(2016)2282-264号</span>
                <span>违法和不良信息举报:400-140-2108</span>
                <span>举报邮箱:feedback@douyin.com</span>
            </div>
            <div>
                <img src="//p3.douyinpic.com/aweme-server-static-resource/gongan_d0289dc.png~tplv-obj.image"
                    alt="pic">
                <a
                    href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11000002002046">京公网安备11000002002046号</a>
                <span>地址:
                    北京市海淀区知春路51号4层408</span>
            </div>
        </div>
    </div>
</footer>
微信赞赏

WeChat

支付宝赞赏

Alipay

✍️ Author: Hong Mu

webmaster · Thanks for reading, stay tuned for more exciting content

Author homepage View home page →

Related articles

Browser caching increases the speed of secondary visits to your website

Browser caching increases the speed of secondary visits to your website Summary of pitfalls

Use browser caching of official words: If users will visit your website multiple times, browser caching of static resources can save users time. Cache headers should be applied to all cacheable static resources, not just to a small subset of static resources (for example, images). Cacheable resources include JS and CSS files, image files, and other binary object files (media files, PDF files, etc.). Normally, HTML doesn’t…
👁 202

Recommended reading

Beef Cattle Farming Supply Base Website Template 0703

Beef Cattle Farming Supply Base Website Template 0703 Practical Collection Yiyou template

This EyouCMS template is ideal for beef cattle farming and supply bases. Its natural yet professional design effectively showcases the farming environment, cattle breeds, product offerings, and breeding techniques. It helps livestock farming enterprises demonstrate their capabilities online and expand their sales channels. Template Display | Installation Instructions | Website Backend: /login.php | Username: admin | Password: admin | Related Articles: Summary of Common Installation Issues for EyouCMS | EyouCMS (Ey...
👁 60
Tea Ceremony – Tea Planting Base Website Template 0704

Tea Ceremony – Tea Planting Base Website Template 0704 Practical Collection Yiyou template

An eYouCMS website template designed for tea ceremony events and tea cultivation bases. Its classical and elegant design is perfect for showcasing the tea-growing environment, tea culture, tea products, and brand stories. This template helps tea brands effectively convey their cultural heritage online and attract tea enthusiasts. Template Display | Installation Instructions | Website Backend: /login.php | Username: admin | Password: admin | Related Articles: Summary of Common Installation Issues for eYouCMS | eYouCMS...
👁 36
Landscape Tree Planting Website Template 0705

Landscape Tree Planting Website Template 0705 Practical Collection Yiyou template

This EyouCMS template is ideal for the landscape tree planting industry. Its natural and fresh design style is perfect for showcasing tree products, planting sites, landscaping projects, and maintenance services. It helps landscaping companies showcase their products online and expand their business channels. Template Display | Installation Instructions | Website Backend: /login.php | Username: admin | Password: admin | Related Articles: Summary of Common Installation Issues for EyouCMS | EyouCMS (Ey...
👁 52
Resource website typecho001 template

Resource website typecho001 template Program Notes Typecho

typecho001 template template please do not modify the folder name of this template. The folder name is: typecho001 1.4 Fix the js output problem on the article page 1.3 Fix the error prompt when the plug-in is not installed Optimize the list page code output 1.2 Fix the comment function and add a custom homepage title 1.1 Fix the comment reply asymmetry function Add a separate title setting function on the homepage Add the website favicon.ico icon Add one...
👁 199
Fruit and Vegetable Agricultural Planting Base Website Template 0706

Fruit and Vegetable Agricultural Planting Base Website Template 0706 Practical Collection Yiyou template

An EyouCMS website template designed for agricultural farming bases specializing in melons, fruits, and vegetables. Its fresh and natural design effectively showcases the cultivation environment, agricultural products, harvesting experiences, and brand stories. This template helps agricultural enterprises showcase their products online and expand their sales channels. Template Display | Installation Instructions | Website Backend: /login.php | Username: admin | Password: admin | Related Articles: Summary of Common Installation Issues for EyouCMS | EyouCMS (Ey...
👁 61
Modification of typecho paging style

Modification of typecho paging style Program Notes Typecho

Sir, times have changed! Typecho is currently the most perfect solution, because Baidu can only see the code of fixed thinking. The actual generated HTML code is breathtakingly clean and fully customized, including adding classes to the li element, adding classes to the a element, adding classes to the previous page and next page, and removing the li tags that come with typecho to express more. I can even add some text to the content inside...
👁 517