汽车话题.-CSDN博客

本文链接：https://blog.csdn.net/lyz202121110634/article/details/143557172

根据本次实验，完成如下所示的实验内容：

使用<div>标签划分为两个区域，第一个区域为link、第二个区域为car。
link区域和car区域均有5px的上边框，边框颜色分别为rgb(11,78,149)和rgb(198,6,0)。
link区域包含9个超链接标签，宽度为990px，其上边框相对于超链接标签有20px的间距，超链接的文字对齐方式为右对齐。
car区域包含一个h2标题标签，宽度为150px；
使用浮动或定位使car区域在左，link区域在右；
所有的样式采用内部样式。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>汽车话题</title>
		<style type="text/css">
			
			#link{
				width:990px;
				border-top:5px solid rgb(11,78,149);
				float:right;
				padding-top: 20px;
				
				
				
				
			}
			a{
				text-decoration: none;
				padding:8px ;
				display: inline-block; /* 如果不是内联元素，需要添加这个，使其可以设置宽度 */
 				text-align: right;
			}
			#car{
				width: 150px;
				border-top:5px solid rgb(198,6,0) ;
				margin-left:300px;
			}
			
		</style>
	</head>
	<body>
		<div id="link">
			<a href="/">|热门车型|</a>
			<a href="/">>热点时事|</a>
			<a href="/">>选车评车|</a>
			<a href="/">>技术设计|</a>
			<a href="/">>历史文化|</a>
			<a href="/">>汽车生活|</a>
			<a href="/">>摩托车|</a>
			<a href="/">>指数报告|</a>
			<a href="/">>>更多期待..</a>
			
		</div>
		
		<div id="car">
			<h2 >汽车话题</h2>
		</div>
		
	</body>
</html>