找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 5130|回复: 11

[咨询/求助] 【html5相关问题】纯CSS3实现淡入淡出Tab选项卡菜单 我改侧滑的宽度,可改效果不对...

[复制链接]
发表于 2015-7-10 11:30:44 | 显示全部楼层 |阅读模式 来自 中国–陕西–西安
本次悬赏总金额:100 金币 | 剩余悬赏金额:0 金币
本次悬赏到期时间: 本悬赏贴永不过期。
快来加入[悬赏团队],每次获得楼主奖励时可获得系统额外20金币的系统奖励。

只允许悬赏会员本人发放悬赏金币 | 只允许悬赏会员本人收回悬赏金币 | 最多悬赏人数:10人
还没有会员获得悬赏奖励,加油,快来争头奖!
本问题的悬赏已经结束!

本帖最后由 kx13vip 于 2015-7-10 11:32 编辑

<html>

<head>

  <meta charset="UTF-8">

  <title>纯CSS3实现兼容性好的淡入淡出Tab选项卡菜单 </title>


<style>
body {
        font-family: Cambria, Arial;
        background: #333;
}

        .tabs {
                width: 100%;
                max-width: 270px;
                margin: 50px auto;
        }

                input {
                        opacity: 0;
                }

                label {
                        cursor: pointer;
                        background: -webkit-linear-gradient(#666, #555);
                        color: #eee;
                        border-radius: 5px 5px 0 0;
                        padding: 1.5% 3%;
                        float: left;
                        margin-right: 2px;
                        font: italic 1em cambria;
                }

                        label:hover {
                                background: -webkit-linear-gradient(#777, #666);
                        }

                        input:checked + label {
                                background: #fff;
                                color: #333;
                        }

                .tabs input:nth-of-type(1):checked ~ .panels .panel:first-child,
                .tabs input:nth-of-type(2):checked ~ .panels .panel:nth-child(2),
                .tabs input:nth-of-type(3):checked ~ .panels .panel:nth-child(3),
                .tabs input:nth-of-type(4):checked ~ .panels .panel:last-child {
                        opacity: 1;
                        -webkit-transition: .3s;
                }

                .panels {
                        float: left;
                        clear: both;
                        position: relative;
                        width: 100%;
                        background: #fff;
                        border-radius: 0 10px 10px 10px;
                        min-height: 315px;
                }

                        .panel {
                                width: 100%;
                                opacity: 0;
                                position: absolute;
                                background: #fff;
                                border-radius: 0 10px 10px 10px;
                                padding: 4%;
                                box-sizing: border-box;
                        }

                                .panel h2 {
                                        margin: 0;
                                        font-family: Arial;
                                }

</style>
</head>

<body>
  <article class="tabs">

                <input checked id="one" name="tabs" type="radio">
            <label for="one">选项1</label>

            <input id="two" name="tabs" type="radio" value="Two">
            <label for="two">选项2</label>

            <input id="three" name="tabs" type="radio">
            <label for="three">选项3</label>

            <input id="four" name="tabs" type="radio">
            <label for="four">选项4</label>

            <div class="panels">

                    <div class="panel">
                            <h2>代码笔记</h2>
                    </div>

                    <div class="panel">
                            <h2>This is Panel Two</h2>
                           
                    </div>

                    <div class="panel">
                            <h2>This is Panel Three</h2>
                           
                    </div>

                    <div class="panel">
                            <h2>This is Panel Four</h2>
                           
                    </div>

                </div>

    </article>

</body>
</html>




本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有账号?立即注册

×

发帖求助前要善用【论坛搜索】功能,那里可能会有你要找的答案;

如何回报帮助你解决问题的坛友,好办法就是点击帖子下方的评分按钮给对方加【金币】不会扣除自己的积分,做一个热心并受欢迎的人!

发表于 2015-7-10 12:36:06 | 显示全部楼层 来自 中国–浙江–嘉兴–海宁市
你想要什么效果 我看看

点评

你看上面两个图的选项、、、、、不知道该怎么弄啊,求帮忙  详情 回复 发表于 2015-7-10 12:39
跟没有改哪个效果一样啊,改了宽度上面哪tab不对了  详情 回复 发表于 2015-7-10 12:37

发帖求助前要善用【论坛搜索】功能,那里可能会有你要找的答案;

如何回报帮助你解决问题的坛友,好办法就是点击帖子下方的评分按钮给对方加【金币】不会扣除自己的积分,做一个热心并受欢迎的人!

回复

使用道具 举报

 楼主| 发表于 2015-7-10 12:37:51 | 显示全部楼层 来自 中国–陕西–西安
诸葛凤梧 发表于 2015-7-10 12:36
你想要什么效果 我看看

跟没有改哪个效果一样啊,改了宽度上面哪tab不对了

发帖求助前要善用【论坛搜索】功能,那里可能会有你要找的答案;

如何回报帮助你解决问题的坛友,好办法就是点击帖子下方的评分按钮给对方加【金币】不会扣除自己的积分,做一个热心并受欢迎的人!

回复

使用道具 举报

 楼主| 发表于 2015-7-10 12:39:43 | 显示全部楼层 来自 中国–陕西–西安
诸葛凤梧 发表于 2015-7-10 12:36
你想要什么效果 我看看

你看上面两个图的选项、、、、、不知道该怎么弄啊,求帮忙

发帖求助前要善用【论坛搜索】功能,那里可能会有你要找的答案;

如何回报帮助你解决问题的坛友,好办法就是点击帖子下方的评分按钮给对方加【金币】不会扣除自己的积分,做一个热心并受欢迎的人!

回复

使用道具 举报

发表于 2015-7-10 12:43:42 | 显示全部楼层 来自 中国–浙江–嘉兴–海宁市
本帖最后由 诸葛凤梧 于 2015-7-10 12:44 编辑

你的错位是宽度不够导致的,按需调整呗

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有账号?立即注册

×

点评

上面哪个选项卡的宽度是怎么调啊?我一调就错位了label { cursor: pointer; background: -webkit-linear-gradient(#666, #555); color: #eee; border-radius: 5px 5px 0 0; float: left; fo  详情 回复 发表于 2015-7-10 13:13
我琢磨了快两天,就没有整懂这个、、、  详情 回复 发表于 2015-7-10 13:11
就是不会调整啊、、、、大神,求指点  详情 回复 发表于 2015-7-10 13:09

发帖求助前要善用【论坛搜索】功能,那里可能会有你要找的答案;

如何回报帮助你解决问题的坛友,好办法就是点击帖子下方的评分按钮给对方加【金币】不会扣除自己的积分,做一个热心并受欢迎的人!

回复

使用道具 举报

 楼主| 发表于 2015-7-10 13:09:50 | 显示全部楼层 来自 中国–陕西–西安
诸葛凤梧 发表于 2015-7-10 12:43
你的错位是宽度不够导致的,按需调整呗

就是不会调整啊、、、、大神,求指点

发帖求助前要善用【论坛搜索】功能,那里可能会有你要找的答案;

如何回报帮助你解决问题的坛友,好办法就是点击帖子下方的评分按钮给对方加【金币】不会扣除自己的积分,做一个热心并受欢迎的人!

回复

使用道具 举报

 楼主| 发表于 2015-7-10 13:11:56 | 显示全部楼层 来自 中国–陕西–西安
诸葛凤梧 发表于 2015-7-10 12:43
你的错位是宽度不够导致的,按需调整呗

我琢磨了快两天,就没有整懂这个、、、

发帖求助前要善用【论坛搜索】功能,那里可能会有你要找的答案;

如何回报帮助你解决问题的坛友,好办法就是点击帖子下方的评分按钮给对方加【金币】不会扣除自己的积分,做一个热心并受欢迎的人!

回复

使用道具 举报

 楼主| 发表于 2015-7-10 13:13:45 | 显示全部楼层 来自 中国–陕西–西安
诸葛凤梧 发表于 2015-7-10 12:43
你的错位是宽度不够导致的,按需调整呗

上面哪个选项卡的宽度是怎么调啊?我一调就错位了label {                        cursor: pointer;
                        background: -webkit-linear-gradient(#666, #555);
                        color: #eee;
                        border-radius: 5px 5px 0 0;

                        float: left;
                        font-size:14px;

                        /**/font: italic 1em cambria;
                        padding: 1% 0.9%;
                }中的padding

发帖求助前要善用【论坛搜索】功能,那里可能会有你要找的答案;

如何回报帮助你解决问题的坛友,好办法就是点击帖子下方的评分按钮给对方加【金币】不会扣除自己的积分,做一个热心并受欢迎的人!

回复

使用道具 举报

发表于 2015-7-10 13:36:29 | 显示全部楼层 来自 中国–浙江–嘉兴–海宁市
你想要调整为多少

点评

就是把宽度调为270px  详情 回复 发表于 2015-7-10 14:08

发帖求助前要善用【论坛搜索】功能,那里可能会有你要找的答案;

如何回报帮助你解决问题的坛友,好办法就是点击帖子下方的评分按钮给对方加【金币】不会扣除自己的积分,做一个热心并受欢迎的人!

回复

使用道具 举报

 楼主| 发表于 2015-7-10 14:08:03 | 显示全部楼层 来自 中国–陕西–西安

就是把宽度调为270px

点评

实在不行换个tab代码吧,这个俺也调不到270  详情 回复 发表于 2015-7-10 14:46

发帖求助前要善用【论坛搜索】功能,那里可能会有你要找的答案;

如何回报帮助你解决问题的坛友,好办法就是点击帖子下方的评分按钮给对方加【金币】不会扣除自己的积分,做一个热心并受欢迎的人!

回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则 需要先绑定手机号

关闭

站长推荐上一条 /1 下一条

QQ|侵权投诉|广告报价|手机版|小黑屋|西部数码代理|飘仙建站论坛 ( 豫ICP备2022021143号-1 )

GMT+8, 2024-11-19 21:34 , Processed in 0.066220 second(s), 13 queries , Redis On.

Powered by Discuz! X3.5

© 2001-2024 Discuz! Team.

快速回复 返回顶部 返回列表