CSS 实例 div布局

最新推荐文章于 2021-08-04 00:02:01 发布

houyanhua1

最新推荐文章于 2021-08-04 00:02:01 发布

阅读量411

点赞数

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/houyanhua1/article/details/78437446

版权

CSS 专栏收录该内容

65 篇文章 1 订阅

订阅专栏

本文探讨了如何利用CSS中的div元素进行页面布局，强调避免使用table进行布局，以提升网页的灵活性和响应性。

摘要由CSDN通过智能技术生成

用div布局，不建议用table

<!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> new document </title>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
  <meta name="author" content="" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <link rel="stylesheet" type="text/css" href="" />
  <style type="text/css">
  *{padding:0; margin:0;border:0;}
  body{font-size:12px;
  }
  .container{ 
  width:700px; 
  margin:0 auto;
  }
  .banner{ 
  height:200px;  
  background:url(banner1.jpg);
  }
  .nav{ height:30px; background:#09c; margin:2px auto;}
  .nav ul li{list-style:none; width:100px;  float:left;
line-height:30px; text-align:center;
  }
  .nav a{ color:#fff; text-decoration:none; display:block;}
  .nav a:hover{ color:red; background:orange;}
  .content{background:#E9FBFF;margin:2px auto; }
  .left{ text-align:center; float:left; width:200px;}
  .left .test{ padding:0px 20px;}
  .left img{ margin:10px auto; }
  .right{ width:495px; float:right; background:url(bg1.jpg) no-repeat right bottom;}
  .right h4{ font-size:18px; color:#6666ff; font-weight:normal;}
  .em{text-indent:2em;}
  .footer{ height:80px;  background:#6666cc; text-align:center; line-height:80px;}
 
  </style>
 </head>

 <body>
<div class="container">
	<div class="banner"></div>
	<div class="nav">
			<ul>
			<li><a href="#">首页</a></li>
			<li><a href="#">心情日记</a></li>
			<li><a href="#">Free</a></li>
			<li><a href="#">一起走到</a></li>
			<li><a href="#">从明天起</a></li>
			<li><a href="#">纸飞机</a></li>
			<li><a href="#">下一站</a></li>
		</ul>
	</div>
	<div class="content">
	<!--left-->
			<div class="left">
			<p><img src="selfpic1.jpg" width="100" height="146">
		<br>我的日记本</p><br />
		<p class="test">秋天过半的时候，我搭上了一列火车。我不知道它将要去往的方向，那铁路看上去无休无止地延伸着。</p>
		<p><img src="selfpic2.jpg" width="100" height="148">
		<br>
	  心情轨迹</p><br />
		<p class="test">无意间发见，白云的上面，长着许许多多的蒲公英。它在我面前迅速的长大，风吹过的时候，纷纷升起，飞向无数的远方。</p>
			</div>
			<!--left end-->
			<div class="right">
			<!--right-->
			<h4>介绍</h4><br />
		<p class="em">火车经过一个又一个站台，窗外漫卷的蒲公英向我微笑着。我逐渐记起了自己旅行的目的，一直都在下一站的前方。火车缓缓地驶入站台，汽笛声响的那一瞬间，车厢变得透明，我看见，自己和这长长的列车一起，正在漫天飘舞着的蒲公英中飞行。</p><br />
		<h4>转播设备</h4><br />
		<p class="em">我现在是在万泉河附近，我们的转播车就在旁边不远的地方，师傅马上将会把车开过来。我们的转播设备非常的先进，具体怎么先进我也说不清，师傅比我清楚，总之就是特别特别先进。好，现在师傅已经把转播车开过来了。……
		</p><br />
		<h4>旅程</h4><br />
		<p>夕阳 染红蓝天<br>
		带走 美好的一天<br>
		风 吹过大地<br>
		炫美的世界<br>
		<br>
		霞光 点亮星辰<br>
		燃起 辽远的梦幻<br>
		流星 划过夜空<br>
		忆起 逝夜的歌声<br>
		<br>
		是谁昨夜背上行囊<br>
		唱一首满载风尘的歌<br>
		今夜才又想起拥抱的时刻<br>
		<br>
		独自走的一段旅程<br>
		是否还装满苦涩<br>
		一路风雨飘摇 那坎坷对谁说<br>
		<br>
		来吧看这远处亮起的点点星火<br>
		伸手触摸那写在匆匆旅程的歌<br>
		谁在转过的街口从容挥手<br>
		谁用欢笑和拥抱<br>
		记住这一刻
		</p>
			<!--right-end-->

			</div>
			<div style="clear:both"></div>
	</div>
	<div class="footer">&copy;2015 版权所有 必究</div>
</div>
 </body>
</html>