css的布局定位

summitjava

于 2018-09-23 23:34:45 发布

阅读量131

点赞数

分类专栏： html学习笔记

本文链接：https://blog.csdn.net/summitjava/article/details/82825972

版权

html学习笔记专栏收录该内容

19 篇文章

订阅专栏

本文通过具体示例展示了HTML和CSS的基本用法，包括如何使用div元素和内联样式进行页面布局，以及如何设置背景颜色、宽度、高度和边框等属性。

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

</html>

<html>
	<head>
		<title>HTML示例</title>
		<style type="text/css">
			div{
				width:200px;
				height:100px;
				border:2px solid blue;
			}
			#div11{
			    background-color:red;
				top:80px;
				left:120px;
				position:absolute;

			}
			#div12{
			    background-color:green;
				width:250px;
				height:150px;
			}
			#div13{
			    background-color:orange;
				
			}
		</style>
	</head>
	<body>
          <div id="div11">AAAAAAAAAAAAAAAAAAAAA</div>
	      <div id="div12">bbbbbbbbbbbbbbbbbbbbb</div>
		  <div id="div13">ccccccccccccccccccccc</div>
	
	</body>
</html>
___________________________________________________________________________________
</html>

<html>
	<head>
		<title>HTML示例</title>
		<style type="text/css">
			div{
				width:200px;
				height:100px;
				border:2px solid blue;
			}
			#div11{
			    background-color:red;
			
				position:relative;
				top:80px;
				left:120px;

			}
			#div12{
			    background-color:green;
			
			}
			#div13{
			    background-color:orange;
				
			}
		</style>
	</head>
	<body>
          <div id="div11">AAAAAAAAAAAAAAAAAAAAA</div>
	      <div id="div12">bbbbbbbbbbbbbbbbbbbbb</div>
		  <div id="div13">ccccccccccccccccccccc</div>
	
	</body>
</html>