日期:2014-05-17  浏览次数:20975 次

精通CSS.DIV网页样式与布局(三)——中秋效果图

这篇博客,咱们继续来进行进行CSS+DIV的其他效果来进行分析,起码能做到够用,对吧。前面讲了些很基础的东西,详情请看:

精通CSS.DIV网页样式与布局(二)—— 段落

精通CSS.DIV网页样式与布局(二)

精通CSS.DIV网页样式与布局(一)

咱们之前讲了文字的效果,我们这次来讲图片效果,我们看是如何控制图片显示的效果。

图片样式:

这部分的内容中,我们先讲讲图片的边框,先看看代码:

<html>
<head>
<title>边框</title>
<style>
<!--
img.test1{
	border-style:dotted;	/* 点画线 */
	border-color:#FF9900;	/* 边框颜色 */
	border-width:5px;		/* 边框粗细 */
}
img.test2{
	border-style:dashed;	/* 虚线 */
	border-color:blue;		/* 边框颜色 */
	border-width:2px;		/* 边框粗细 *
}
-->
</style>
   </head>
<body>
	<img src="banana.jpg" class="test1">
	<img src="banana.jpg" class="test2">
</body>
</html>

我们从代码里边知道,border-style:控制线条的样式(是点画线还是虚线);border-color:很显然就是控制颜色了;border-width:控制边框的粗细程度。同时我还想说的是,border控制边框的时候,不但可以采用代码里边那样的方式,同时我们可以把所有的代码合成一句,我们可以这么写:我们看test2的代码:

<html>
<head>
<title>边框</title>
<style>
<!--
img.test1{
	border-style:dotted;	/* 点画线 */
	border-color:#FF9900;	/* 边框颜色 */
	border-width:5px;		/* 边框粗细 */
}
img.test2{
	border:dashed 2px blue;
}

-->
</style>
   </head>
<body>
	<img src="banana.jpg" class="test1">
	<img src="banana.jpg" class="test2">
</body>
</html>
这样就变的很简洁了,而且实现的效果完全一样;我们看看效果:


border还有一个比较强大的功能就是能单独修改某一条边框,比如我们这么写:

<html>
<head>
<title>边框</title>
<style>
<!--
img.test1{
	border-style:dotted;	/* 点画线 */
	border-color:#FF9900;	/* 边框颜色 */
	border-width:5px;		/* 边框粗细 */
}
img.test2{
	border-left:dashed 2px blue;
	border-right:dotted 2px red;
}

-->
</style>
   </head>
<body>
	<img src="banana.jpg" class="test1">
	<img src="banana.jpg" class="test2">
</body>
</html>
那么这个效果图如下:


这样就更方便了我们的设计了。

我们接下来看看,图片的缩放:

我们也是从代码开始出发:

<html>
<head>
<title>图片缩放</title>
<style>
<!--
img.test1{
	width:50%;		/* 相对宽度 */
}
-->
</style>
   </head>
<body>
	<img src="pear.jpg" class