网站设计前端工程师分享“图像定义大小”实操案例

当前位置：

发布时间：2018-09-21

文章编辑：网站建设文章来源：建站行业资讯浏览量：次

深圳网站设计公司（博纳网络）在前面的文章中详细介绍了，网站在制作前端怎样定义图像大小，以期取得最佳视觉效果。由于文章篇幅关系对于设计方法的实例有部分没有编辑完。本文接上篇文章未完部分继续分享，希望本站网站制作经验这类型的文章能给我们的客户在网站后期管理方面有所帮助。

【示例2】与文字的纵向对齐相似，图片的纵向对齐也可以设置具体的数值。启动Dreamweaver，新建一个网页，保存为test1.html，在<body>标签内输入如下结构：
纵向对齐<imgsrc="images/1.jpg"style="vertical-align:5px;">方式:5px
纵向对齐<imgsrc="images/1.jpg"style="vertical-align:-20px;">方式:-20px
纵向对齐<imgsrc="images/1.jpg"style="vertical-align:15px;">方式:15px
网站设计师提醒在<head>标签内添加<styletype="text/css">标签，定义一个内部样式表，然后定义如下两个样式：在浏览器中预览测试，

显示结果如图5.34所示。可以看出，图片在垂直方向上发生了位移，当设置的值为正数时，图片向上移动相应的数值；当设置为负数时，图片向下移动相应的数值。

网页设计效果图5.34　
用数值调整纵向对齐5.3.5　设置文字环绕CSS使用float属性来实现图片的文字环绕，另外，除了float属性以外，再配合使用padding属性和margin属性，使图片和文字达到一种最佳的效果。float属性的作用是使对象产生浮动，其语法如下：{float:left|right|none;}

float属性共有3个值，其作用分别如下。
1.none：默认值，对象不浮动。
2.left：左浮动，对象向其父元素的左侧仅靠。
3.right：右浮动，对象向其父元素的右侧仅靠。
【示例1】新建一个网页，保存为test.html，在<head>标签内添加<styletype="text/css">标签，定义一个内部样式表，然后输入下面样式，定义两个类样式。

然后在<body>标签中输入代码，并应用上面的类样式。

在浏览器中预览，则显示效果如图5.35所示。本例中运用了float:left使图片移至页面左边，从而文字在右边环绕。

网站设计定义图像效果图5.35　文字环绕
【示例2】在示例1中，可以看到文字紧紧环绕在图片周围，如果希望图片本身与文字有一定的距离，只需要给img元素添加padding和margin属性即可，将示例1中的img元素做如下修改：

在浏览器中预览，则显示效果如图5.36所示。可以看到图片的边框离文字有10px的距离，这是由于添加了margin:10px语句，而图片的边框离图片也有10px的内边距，这是由于添加了padding:10px语句。这样设置使文字与图片的距离明显变远，显示效果更佳。至于margin和padding属性的详细用法，深圳网站制作公司在后面的经验介绍中会陆续提到。