01
代码:HTML部分
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>search</title> <!-- 引入重置样式 --> <link rel="stylesheet" href="../reset.css"> <!-- 引入样式 --> <link rel="stylesheet" href="./index.css"> </head> <body> <div class="search" > <div class="select-left "> <nav class="nav"> <ul> <li> <a href="#" style="color: #11192d; font-weight: 500;" >宝贝 </a> <ol> <li>天猫</li> <li>店铺</li> </ol> </li> </ul> </nav> </div> <div class="photo"> <img width="18px" src="./image/倒三角.png"/> </div> <form action="#"> <div class=" top-input"> <input class="=search-input" type="text" placeholder="|"> </div> <div class="icon"> <div class="select-icon" > <span class="text">按图片搜索</span> </div> </div> </form> <div class="search-button"> <button class="button" type="submit">搜索</button> </div> </div> </body> </html>
CSS部分
ol,ul{ list-style: none; } .search{ width: 980px; height: 44px; border: 2px solid #ff5000; background: #fff; border-radius: 8px; position: relative; margin: 0 auto; top: 15px; display: flex; } .select-left{ width: 68px; height: 38px; font-size: 14.5px; background: #fff; font-weight: 500; color: #11192d; font-family: Roboto, Helvetica Neue, Helvetica, Tahoma, Arial, PingFang SC, Microsoft YaHei; border-radius: 12px; margin-top: 2px; box-shadow: 0 24px 48px 0 rgba(0, 17, 51, .07); } nav.nav > ul > li:hover ol { display: block; } .nav>ul>li{ width: 68px; height: 38px; text-align: center; cursor: pointer; line-height: 36px; } nav.nav ol { margin-top: -2px; background-color: #fff; color: #11192d; display: none; } nav.nav ol > li { height: 38px; } nav.nav ol > li:hover { color: #ff5000; } .photo{ display: inline; margin-top: 15px; margin-left: -20px; } .top-input{ width: 800px; height: 40px; } input{ width: 800px; height: 40px; line-height: 40px; margin-left: 5px ; } .select-right{ width: 28px; height: 28px; position: absolute; right: 80px; top: 6px; display: block; } .icon{ width: 28px; height: 28px; position: absolute; right: 80px; top: 6px; z-index: 1; background-image: url(./image/hei下载.png); background-size: 28px 28px; box-sizing: border-box; } .icon:hover{ background-image: url(./image/下载.png); cursor: pointer; } .select-icon{ display: none; box-sizing: border-box; } .text{ box-sizing: border-box; } .button{ position: absolute; line-height: 39px; font-size: 18px; font-weight: 500; color: #fff; background:#ff5000 ; height: 39px; width: 72px; top: 3px; right: 2px; border-radius: 8px; border: none; cursor: pointer; z-index: 9; outline: none; }
运行:
web前端练习
W111115_2024-10-24 23:45
相关推荐
夏梦春蝉4 分钟前
ES6从入门到精通:其他特性2301_14725836910 分钟前
7月1日作业汪子熙12 分钟前
Angular 应用中手动调用 subscribe 方法的时机与实践探讨MiyueFE43 分钟前
14 个逻辑驱动的 UI 设计技巧,助您改善任何界面啃火龙果的兔子1 小时前
前端单元测试覆盖率工具有哪些,分别有什么优缺点「、皓子~1 小时前
后台管理系统的诞生 - 利用AI 1天完成整个后台管理系统的微服务后端+前端就改了1 小时前
Ajax——在OA系统提升性能的局部刷新凌冰_1 小时前
Ajax 入门京东零售技术2 小时前
京东小程序JS API仓颉改造实践老A技术联盟2 小时前
从小白入门,基于Cursor开发一个前端小程序之Cursor 编程实践与案例分析