css布局(二)

最新推荐文章于 2024-05-21 19:43:55 发布

「已注销」

最新推荐文章于 2024-05-21 19:43:55 发布

阅读量203

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/yuanjin1988/article/details/42874395

版权

css 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>CSS布局</title>
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
		<style type = "text/css">
			*
			{
				margin:0;
				padding:0;
			}
			
			body
			{
				margin:10px;
			}
			
			#header
			{
				border:1px solid black;
				padding:10px;
				background:#ccc;
				margin-bottom:10px;
			}
			#header h1
			{
				text-align:center;
				font-size:16px;
			}
			
			#nav
			{
				width:30%;
				border:1px solid black;
				padding:10px;
				
				position:absolute;
				top:70px;
				right:10px;
				background:#ccc;
				
			}
			
			#nav ul
			{
				text-align:center;
			}
			
			#main
			{
				margin-right:45%;
				width:60%;
				border:1px solid black;
				padding:10px;
				margin-bottom:10px;
				
				
			}
			
			#footer
			{
				border:1px solid black;
				padding:10px;
				text-align:center;
				clear:both;
			}
			
		</style>
	</head>
	
	<body>
		
		<!-- 流体定位布局 -->
		
		
		<!-- 流体定位二列布局 -->
	
		<div id = "header">
			<h1>上标题</h1>
		</div>
		
		<div id = "main">
			<p>Web2.0，是相对Web1.0（2003年以前的互联网模式）的新的一类互联网应用的统称，是一次从核心内容到外部应用的革命。由Web1.0单纯通过网络浏览器浏览html网页模式向内容更丰富、联系性更强、工具性更强的Web2.0互联网模式的发展已经成为互联网新的发展趋势。 </p>  
            <p>要理解WEB2.0，先得看WEB的历史。 World Wide Web，简称WWW，是英国人TimBerners-Lee 1989年在欧洲共同体的一个大型科研机构任职时发明的。通过WEB，互联网上的资源，可以在一个网页里比较直观的表示出来；而且资源之间，在网页上可以链来链去。在WEB1.0上做出巨大贡献的公司有Netscape，Yahoo和Google。 Netscape研发出第一个大规模商用的浏览器，Yahoo的杨致远提出了互联网黄页， 而Google后来居上，推出了大受欢迎的搜索服务。 </p>  

		</div>
		
		<div id = "nav">
			<ul>
				<li>新闻</li>
				<li>杂志</li>
				<li>音乐</li>
				<li>体育</li>
				<li>魔兽</li>
			</ul>
		</div>
		
		
		
		<div id = "footer">
			底边版权
		</div>
		
		
		
	</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>CSS布局</title>
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
		<style type = "text/css">
			*
			{
				margin:0;
				padding:0;
			}
			
			body
			{
				margin:10px;
			}
			
			#header
			{
				border:1px solid black;
				padding:10px;
				background:#ccc;
				margin-bottom:10px;
			}
			#header h1
			{
				text-align:center;
				font-size:16px;
			}
			
			#nav
			{
				width:20%;
				border:1px solid black;
				padding:10px;
				
				position:absolute;
				top:60px;
				right:10px;
				background:#ccc;
				
			}
			
			#nav ul
			{
				text-align:center;
			}
			
			
			#nav2
			{
				width:20%;
				border:1px solid black;
				padding:10px;
				
				position:absolute;
				top:60px;
				background:#ccc;
				
			}
			
			#nav2 ul
			{
				text-align:center;
			}
			
			
			
			#main
			{
				
				margin-left:30%;
				margin-right:30%;
				border:1px solid black;
				padding:10px;
				margin-bottom:10px;
				
				
			}
			
			#footer
			{
				border:1px solid black;
				padding:10px;
				text-align:center;
				clear:both;
			}
			
		</style>
	</head>
	
	<body>
		
		<!-- 流体定位布局 -->
		
		
		<!-- 流体定位三列布局 -->
		<!-- 流体的网站在国内中文的网站上很少见 -->
	
		<div id = "header">
			<h1>上标题</h1>
		</div>
		
		<div id = "main">
			<p>Web2.0，是相对Web1.0（2003年以前的互联网模式）的新的一类互联网应用的统称，是一次从核心内容到外部应用的革命。由Web1.0单纯通过网络浏览器浏览html网页模式向内容更丰富、联系性更强、工具性更强的Web2.0互联网模式的发展已经成为互联网新的发展趋势。 </p>  
            <p>要理解WEB2.0，先得看WEB的历史。 World Wide Web，简称WWW，是英国人TimBerners-Lee 1989年在欧洲共同体的一个大型科研机构任职时发明的。通过WEB，互联网上的资源，可以在一个网页里比较直观的表示出来；而且资源之间，在网页上可以链来链去。在WEB1.0上做出巨大贡献的公司有Netscape，Yahoo和Google。 Netscape研发出第一个大规模商用的浏览器，Yahoo的杨致远提出了互联网黄页， 而Google后来居上，推出了大受欢迎的搜索服务。 </p>  

		</div>
		
		<div id = "nav">
			<ul>
				<li>新闻</li>
				<li>杂志</li>
				<li>音乐</li>
				<li>体育</li>
				<li>魔兽</li>
			</ul>
		</div>
		<div id = "nav2">
			<ul>
				<li>新闻</li>
				<li>杂志</li>
				<li>音乐</li>
				<li>体育</li>
				<li>魔兽</li>
			</ul>
		</div>
		<div id = "footer">
			底边版权
		</div>
	</body>
</html>