这俩我不清楚怎么做 思路不是很清晰 请问有人能做出来吗 做的有点难受
1条回答 默认 最新
- 崽崽的谷雨 2022-03-23 09:40关注
灰色的用 ul,li
搜索框 input button 加上 flex布局
参考这个 你自己调一下样式<!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> * { margin: 0; padding: 0; } .navBox { width: 100%; height: 200px; } .navTopBox { width: 100%; height: 30px; } .navTopBox>ul { list-style: none; display: flex; background: #ECECEC; justify-content: flex-end; padding: 0 12px; } .navTopBox>ul>li { line-height: 30px; color: #AAAAAA; font-size: 12px } .navTopBox>ul>li>span { margin: 0 12px; } .serachBox { background: #990D1A; width: 100%; height: 100px; position: relative; } .serachBox .inp { width: 80%; height: 30px; } .serachBox .inpBox{ width: 100%; /* line-height: 50px; */ display: flex; justify-items: center; justify-content: center; position: absolute; bottom: 12px; } .serachBox .inpBox button{ width: 5%; height: 34px; } </style> </head> <body> <div class="navBox"> <div class="navTopBox"> <ul> <li>淘宝网首页 <span>|</span></li> <li>我要买<span>|</span></li> <li>我的淘宝<span>|</span></li> <li>购物车</li> </ul> </div> <div class="serachBox"> <div class="inpBox"> <input type="text" class="inp"><button>搜商品</button><button>搜商品</button> </div> </div> </div> </body> </html>
本回答被题主选为最佳回答 , 对您是否有帮助呢?解决 无用评论 打赏 举报 编辑记录
悬赏问题
- ¥15 metadata提取的PDF元数据,如何转换为一个Excel
- ¥15 关于arduino编程toCharArray()函数的使用
- ¥100 vc++混合CEF采用CLR方式编译报错
- ¥15 coze 的插件输入飞书多维表格 app_token 后一直显示错误,如何解决?
- ¥15 vite+vue3+plyr播放本地public文件夹下视频无法加载
- ¥15 c#逐行读取txt文本,但是每一行里面数据之间空格数量不同
- ¥50 如何openEuler 22.03上安装配置drbd
- ¥20 ING91680C BLE5.3 芯片怎么实现串口收发数据
- ¥15 无线连接树莓派,无法执行update,如何解决?(相关搜索:软件下载)
- ¥15 Windows11, backspace, enter, space键失灵