个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
晚上好!
目前我有一个水平方向的选项卡。此外，我希望在同一选项卡内容的右侧有一些垂直方向的选项卡。
我可以转动
到目前为止，这是我的代码:
HTML:
<div class="tabs">
<ul class="tab-links">
<li class="active"><a href="#About">About</a></li>
<li><a href="#Video">Video</a></li>
<li><a href="#Media">Media</a></li>
<li><a href="#Contact">Contact</a></li>
<li id="rotate"><a href="#CV">CV</a></li>
<li id="rotate"><a href="#Pro">Prosjekter</a></li>
</ul>
<div class="tab-content">
<div id="About" class="tab active">
<p>Tab #1 content goes here!</p>
<p>Donec pulvinar neque sed semper lacinia. Curabitur lacinia ullamcorper nibh; quis imperdiet velit eleifend ac. Donec blandit mauris eget aliquet lacinia! Donec pulvinar massa interdum risus ornare mollis.</p>
</div>
<div id="Video" class="tab">
<p>Tab #2 content goes here!</p>
<p>Donec pulvinar neque sed semper lacinia. Curabitur lacinia ullamcorper nibh; quis imperdiet velit eleifend ac. Donec blandit mauris eget aliquet lacinia! Donec pulvinar massa interdum risus ornare mollis. In hac habitasse platea dictumst. Ut euismod tempus hendrerit. Morbi ut adipiscing nisi. Etiam rutrum sodales gravida! Aliquam tellus orci, iaculis vel.</p>
</div>
<div id="Media" class="tab">
<p>Tab #3 content goes here!</p>
<p>Donec pulvinar neque sed semper lacinia. Curabitur lacinia ullamcorper nibh; quis imperdiet velit eleifend ac. Donec blandit mauris eget aliquet lacinia! Donec pulvinar massa interdum ri.</p>
</div>
<div id="Contact" class="tab">
<p>Tab #4 content goes here!</p>
<p>Donec pulvinar neque sed semper lacinia. Curabitur lacinia ullamcorper nibh; quis imperdiet velit eleifend ac. Donec blandit mauris eget aliquet lacinia! Donec pulvinar massa interdum risus ornare mollis. In hac habitasse platea dictumst. Ut euismod tempus hendrerit. Morbi ut adipiscing nisi. Etiam rutrum sodales gravida! Aliquam tellus orci, iaculis vel.</p>
</div>
<div id="CV" class="tab">
<p>Tab #5 content goes here!</p>
<p>Donec pulvinar neque sed semper lacinia. Curabitur lacinia ullamcorper nibh; quis imperdiet velit eleifend ac. Donec blandit mauris eget aliquet lacinia! Donec pulvinar massa interdum risus ornare mollis. In hac habitasse platea dictumst. Ut euismod tempus hendrerit. Morbi ut adipiscing nisi. Etiam rutrum sodales gravida! Aliquam tellus orci, iaculis vel.</p>
</div>
<div id="Pro" class="tab">
<p>Tab #6 content goes here!</p>
<p>Donec pulvinar neque sed semper lacinia. Curabitur lacinia ullamcorper nibh; quis imperdiet velit eleifend ac. Donec blandit mauris eget aliquet lacinia! Donec pulvinar massa interdum risus ornare mollis. In hac habitasse platea dictumst. Ut euismod tempus hendrerit. Morbi ut adipiscing nisi. Etiam rutrum sodales gravida! Aliquam tellus orci, iaculis vel.</p>
</div>
</div> <!-- End content-body -->
CSS:
/*----- Tabs -----*/
.tabs {
display:inline-block;
position: absolute;
width:475px;
margin-left: 20px;
float:right;
}
/*----- Tab Links -----*/
/* Clearfix */
.tab-links:after {
display:inline-block;
content:'';
}
.tab-links li {
margin:-5px 7px;
float:left;
list-style:none;
}
.tab-links a {
padding:9px 15px;
margin-top: -15px;
display:inline-block;
border-radius:3px 3px 0px 0px;
background:#df8b67;
font-size:18px;
font-weight:bold;
color:#fff;
text-decoration: none;
/*font-family: MoviePoster;*/
}
.tab-links a:hover {
background:#d25a26;
text-decoration:none;
text-decoration: none;
}
li.active a, li.active a:hover {
background:#d25a26;
color:#fff;
}
/*----- Tab right -----*/
/* Clearfix */
.tab-link-right:after {
display:inline-block;
content:'';
}
.tab-links-right li {
margin:-5px 7px;
float:left;
list-style:none;
display: inline;
}
.tab-links-right a {
padding:9px 15px;
margin-top: -15px;
display:inline-block;
border-radius:3px 3px 0px 0px;
background:#df8b67;
font-size:18px;
font-weight:bold;
color:#fff;
text-decoration: none;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
/*font-family: MoviePoster;*/
}
.tab-links-right a:hover {
background:#d25a26;
text-decoration:none;
text-decoration: none;
}
li.active a, li.active a:hover {
background:#d25a26;
color:#fff;
}
/*----- Content of Tabs -----*/
.tab-content {
margin-top: -14px;
padding:20px;
border-radius:3px;
background:#fff;
border-style: solid;
border-color: #d25a26;
height:447px;
-moz-box-shadow: 5px 5px 2.5px #888;
-webkit-box-shadow: 5px 5px 2.5px #888;
box-shadow: 5px 5px 2.5px #888;
}
.tab {
display:none;
}
.tab.active {
display:block;
}
#rotate {
/* Safari */
-webkit-transform: rotate(90deg);
/* Firefox */
-moz-transform: rotate(90deg);
/* IE */
-ms-transform: rotate(90deg);
/* Opera */
-o-transform: rotate(90deg);
/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
最佳答案
根据 OP 的评论更新
首先，您缺少 tabs div 的结束标记。其次，您不能为两个元素分配相同的 id rotate。我为旋转元素提供了单独的 Id，他们为它们提供了以下 CSS 替换您的 rotate 类。并且没有更改 CSS 中的任何其他内容
像这样分配 Ids:
<li id="verOne"><a href="#CV">CV</a></li>
<li id="verTwo"><a href="#Pro">Prosjekter</a></li>
和 CSS:
li#verTwo {
position: absolute;
left: 450px;
top: 80px;
/* Safari */
-webkit-transform: rotate(90deg);
/* Firefox */
-moz-transform: rotate(90deg);
/* IE */
-ms-transform: rotate(90deg);
/* Opera */
-o-transform: rotate(90deg);
/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
li#verOne {
position: absolute;
left: 478px;
top: 185px;
/* Safari */
-webkit-transform: rotate(90deg);
/* Firefox */
-moz-transform: rotate(90deg);
/* IE */
-ms-transform: rotate(90deg);
/* Opera */
-o-transform: rotate(90deg);
/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
下面是带有完整代码的工作演示。
/*----- Tabs -----*/
.tabs {
display:inline-block;
position: absolute;
width:475px;
margin-left: 20px;
float:right;
}
/*----- Tab Links -----*/
/* Clearfix */
.tab-links:after {
display:inline-block;
content:'';
}
.tab-links li {
margin:-5px 7px;
float:left;
list-style:none;
}
.tab-links a {
padding:9px 15px;
margin-top: -15px;
display:inline-block;
border-radius:3px 3px 0px 0px;
background:#df8b67;
font-size:18px;
font-weight:bold;
color:#fff;
text-decoration: none;
/*font-family: MoviePoster;*/
}
.tab-links a:hover {
background:#d25a26;
text-decoration:none;
text-decoration: none;
}
li.active a, li.active a:hover {
background:#d25a26;
color:#fff;
}
/*----- Tab right -----*/
/* Clearfix */
.tab-link-right:after {
display:inline-block;
content:'';
}
.tab-links-right li {
margin:-5px 7px;
float:left;
list-style:none;
display: inline;
}
.tab-links-right a {
padding:9px 15px;
margin-top: -15px;
display:inline-block;
border-radius:3px 3px 0px 0px;
background:#df8b67;
font-size:18px;
font-weight:bold;
color:#fff;
text-decoration: none;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
/*font-family: MoviePoster;*/
}
.tab-links-right a:hover {
background:#d25a26;
text-decoration:none;
text-decoration: none;
}
li.active a, li.active a:hover {
background:#d25a26;
color:#fff;
}
/*----- Content of Tabs -----*/
.tab-content {
margin-top: -14px;
padding:20px;
border-radius:3px;
background:#fff;
border-style: solid;
border-color: #d25a26;
height:447px;
-moz-box-shadow: 5px 5px 2.5px #888;
-webkit-box-shadow: 5px 5px 2.5px #888;
box-shadow: 5px 5px 2.5px #888;
}
.tab {
display:none;
}
.tab.active {
display:block;
}
li#verTwo {
position: absolute;
left: 450px;
top: 80px;
/* Safari */
-webkit-transform: rotate(90deg);
/* Firefox */
-moz-transform: rotate(90deg);
/* IE */
-ms-transform: rotate(90deg);
/* Opera */
-o-transform: rotate(90deg);
/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
li#verOne {
position: absolute;
left: 478px;
top: 185px;
/* Safari */
-webkit-transform: rotate(90deg);
/* Firefox */
-moz-transform: rotate(90deg);
/* IE */
-ms-transform: rotate(90deg);
/* Opera */
-o-transform: rotate(90deg);
/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}<div class="tabs">
<ul class="tab-links">
<li class="active"><a href="#About">About</a></li>
<li><a href="#Video">Video</a></li>
<li><a href="#Media">Media</a></li>
<li><a href="#Contact">Contact</a></li>
<li id="verOne"><a href="#CV">CV</a></li>
<li id="verTwo"><a href="#Pro">Prosjekter</a></li>
</ul>
<div class="tab-content">
<div id="About" class="tab active">
<p>Tab #1 content goes here!</p>
<p>Donec pulvinar neque sed semper lacinia. Curabitur lacinia ullamcorper nibh; quis imperdiet velit eleifend ac. Donec blandit mauris eget aliquet lacinia! Donec pulvinar massa interdum risus ornare mollis.</p>
</div>
<div id="Video" class="tab">
<p>Tab #2 content goes here!</p>
<p>Donec pulvinar neque sed semper lacinia. Curabitur lacinia ullamcorper nibh; quis imperdiet velit eleifend ac. Donec blandit mauris eget aliquet lacinia! Donec pulvinar massa interdum risus ornare mollis. In hac habitasse platea dictumst. Ut euismod tempus hendrerit. Morbi ut adipiscing nisi. Etiam rutrum sodales gravida! Aliquam tellus orci, iaculis vel.</p>
</div>
<div id="Media" class="tab">
<p>Tab #3 content goes here!</p>
<p>Donec pulvinar neque sed semper lacinia. Curabitur lacinia ullamcorper nibh; quis imperdiet velit eleifend ac. Donec blandit mauris eget aliquet lacinia! Donec pulvinar massa interdum ri.</p>
</div>
<div id="Contact" class="tab">
<p>Tab #4 content goes here!</p>
<p>Donec pulvinar neque sed semper lacinia. Curabitur lacinia ullamcorper nibh; quis imperdiet velit eleifend ac. Donec blandit mauris eget aliquet lacinia! Donec pulvinar massa interdum risus ornare mollis. In hac habitasse platea dictumst. Ut euismod tempus hendrerit. Morbi ut adipiscing nisi. Etiam rutrum sodales gravida! Aliquam tellus orci, iaculis vel.</p>
</div>
<div id="CV" class="tab">
<p>Tab #5 content goes here!</p>
<p>Donec pulvinar neque sed semper lacinia. Curabitur lacinia ullamcorper nibh; quis imperdiet velit eleifend ac. Donec blandit mauris eget aliquet lacinia! Donec pulvinar massa interdum risus ornare mollis. In hac habitasse platea dictumst. Ut euismod tempus hendrerit. Morbi ut adipiscing nisi. Etiam rutrum sodales gravida! Aliquam tellus orci, iaculis vel.</p>
</div>
<div id="Pro" class="tab">
<p>Tab #6 content goes here!</p>
<p>Donec pulvinar neque sed semper lacinia. Curabitur lacinia ullamcorper nibh; quis imperdiet velit eleifend ac. Donec blandit mauris eget aliquet lacinia! Donec pulvinar massa interdum risus ornare mollis. In hac habitasse platea dictumst. Ut euismod tempus hendrerit. Morbi ut adipiscing nisi. Etiam rutrum sodales gravida! Aliquam tellus orci, iaculis vel.</p>
</div>
</div> <!-- End content-body -->
</div>关于CSS - 垂直方向的标签，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26077704/
25
4
0
所以我使用一个带有整个 block 的标签作为链接，它是一个产品展示，所以你点击它会转到产品页面。现在我创建了一个标签作为链接到购物车页面的按钮。所以我让它工作，但是当我点击购物车按钮时，两个页面都会
根据 Web 标准，创建带有标题 1 的链接的正确代码是什么？ 是吗 stackoverflow 或 stackoverflow 谢谢 最佳答案 根据网络标准，您不能将 block 元素放入内
在Java中它是这样写的..当我移植这段代码时...意识到没有这样的东西 break 和continue . 我知道这些命令没有包含在内，因为在使用带有命令的 goto 时必须有一种更简洁的方法来执
我们有一个相当标准的发布过程，使用 Visual Source Safe 在发布之前标记构建。这允许我们在出现任何问题时从该标签中获取，并在需要更改时使用它进行分支。 我们有几个不同的项目，并且总是使
我必须创建一个搜索内容，其中包含搜索框、标题和段落描述。默认情况下，描述被禁用，当我输入一些与描述文本匹配的文本时，描述段落标签应该打开。一些匹配的演示是这样的: [ fiddle ][1] 但默认情
我一直在阅读有关 的文档标签，我似乎无法理解它与简单地使用 有何不同那是 display: none; 文档:template tag 例子 对比 例子
我需要一个脚本来复制当开关按钮打开时标记，当开关按钮关闭时删除标记。我需要一个简单的方法。这是开关按钮: 我试过这个: var change
JSF 是一个 MVC 框架，但我很困惑为什么我们已经有了这么多 HTML 标签还需要 JSF 标签。毫无疑问，JSF 简化了很多事情。我想进一步了解 JSF 中的模型 View 和 Controll
我在这个 website 上看到了那些 html 代码: Homepa
我添加了 photoswipe 插件，可以使用 搜索我的所有照片。标签，如果点击，照片就会变成全屏。我让它工作了，但现在我的导航栏(有 标签)在点击时会触发 photoswipe 插件。 在 ph
标签
我正在尝试截断显示自 的文本标签，但它不工作。我将样式应用于其他标签样式并且它确实有效(我看到的示例中没有一个使用 标签)。我想知道是否有人可以向我解释为什么会这样(我不是最擅长 HTML/CSS
HTML 是这样的: Menu 1 Menu 2 Sub menu 2
我可以更改 TextInputLayout 的位置 float 标签(底部 float 标签)吗？我需要为波纹管 float 标签设置正确的位置。 最佳答案 我解决了我的问题，这是我的 xml:
我的代码是 printMsg : function(data) { $("#message").html(data.bodyText); ... } 这里 data.body
我是 Scrapy 和 Xpath 的初学者，我正在寻找解析具有以下结构的网站 cat1 value1 value2
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。 要求提供代码的问题必须表现出对所解决问题的最低限度理解。包括尝试过的解决方案、为什么它们不起作用，以及
我必须从 xml 中解析数据。这是我的 xml- 或者它的 url 是:http://mobileecommerce.site247365.com/admin/catdata.xml News f
如何创建应该允许多行数据的标记。不要说使用textarea标签。我知道，但我只想 标记因为标签具有 value 属性。所以当我从 xml 文件获取值时，我应该使用 jquery 语法动态获取.. 最佳
我有一个页面使用我定义的某些样式。 在同一页面上，我刚刚导入了一个使用自己样式的外部 jQuery 插件，例如，包括 。被我自己覆盖的标签样式。 如何确保我的样式表中的样式不会覆盖 jQuery 插件
关闭。这个问题是opinion-based .它目前不接受答案。 想要改进这个问题？ 更新问题，以便 editing this post 可以用事实和引用来回答它. 关闭 8 年前。 Improve
我是一名优秀的程序员,十分优秀！