个人中心
gpt4 book ai didi

html - 如何垂直堆叠我的导航栏

转载 作者：行者123 更新时间：2023-11-28 05:07:16 25 4
gpt4 key购买 nike

所以我正在尝试编辑编码，当@Media 宽度小于 600 像素时，我希望我的导航栏像这样垂直堆叠 this is what i want it to look like.

所以基本上我希望导航栏垂直堆叠，并且从另一部分(也称为最近更新部分)开始的所有内容都属于一列。下面的代码是我到目前为止使用 html 和 css 所做的。

body{background:#000;font:normal small "Trebuchet MS", Arial, Helvetica, sans-serif;margin:20px 0;padding:0;}
h1,h2,h3{color:#B13413;}
h2{font-size:1.6em;}
h3{font-size:1em;margin:0;}
p,ul,ol,blockquote{margin-top:0;}
a:link{border-bottom:1px dotted #CCC;text-decoration:none;color:#3284B5;}
#header{width:700px;height:200px;background:url(../img/img1.jpg) no-repeat;margin:0 auto;}
#header *{border:none;text-decoration:none;font-weight:400;color:#FFF;margin:0;}
#header h1{float:left;font-size:3em;padding:140px 0 0 20px;}
#menu{width:700px;height:41px;background:#37AEF2 url(../img/img2.gif);margin:0 auto;}
#menu ul{list-style:none;margin:0;padding:0;}
#menu li{display:inline;}
#menu a{display:block;float:left;height:32px;text-decoration:none;color:#FFF;padding:9px 20px 0;}
#menu a:hover,#menu .active a{background:url(../img/img3.gif);color:#FFF; }
#content{width:700px;background:url(../img/img4.gif);margin:0 auto;}
#colAd{float:left;width:120px;padding:10px;}
#colContent{float:left;width:360px;padding:20px 10px 0;  }
#colSidebar{float:left;width:160px;padding:20px 10px 0;}
#footer{width:700px;background:url(../img/img6.gif) repeat-x;font-size:smaller;margin:0 auto;padding:10px 0;}
#footer *{color:#666;}
a:hover,img{border:none;}
table th, td{
	border: 1px solid white;
}
<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="utf-8">
<title>Sploosh - You can splash in sploosh!</title>
<link rel="stylesheet" href="cssmobile/main.css" > 
<link rel="stylesheet" href="cssmobile/responsive.css">
</head>
<body>
<div id="header">
	<h1><a href="index.html">Splöösh - Mobile</a></h1>
	 
</div>
<div id="menu">
	<ul>
		<li class="active"><a href="index.html" accesskey="1" title="">Homepage</a></li>
		<li><a href="index.html" accesskey="2" title="">splöösh Desktop</a></li>
		<li><a href="index.html" accesskey="3" title="">My Photos</a></li>
		<li><a href="index.html" accesskey="4" title="">My Bookmarks</a></li>
		<li><a href="index.html" accesskey="5" title="">Contact Me</a></li>
	</ul>
</div>
<div style="clear: both;"></div>
<div id="content">
	<div id="colAd"> <a href="#"><img src="img/ad_120x600.jpg" alt="" width="120" height="600" /></a> </div>
	<div id="colContent">
		<h2> Splöösh!</h2>
		<p><em><strong>Splöösh</strong></em> onec nulla est, laoreet quis, pellentesque in, congue in, dui. Nunc rhoncus placerat augue. Donec justo odio, eleifend varius, volutpat venenatis, sagittis ut, orci. </p>
		<h2>Viewport dimensions:</h2>
		<table style="width:100%">
					<tr>
						<td> </td>
						<td><b> Width </b></td>
						<td> <b>Height</b> </td>
					</tr>
					<tr>
						<td> <b>Page</b> </td>
						<td> <script type = "text/javascript">
							var width = document.documentElement.clientWidth;
							document.write(width); 
							</script></td>
						<td><script type = "text/javascript">
							var height = document.documentElement.clientHeight;
							document.write(height); 
							</script> </td>
					
					</tr>
					<tr>
						<td><b> Screen</b> </td>
						<td> <script type = "text/javascript">
							var width = window.screen.width;
							document.write(width); 
							</script></td>
						<td> <script type = "text/javascript">
							var height = window.screen.height;
							document.write(height); 
							</script></td>
					</tr>
					<tr>
						<td> <b>ViewPort</b> </td>
						<td><script type = "text/javascript">
							var width = window.innerWidth;
							document.write(width); 
							</script></td>
		
						<td> <script type = "text/javascript">
							var height = window.innerHeight;
							document.write(height); </script></td>
					</tr>
					</table>
        <p id="desc"></p> 
        <p>Sed vestibulum blandit nisl. Quisque elementum convallis purus. Quisque pellentesque semper massa:</p>
		<ol>
			<li><a href="#">Suspendisse quis gravida massa felis</a></li>
			<li><a href="#">Vivamus sagittis bibendum erat</a></li>
			<li><a href="#">Nullam et orci in erat viverra ornare</a></li>
			<li><a href="#">Suspendisse quis gravida massa felis</a></li>
			<li><a href="#">Curabitur malesuada turpis nec ante</a></li>
		</ol>
		<h3>Lorem Ipsum Dolore </h3>
		<p>Aliquam gravida massa eu arcu. Fusce mollis tristique sem. Sed eu eros imperdiet eros interdum blandit. Vivamus sagittis bibendum erat. Curabitur malesuada turpis nec.</p>
		<p><a href="#">Pellentesque sed vestibulum blandit&#8230;</a></p>
	</div>
	
    <div id="colSidebar">
		<h2>Recent Updates</h2>
		<h3>Etiam suscipit et</h3>
		<p>Rhoncus ac, lacinia, nisl. Aliquam gravida massa eu arcu. <a href="#">More&#8230;</a></p>
		<h3>Nunc pellentesque</h3>
		<p>Sed vestibulum blandit nisl. Quisque elementum convallis purus. Suspendisse potenti. Donec nulla est, laoreet quis, pellentesque in. <a href="#">More&#8230;</a></p>
		<h3>Suspendis potenti</h3>
		<p>Donec nulla est, laoreet quis, pellentesque in, congue in, dui. Nunc rhoncus placerat augue. Donec justo odio, eleifend varius, volutpat venenatis, sagittis ut, orci. <a href="#">More&#8230;</a></p>
		<p><a href="#"><img src="img/img5.jpg" alt="" width="160" height="120" /></a></p>
	</div>
	<div style="clear: both;"></div>
</div>
<div id="footer">
	<p>Copyright splöösh.com Contact Legal Info Site Map Email</p>
</div>
</body>
</html>

最佳答案

只需添加一个display : block在你的 li并删除 float : left在你的 <a>

关于html - 如何垂直堆叠我的导航栏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39776853/

25 4 0
文章推荐： javascript - JQuery修改print.css文件的CSS类不生效
文章推荐： javascript - Bing map 信息框未显示 - setMap 不是控制台上的函数错误
文章推荐： javascript - 将辅助事件传递给嵌套点击事件？ jQuery
文章推荐： php - 通过 url 发送评论
行者123
个人简介

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

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