演示网站 黑色的手机界面遥控器UI代码
编写代码
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>黑色的手机界面遥控器UI代码 www.bootstrapmb.com</title> <link rel="stylesheet" href="./style.css"> </head> <body> <main> <div class="phone"> <div class="list topbar d-flex justify-content-between"> <div>9:41 AM</div> <div class="status-bar d-flex"> <img src="imgs/mobile-signal.svg" alt="signal"> <img src="imgs/wifi.svg" alt="wifi"> <img src="imgs/battery.svg" alt="battery"> </div> </div> <div class="list d-flex justify-content-between"> <button class="btn btn-shadow btn-small no-mode"> <img src="imgs/power.svg" alt="undo"> </button> <button class="btn btn-shadow btn-small">AV</button> </div> <div class="list d-flex justify-content-center"> <button class="btn btn-shadow"> <img src="imgs/microphone.svg" alt="microphone"> </button> </div> <div class="list d-flex justify-content-between"> <button class="btn"> <img src="imgs/undo.svg" alt="undo"> </button> <button class="btn"> <img src="imgs/home.svg" alt="undo"> </button> <button class="btn"> <img src="imgs/menu.svg" alt="undo"> </button> </div> <div class="list d-flex justify-content-between"> <div class="side-btns"> <div class="d-flex inner justify-content-between align-items-center"> <button class="btn"> <img src="imgs/add.svg" alt="add"> </button> <div>Vol</div> <button class="btn"> <img src="imgs/minus.svg" alt="minus"> </button> </div> </div> <div class="center-btns"> <button class="btn btn-up"> <img src="imgs/arrow-up.svg" alt="arrow"> </button> <button class="btn btn-right"> <img src="imgs/arrow-right.svg" alt="arrow"> </button> <button class="btn btn-down"> <img src="imgs/arrow-down.svg" alt="arrow"> </button> <button class="btn btn-left"> <img src="imgs/arrow-left.svg" alt="arrow"> </button> </div> <div class="side-btns"> <div class="d-flex inner justify-content-between align-items-center"> <button class="btn"> <img src="imgs/arrow-up.svg" alt="arrow"> </button> <div>ch</div> <button class="btn"> <img src="imgs/arrow-down.svg" alt="arrow"> </button> </div> </div> </div> <div class="list d-flex justify-content-between"> <button class="btn"> <img src="imgs/backward.svg" alt="undo"> </button> <button class="btn"> <img src="imgs/pause.svg" alt="undo"> </button> <button class="btn"> <img src="imgs/forward.svg" alt="undo"> </button> </div> <div class="list d-flex justify-content-between"> <button class="btn"> <img src="imgs/volume-cross.svg" alt="undo"> </button> <button class="btn"> <img src="imgs/keyboard.svg" alt="undo"> </button> <button class="btn"> <img src="imgs/logout.svg" alt="undo"> </button> </div> <div class="bottom-menu d-flex"> <button class="btn center-btn" id="changeMode"> <img src="imgs/moon.svg" alt="mode"> </button> <div> <button class="btn tranparent-btn"> <img src="imgs/home-2.svg" alt="undo"> </button> </div> <div> <button class="btn tranparent-btn"> <img src="imgs/mirroring-screen.svg" alt="undo"> </button> </div> <div> <button class="btn tranparent-btn"> <img src="imgs/chart.svg" alt="undo"> </button> </div> <div> <button class="btn tranparent-btn"> <img src="imgs/setting-2.svg" alt="undo"> </button> </div> </div> </div> </main> </body> </html>
注册免费下载
抱歉，隐藏内容须成功 评论本文 后刷新可见！
