个人中心
gpt4 book ai didi

html - 如果我放大，div 容器就会消失

转载 作者：太空宇宙 更新时间：2023-11-04 12:25:45 25 4
gpt4 key购买 nike

关于 my Page我有一个导航栏。但是，如果我在导航栏内放大，就会消失。导航得到了位置:固定。我不知道如何更正它，当我放大它时我仍然可以看到导航栏。

代码:

*{
    margin: 0px;
    padding: 0px;
    font-family: 'Muli', sans-serif;
    font-size: 20px;
}

body{
    background-color: #4A3A47;
    height: 5000px;
}

section{
    width: 1200px;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
    text-align: center;
    height: 100%;
}


.divbox{
    vertical-align: top;
    display: inline-block;
    width: 250px;
    border: 4px solid #D7E8D5;
    margin: 0 50px;
    transition: all 0.5s;
    margin-top: 200px;
    margin-bottom: 200px;
    background-color: #D7E8D5;
}

.divbox:hover{
    border-bottom-right-radius: 75px;
    border-bottom-left-radius: 75px; 
}



/* Bildern noch eine Klasse geben */

.divbox:hover img{
    border-bottom-right-radius: 75px;
    border-bottom-left-radius: 75px;    
}

img{
    transition: all 0.5s;
}

/*margin-left: -602px;---------------*/


nav {
    margin-left: -602px;
    position: fixed;
    left: 50%;
    transform: translate(-100%);
    top: 100px;
    width: 250px;
    background-color: #E8ED76;
}

nav h3{
	font-size: 12px;
	line-height: 34px;
	padding: 0 10px;
	cursor: pointer;
	background-color: #FFCD57;
}

nav li{
    list-style-type: none;
}

nav ul ul li a{
    color: black;
    text-decoration: none;
    font-size: 20px;
    line-height: 27px;
    display: block;
    padding: 0 15px;
    transition: all 0.5s;
}

nav ul ul li a:hover{
    background-color: #FFCD57;
    border-left: 5px solid #4A3A47;
}

nav ul ul{
    display: none;
}

nav li.active ul{
    display: block;
}
<html>
    <head>
        <title>Startseite</title>
        <link rel="stylesheet" href="index.css">
        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
        <link href='http://fonts.googleapis.com/css?family=Muli' rel='stylesheet' type='text/css'>
        
        
        <!-- prefix free to deal with vendor prefixes -->
<script src="http://thecodeplayer.com/uploads/js/prefixfree-1.0.7.js" type="text/javascript" type="text/javascript"></script>

<!-- jQuery -->
<script src="http://thecodeplayer.com/uploads/js/jquery-1.7.1.min.js" type="text/javascript"></script>
        
        <script type="text/javascript">
/*jQuery time*/
$(document).ready(function(){
	$("nav h3").click(function(){
		//slide up all the link lists
		$("nav ul ul").slideUp();
		//slide down the link list below the h3 clicked - only if its closed
		if(!$(this).next().is(":visible"))
		{
			$(this).next().slideDown();
		}
	})
})
</script>
    </head>
    <body>
        
        <nav>
            <ul>
                <li><h3>Bereich 1</h3>
                    <ul>
                        <li><a href="#">Link 1.1</a></li>
                        <li><a href="#">Link 1.2</a></li>
                    </ul>
                </li>
                <li><h3>Bereich 2</h3>
                    <ul>
                        <li><a href="#">Link 2.1</a></li>
                        <li><a href="#">Link 2.2</a></li>
                        <li><a href="#">Link 2.1</a></li>
                        <li><a href="#">Link 2.2</a></li>
                        <li><a href="#">Link 2.1</a></li>
                        <li><a href="#">Link 2.2</a></li>
                    </ul>
                </li>
                <li><h3>Bereich 2</h3>
                    <ul>
                        <li><a href="#">Link 2.1</a></li>
                        <li><a href="#">Link 2.2</a></li>
                        <li><a href="#">Link 2.1</a></li>
                        <li><a href="#">Link 2.2</a></li>
                        <li><a href="#">Link 2.1</a></li>
                        <li><a href="#">Link 2.2</a></li>
                    </ul>
                </li>
            </ul>
        </nav>
        
        
        
        
        <section>
            <article>
                <div class="divbox">
                    <img src="http://ipadminibackgrounds.com/assets/Battlefield-3-Game-iPad-mini-wallpaper-250x250.jpg" width="250" height="250" />
                </div>
                <div class="divbox">
                    <img src="http://static.planetminecraft.com/files/resource_media/screenshot/1341/11Minecraft-Creeper-Wallpaper-1080p-HD-250x250up_6509836_lrg.jpg" width="250" height="250" />
                </div>
                <div class="divbox">
                    <img src="https://lh5.googleusercontent.com/-Nv-tRjOe0Ww/AAAAAAAAAAI/AAAAAAAAAMQ/81G-ZfxzYNc/photo.jpg" width="250" height="250" />
                </div>
            </article>
        </section>
    </body>
</html>

最佳答案

