进阶HTML CSS Step3-任务1

最新推荐文章于 2024-06-30 09:56:50 发布

北极熊的芒果糖

最新推荐文章于 2024-06-30 09:56:50 发布

阅读量419

点赞数 1

分类专栏：前

本文链接：https://blog.csdn.net/LH_1999/article/details/81606095

版权

前专栏收录该内容

6 篇文章 0 订阅

订阅专栏

tep3：

学习CSS3

要求：了解CSS3与CSS2.1的区别，了解CSS3的几大重要模块

重点掌握：

选择器、盒子模型（使用<div>布局）

任务1：使用盒子模型创建如下图所示布局：

经过这次学习，已经可以较为熟练的使用div分块及CSS3，此次任务比较简单，源代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Step3-任务1</title>
		<style>
			#container{border: 2px solid black;height: 500px;width: 800px;font-size: 30px;text-align:center;margin: auto;background-color: rgb(254,253,203);padding-top: 10px;}
		    #banner{border: 2px solid black;height: 50px;width: 750px;font-size: 30px;text-align:center;margin: auto;background-color:rgb(204,235,254);padding-top: 15px;}
		    #content{float: left;}
		    #content{border: 2px solid black;height: 260px;width: 520px;font-size: 30px;text-align:center;margin:23px ;background-color: rgb(252,203,201);}
		    #content{line-height: 240px;} 
		    #links{float: right;}
		    #links{border: 2px solid black;height: 260px;width: 203px;font-size: 30px;text-align:center;margin:23px ;margin-left:0px;background-color: rgb(201,253,201);}
	        #links{line-height: 240px;} 
	        #footer{margin-top:315px;margin-left: 23px;}
	        #footer{border: 2px solid black;height: 40px;width: 750px;font-size: 30px;text-align:center;background-color:rgb(252,201,252);padding-top: 10px;}
		</style>
	</head>
	<body>
		<div id="container">
			    #container
	    <div id="banner">
				#banner
		</div>
		<div id="content">
				#content
		</div>
		<div id="links">
				#links
		</div>
		<div id="footer">
	            #footer
		</div>

		</div>
			</body>
</html>

实现的最终效果图：