css布局的基本思想和步骤:CSS色块布局练习

CSS其实就是为Html女士进行美颜化妆的。各式各样的CSS属性,能够将Html女士的上上下下装点漂亮。CSS能够做漂亮,除了对代码的理解,更需要较高的设计审美。

具体的CSS值例如width:100px;height:100px;是对具体Html内容做描述用的。这种代码式的描述是说给计算机浏览器的渲染内核(解析器)听的。

好比我们说一个苹果是红色的、是大苹果,是红富士的种类,价格是5元/个,等等。

如果拿装修房子做比喻,Html是房子的钢筋骨架,而CSS则是对房子样式风格的装修。装修水平高,设计品味好,则房子漂亮。

写个页面,60%用的都是div。

我们打开阿里或京东的源代码查看就可以知道的确是这样。

通过margin-left/top或者浮动去摆放盒子,被认为是一种低级手段,因为移动一个牵动全局,移动一个还要设置另一个,不方便,而定位,是一种高级的布局手段。

通过定位可以将页面的元素摆放到任意的位置。

定位分为绝对定位和相对定位。

绝对定位是相对于其包含块进行定位的。什么是包含块?“包含块”就是离当前元素最近的祖先块元素。

简言之,绝对定位是非常恋父的,它千方百计寻找一个开启了定位的父级元素作为包含块,并在这个包含块中很有安全感的移动自己的位置。并且以包含块的原点(也称为“00点”)计算移动距离。

找到了原点,目测都大概能判断出position:absolute(绝对定位)将会移动的距离。

<div>
	<span><a>我的包含块是父级div</a></span>
</div>

**相对定位则是极度自恋的。**它只从自己的原点出发去移动位置。相对定位是灵魂出窍,但是肉体还占据原来的位置。而绝对定位是灵魂和肉体都已经移出。**相对定位六亲不认,只认自己的原点作为起始点。**而绝对定位千方百计要找个父亲,如果找不到父亲,就认Html根元素作父,也就是位置在body的最左上角。

下面的练习用到了绝对定位、透明度、和吸色。

吸色可以在Photoshop中进行,吸管蘸取颜色后,将获得具体的色值。

透明度opacity的值范围是0-1。1为不透明。

代码实现图片

<head>
		<meta charset="utf-8">
		<title>CSS色块组合</title>
		<style type="text/css">
			*{
				margin: 0px;
				padding: 0px;
			}
			body{
				background-color: black;
			}
			.a1{
				width: 600px;
				height: 436px;
				background-color:#fcfcfc;
				position: absolute;
				top: 50%;
				left: 50%;
				margin-left: -300px;
				margin-top: -218px;
				border: 2px solid black;
			}
			
			.a2{
				width: 576px;
				height: 399px;
				background-color:#fffec8;
				margin: 15px 0 0 9px;
				border: 2px solid black;
			}
			
			.a3{
				
				width: 549px;
				height: 50px;
				background-color:#90c4fd;
				margin: 73px 0 0 21px;
				position: absolute;
				top: 0px;
				left: 0px;	
				border: 2px solid black;
			}
			
			.a4{
				
				width: 341px;
				height: 152px;
				background-color:#ffc4c4;
				margin: 139px 0 0 21px;
				position: absolute;
				top: 0px;
				left: 0px;	
				border: 2px solid black;
			}
			
			.a5{
				
				width: 549px;
				height: 43px;
				background-color:#90c4fd;
				margin: 305px 0 0 21px;
				position: absolute;
				top: 0px;
				left: 0px;	
				border: 2px solid black;
			}
			
			.a6{
				width: 187px;
				height: 259px;
				background-color: lightblue;
				opacity: 0.3;
				margin: 139px 0 0 379px;
				position: absolute;
				top: 0px;
				left: 0px;	
				border: 2px solid black;
			}
			
			.a2 p{
				text-align: center;
				font-weight: bold;
				font-size: 18px;
				line-height: 56px;
				text-align: center;
			}
			
			.a3 p{
				text-align: center;
				font-weight: bold;
				font-size: 18px;
				line-height: 50px;
				text-align: center;
			}
			
			.a4 p{
				text-align: center;
				font-weight: bold;
				font-size: 18px;
				line-height: 145px;
				text-align: center;
			}
			
			.a5 p{
				text-align: center;
				font-weight: bold;
				font-size: 18px;
				line-height: 45px;
				text-align: center;
			}
			
			.a6 p{
				font-weight: bold;
				font-size: 18px;
				padding: absolute;
				line-height: 245px;
				text-align: center;
				
			}
			
		</style>
	</head>
	<body>
		
		<div class="a1">
			<div class="a2">
				<p>#container</p>
			</div>
			<div class="a3">
				<p>#banner</p>
			</div>
			<div class="a4">
				<p>#content</p>
				</div>
			<div class="a5">
				<p>#footer</p>
			</div>
			<div class="a6">
				<p>#links</p>
			</div>
		</div>
		
	</body>
</html>

我的个人网站:夜行岛夫的前端技术博客
`

相关推荐
©️2020 CSDN 皮肤主题: 游动-白 设计师:白松林 返回首页