60. 搜索插入位置

给定一个排序数组和一个目标值,如果在数组中找到目标值则返回索引。如果没有,返回到它将会被按顺序插入的位置。

你可以假设在数组中无重复元素。

样例

[1,3,5,6],5 → 2

[1,3,5,6],2 → 1

[1,3,5,6], 7 → 4

[1,3,5,6],0 → 0

int searchInsert(vector<int> &A, int target) {
        // write your code here
        for(int i=0;i<A.size();i++){
            if(target==A[i]){
                return i;
            }
            if(target<A[i]){
                if(i!=0 && target>A[i-1]){
                    return i;
                }
                if(i==0){return i;}
            }
            if(i==A.size()-1 && target>A[i]){return i+1;}
        }
        return 0;
    }

# 代码概述 使用简单知识复刻移动端携程网首页,并在关键位置预留图片插入点,包括顶部轮播图、导航图标和底部广告位。 # 代码解析 ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <!-- 让页面在手机上正确显示 --> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>携程首页</title> <style> /* 清除默认样式 */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: Arial, sans-serif; background-color: #f5f5f5; } /* 页面居中,最大宽度为常见手机屏幕 */ .container { max-width: 414px; margin: 0 auto; background: white; min-height: 100vh; } /* 头部搜索栏 */ .header { display: flex; justify-content: space-between; align-items: center; padding: 12px 15px; border-bottom: 1px solid #eee; } .search-box { flex: 1; background: #eee; padding: 10px; border-radius: 20px; text-align: center; color: #999; font-size: 14px; } .user-icon { width: 24px; height: 24px; background: url('https://via.placeholder.com/24') no-repeat center; background-size: cover; border-radius: 50%; margin-left: 10px; } /* 导航图标区 */ .nav-icons { display: flex; justify-content: space-around; padding: 15px; font-size: 12px; background: white; } .icon-item img { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; } .icon-item span { display: block; margin-top: 5px; } /* 轮播图区域 - 插入图片位置 */ .banner { width: 100%; height: 180px; overflow: hidden; margin: 10px 0; } .banner img { width: 100%; height: 100%; object-fit: cover; } /* 推荐榜单 */ .rankings { padding: 15px; } .section-title { font-weight: bold; margin-bottom: 10px; font-size: 14px; } .ranking-list { display: flex; gap: 10px; overflow-x: auto; } .card { min-width: 120px; padding: 10px; background: #f9f9f9; border-radius: 8px; font-size: 12px; } .card img { width: 100%; height: 60px; border-radius: 4px; object-fit: cover; margin-bottom: 5px; } /* 底部广告图 */ .ad-banner { width: 100%; padding: 15px; background: white; margin-top: 10px; } .ad-banner img { width: 100%; height: 80px; object-fit: cover; border-radius: 8px; } /* 底部信息 */ .footer { text-align: center; padding: 20px; color: #999; font-size: 12px; } .footer a { color: #007AFF; text-decoration: none; } </style> </head> <body> <div class="container"> <!-- 头部搜索 --> <div class="header"> <div class="search-box">搜索:酒店/景点/航班</div> <div class="user-icon"></div> </div> <!-- 导航图标(带图片) --> <div class="nav-icons"> <div class="icon-item"> <img src="https://via.placeholder.com/50?text=住" alt="酒店"> <span>酒店</span> </div> <div class="icon-item"> <img src="https://via.placeholder.com/50?text=飞" alt="机票"> <span>机票</span> </div> <div class="icon-item"> <img src="https://via.placeholder.com/50?text=火" alt="火车票"> <span>火车票</span> </div> <div class="icon-item"> <img src="https://via.placeholder.com/50?text=玩" alt="门票"> <span>门票</span> </div> <div class="icon-item"> <img src="https://via.placeholder.com/50?text=吃" alt="美食"> <span>美食</span> </div> </div> <!-- 轮播图(插入大图) --> <div class="banner"> <img src="https://via.placeholder.com/414x180?text=限时特惠+全国低至5折" alt="活动轮播图"> </div> <!-- 推荐榜单(带小图) --> <div class="rankings"> <div class="section-title">携程精选榜 <a href="#">更多></a></div> <div class="ranking-list"> <div class="card"> <img src="https://via.placeholder.com/120x60?text=奢华酒店" alt="奢华酒店"> <strong>奢华酒店</strong> <p>上海索菲特 ¥928起</p> </div> <div class="card"> <img src="https://via.placeholder.com/120x60?text=亲子乐园" alt="亲子乐园"> <strong>亲子乐园</strong> <p>迪士尼合作酒店</p> </div> <div class="card"> <img src="https://via.placeholder.com/120x60?text=商旅优选" alt="商旅优选"> <strong>商旅优选</strong> <p>领券包 立省30%</p> </div> </div> </div> <!-- 底部广告图 --> <div class="ad-banner"> <img src="https://via.placeholder.com/414x80?text=新人专享礼包+最高立减500元" alt="广告横幅"> </div> <!-- 底部 --> <div class="footer"> ©2025 携程旅行 | <a href="#">电脑版</a> </div> </div> </body> </html> ``` 这段代码在多个位置加入了**图片插入点**: 1. **用户头像**:`.user-icon` 使用 `background-image` 显示圆形头像; 2. **导航图标**:每个功能图标使用 `<img>` 标签插入圆形图片; 3. **轮播图区域**:`.banner img` 放置主视觉大图; 4. **榜单卡片**:每个推荐项内嵌缩略图; 5. **底部广告**:添加一个广告横幅图位置。 所有图片均使用 `object-fit: cover` 保证不变形,且适配容器大小。你只需将 `src` 中的占位链接替换为真实图片地址即可。 # 知识点 - **Viewport设置**:通过`meta`标签控制网页在手机上的显示方式,防止自动缩放。 - **Flex布局**:使用`display:flex`让元素水平排列并轻松实现对齐与分布。 - **响应式设计原理**:利用百分比宽度和`max-width`使页面适应不同大小的屏幕。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值