利用CSS和DIV的几种布局方法(2)

最新推荐文章于 2025-05-06 14:21:15 发布

快乐的程序媛

最新推荐文章于 2025-05-06 14:21:15 发布

阅读量340

点赞数

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

CSS 同时被 2 个专栏收录

12 篇文章

订阅专栏

HTML

5 篇文章

订阅专栏

本文通过一个实例详细介绍了如何使用CSS进行页面布局，包括设置容器宽度、背景颜色、边框等属性，以及利用相对定位使元素居中显示的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

[html] view plain copy

print ?

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>This is my test about css.</title>
<style>
*{
padding:0px;
margin:0px;}
#container{
width:100%;
background-color:orange;
border:1px solid black;
padding:10px;
text-align:center;
font-family:arial;
font-size:20px;}
#container h1{
text-decoration:underline;
background-color:gray;
margin-bottom:10px;
}
#main,#container h1{
position:relative;
width:900px;
left:50%;
margin-left:-460px;
padding:10px;
}
#main{
height:600px;
background-color:gray;
border:1px dashed red;
text-align:left;
font-size:75%;
line-height:1.5em;
}
</style>
</head>
<body>
<div id="container">
<h1>This is my test about css.</h1>
<div id="main">This is first test.This is first test.This is first test.This is first test.<br />
This is first test.This is first test.This is first test.This is first test.<br />
This is first test.This is first test.This is first test.This is first test.<br />
This is first test.This is first test.This is first test.This is first test.<br />
This is first test.This is first test.This is first test.This is first test.<br />
This is first test.This is first test.This is first test.This is first test.<br />
This is first test.This is first test.This is first test.This is first test.<br />
</div>
</div>
</body>
</html>

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>This is my test about css.</title>
    <style>
  *{
    padding:0px;
	margin:0px;}
  #container{
            width:100%;
			background-color:orange;
			border:1px solid black;
			padding:10px;
			text-align:center;
			font-family:arial;
			font-size:20px;}
#container h1{ 
	text-decoration:underline;
    background-color:gray;
	margin-bottom:10px;
	}

#main,#container h1{
        position:relative;
	    width:900px;
        left:50%;
	    margin-left:-460px;
	    padding:10px;
        }
  #main{
		height:600px;
		background-color:gray;
		border:1px dashed red;
		text-align:left;
		font-size:75%;
		line-height:1.5em;
		}
  </style>
 </head>
 <body>
  <div id="container">
      <h1>This is my test about css.</h1>
      <div id="main">This is first test.This is first test.This is first test.This is first test.<br />
	                 This is first test.This is first test.This is first test.This is first test.<br />
					 This is first test.This is first test.This is first test.This is first test.<br />
					 This is first test.This is first test.This is first test.This is first test.<br />
					 This is first test.This is first test.This is first test.This is first test.<br />
					 This is first test.This is first test.This is first test.This is first test.<br />
					 This is first test.This is first test.This is first test.This is first test.<br />
	  </div>
  </div>
 </body>
</html>

转自：http://blog.youkuaiyun.com/tanyacui/article/details/52166708