精通CSS.DIV网页式样与布局（三）——中秋效果图
日期：2014-05-17 浏览次数：20951 次
精通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
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
