1

任何帮助或建议将不胜感激,我已经让一个朋友成为了一个无利可图的网站……我在网站上有一些标签,因为我正在为这个人做这个的人有水平和垂直的图片,我认为如果我可以将它设置为它们之间的标签会看起来很棒,我可以在标签内获取这些图片库的唯一方法是使用 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>

对困惑感到抱歉。

4

0 回答 0