黑夜里的黑猫^ 2021-11-06 10:54 采纳率: 100%
浏览 42
已结题

同程旅游的这两个表单怎么做到在一个盒子里。

img

img


同程官网的这个表单页面怎么做，最好有代码。我想要的效果就是同程l旅游官网的效果。最好一样

  • 写回答

2条回答 默认 最新

  • pp泉 2021-11-06 11:16
    关注

    tab栏选项卡去做

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            *{
                padding: 0px;
                margin: 0px;
            }
            input{
                display: none;
            }
            
            .tab1,.tab2,.tab3{
                display: none;
            }
            
            #t1:checked ~ .tab1{
                display: block !important;
            }
            #t1:checked ~ ul li label[for="t1"]{
                background-color: #d9d9d9;
            }        
            #t2:checked ~ .tab2{
                display: block !important;
            }
            #t2:checked ~ ul li label[for="t2"]{
                background-color: #d9d9d9;
            }
            #t3:checked ~ .tab3{
                display: block !important;
            }
            #t3:checked ~ ul li label[for="t3"]{
                background-color: #d9d9d9;
            }
            li{
                list-style-type: none;
                width: 100%;
                background-color: aqua;
                padding: 0px 0px;
                text-align: center;
                border-top: #989898 1px solid;
                border-bottom: #989898 1px solid;
                margin-top: -1px;
                cursor: pointer;
            }
            li label{
                padding: 10px 0px;
                width: 100%;
                height: 100%;
                cursor: pointer;
                display: inline-block;
            }
            
            li label:hover{
                color: red;
            }
            
        </style>
    </head>
    <body>
        
        <div style="padding: 0px;margin: 0px !important;width: 300px;height: 300px;background-color: #d9d9d9">
        
            <input type="radio" name="tab" id="t1" checked/>
            <input type="radio" name="tab" id="t2" />
            <input type="radio" name="tab" id="t3" />
            
            <ul style="width: 100px;height: 100%;background-color: #00FFFF;float: left;">
                <li>
                    <label for="t1">asd</label>
                </li>
                <li>
                    <label for="t2">asd</label>
                </li>
                <li>
                    <label for="t3">asd</label>
                </li>
            </ul>
        
            <div class="tab1">1</div>
            <div class="tab2">2</div>
            <div class="tab3">3</div>
        
        </div>
        
    </body>
</html>

    有用的话还请采纳！

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题？

  • 同程旅游的这两个表单怎么做到在一个盒子里。 css html5 前端框架 有问必答
    2021-11-06 10:54
    回答 2 已采纳 tab栏选项卡去做 <!DOCTYPE html> <html> <head> <meta charset="utf-8">
  • 求解面试题，从几个数字中找规律 职场和发展
    2021-12-31 10:23
    回答 2 已采纳 古典型数字推理是数字推理的基础。其题干是一个数列，但是在中间或 两边缺少一项。应试者需要从已知的各个数字中找到合适的规律，然后计算 未知项的值。在求解这类问题时，通常可以使用如下方法： 1逐差法2逐商
  • python爬虫问题，BeautifulSoup提问，真心求教，急 python
    2021-04-26 13:53
    回答 1 已采纳 首先在使用爬虫前 您需要确保爬取的页面数据是全部的 即不存在动态加载的情况 若有的数据是动态加载的 您还需要爬取网页所携带的的json文件
  • 总结
    2020-09-19 17:02
    xiaoyanzifeile的博客 等价类：依据需求将输入（特殊情况下会考虑输出）划分为若干个等价类，从等价类中选出一个测试用例，如果这个测试用例测试通过，则认为所代表的等价类测试通过，这样就可以用较少的测试用例达到尽量多的功能覆盖，...
  • 两万字前端面经（含回答）
    2024-01-11 10:00
    Web面试那些事儿的博客 从三月刚开始就疯狂的海投简历，到最后顺利拿下某中厂的日常实习OC，中间还是遇见了很多的坎坷，这里来按照不同的公司来记录一下我的前端面试经历吧自己太紧张了，很多地方发挥的很失败，面试没准备好，在面试的时候...
  • 没有解决我的问题, 去提问

问题事件

  • 系统已结题 11月14日
  • 已采纳回答 11月6日
  • 创建了问题 11月6日

悬赏问题

  • ¥15 c语言怎么用printf（“\b \b”）与getch（）实现黑框里写入与删除？
  • ¥20 怎么用dlib库的算法识别小麦病虫害
  • ¥15 华为ensp模拟器中S5700交换机在配置过程中老是反复重启
  • ¥15 java写代码遇到问题，求帮助
  • ¥15 uniapp uview http 如何实现统一的请求异常信息提示？
  • ¥15 有了解d3和topogram.js库的吗？有偿请教
  • ¥100 任意维数的K均值聚类
  • ¥15 stamps做sbas-insar，时序沉降图怎么画
  • ¥15 买了个传感器，根据商家发的代码和步骤使用但是代码报错了不会改，有没有人可以看看
  • ¥15 关于#Java#的问题，如何解决？