任何帮助或建议将不胜感激，我已经让一个朋友成为了一个无利可图的网站……我在网站上有一些标签，因为我正在为这个人做这个的人有水平和垂直的图片，我认为如果我可以将它设置为它们之间的标签会看起来很棒，我可以在标签内获取这些图片库的唯一方法是使用 iframe，链接是 www.parkleyvisualarts.com/abstract.htm
下面有一些css代码，我认为问题出在哪里，我提前道歉，因为我知道我已经超出了我的深度，但是到目前为止我在这个项目上学到了很多东西，而且大多数人都玩得很开心所以（直到像这样的时刻，我无法终生找到并解决问题！哈哈）
/**************************************************************************
* @name Zozo UI Tabs
* @descripton Create awesome tabbed content area
* @version 5.0
* @requires jQuery v1.7 or later
* @copyright Copyright (c) 2013 Zozo UI
* @author Zozo UI
* @URL: http://www.zozoui.com
*
* 1. Core (structure)
* 2. Sizes
* 3. Video
* 4. Icons
* 5. Helper classes
*
* Most of the time you shouldn't delete/edit section 1 (Core).
* You can delete/edit sizes, video, icons support and Helper classes if you need.
*
**************************************************************************/
/*#region ==========================================================================
Core (structure)
========================================================================== */
.z-tabs *, .z-tabs:before, .z-tabs:before
{
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
}
.z-tabs,
.z-tabs > ul.z-tabs-nav,
.z-tabs > ul.z-tabs-nav > li,
.z-tabs > ul.z-tabs-nav > li > a.z-link
{
}
.z-tabs
{
margin: auto;
padding: 0;
clear: both;
color: #333;
font: 12px/1.7em "Century Gothic",Helvetica,Arial,sans-serif;
font: 14px/20px "Century Gothic",Helvetica,Arial,sans-serif;
}
.z-tabs > ul.z-tabs-nav
{
position: relative;
margin: 0;
padding: 0;
border: 0;
outline: 0;
list-style: none;
}
.z-tabs > ul.z-tabs-nav > li
{
background: #F9F9F9;
background:#fff;
position: relative;
display: block;
list-style-type: none;
padding: 0;
margin: 0;
overflow: hidden;
}
.z-tabs > ul.z-tabs-nav > li:hover
{
outline: 0 none;
text-decoration: none;
}
.z-tabs > ul.z-tabs-nav > li.z-active,
.z-tabs > ul.z-tabs-nav > li.z-active:hover
{
background: #fff;
font-weight: bold;
}
.z-tabs > ul.z-tabs-nav > li,
.z-tabs > ul.z-tabs-nav > li > a.z-link
{
cursor: pointer;
}
.z-tabs > ul.z-tabs-nav > li.z-active,
.z-tabs > ul.z-tabs-nav > li.z-active > a.z-link
{
cursor: default;
font-weight: bold;
}
.z-tabs > ul.z-tabs-nav > li > a.z-link
{
display: block;
position: relative;
outline: 0;
color: #111;
line-height: 18px;
text-decoration: none;
font-weight: inherit;
font-size: 1.11em;
}
.z-tabs > ul.z-tabs-nav,
.z-tabs > ul.z-tabs-nav > li,
.z-tabs > .z-container
{
border-color: #CECECE;
border-style: solid;
}
.z-tabs > .z-container
{
padding: 0;
margin: 0;
border-width: 0px;
background: #000;
position: relative;
font-size: 1.2em;
/*min-height: 100px;*/
}
.z-tabs > .z-container > .z-content
{
display: none;
background: none;
}
.z-tabs > .z-container > .z-content > .z-content-inner
{
padding: 0em 0em;
height: 100%;
}
/*clear floats after each content*/
.z-tabs > .z-container > .z-content::after,
.z-tabs > .z-container > .z-content > .z-content-inner::after
{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/*clear floats after each content For IE 6/7 */
.z-tabs > .z-container > .z-content,
.z-tabs > .z-container > .z-content > .z-content-inner
{
zoom: 1;
}
/* animation sliding effects */
.z-tabs.z-slide > .z-container
{
overflow: hidden;
}
.z-tabs.z-slide > .z-container > .z-content,
.z-tabs > .z-container.z-animating > .z-content
{
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
padding: 0;
z-index: 7;
}
.z-tabs.z-slide > .z-container > .z-content.z-active
{
z-index: 8;
}
/*#endregion*/
/*#region ==========================================================================
Sizes
========================================================================== */
/**/
.z-tabs.vertical.mini > ul.z-tabs-nav > li > a.z-link,
.z-tabs.vertical.small > ul.z-tabs-nav > li > a.z-link,
.z-tabs.horizontal.mini > ul.z-tabs-nav > li > a.z-link,
.z-tabs.horizontal.small > ul.z-tabs-nav > li > a.z-link {font-weight: inherit;}
.z-tabs.vertical.mini > ul.z-tabs-nav > li.z-active > a.z-link,
.z-tabs.vertical.small > ul.z-tabs-nav > li.z-active > a.z-link,
.z-tabs.horizontal.mini > ul.z-tabs-nav > li.z-active > a.z-link,
.z-tabs.horizontal.small > ul.z-tabs-nav > li.z-active > a.z-link {font-weight: bold;}
/* version 4.0 */
.z-tabs.vertical.mini > ul.z-tabs-nav > li > a.z-link {height: 34px;line-height: 34px;margin:0 10px 0 0;font-size: 11px;}
.z-tabs.vertical.small > ul.z-tabs-nav > li > a.z-link {height: 40px;line-height: 40px;margin:0 12px;font-size: 11px;}
.z-tabs.vertical.medium > ul.z-tabs-nav > li > a.z-link {height: 46px;line-height: 46px;margin:0 14px;font-size: 12px;}
.z-tabs.vertical.large > ul.z-tabs-nav > li > a.z-link {height: 52px;line-height: 52px;margin:0 18px;font-size: 13px;}
.z-tabs.vertical.xlarge > ul.z-tabs-nav > li > a.z-link {height: 58px;line-height: 56px;margin:0 20px;font-size: 14px;}
.z-tabs.vertical.xxlarge > ul.z-tabs-nav > li > a.z-link{height: 62px;line-height: 60px;margin:0 22px 0 20px;font-size: 14px;}
.z-tabs.vertical.top-left > ul.z-tabs-nav > li > a.z-link {padding-left:20px;margin-left:0;}
.z-tabs.vertical.top-right > ul.z-tabs-nav > li > a.z-link {padding-right:20px;margin-right:0;}
.z-tabs.vertical.mini > ul.z-tabs-nav{min-width: 180px;width:25%;}
.z-tabs.vertical.small > ul.z-tabs-nav {min-width: 180px;width:25%;}
.z-tabs.vertical.medium > ul.z-tabs-nav {min-width: 200px;width:25%;}
.z-tabs.vertical.large > ul.z-tabs-nav {min-width: 220px;width:25%;}
.z-tabs.vertical.xlarge > ul.z-tabs-nav {min-width: 240px;width:25%;}
.z-tabs.vertical.xxlarge > ul.z-tabs-nav {min-width: 260px;width:25%;}
.z-tabs.horizontal.mini > ul.z-tabs-nav > li > a.z-link {font-size: 11px;padding: 7px 20px;}
.z-tabs.horizontal.small > ul.z-tabs-nav > li > a.z-link {font-size: 11px;padding: 10px 20px;}
.z-tabs.horizontal.medium > ul.z-tabs-nav > li > a.z-link {font-size: 12px;padding: 13px 24px;}
.z-tabs.horizontal.large > ul.z-tabs-nav > li > a.z-link {font-size: 13px;padding: 16px 28px;}
.z-tabs.horizontal.xlarge > ul.z-tabs-nav > li > a.z-link {font-size: 14px;padding: 19px 32px;/*padding:20px 40px 8px 20px*/}
.z-tabs.horizontal.xxlarge > ul.z-tabs-nav > li > a.z-link {font-size: 14px;padding: 22px 36px;}
/**/
.z-tabs.horizontal.top-compact.mini > ul.z-tabs-nav > li > a.z-link {font-size: 11px;padding: 7px 10px;}
.z-tabs.horizontal.top-compact.small > ul.z-tabs-nav > li > a.z-link {font-size: 11px;padding: 10px 11px;}
.z-tabs.horizontal.top-compact.medium > ul.z-tabs-nav > li > a.z-link,
.z-tabs.horizontal.top.responsive.medium > ul.z-tabs-nav > li > a.z-link {font-size: 15px;padding: 13px 12px;}
.z-tabs.horizontal.top-compact.large > ul.z-tabs-nav > li > a.z-link {font-size: 13px;padding: 16px 13px;}
.z-tabs.horizontal.top-compact.xlarge > ul.z-tabs-nav > li > a.z-link {font-size: 13px;padding: 19px 14px;}
.z-tabs.horizontal.top-compact.xxlarge > ul.z-tabs-nav > li > a.z-link {font-size: 14px;padding: 22px 15px;}
/* version 5.0
.z-tabs.horizontal.top.responsive.mini > ul.z-tabs-nav > li > a.z-link,
.z-tabs.horizontal.top.responsive.small > ul.z-tabs-nav > li > a.z-link,
.z-tabs.horizontal.top.responsive.medium > ul.z-tabs-nav > li > a.z-link,
.z-tabs.horizontal.top.responsive.large > ul.z-tabs-nav > li > a.z-link,
.z-tabs.horizontal.top.responsive.xlarge > ul.z-tabs-nav > li > a.z-link,
.z-tabs.horizontal.top.responsive.xxlarge > ul.z-tabs-nav > li > a.z-link {padding-left:8px;padding-right:8px;}*/
/* version 4.0 multiline
.z-tabs.horizontal.bottom-compact.mini > ul.z-tabs-nav > li > a.z-link {font-size: 11px;padding: 7px 0px;}
.z-tabs.horizontal.bottom-compact.small > ul.z-tabs-nav > li > a.z-link {font-size: 11px;padding: 10px 0px;}
.z-tabs.horizontal.bottom-compact.medium > ul.z-tabs-nav > li > a.z-link {font-size: 12px;padding: 13px 0px;}
.z-tabs.horizontal.bottom-compact.large > ul.z-tabs-nav > li > a.z-link {font-size: 13px;padding: 16px 0px;}
.z-tabs.horizontal.bottom-compact.xlarge > ul.z-tabs-nav > li > a.z-link {font-size: 13px;padding: 19px 0px;}
.z-tabs.horizontal.bottom-compact.xxlarge > ul.z-tabs-nav > li > a.z-link {font-size: 14px;padding: 22px 0px;}
*/
/* version 4.0 multiline
.z-tabs.horizontal.mobile.mini > ul.z-tabs-nav > li > a.z-link {height: 32px;line-height: 32px;margin:0 10px;font-size: 11px;padding-top:0;padding-bottom:0;}
.z-tabs.horizontal.mobile.small > ul.z-tabs-nav > li > a.z-link {height: 38px;line-height: 38px;margin:0 12px;font-size: 11px;padding-top:0;padding-bottom:0;}
.z-tabs.horizontal.mobile.medium > ul.z-tabs-nav > li > a.z-link {height: 44px;line-height: 44px;margin:0 14px;font-size: 12px;padding-top:0;padding-bottom:0;}
.z-tabs.horizontal.mobile.large > ul.z-tabs-nav > li > a.z-link {height: 50px;line-height: 50px;margin:0 18px;font-size: 13px;padding-top:0;padding-bottom:0;}
.z-tabs.horizontal.mobile.xlarge > ul.z-tabs-nav > li > a.z-link {height: 56px;line-height: 56px;margin:0 20px;font-size: 13px;padding-top:0;padding-bottom:0;}
.z-tabs.horizontal.mobile.xxlarge > ul.z-tabs-nav > li > a.z-link{height: 62px;line-height: 62px;margin:0 22px;font-size: 14px;padding-top:0;padding-bottom:0;}
*/
/*#endregion*/
/*#region ==========================================================================
Video Support, Youtube, Vimeo, Iframe
========================================================================== */
.z-tabs .z-video
{
position: relative;
padding-bottom: 6.25%;
padding-bottom: 53%; /* 16:9 */
padding-top: 30px;
height: 0px;
overflow: hidden;
}
.z-tabs .z-video iframe,
.z-tabs .z-video object,
.z-tabs .z-video embed
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border:none;
z-index: 20;
}
/*#endregion*/
/*#region ==========================================================================
Icons Support
========================================================================== */
/* Font Awesome */
.z-tabs > ul.z-tabs-nav > li > a.z-link i
{
font-size: 16px;
display: inline;
width: auto;
height: auto;
line-height: normal;
}
.z-tabs > ul.z-tabs-nav > li > a.z-link > span.z-icon,
.z-tabs.z-multiline > ul.z-tabs-nav.z-tabs-desktop > li > a.z-link > span.z-icon,
.z-tabs.z-multiline > ul.z-tabs-nav.z-tabs-mobile > li > a.z-link > span > span.z-icon
{
width: 20px;
display: inline-block;
font-size: inherit;
font-weight: normal;
text-transform: initial;
text-align: left;
}
.z-tabs.vertical > ul.z-tabs-nav > li > a.z-link > span.z-icon,
.z-tabs.z-multiline.vertical > ul.z-tabs-nav.z-tabs-desktop > li > a.z-link > span.z-icon,
.z-tabs.z-multiline.vertical > ul.z-tabs-nav.z-tabs-mobile > li > a.z-link > span > span.z-icon
{
width: 24px;
}
/*#endregion*/
/*#region ==========================================================================
Helper classes
========================================================================== */
/*align tabs titles center*/
.z-tabs.center > ul.z-tabs-nav > li > a.z-link,
.z-tabs.center.mobile > ul.z-tabs-nav > li > a.z-link
{
text-align: center !important;
}
/*align tabs titles right*/
.z-tabs.right > ul.z-tabs-nav > li > a.z-link,
.z-tabs.right.mobile > ul.z-tabs-nav > li > a.z-link
{
text-align: right !important;
}
/*align tabs titles left*/
.z-tabs.left > ul.z-tabs-nav > li > a.z-link,
.z-tabs.left.mobile > ul.z-tabs-nav > li > a.z-link
{
text-align: left !important;
}
/*z-nopadding on content*/
.z-tabs.vertical > .z-container > .z-content.z-nopadding > .z-content-inner,
.z-tabs.horizontal > .z-container > .z-content.z-nopadding > .z-content-inner
{
padding: 0;
}
/*Clear the float on any element*/
.clearfix
{
*zoom: 1;
}
.clearfix:before,
.clearfix:after
{
display: table;
content: "";
line-height: 0;
}
.clearfix:after
{
clear: both;
}
/*#endregion*/
我知道这里有很多代码，但是如果有人可以提供帮助，我将不胜感激，感谢您的时间并期待回复，再次感谢您:)
抱歉，我完全从工作中崩溃了，我的问题是图片库下方有一个白框，我尝试了一些方法并摆脱了这个白框，但是当浏览器变小时（因为页面响应）白框再次出现，所以如果你明白我的意思，它现在与问题相反吗？如果我没有很好地解释这一点，我很抱歉，我可能不是。这是带有图像库选项卡的页面的 HTML：
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Parkley Visual Arts - Abstract Photography</title>
<meta name="Description" content="Parkley Visual Arts. Graphic Design & Art">
<meta name="KeyWords" content="Graphic Design, Graphic Arts, Graphic Art, Frame Pictures, Frame Pics, Photopgraphy, Leamington Arts, Leamington Graphics, Leamington Designs, Warwickshire Graphic Arts, Leamington Abstract, Leamington Scenic, Leamington Illustration, Leamington Logos, Leamington Exhibitions, ">
<!-- Mobile viewport -->
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<!-- CSS-->
<!-- Google web fonts. You can get your own bundle at http://www.google.com/fonts. Don't forget to update the CSS accordingly!-->
<link href='http://fonts.googleapis.com/css?family=Century+Gothic:400,700,400italic|Oswald:400,300' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/colorblocks-style.css">
<link rel="stylesheet" href="source/zozo.tabs.core.css">
<link rel="stylesheet" href="source/zozo.tabs.horizontal.css">
<link rel="stylesheet" href="source/zozo.tabs.themes2.css">
<link rel="stylesheet" href="source/zozo.tabs.responsive.css">
<link rel="stylesheet" href="source/zozo.tabs.mobile.css">
<!-- end CSS-->
<!-- JS-->
<script src="js/libs/modernizr-2.6.2.min.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.easing.min.js"></script>
<script src="js/zozo.tabs.min.js"></script>
<!-- end JS-->
<body onload="MM_preloadImages('Bottom.gif','Banners.gif',')">
</head>
<body onLoad="setTimeout(function() {window.scrollTo(0, 1)}, 100)" id="home">
<!--[if lt IE 7]>
<p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
<![endif]-->
<!-- header area -->
<header class="wrapper clearfix">
<div id="banner">
<div id="logo"><a href="http://www.parkleyvisualarts.com/main.htm"><img src="Banners.gif" width="100%"></a></div>
</div>
<!-- main navigation -->
<nav id="topnav" role="navigation">
<div class="menu-toggle">Ξ</div>
<ul class="srt-menu" id="menu-main-navigation">
<li><a href="http://www.parkleyvisualarts.com/main.htm">HOME</a></li>
<li>
<a href="#">DESIGN</a>
<ul>
<li><a href="http://www.parkleyvisualarts.com/logo.htm">LOGO</a></li>
<li><a href="http://www.parkleyvisualarts.com/graphics.htm">GRAPHICS</a></li>
</ul>
<li>
<a href="http://www.parkleyvisualarts.com/illustration.htm">ILLUSTRATION</a>
<li>
<a href="#">PHOTOGRAPHY</a>
<ul>
<li><a href="http://www.parkleyvisualarts.com/abstract.htm">ABSTRACT</a></li>
<li><a href="http://www.parkleyvisualarts.com/scenic.htm">SCENIC</a></li>
</ul>
<li>
<a href="#">ABOUT</a>
<ul>
<li><a href="#">BIO</a></li>
</ul>
<li>
<a href="#">NEWS</a>
<ul>
<li><a href="http://www.parkleyvisualarts.com/newarrivals.htm">NEW ARRIVALS</a></li>
<li><a href="#">EXHIBITIONS</a></li>
</ul>
<li>
<a href="http://www.parkleyvisualarts.com/contact.htm">CONTACT</a>
</li>
</nav><!-- end main navigation -->
</header><!-- end header -->
<!-- hero area (the grey one with a slider) -->
<section id="hero" class="clearfix">
<div id="wrapper">
<div id="flexslider">
<div class="tabbed-nav" id="tabbed-nav" align="center">
<ul>
<li><a><font face="century gothic">ABSTRACT HORIZONTAL</a></font></li>
<li><a><font face="century gothic">ABSTRACT VERTICAL</a></font></li>
</ul>
<div>
<div>
<div class="z-nopadding">
<div class="z-video">
<iframe src="http://www.parkleyvisualarts.com/abhorizontal.htm" frameborder="0" width="100%" height="100%" scrolling="no"></iframe>
</div></div></div>
<div>
<div class="z-nopadding">
<div class="z-video">
<iframe src="http://www.parkleyvisualarts.com/abvertical.htm" frameborder="0" width="100%" height="100%" scrolling="no"></iframe>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section><!-- end hero area -->
<script>
jQuery(document).ready(function ($) {
$("#tabbed-nav").zozoTabs({
position: "top-compact",
theme: "black",
rounded: false,
shadows: true,
size: "medium",
orientation: "horizontal",
responsive: true,
defaultTab: "tab1",
style: "normal",
responsiveDelay: 0,
animation: {
easing: "easeInOutExpo",
duration: 600,
effects: "slideH"
}
});
});
</script>
<!-- footer area -->
<center><img src="Bottom.gif" width="1205px">
</footer>
<!-- #end footer area -->
<!-- fire ups - read this file! -->
<script src="js/main.js"></script>
</body>
</html>
对困惑感到抱歉。