首页 > 代码库 > 前端学习笔记2017.6.12 CSS控制DIV

前端学习笔记2017.6.12 CSS控制DIV

前一篇文章中用div布局了豆瓣东西的页面,如果用html代码表示的话大概是这个样子的

<!DOCTYPE html>
<html>
<head>
</head>

<body>

<div><!--banner-->
    <div></div><!--banner1-->
    <div></div><!--banner2-->
</div>

<div></div><!--ad-->

<div><!--hierarchy-->
    <div></div><!--left-->
    <div></div><!--right-->
</div>
<div><!--goods-->
    <div></div>
    <div></div>
    <div></div>
</div>


</body>
</html>

 

把上面那段代码保存为1.html,打开之后发现啥也显示出来。

这是为什么?因为我们指定了div,但却没告诉浏览器这块div大小、颜色等属性,那么怎么实现这些呢?CSS啦。

 

怎么加入css代码呢?用style元素即可,比如下面这样:

<!DOCTYPE html>
<html>
<head>
</head>

<body>
<style>
	
	div{

		background:red;
	}


</style>


<div><!--banner-->
	<div></div><!--banner1-->
	<div></div><!--banner2-->
</div>

<div></div><!--ad-->

<div><!--hierarchy-->
	<div></div><!--left-->
	<div></div><!--right-->
</div>
<div><!--goods-->
	<div></div>
	<div></div>
	<div></div>
</div>


</body>
</html>

 用浏览器打开发现还是啥也没有,为什么?因为没有指定div的高度、宽度,你怎么可以给一个没有大小的东西填充颜色呢?好,我们给div元素一个大小。

变成下面这样:

<!DOCTYPE html>
<html>
<head>
</head>

<body>
<style>
	
	div{

		height:200px;
		width:100px;
		background: red;
	}


</style>


<div><!--banner-->
	<div></div><!--banner1-->
	<div></div><!--banner2-->
</div>

<div></div><!--ad-->

<div><!--hierarchy-->
	<div></div><!--left-->
	<div></div><!--right-->
</div>
<div><!--goods-->
	<div></div>
	<div></div>
	<div></div>
</div>


</body>
</html>

 用浏览器打开之后发现时一个红色的竖条,为什么呢?因为我们上面通过css对所有的div都设置了背景色是红色,怎么能更个性化一些呢?让某个div是红色,某个div是蓝色?可以的,可以给div起一个名字,然后再css代码中指定对应div的名字,这样就针对性的对某个div设置css属性了,好我们再改一下就变成了下面这样:

<!DOCTYPE html>
<html>
<head>
</head>

<body>
<style>
	
	#banner{

		height:200px;
		width:100px;
		background: red;
	}
	#ad{
		height: 200px;
		width:100px;
		background:blue;
	}
	#hierarchy{
		height: 200px;
		width:100px;
		background: green;
	}	

	#goods{
		height:200px;
		width:100px;
		background: yellow;
	}

</style>


<div id="banner"><!--banner-->
	<div id="banner1"></div><!--banner1-->
	<div id="banner2"></div><!--banner2-->
</div>

<div id="ad"></div><!--ad-->

<div id="hierarchy"><!--hierarchy-->
	<div></div><!--left-->
	<div></div><!--right-->
</div>
<div id="goods"><!--goods-->
	<div id="goods1"></div>
	<div id="goods2"></div>
	<div id="goods3"></div>
</div>


</body>
</html>

 

人家豆瓣东西那个banner是布满整个浏览器的,而且你几个div的大小也和豆瓣东西的不一样,再调整一下,怎么看出人家height和width用了几个像素呢?我是截图之后放到PS里面用选区工具框选一下,然后再信息窗口里面看一下这个选区的长width和height,然后再看下图像的分辨率,为了方便,切换成像素/厘米 这样就能算出占用几个像素了,调整一下,最后代码变成了这样:

<!DOCTYPE html>
<html>
<head>
</head>

<body>
<style>
	
	#banner{

		height:90px;
	
		background: red;
	}
	#ad{
		height: 99px;
		width:924px;
		background:blue;
	}
	#hierarchy{
		height: 476px;
		width:924px;
		background: green;
	}	

	#goods{
		height:488px;
		width:924px;
		background: yellow;
	}

</style>


<div id="banner"><!--banner-->
	<div id="banner1"></div><!--banner1-->
	<div id="banner2"></div><!--banner2-->
</div>

<div id="ad"></div><!--ad-->

<div id="hierarchy"><!--hierarchy-->
	<div></div><!--left-->
	<div></div><!--right-->
</div>
<div id="goods"><!--goods-->
	<div id="goods1"></div>
	<div id="goods2"></div>
	<div id="goods3"></div>
</div>


</body>
</html>

 

前端学习笔记2017.6.12 CSS控制DIV