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

前端学习笔记2017.6.12 CSS控制DIV

2024-10-04 21:31:39   217人阅读

前一篇文章中用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


联系
我们