代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ padding: 0; margin: 0; box-sizing: border-box; } footer{ /* 固定 */ position: fixed; left: 0; bottom: 0; width: 100%; height: 50px; background-color: red; } a{ /* 添加浮动会具有行内块的特点,可以直接设置宽高,一行显示多个 */ float: left; /* display: block; */ width: 20%; height: 50px; text-decoration: none; text-align: center; line-height: 50px; color: aliceblue; } </style> </head> <body> <footer> <a href="#">首页</a> <a href="#">分类</a> <a href="#">京喜</a> <a href="#">购物车</a> <a href="#">我的</a> </footer> </body> </html>
效果图:
移动web-百分比布局-京东案例
最新推荐文章于 2024-09-13 23:32:49 发布