Web前端程序设计作业--布局p153t2

最新推荐文章于 2024-07-12 16:55:56 发布

haoshuai_121

最新推荐文章于 2024-07-12 16:55:56 发布

阅读量108

点赞数

分类专栏： Web前端程序设计学习文章标签：前端 css html

本文链接：https://blog.csdn.net/haoshuai_121/article/details/128095436

版权

Web前端程序设计学习专栏收录该内容

17 篇文章 1 订阅

订阅专栏

<style type="text/css">

	   table,th,td{

		   border: 1px  black;	

	   }

	   table{

		   border-collapse: collapse;

		   width: 600px;

		   background: #07F9D7

	   }

	   td{

		   text-align: center;

		   vertical-align: bottom;

		   padding: 10px;

	   }

	   

	   #header{

		   height: 0 auto;

		   width: 600px;

	   }



		  

	   #content{

		   width: 200px;

		   height: 450px;

		   float: left;

		   background: #00C4F5

	   }

	   #main{

		   width: 400px;

		   height: 450px;

		   float: left;

		   background-image: url(images/self.jpg);

	   }

	   a{

		   padding: 20px; 

	   }

	   p{

		   padding-left: 20px;

	   }

   </style>

   

</head>



<body background="images/bg9.gif">

<div id="header">

	<img src="images/banner3.jpg" width="600px" >

	<table>

		<tr>

			<th>首页</th>

			<th>心情日记</th>

			<th>Free</th>

			<th>一起走过</th>

			<th>从明天起</th>

			<th>制粉机</th>

			<th>下一站</th>

		</tr>

	</table>

</div>



<div id="content">

	<center><img src="images/selfpic.jpg" ></center>

	<center><a><b>我的日记</b></a></center>

	<center><p>woiajoirqwjf</p></center>

	<br/>

	<center><img src="images/selfpic2.jpg"></center>

	<center><a><b>心情轨迹</b></a></center>

	<center><p>alkfsjlsjqoijwojo</p></center>

	<br/>

</div>

<div id="main">

	<a><b>介绍</b></a>

	<p>qoihqwoihroiqhor</p><br/>

	<a><b>照相本子</b></a>

	<p>iwaorowiqhorq</p><br/>

	<a><b>地下铁</b></a>

	<p>qfjqpojwpf</p>

	<a><b>向左走向右走</b></a>

	<p>aiwjrojawr</p><br/>

</div>



</body>