网页设计如何处理前端界面效果，图片的效果很大程度上影响到网页效果，要使网页图文并茂并且布局结构合理，就要注意图片的设置。通过CSS统一管理，不但可以更加精确地调整图片的各种属性，还可以实现很多特殊效果。深圳网页设计公司将对图片的边框、图片的大小与缩放、图片对齐等属性进行介绍。
网页设计时定义图片边框
在HTML语法中，可以直接通过<.img>标签的border属性来为图片添加边框，语法如下：
<imgsrc="图片路径"border="数值">
【示例1】启动Dreamweaver，新建一个网页，保存为test.html，在<body>标签内输入以下代码：
<imgsrc="images/11.jpg"border="0">
<imgsrc="images/11.jpg"border="1">
<imgsrc="images/11.jpg"border="2">
<imgsrc="images/11.jpg"border="3">按F12键，在浏览器中预览，其显示效果如图5.25所示。
通过图5.25可以看到，用HTML控制图片边框是无法设计出丰富多彩的图片效果的，需要使用CSS中的border-style、border-color和border-width3个属性来定义边框。其语法如下：
border-style:参数;
border-color:参数;
border-width:数值;
border-style属性用于设置边框的样式，用的最多的两个参数是dotted表示点划线，用dashed表示虚线，其他的一些值会在后面的章节中详细说明。border-color属性用于设置边框的颜色。border-width属性用于设置边框的宽度。
【示例2】启动Dreamweaver，新建一个网页，保存为test1.html，在<body>标签内输入以下代码：
<imgsrc="images/22.jpg"class="pic1"/><imgsrc="images/22.jpg"class="pic2"/>
在<head>标签内添加<styletype="text/css">标签，定义一个内部样式表，然后输入下面样式，
用来定义图片边框样式。
网页设计时定义图片边框
在HTML语法中，可以直接通过<.img>标签的border属性来为图片添加边框，语法如下：
<imgsrc="图片路径"border="数值">
【示例1】启动Dreamweaver，新建一个网页，保存为test.html，在<body>标签内输入以下代码：
<imgsrc="images/11.jpg"border="0">
<imgsrc="images/11.jpg"border="1">
<imgsrc="images/11.jpg"border="2">
<imgsrc="images/11.jpg"border="3">按F12键，在浏览器中预览，其显示效果如图5.25所示。
通过图5.25可以看到，用HTML控制图片边框是无法设计出丰富多彩的图片效果的，需要使用CSS中的border-style、border-color和border-width3个属性来定义边框。其语法如下：border-style:参数;
border-color:参数;
border-width:数值;
border-style属性用于设置边框的样式，用的最多的两个参数是dotted表示点划线，用dashed表示虚线，其他的一些值会在后面的章节中详细说明。border-color属性用于设置边框的颜色。border-width属性用于设置边框的宽度。
【示例2】启动Dreamweaver，新建一个网页，保存为test1.html，在<body>标签内输入以下代码：
<imgsrc="images/22.jpg"class="pic1"/><imgsrc="images/22.jpg"class="pic2"/>
在<head>标签内添加<styletype="text/css">标签，定义一个内部样式表，然后输入下面样式，
用来定义图片边框样式。
其显示效果如图5.26所示，第1幅图片设置的是蓝色、2像素的点划线，第2幅图片设置的是红色、10像素宽的虚线。
【示例3】下面示例为图像四边设计不同的边框样式。在CSS中，还可以分别设置4个边框的不同样式，即分别设置border-left、border-right、border-top、border-bottom的样式。启动Dreamweaver，新建一个网页，保存为test2.html，在<body>标签内输入以下代码：
<imgsrc="images/33.jpg"/>
在<head>标签内添加<styletype="text/css">标签，定义一个内部样式表，然后输入下面样式，
用来定义图片边框样式。其显示效果如图5.27所示，图片的4个边框被分别设置了不同的样式。
图5.27 
分别设置4个边框
【示例4】在示例3中介绍了分别设置4个边框的方法，border属性还可以将各个值写到同一语句，用空格分隔，这样可以大大缩短代码长度。启动Dreamweaver，新建一个网页，保存为test3.html，在<body>标签内输入以下代码：<imgsrc="images/44.jpg"class="pic1"/><imgsrc="images/44.jpg"class="pic2"/>
【示例3】下面示例为图像四边设计不同的边框样式。在CSS中，还可以分别设置4个边框的不同样式，即分别设置border-left、border-right、border-top、border-bottom的样式。启动Dreamweaver，新建一个网页，保存为test2.html，在<body>标签内输入以下代码：
<imgsrc="images/33.jpg"/>
在<head>标签内添加<styletype="text/css">标签，定义一个内部样式表，然后输入下面样式，
用来定义图片边框样式。其显示效果如图5.27所示，图片的4个边框被分别设置了不同的样式。图5.27 分别设置4个边框【示例4】在示例3中介绍了分别设置4个边框的方法，border属性还可以将各个值写到同一语句，用空格分隔，这样可以大大缩短代码长度。启动Dreamweaver，新建一个网页，保存为test3.html，在<body>标签内输入以下代码：<imgsrc="images/44.jpg"class="pic1"/><imgsrc="images/44.jpg"class="pic2"/>
在<head>标签内添加<styletype="text/css">标签，定义一个内部样式表，然后输入下面样式，用来定义图片边框样式。
其显示效果如图5.28所示，可以看到代码的长度明显减少，这样不但清晰易读，而且大大加快了网页下载速度。
【拓展】示例4是将border的各个属性值写到一起，有的时候还会出现这样的语句：border-style:dottedsoliddasheddoubel、border-width:5px10px，这种设置方法也是正确的，但是上面这种语句如果写成这样：border:dottedsoliddasheddoubel、borderh:5px10px，就不对了。在设置边框样式时，如果border-style、border-width、border-color只设置一个参数，则该参数将作用于4个边，即4个边的样式风格一样；如果设置两个参数，则第一个参数作用于上、下边框，第二个参数作用于左、右边框；如果设置3个参数，则第一个参数作用于上边框，第二个参数作用于左、右边框，第三个参数作用于下边框；如果设置4个参数，则按照上-右-下-左的顺序作用于各个边框。例如示例4中的CSS改为这样，显示效果如图5.29所示。
图5.29
另一种合并代码的方法CSS中很多其他的属性也可以进行类似的操作，例如margin和padding:padding:0px5px、margin:0px10px3px20px。提示：在设置border-style、border-color和border-width时，设置的顺序是有讲究的，在设置border(-?)color和border-width之前必须先设置border-style，否则border-color和border-width的效果将不会显示。深圳网页设计公司关于图片如何处理才能体现前端界面效果本文博纳网络就介绍到这里。我们会在下一期的文章中介绍如何定义图片偏大小实际操作经验。
其显示效果如图5.28所示，可以看到代码的长度明显减少，这样不但清晰易读，而且大大加快了网页下载速度。【拓展】示例4是将border的各个属性值写到一起，有的时候还会出现这样的语句：border-style:dottedsoliddasheddoubel、border-width:5px10px，这种设置方法也是正确的，但是上面这种语句如果写成这样：border:dottedsoliddasheddoubel、borderh:5px10px，就不对了。在设置边框样式时，如果border-style、border-width、border-color只设置一个参数，则该参数将作用于4个边，即4个边的样式风格一样；如果设置两个参数，则第一个参数作用于上、下边框，第二个参数作用于左、右边框；如果设置3个参数，则第一个参数作用于上边框，第二个参数作用于左、右边框，第三个参数作用于下边框；如果设置4个参数，则按照上-右-下-左的顺序作用于各个边框。例如示例4中的CSS改为这样，显示效果如图5.29所示。
图5.29 另一种合并代码的方法CSS中很多其他的属性也可以进行类似的操作，例如margin和padding:padding:0px5px、margin:0px10px3px20px。提示：在设置border-style、border-color和border-width时，设置的顺序是有讲究的，在设置border(-?)color和border-width之前必须先设置border-style，否则border-color和border-width的效果将不会显示。深圳网页设计公司关于图片如何处理才能体现前端界面效果本文博纳网络就介绍到这里。我们会在下一期的文章中介绍如何定义图片偏大小实际操作经验。
当前文章链接：/construction/jzhyzx/1389.html
如果您觉得案例还不错请帮忙分享：
[声明]本网转载网络媒体稿件是为了传播更多的信息，此类稿件不代表本网观点，本网不承担此类稿件侵权行为的连带责任。故此，如果您发现本网站的内容侵犯了您的版权，请您的相关内容发至此邮箱【qin@198bona.com 】，我们在确认后，会立即删除，保证您的版权。
