首页 > 网站建设 >

网页设计时图片如何处理才能体现前端界面效果

发布时间:2018-09-19 作者:深圳网站制作

 网页设计如何处理前端界面效果,图片的效果很大程度上影响到网页效果,要使网页图文并茂并且布局结构合理,就要注意图片的设置。通过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"/>
在<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的效果将不会显示。深圳网页设计公司关于
图片如何处理才能体现前端界面效果本文博纳网络就介绍到这里。我们会在下一期的文章中介绍如何定义图片偏大小实际操作经验。
 
文章标题:网页设计时图片如何处理才能体现前端界面效果
本文地址:https://www.198bona.com/news/1389.html
如果您觉得案例还不错请帮忙分享:

网站建设

网络推广

解决方案

域名主机

建站行业资讯