黑夜里的黑猫^ 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日

悬赏问题

  • ¥20 西门子S7-Graph,S7-300，梯形图
  • ¥50 用易语言http 访问不了网页
  • ¥50 safari浏览器fetch提交数据后数据丢失问题
  • ¥15 matlab不知道怎么改，求解答！！
  • ¥15 永磁直线电机的电流环pi调不出来
  • ¥15 用stata实现聚类的代码
  • ¥15 请问paddlehub能支持移动端开发吗？在Android studio上该如何部署？
  • ¥20 docker里部署springboot项目，访问不到扬声器
  • ¥15 netty整合springboot之后自动重连失效
  • ¥15 悬赏！微信开发者工具报错，求帮改