Question

所以我正在尝试编辑编码，当@Media宽度小于600像素时，我希望我的导航栏像一样垂直堆叠

所以基本上我希望导航栏垂直堆叠，并且从另一个部分（也就是最近的更新部分）开始的所有内容都属于一列。下面的代码是我到目前为止用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>

Answer 1

只需在display : block上添加li，然后移除float : left上的<a>

Answer 2

1）删除float: left;

上的<a>

2）在display: block;

上添加#menu

3）将height: auto;

上的身高更新为#menu

Answer 3

使用@media属性首先定义您希望更改发生的屏幕大小。然后将<li>，<a>和其他div调整为适当的样式。下面的代码，请务必全屏运行视图并通过拖动调整浏览器水平宽度以查看更改。我会继续改进。

＆＃13;

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;
}

@media screen and (max-width: 600px){
  #menu li{
    display: block;
  }
  #menu a {
    float: none;
    
  }
  #content {
    clear: both;
  }
  #menu {
      height: 100%;
  }
}

＆＃13;

<!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>

＆＃13;

如何垂直堆叠我的导航栏

3 个答案: