仿写一个抖音footer的底部 html
时间:2023年10月02日
/来源:网络
/编辑:佚名
css代码:
* {
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代码:
<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>
* {
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代码:
<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>
新闻资讯 更多
- 【建站知识】查询nginx日志状态码大于400的请求并打印整行04-03
- 【建站知识】Python中的logger和handler到底是个什么?04-03
- 【建站知识】python3拉勾网爬虫之(您操作太频繁,请稍后访问)04-03
- 【建站知识】xpath 获取meta里的keywords及description的方法04-03
- 【建站知识】python向上取整以50为界04-03
- 【建站知识】scrapy xpath遇见乱码解决04-03
- 【建站知识】scrapy爬取后中文乱码,解决word转为html 时cp1252编码问题04-03
- 【建站知识】scrapy采集—爬取中文乱码,gb2312转为utf-804-03