我已经为您解决了这个问题。

*{
    margin: 0px;
    padding: 0px;
    font-family: 'Muli', sans-serif;
    font-size: 20px;
}

body{
    background-color: #4A3A47;
    height: 5000px;
}

section{
    width: 1200px;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
    text-align: center;
    height: 100%;
}


.divbox{
    vertical-align: top;
    display: inline-block;
    width: 250px;
    border: 4px solid #D7E8D5;
    margin: 0 50px;
    transition: all 0.5s;
    margin-top: 200px;
    margin-bottom: 200px;
    background-color: #D7E8D5;
}

.divbox:hover{
    border-bottom-right-radius: 75px;
    border-bottom-left-radius: 75px; 
}



/* Bildern noch eine Klasse geben */

.divbox:hover img{
    border-bottom-right-radius: 75px;
    border-bottom-left-radius: 75px;    
}

img{
    transition: all 0.5s;
}

/*margin-left: -602px;---------------*/


nav {
   
    position: fixed;
    top:90px;
    left:0px;
    
    width: 250px;
    background-color: #E8ED76;
z-index:100;
}

nav h3{
	font-size: 12px;
	line-height: 34px;
	padding: 0 10px;
	cursor: pointer;
	background-color: #FFCD57;
}

nav li{
    list-style-type: none;
}

nav ul ul li a{
    color: black;
    text-decoration: none;
    font-size: 20px;
    line-height: 27px;
    display: block;
    padding: 0 15px;
    transition: all 0.5s;
}

nav ul ul li a:hover{
    background-color: #FFCD57;
    border-left: 5px solid #4A3A47;
}

nav ul ul{
    display: none;
}

nav li.active ul{
    display: block;
}
<html>
    <head>
        <title>Startseite</title>
        <link rel="stylesheet" href="index.css">
        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
        <link href='http://fonts.googleapis.com/css?family=Muli' rel='stylesheet' type='text/css'>
        
        
        <!-- prefix free to deal with vendor prefixes -->
<script src="http://thecodeplayer.com/uploads/js/prefixfree-1.0.7.js" type="text/javascript" type="text/javascript"></script>

<!-- jQuery -->
<script src="http://thecodeplayer.com/uploads/js/jquery-1.7.1.min.js" type="text/javascript"></script>
        
        <script type="text/javascript">
/*jQuery time*/
$(document).ready(function(){
	$("nav h3").click(function(){
		//slide up all the link lists
		$("nav ul ul").slideUp();
		//slide down the link list below the h3 clicked - only if its closed
		if(!$(this).next().is(":visible"))
		{
			$(this).next().slideDown();
		}
	})
})
</script>
    </head>
    <body>
        
        <nav>
            <ul>
                <li><h3>Bereich 1</h3>
                    <ul>
                        <li><a href="#">Link 1.1</a></li>
                        <li><a href="#">Link 1.2</a></li>
                    </ul>
                </li>
                <li><h3>Bereich 2</h3>
                    <ul>
                        <li><a href="#">Link 2.1</a></li>
                        <li><a href="#">Link 2.2</a></li>
                        <li><a href="#">Link 2.1</a></li>
                        <li><a href="#">Link 2.2</a></li>
                        <li><a href="#">Link 2.1</a></li>
                        <li><a href="#">Link 2.2</a></li>
                    </ul>
                </li>
                <li><h3>Bereich 2</h3>
                    <ul>
                        <li><a href="#">Link 2.1</a></li>
                        <li><a href="#">Link 2.2</a></li>
                        <li><a href="#">Link 2.1</a></li>
                        <li><a href="#">Link 2.2</a></li>
                        <li><a href="#">Link 2.1</a></li>
                        <li><a href="#">Link 2.2</a></li>
                    </ul>
                </li>
            </ul>
        </nav>
        
        
        
        
        <section>
            <article>
                <div class="divbox">
                    <img src="http://ipadminibackgrounds.com/assets/Battlefield-3-Game-iPad-mini-wallpaper-250x250.jpg" width="250" height="250" />
                </div>
                <div class="divbox">
                    <img src="http://static.planetminecraft.com/files/resource_media/screenshot/1341/11Minecraft-Creeper-Wallpaper-1080p-HD-250x250up_6509836_lrg.jpg" width="250" height="250" />
                </div>
                <div class="divbox">
                    <img src="https://lh5.googleusercontent.com/-Nv-tRjOe0Ww/AAAAAAAAAAI/AAAAAAAAAMQ/81G-ZfxzYNc/photo.jpg" width="250" height="250" />
                </div>
            </article>
        </section>
    </body>
</html>

关于html - 如果我放大，div 容器就会消失，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28026167/

25 4 0
文章推荐： linux - ffmpeg HLS转码和分块上传到远程服务器
文章推荐： java - 如何让 proguard 将 zip 文件视为资源？
文章推荐： java - 如何使用 ClassLoader 或 Class 以编程方式加载类
文章推荐： javascript - 如果名称为空，则隐藏文章的 css/jquery 代码
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com