<!--
第一个函数：
==========================================================================================
top首页导航 调用格式如：GetColumns1
==========================================================================================
--> <!--
第二个函数：
==========================================================================================
二级栏目导航 调用格式如：GetColumns2
==========================================================================================
--> <!--
第四个函数：
==========================================================================================
友情链接显示函数 调用格式如：GetLink
==========================================================================================
--> <!--
第五个函数：
==========================================================================================
网上调查显示函数 调用格式如：GetVote
==========================================================================================
--> <!--
第六个函数：
==========================================================================================
产品类栏目显示函数(左右侧) 调用格式如：call GetProClass()
==========================================================================================
--> <!--
第七个函数：
==========================================================================================
产品类信息显示函数 调用格式如：GetPro 0,20,0,"jplpco.asp"
listnum   显示条目，0表示全部显示
pagenum   每页显示多少条
charnum   字符串截取，0表示不截取
prourl    新闻最终页显示页面  ListNum,PageNum,charnum,prourl
==========================================================================================
--> <!--
==========================================================================================
产品类信息最终页显示函数 调用格式如：getproend
==========================================================================================
--> <!--
第八个函数：
==========================================================================================
新闻栏目显示函数(左右侧) 调用格式如：GetNewsClass "news.asp","news1.asp"
newsurl1   文字新闻列表显示页面
newsurl2   图片新闻列表显示页面
==========================================================================================
--> <!--
第九个函数：
==========================================================================================
新闻显示函数 调用格式如：GetNews 0,20,0,1,"newshow.asp"
listnum   显示条目，0表示全部显示
pagenum   每页显示多少条
charnum   字符串截取，0表示不截取
withdate  是否显示日期，1表示显示
newsurl   新闻最终页显示页面
==========================================================================================
--> <!--
第十个函数：
==========================================================================================
新闻最终页显示函数 调用格式如：getnewsend
==========================================================================================
--> <!--
第十个函数：
==========================================================================================
新闻最终页显示函数 调用格式如：getnewsend
==========================================================================================
--> <!--
第十个函数：
==========================================================================================
新闻最终页显示函数 调用格式如：getnewsend
==========================================================================================
--> <!--
第十个函数：
==========================================================================================
新闻最终页显示函数 调用格式如：getnewsend
==========================================================================================
--> <!--
第二十个函数：
==========================================================================================
留言提交函数 调用格式如：GetGuestbook "title1","lyshow.asp"
Fstyle    字体样式
lyshow    留言显示页面
==========================================================================================
--> <!--
第二十一个函数：
==========================================================================================
留言板显示函数 调用格式如：GetGuestbookShow "#F9F9F9","title5",5,5
bgcolor     表格单元格的背景色
Fstyle      字体样式
pageNum     每页显示的记录数
mnum        多少页为一段
==========================================================================================
--> <!--
第二十八个函数：
==========================================================================================
会员登录函数(左右侧) 调用格式如：GetUserLogin "reg.asp"
regurl   会员注册页面
==========================================================================================
--> <!--
第二十九个函数：
==========================================================================================
会员注册条例函数 调用格式如：GetUserLogin2 "reg1.asp"
regurl   会员注册填写表单页面
==========================================================================================
--> <!--
第三十个函数：
==========================================================================================
会员注册提交表单函数 调用格式如：GetUserLogin3 "input","bor1"
txtstyle   文本框样式
treastyle  多行文本框样式
==========================================================================================
--> <!--
第三十个函数：
==========================================================================================
会员注册提交表单函数 调用格式如：GetUserLogin3 "input","bor1"
txtstyle   文本框样式
treastyle  多行文本框样式
==========================================================================================
--> </LI>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<link rel="stylesheet" type="text/css" href="images/css.css" />
<title>仙居网站建设/台州做网站/网络公司/微信（商城）开发/微信营销定制/仙居县求是文化传播有限公司</title>
<meta content="求是文化传播致力于网站建设、推广、优化；微信商城、微信官网、微信营销定制开发；10年IT运营方案解决专家，稳定安全，值得信赖！咨询电话：0576-87785079" name="description">
<meta content="仙居做网站 仙居网站推广 台州虚拟主机 台州域名注册 台州网站建设 台州网络公司 微信商城定制 微信官网开发" name="keywords">
</head>
<body BodyBegin>
<div id="container">
<LINK rel=stylesheet type=text/css href="images/css.css">
<DIV id=header>
<DIV id=toper>
<DIV id=logo><IMG src="UpFile/company.gif"></DIV>
<DIV style="WIDTH: 197px; HEIGHT: 69px" id=fax>
<P align=left><IMG style="WIDTH: 200px; HEIGHT: 59px" border=0 src="http://www.qscc.net/UpFile/2013-2/25/201322522722366.gif" width=246 height=59><BR></P></DIV>
<DIV class=clearfloat></DIV></DIV><!--导航-->

<DIV id=menu-all>
<DIV id=menu-center>
<UL>
<LI style="WIDTH: 220px; COLOR: #fff">当前时间：
<SCRIPT language=JavaScript type=text/javascript> 
todayDate = new Date(); 
date = todayDate.getDate(); 
month= todayDate.getMonth() +1; 
year= todayDate.getYear(); 
if(navigator.appName == "Netscape") 
{ 
document.write(1900+year); 
document.write("年"); 
document.write(month); 
document.write("月"); 
document.write(date); 
document.write("日"); 
document.write(" ") 
} 
if(navigator.appVersion.indexOf("MSIE") != -1) 
{ 
document.write(year); 
document.write("年"); 
document.write(month); 
document.write("月"); 
document.write(date); 
document.write("日"); 
document.write(" ") 
} 
if (todayDate.getDay() == 5) document.write("星期五") 
if (todayDate.getDay() == 6) document.write("星期六") 
if (todayDate.getDay() == 0) document.write("星期日") 
if (todayDate.getDay() == 1) document.write("星期一") 
if (todayDate.getDay() == 2) document.write("星期二") 
if (todayDate.getDay() == 3) document.write("星期三") 
if (todayDate.getDay() == 4) document.write("星期四") 
</SCRIPT>
  
<LI style="DISPLAY: none" id=Item class=mm><A id=Menu class=mm href="javascript:;">首页</A> 
<LI style="DISPLAY: none" id=Item class=mm><A id=Menu class=mm href="javascript:;">公司介绍</A> 
<LI style="DISPLAY: none" id=Item class=mm><A id=Menu class=mm href="javascript:;">新闻动态</A> 
<LI style="DISPLAY: none" id=Item class=mm><A id=Menu class=mm href="javascript:;">公司产品</A> 
<LI style="DISPLAY: none" id=Item class=mm><A id=Menu class=mm href="javascript:;">诚聘英才</A> 
<LI style="DISPLAY: none" id=Item class=mm><A id=Menu class=mm href="javascript:;">给我留言</A> 
<LI style="DISPLAY: none" id=Item class=mm><A id=Menu class=mm href="javascript:;">客户服务</A> 
<LI style="DISPLAY: none" id=Item class=mm><A id=Menu class=mm href="javascript:;">联系我们</A> 
<LI style="DISPLAY: none" id=Item class=mm><A id=Menu class=mm href="javascript:;">通用页面</A> 
<LI style="DISPLAY: none" id=Item class=mm><A id=Menu class=mm href="javascript:;">首页</A> 
<LI style="DISPLAY: none" id=Item class=mm><A id=Menu class=mm href="javascript:;">公司介绍</A> 
<LI style="DISPLAY: none" id=Item class=mm><A id=Menu class=mm href="javascript:;">新闻动态</A> 
<LI style="DISPLAY: none" id=Item class=mm><A id=Menu class=mm href="javascript:;">公司产品</A> 
<LI style="DISPLAY: none" id=Item class=mm><A id=Menu class=mm href="javascript:;">诚聘英才</A> 
<LI style="DISPLAY: none" id=Item class=mm><A id=Menu class=mm href="javascript:;">给我留言</A> 
<LI style="DISPLAY: none" id=Item class=mm><A id=Menu class=mm href="javascript:;">客户服务</A>  </LI></UL></DIV>
<DIV class=clearfloat></DIV></DIV></DIV>
<DIV id=banner><script language='JavaScript' type="text/javascript">
						linkarr = new Array();
						picarr = new Array();
						textarr = new Array();
						var swf_width=1002;
						var swf_height=320;
						var files = "images/banner1.jpg|images/banner2.jpg|images/banner3.jpg|images/banner4.jpg";
						var links = "";
						var texts = "";
						for(i=1;i<picarr.length;i++){
						  if(files=="") files = picarr[i];
						  else files += "|"+picarr[i];
						}
						for(i=1;i<linkarr.length;i++){
						  if(links=="") links = linkarr[i];
						  else links += "|"+linkarr[i];
						}
						for(i=1;i<textarr.length;i++){
						  if(texts=="") texts = textarr[i];
						  else texts += "|"+textarr[i];
						}
						document.write('<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="'+ swf_width +'" height="'+ swf_height +'">');
						document.write('<param name="movie" value="indexpic.swf"><param name="quality" value="high">');
						document.write('<param name="menu" value="false"><param name=wmode value="opaque">');
						document.write('<param name="FlashVars" value="bcastr_file='+files+'&bcastr_link='+links+'&bcastr_title='+texts+'">');
						document.write('<embed src="indexpic.swf" wmode="opaque" FlashVars="bcastr_file='+files+'&bcastr_link='+links+'&bcastr_title='+texts+'& menu="false" quality="high" width="'+ swf_width +'" height="'+ swf_height +'" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />'); document.write('</object>');
					  </script>


















































</DIV>
	<div id="maincontent">
	<div id="lefter">
			 
<DIV class=sidebox>
<H1>栏目导航</H1>
<DIV class=small-menu>
<UL> 
<LI> <A href="news.asp?class=57&amp;classname=微信频道">微信频道</A>  
<LI> <A href="news.asp?class=1&amp;classname=求是新闻">求是新闻</A>  
<LI> <A href="news.asp?class=31&amp;classname=公告通知">公告通知</A>  
<LI> <A href="news.asp?class=2&amp;classname=最新动态">最新动态</A>  
<LI> <A href="news.asp?class=55&amp;classname=政策法规">政策法规</A>  
<LI> <A href="news.asp?class=22&amp;classname=建站知识">建站知识</A>  
<LI> <A href="news.asp?class=39&amp;classname=建站方案">建站方案</A>  
<LI> <A href="news.asp?class=40&amp;classname=软件实施">软件实施</A>  
<LI> <A href="news.asp?class=25&amp;classname=设计知识">设计知识</A>  
<LI> <A href="news.asp?class=52&amp;classname=用户体验">用户体验</A>  
<LI> <A href="news.asp?class=49&amp;classname=平面设计">平面设计</A>  
<LI> <A href="news.asp?class=42&amp;classname=创业工场">创业工场</A>  
<LI> <A href="news.asp?class=53&amp;classname=创意分享">创意分享</A>  
<LI> <A href="news.asp?class=56&amp;classname=电子商务">电子商务</A>  
<LI> <A href="news.asp?class=59&amp;classname=网络营销">网络营销</A>  </LI></UL>
<DIV class=clearfloat></DIV></DIV></DIV> <!--Vote Begin--> <!--Vote End-->
		</div>
	  <div id="mainer">
	    <div class="mainbox">
              <h1><span>鏂伴椈鍔ㄦ€?uppage=news.asp</span></h1>
					<div class="newslist1">
						 
<DIV class=aboutus>
<DIV class=ti>【图片使用】图片在网页设计中的使用技巧</DIV>
<DIV class=bq>发布人：求是文化传播　发布时间：2017-2-22　点击：1359次</DIV><P style="WORD-WRAP: break-word; WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; WORD-BREAK: normal; COLOR: rgb(34,34,34); OUTLINE-WIDTH: medium; PADDING-BOTTOM: 17px; PADDING-TOP: 0px; FONT: 16px/30px tahoma, arial, 'Microsoft YaHei'; OUTLINE-STYLE: none; PADDING-LEFT: 0px; MARGIN: 0px; WIDOWS: 1; LETTER-SPACING: normal; OUTLINE-COLOR: invert; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(245,248,253); TEXT-INDENT: 0px; -webkit-text-stroke-width: 0px">　　图片在网页中所扮演的角色越来越重要。作为最常见也是最早使用的网页多媒体，图片对于网页设计师而言至关重要。如何用好图片已经成为了一项成熟、完善而又讲究的技巧，而在高清屏幕无处不在的今天，稍有瑕疵的图片都在高密度的像素下无所遁形，而不合理的图片设计也不会逃过访客的双眼。</P>
<P style="WORD-WRAP: break-word; WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; WORD-BREAK: normal; COLOR: rgb(34,34,34); OUTLINE-WIDTH: medium; PADDING-BOTTOM: 17px; PADDING-TOP: 0px; FONT: 16px/30px tahoma, arial, 'Microsoft YaHei'; OUTLINE-STYLE: none; PADDING-LEFT: 0px; MARGIN: 0px; WIDOWS: 1; LETTER-SPACING: normal; OUTLINE-COLOR: invert; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(245,248,253); TEXT-INDENT: 0px; -webkit-text-stroke-width: 0px">　　抓人眼球的首图</P>
<P style="WORD-WRAP: break-word; WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; WORD-BREAK: normal; COLOR: rgb(34,34,34); OUTLINE-WIDTH: medium; PADDING-BOTTOM: 17px; PADDING-TOP: 0px; FONT: 16px/30px tahoma, arial, 'Microsoft YaHei'; OUTLINE-STYLE: none; PADDING-LEFT: 0px; MARGIN: 0px; WIDOWS: 1; LETTER-SPACING: normal; OUTLINE-COLOR: invert; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(245,248,253); TEXT-INDENT: 0px; -webkit-text-stroke-width: 0px">　　横跨屏幕的轮播首图是时下流行的网页设计手法，设计师通过覆盖视野式的图片来营造身临其境的体验，这非常符合人类视觉优先的信息获取方式，所以，漂亮的首图是抓住用户注意力的重要手段。优质的首图能够让用户明白，他们可以从这个网站获取一些什么。</P>
<P style="WORD-WRAP: break-word; WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; WORD-BREAK: normal; COLOR: rgb(34,34,34); OUTLINE-WIDTH: medium; PADDING-BOTTOM: 17px; PADDING-TOP: 0px; FONT: 16px/30px tahoma, arial, 'Microsoft YaHei'; OUTLINE-STYLE: none; PADDING-LEFT: 0px; MARGIN: 0px; WIDOWS: 1; LETTER-SPACING: normal; OUTLINE-COLOR: invert; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(245,248,253); TEXT-INDENT: 0px; -webkit-text-stroke-width: 0px">　　<IMG border=0 src="UpFile/2017-2/22/2017222202838187.jpg"></P>
<CENTER style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(34,34,34); FONT: 16px/30px tahoma, arial, 'Microsoft YaHei'; WIDOWS: 1; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(245,248,253); TEXT-INDENT: 0px; -webkit-text-stroke-width: 0px">&nbsp;</CENTER>
<P style="WORD-WRAP: break-word; WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; WORD-BREAK: normal; COLOR: rgb(34,34,34); OUTLINE-WIDTH: medium; PADDING-BOTTOM: 17px; PADDING-TOP: 0px; FONT: 16px/30px tahoma, arial, 'Microsoft YaHei'; OUTLINE-STYLE: none; PADDING-LEFT: 0px; MARGIN: 0px; WIDOWS: 1; LETTER-SPACING: normal; OUTLINE-COLOR: invert; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(245,248,253); TEXT-INDENT: 0px; -webkit-text-stroke-width: 0px">&nbsp;</P>
<P style="WORD-WRAP: break-word; WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; WORD-BREAK: normal; COLOR: rgb(34,34,34); OUTLINE-WIDTH: medium; PADDING-BOTTOM: 17px; PADDING-TOP: 0px; FONT: 16px/30px tahoma, arial, 'Microsoft YaHei'; OUTLINE-STYLE: none; PADDING-LEFT: 0px; MARGIN: 0px; WIDOWS: 1; LETTER-SPACING: normal; OUTLINE-COLOR: invert; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(245,248,253); TEXT-INDENT: 0px; -webkit-text-stroke-width: 0px">　　页面上的图片往往是最先吸引到用户的元素。</P>
<P style="WORD-WRAP: break-word; WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; WORD-BREAK: normal; COLOR: rgb(34,34,34); OUTLINE-WIDTH: medium; PADDING-BOTTOM: 17px; PADDING-TOP: 0px; FONT: 16px/30px tahoma, arial, 'Microsoft YaHei'; OUTLINE-STYLE: none; PADDING-LEFT: 0px; MARGIN: 0px; WIDOWS: 1; LETTER-SPACING: normal; OUTLINE-COLOR: invert; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(245,248,253); TEXT-INDENT: 0px; -webkit-text-stroke-width: 0px">　　<IMG border=0 src="UpFile/2017-2/22/201722220290501.jpg"></P>
<CENTER style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(34,34,34); FONT: 16px/30px tahoma, arial, 'Microsoft YaHei'; WIDOWS: 1; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(245,248,253); TEXT-INDENT: 0px; -webkit-text-stroke-width: 0px">&nbsp;</CENTER>
<P style="WORD-WRAP: break-word; WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; WORD-BREAK: normal; COLOR: rgb(34,34,34); OUTLINE-WIDTH: medium; PADDING-BOTTOM: 17px; PADDING-TOP: 0px; FONT: 16px/30px tahoma, arial, 'Microsoft YaHei'; OUTLINE-STYLE: none; PADDING-LEFT: 0px; MARGIN: 0px; WIDOWS: 1; LETTER-SPACING: normal; OUTLINE-COLOR: invert; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(245,248,253); TEXT-INDENT: 0px; -webkit-text-stroke-width: 0px">&nbsp;</P>
<P style="WORD-WRAP: break-word; WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; WORD-BREAK: normal; COLOR: rgb(34,34,34); OUTLINE-WIDTH: medium; PADDING-BOTTOM: 17px; PADDING-TOP: 0px; FONT: 16px/30px tahoma, arial, 'Microsoft YaHei'; OUTLINE-STYLE: none; PADDING-LEFT: 0px; MARGIN: 0px; WIDOWS: 1; LETTER-SPACING: normal; OUTLINE-COLOR: invert; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(245,248,253); TEXT-INDENT: 0px; -webkit-text-stroke-width: 0px">　　首图是容纳信息的完美容器。</P>
<P style="WORD-WRAP: break-word; WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; WORD-BREAK: normal; COLOR: rgb(34,34,34); OUTLINE-WIDTH: medium; PADDING-BOTTOM: 17px; PADDING-TOP: 0px; FONT: 16px/30px tahoma, arial, 'Microsoft YaHei'; OUTLINE-STYLE: none; PADDING-LEFT: 0px; MARGIN: 0px; WIDOWS: 1; LETTER-SPACING: normal; OUTLINE-COLOR: invert; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(245,248,253); TEXT-INDENT: 0px; -webkit-text-stroke-width: 0px">　　小贴士：</P>
<P style="WORD-WRAP: break-word; WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; WORD-BREAK: normal; COLOR: rgb(34,34,34); OUTLINE-WIDTH: medium; PADDING-BOTTOM: 17px; PADDING-TOP: 0px; FONT: 16px/30px tahoma, arial, 'Microsoft YaHei'; OUTLINE-STYLE: none; PADDING-LEFT: 0px; MARGIN: 0px; WIDOWS: 1; LETTER-SPACING: normal; OUTLINE-COLOR: invert; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(245,248,253); TEXT-INDENT: 0px; -webkit-text-stroke-width: 0px">　　·首图最好只用高清图片。没有什么比低保真甚至失真的图片给人的体验更差了，如果你想使用首图，那么图片质量意味着一切。</P>
<P style="WORD-WRAP: break-word; WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; WORD-BREAK: normal; COLOR: rgb(34,34,34); OUTLINE-WIDTH: medium; PADDING-BOTTOM: 17px; PADDING-TOP: 0px; FONT: 16px/30px tahoma, arial, 'Microsoft YaHei'; OUTLINE-STYLE: none; PADDING-LEFT: 0px; MARGIN: 0px; WIDOWS: 1; LETTER-SPACING: normal; OUTLINE-COLOR: invert; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(245,248,253); TEXT-INDENT: 0px; -webkit-text-stroke-width: 0px">　　·如果你想使用文字覆盖图片的方式来制作首图，那么请务必确保图片中的视觉主体能被用户轻松识别、理解，同时和文字内容有足够的对比度。</P>
<P style="WORD-WRAP: break-word; WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; WORD-BREAK: normal; COLOR: rgb(34,34,34); OUTLINE-WIDTH: medium; PADDING-BOTTOM: 17px; PADDING-TOP: 0px; FONT: 16px/30px tahoma, arial, 'Microsoft YaHei'; OUTLINE-STYLE: none; PADDING-LEFT: 0px; MARGIN: 0px; WIDOWS: 1; LETTER-SPACING: normal; OUTLINE-COLOR: invert; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(245,248,253); TEXT-INDENT: 0px; -webkit-text-stroke-width: 0px">　　在自然环境中展示</P>
<P style="WORD-WRAP: break-word; WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; WORD-BREAK: normal; COLOR: rgb(34,34,34); OUTLINE-WIDTH: medium; PADDING-BOTTOM: 17px; PADDING-TOP: 0px; FONT: 16px/30px tahoma, arial, 'Microsoft YaHei'; OUTLINE-STYLE: none; PADDING-LEFT: 0px; MARGIN: 0px; WIDOWS: 1; LETTER-SPACING: normal; OUTLINE-COLOR: invert; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(245,248,253); TEXT-INDENT: 0px; -webkit-text-stroke-width: 0px">　　根据环境和使用场景来展示产品是电商网站常用的机巧。而实际的数据也表明，这样的图片拥有着极高的转化率。举个例子，下面所展示的 GorillaPod 就将产品置于实际的使用场景中，给予用户真实的使用体验。灵活的三脚架在整个图片中作为焦点而存在整个首图的设计富有创造性，信息和内容的传递也颇为高效。</P>
<P style="WORD-WRAP: break-word; WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; WORD-BREAK: normal; COLOR: rgb(34,34,34); OUTLINE-WIDTH: medium; PADDING-BOTTOM: 17px; PADDING-TOP: 0px; FONT: 16px/30px tahoma, arial, 'Microsoft YaHei'; OUTLINE-STYLE: none; PADDING-LEFT: 0px; MARGIN: 0px; WIDOWS: 1; LETTER-SPACING: normal; OUTLINE-COLOR: invert; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(245,248,253); TEXT-INDENT: 0px; -webkit-text-stroke-width: 0px"><IMG border=0 src="UpFile/2017-2/22/2017222202929160.jpg"></P>
<P style="WORD-WRAP: break-word; WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; WORD-BREAK: normal; COLOR: rgb(34,34,34); OUTLINE-WIDTH: medium; PADDING-BOTTOM: 17px; PADDING-TOP: 0px; FONT: 16px/30px tahoma, arial, 'Microsoft YaHei'; OUTLINE-STYLE: none; PADDING-LEFT: 0px; MARGIN: 0px; WIDOWS: 1; LETTER-SPACING: normal; OUTLINE-COLOR: invert; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(245,248,253); TEXT-INDENT: 0px; -webkit-text-stroke-width: 0px"><IMG border=0 src="UpFile/2017-2/22/2017222202953291.jpg"></P>
<P style="WORD-WRAP: break-word; WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; WORD-BREAK: normal; COLOR: rgb(34,34,34); OUTLINE-WIDTH: medium; PADDING-BOTTOM: 17px; PADDING-TOP: 0px; FONT: 16px/30px tahoma, arial, 'Microsoft YaHei'; OUTLINE-STYLE: none; PADDING-LEFT: 0px; MARGIN: 0px; WIDOWS: 1; LETTER-SPACING: normal; OUTLINE-COLOR: invert; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(245,248,253); TEXT-INDENT: 0px; -webkit-text-stroke-width: 0px">　　　Juliana Bicycle 的网站首图同样是将产品置于使用场景中。</P>
<P style="WORD-WRAP: break-word; WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; WORD-BREAK: normal; COLOR: rgb(34,34,34); OUTLINE-WIDTH: medium; PADDING-BOTTOM: 17px; PADDING-TOP: 0px; FONT: 16px/30px tahoma, arial, 'Microsoft YaHei'; OUTLINE-STYLE: none; PADDING-LEFT: 0px; MARGIN: 0px; WIDOWS: 1; LETTER-SPACING: normal; OUTLINE-COLOR: invert; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(245,248,253); TEXT-INDENT: 0px; -webkit-text-stroke-width: 0px">　　相比于色彩丰富的图片，黑白色调的图片无法使用抓人眼球的色彩来吸引访客，黑白照片更多的是依靠内容本身来进行视觉传达。现代的黑白摄影作品强调艺术性，并且许多摄影师认为，这样的图片和摄影作品更加纯粹。</P>
<P style="WORD-WRAP: break-word; WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; WORD-BREAK: normal; COLOR: rgb(34,34,34); OUTLINE-WIDTH: medium; PADDING-BOTTOM: 17px; PADDING-TOP: 0px; FONT: 16px/30px tahoma, arial, 'Microsoft YaHei'; OUTLINE-STYLE: none; PADDING-LEFT: 0px; MARGIN: 0px; WIDOWS: 1; LETTER-SPACING: normal; OUTLINE-COLOR: invert; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(245,248,253); TEXT-INDENT: 0px; -webkit-text-stroke-width: 0px">　<IMG border=0 src="UpFile/2017-2/22/2017222203020389.jpg">　</P>
<P style="WORD-WRAP: break-word; WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; WORD-BREAK: normal; COLOR: rgb(34,34,34); OUTLINE-WIDTH: medium; PADDING-BOTTOM: 17px; PADDING-TOP: 0px; FONT: 16px/30px tahoma, arial, 'Microsoft YaHei'; OUTLINE-STYLE: none; PADDING-LEFT: 0px; MARGIN: 0px; WIDOWS: 1; LETTER-SPACING: normal; OUTLINE-COLOR: invert; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(245,248,253); TEXT-INDENT: 0px; -webkit-text-stroke-width: 0px">　　但是，为什么黑白摄影作品和图片会如此受追捧呢?</P>
<P style="WORD-WRAP: break-word; WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; WORD-BREAK: normal; COLOR: rgb(34,34,34); OUTLINE-WIDTH: medium; PADDING-BOTTOM: 17px; PADDING-TOP: 0px; FONT: 16px/30px tahoma, arial, 'Microsoft YaHei'; OUTLINE-STYLE: none; PADDING-LEFT: 0px; MARGIN: 0px; WIDOWS: 1; LETTER-SPACING: normal; OUTLINE-COLOR: invert; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(245,248,253); TEXT-INDENT: 0px; -webkit-text-stroke-width: 0px">　　很简单，色彩会让观看者分心。</P>
<P style="WORD-WRAP: break-word; WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; WORD-BREAK: normal; COLOR: rgb(34,34,34); OUTLINE-WIDTH: medium; PADDING-BOTTOM: 17px; PADDING-TOP: 0px; FONT: 16px/30px tahoma, arial, 'Microsoft YaHei'; OUTLINE-STYLE: none; PADDING-LEFT: 0px; MARGIN: 0px; WIDOWS: 1; LETTER-SPACING: normal; OUTLINE-COLOR: invert; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(245,248,253); TEXT-INDENT: 0px; -webkit-text-stroke-width: 0px">　　色彩的存在让用户更容易忽略照片本身的构图和细节，用户的注意力可能会被引导到其他的地方，从而忽略诸如CTA按钮等关键元素。</P>
<P style="WORD-WRAP: break-word; WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; WORD-BREAK: normal; COLOR: rgb(34,34,34); OUTLINE-WIDTH: medium; PADDING-BOTTOM: 17px; PADDING-TOP: 0px; FONT: 16px/30px tahoma, arial, 'Microsoft YaHei'; OUTLINE-STYLE: none; PADDING-LEFT: 0px; MARGIN: 0px; WIDOWS: 1; LETTER-SPACING: normal; OUTLINE-COLOR: invert; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(245,248,253); TEXT-INDENT: 0px; -webkit-text-stroke-width: 0px">　　小贴士：</P>
<P style="WORD-WRAP: break-word; WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; WORD-BREAK: normal; COLOR: rgb(34,34,34); OUTLINE-WIDTH: medium; PADDING-BOTTOM: 17px; PADDING-TOP: 0px; FONT: 16px/30px tahoma, arial, 'Microsoft YaHei'; OUTLINE-STYLE: none; PADDING-LEFT: 0px; MARGIN: 0px; WIDOWS: 1; LETTER-SPACING: normal; OUTLINE-COLOR: invert; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(245,248,253); TEXT-INDENT: 0px; -webkit-text-stroke-width: 0px">　　·如果你你使用黑白图片作为背景，那么你可以赋予CTA按钮以一个醒目的色彩，从而起到吸引用户注意力的作用。</P>
<P style="WORD-WRAP: break-word; WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; WORD-BREAK: normal; COLOR: rgb(34,34,34); OUTLINE-WIDTH: medium; PADDING-BOTTOM: 17px; PADDING-TOP: 0px; FONT: 16px/30px tahoma, arial, 'Microsoft YaHei'; OUTLINE-STYLE: none; PADDING-LEFT: 0px; MARGIN: 0px; WIDOWS: 1; LETTER-SPACING: normal; OUTLINE-COLOR: invert; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(245,248,253); TEXT-INDENT: 0px; -webkit-text-stroke-width: 0px">　　色彩叠加</P>
<P style="WORD-WRAP: break-word; WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; WORD-BREAK: normal; COLOR: rgb(34,34,34); OUTLINE-WIDTH: medium; PADDING-BOTTOM: 17px; PADDING-TOP: 0px; FONT: 16px/30px tahoma, arial, 'Microsoft YaHei'; OUTLINE-STYLE: none; PADDING-LEFT: 0px; MARGIN: 0px; WIDOWS: 1; LETTER-SPACING: normal; OUTLINE-COLOR: invert; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(245,248,253); TEXT-INDENT: 0px; -webkit-text-stroke-width: 0px">　　这里说的色彩叠加值得是用半透明的色彩图层叠加在图片上，这种手法通常能够让图片更加匹配品牌色，或者视觉设计的需求。所叠加的色彩能够让图片更容易引起用户的情绪反应。</P>
<P style="WORD-WRAP: break-word; WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; WORD-BREAK: normal; COLOR: rgb(34,34,34); OUTLINE-WIDTH: medium; PADDING-BOTTOM: 17px; PADDING-TOP: 0px; FONT: 16px/30px tahoma, arial, 'Microsoft YaHei'; OUTLINE-STYLE: none; PADDING-LEFT: 0px; MARGIN: 0px; WIDOWS: 1; LETTER-SPACING: normal; OUTLINE-COLOR: invert; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(245,248,253); TEXT-INDENT: 0px; -webkit-text-stroke-width: 0px">　<IMG border=0 src="UpFile/2017-2/22/2017222203056213.jpg">　</P>
<P style="WORD-WRAP: break-word; WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; WORD-BREAK: normal; COLOR: rgb(34,34,34); OUTLINE-WIDTH: medium; PADDING-BOTTOM: 17px; PADDING-TOP: 0px; FONT: 16px/30px tahoma, arial, 'Microsoft YaHei'; OUTLINE-STYLE: none; PADDING-LEFT: 0px; MARGIN: 0px; WIDOWS: 1; LETTER-SPACING: normal; OUTLINE-COLOR: invert; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(245,248,253); TEXT-INDENT: 0px; -webkit-text-stroke-width: 0px">　　色彩叠加强化了图片的感染力。</P>
<P style="WORD-WRAP: break-word; WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; WORD-BREAK: normal; COLOR: rgb(34,34,34); OUTLINE-WIDTH: medium; PADDING-BOTTOM: 17px; PADDING-TOP: 0px; FONT: 16px/30px tahoma, arial, 'Microsoft YaHei'; OUTLINE-STYLE: none; PADDING-LEFT: 0px; MARGIN: 0px; WIDOWS: 1; LETTER-SPACING: normal; OUTLINE-COLOR: invert; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(245,248,253); TEXT-INDENT: 0px; -webkit-text-stroke-width: 0px">　　即使是黑白色调的背景，色彩叠加也同样可以强化其感染力，不过要选对色彩才行。</P>
<P style="WORD-WRAP: break-word; WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; WORD-BREAK: normal; COLOR: rgb(34,34,34); OUTLINE-WIDTH: medium; PADDING-BOTTOM: 17px; PADDING-TOP: 0px; FONT: 16px/30px tahoma, arial, 'Microsoft YaHei'; OUTLINE-STYLE: none; PADDING-LEFT: 0px; MARGIN: 0px; WIDOWS: 1; LETTER-SPACING: normal; OUTLINE-COLOR: invert; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(245,248,253); TEXT-INDENT: 0px; -webkit-text-stroke-width: 0px">　　<IMG border=0 src="UpFile/2017-2/22/2017222203128549.jpg"></P>
<CENTER style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(34,34,34); FONT: 16px/30px tahoma, arial, 'Microsoft YaHei'; WIDOWS: 1; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(245,248,253); TEXT-INDENT: 0px; -webkit-text-stroke-width: 0px">&nbsp;</CENTER>
<P style="WORD-WRAP: break-word; WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; WORD-BREAK: normal; COLOR: rgb(34,34,34); OUTLINE-WIDTH: medium; PADDING-BOTTOM: 17px; PADDING-TOP: 0px; FONT: 16px/30px tahoma, arial, 'Microsoft YaHei'; OUTLINE-STYLE: none; PADDING-LEFT: 0px; MARGIN: 0px; WIDOWS: 1; LETTER-SPACING: normal; OUTLINE-COLOR: invert; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(245,248,253); TEXT-INDENT: 0px; -webkit-text-stroke-width: 0px">&nbsp;</P>
<P style="WORD-WRAP: break-word; WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; WORD-BREAK: normal; COLOR: rgb(34,34,34); OUTLINE-WIDTH: medium; PADDING-BOTTOM: 17px; PADDING-TOP: 0px; FONT: 16px/30px tahoma, arial, 'Microsoft YaHei'; OUTLINE-STYLE: none; PADDING-LEFT: 0px; MARGIN: 0px; WIDOWS: 1; LETTER-SPACING: normal; OUTLINE-COLOR: invert; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(245,248,253); TEXT-INDENT: 0px; -webkit-text-stroke-width: 0px">　　小贴士：</P>
<P style="WORD-WRAP: break-word; WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; WORD-BREAK: normal; COLOR: rgb(34,34,34); OUTLINE-WIDTH: medium; PADDING-BOTTOM: 17px; PADDING-TOP: 0px; FONT: 16px/30px tahoma, arial, 'Microsoft YaHei'; OUTLINE-STYLE: none; PADDING-LEFT: 0px; MARGIN: 0px; WIDOWS: 1; LETTER-SPACING: normal; OUTLINE-COLOR: invert; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(245,248,253); TEXT-INDENT: 0px; -webkit-text-stroke-width: 0px">　　·想要为图片添加特定的效果并不难，这里有教程教你如何使用PS和CSS来达成目的;</P>
<P style="WORD-WRAP: break-word; WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; WORD-BREAK: normal; COLOR: rgb(34,34,34); OUTLINE-WIDTH: medium; PADDING-BOTTOM: 17px; PADDING-TOP: 0px; FONT: 16px/30px tahoma, arial, 'Microsoft YaHei'; OUTLINE-STYLE: none; PADDING-LEFT: 0px; MARGIN: 0px; WIDOWS: 1; LETTER-SPACING: normal; OUTLINE-COLOR: invert; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(245,248,253); TEXT-INDENT: 0px; -webkit-text-stroke-width: 0px">　　·当你使用单一色彩来作为叠加图层的时候，控制好色彩的透明度。透明度较低的色彩会让背景的图片不那么容易识别，想要让效果更微妙，应当控制好这个度。</P>
<P style="WORD-WRAP: break-word; WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; WORD-BREAK: normal; COLOR: rgb(34,34,34); OUTLINE-WIDTH: medium; PADDING-BOTTOM: 17px; PADDING-TOP: 0px; FONT: 16px/30px tahoma, arial, 'Microsoft YaHei'; OUTLINE-STYLE: none; PADDING-LEFT: 0px; MARGIN: 0px; WIDOWS: 1; LETTER-SPACING: normal; OUTLINE-COLOR: invert; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(245,248,253); TEXT-INDENT: 0px; -webkit-text-stroke-width: 0px">　　<IMG border=0 src="UpFile/2017-2/22/2017222203155962.jpg"></P>
<CENTER style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(34,34,34); FONT: 16px/30px tahoma, arial, 'Microsoft YaHei'; WIDOWS: 1; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(245,248,253); TEXT-INDENT: 0px; -webkit-text-stroke-width: 0px">&nbsp;</CENTER>
<P style="WORD-WRAP: break-word; WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; WORD-BREAK: normal; COLOR: rgb(34,34,34); OUTLINE-WIDTH: medium; PADDING-BOTTOM: 17px; PADDING-TOP: 0px; FONT: 16px/30px tahoma, arial, 'Microsoft YaHei'; OUTLINE-STYLE: none; PADDING-LEFT: 0px; MARGIN: 0px; WIDOWS: 1; LETTER-SPACING: normal; OUTLINE-COLOR: invert; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(245,248,253); TEXT-INDENT: 0px; -webkit-text-stroke-width: 0px">&nbsp;</P>
<P style="WORD-WRAP: break-word; WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; WORD-BREAK: normal; COLOR: rgb(34,34,34); OUTLINE-WIDTH: medium; PADDING-BOTTOM: 17px; PADDING-TOP: 0px; FONT: 16px/30px tahoma, arial, 'Microsoft YaHei'; OUTLINE-STYLE: none; PADDING-LEFT: 0px; MARGIN: 0px; WIDOWS: 1; LETTER-SPACING: normal; OUTLINE-COLOR: invert; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(245,248,253); TEXT-INDENT: 0px; -webkit-text-stroke-width: 0px">　　文字排版</P>
<P style="WORD-WRAP: break-word; WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; WORD-BREAK: normal; COLOR: rgb(34,34,34); OUTLINE-WIDTH: medium; PADDING-BOTTOM: 17px; PADDING-TOP: 0px; FONT: 16px/30px tahoma, arial, 'Microsoft YaHei'; OUTLINE-STYLE: none; PADDING-LEFT: 0px; MARGIN: 0px; WIDOWS: 1; LETTER-SPACING: normal; OUTLINE-COLOR: invert; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(245,248,253); TEXT-INDENT: 0px; -webkit-text-stroke-width: 0px">　　精心设计的排版能够为你的品牌提升个性，当这些排版和图片搭配到一起的时候，整个设计的形式感和表现力就有了明显的提升。文本的样式和其中包含的信息，和图片内容相互呼应，互为解读，这是最佳的搭配。</P>
<P style="WORD-WRAP: break-word; WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; WORD-BREAK: normal; COLOR: rgb(34,34,34); OUTLINE-WIDTH: medium; PADDING-BOTTOM: 17px; PADDING-TOP: 0px; FONT: 16px/30px tahoma, arial, 'Microsoft YaHei'; OUTLINE-STYLE: none; PADDING-LEFT: 0px; MARGIN: 0px; WIDOWS: 1; LETTER-SPACING: normal; OUTLINE-COLOR: invert; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(245,248,253); TEXT-INDENT: 0px; -webkit-text-stroke-width: 0px">　　<IMG border=0 src="UpFile/2017-2/22/2017222203211438.jpg"></P>
<CENTER style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(34,34,34); FONT: 16px/30px tahoma, arial, 'Microsoft YaHei'; WIDOWS: 1; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(245,248,253); TEXT-INDENT: 0px; -webkit-text-stroke-width: 0px">&nbsp;</CENTER>
<P style="WORD-WRAP: break-word; WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; WORD-BREAK: normal; COLOR: rgb(34,34,34); OUTLINE-WIDTH: medium; PADDING-BOTTOM: 17px; PADDING-TOP: 0px; FONT: 16px/30px tahoma, arial, 'Microsoft YaHei'; OUTLINE-STYLE: none; PADDING-LEFT: 0px; MARGIN: 0px; WIDOWS: 1; LETTER-SPACING: normal; OUTLINE-COLOR: invert; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(245,248,253); TEXT-INDENT: 0px; -webkit-text-stroke-width: 0px">&nbsp;</P>
<P style="WORD-WRAP: break-word; WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; WORD-BREAK: normal; COLOR: rgb(34,34,34); OUTLINE-WIDTH: medium; PADDING-BOTTOM: 17px; PADDING-TOP: 0px; FONT: 16px/30px tahoma, arial, 'Microsoft YaHei'; OUTLINE-STYLE: none; PADDING-LEFT: 0px; MARGIN: 0px; WIDOWS: 1; LETTER-SPACING: normal; OUTLINE-COLOR: invert; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(245,248,253); TEXT-INDENT: 0px; -webkit-text-stroke-width: 0px">　　同一个界面下，图片和文本之间不仅仅有对抗，还有协同。</P>
<P style="WORD-WRAP: break-word; WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; WORD-BREAK: normal; COLOR: rgb(34,34,34); OUTLINE-WIDTH: medium; PADDING-BOTTOM: 17px; PADDING-TOP: 0px; FONT: 16px/30px tahoma, arial, 'Microsoft YaHei'; OUTLINE-STYLE: none; PADDING-LEFT: 0px; MARGIN: 0px; WIDOWS: 1; LETTER-SPACING: normal; OUTLINE-COLOR: invert; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(245,248,253); TEXT-INDENT: 0px; -webkit-text-stroke-width: 0px">　　<IMG border=0 src="UpFile/2017-2/22/2017222203229771.jpg"></P>
<CENTER style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(34,34,34); FONT: 16px/30px tahoma, arial, 'Microsoft YaHei'; WIDOWS: 1; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(245,248,253); TEXT-INDENT: 0px; -webkit-text-stroke-width: 0px">&nbsp;</CENTER>
<P style="WORD-WRAP: break-word; WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; WORD-BREAK: normal; COLOR: rgb(34,34,34); OUTLINE-WIDTH: medium; PADDING-BOTTOM: 17px; PADDING-TOP: 0px; FONT: 16px/30px tahoma, arial, 'Microsoft YaHei'; OUTLINE-STYLE: none; PADDING-LEFT: 0px; MARGIN: 0px; WIDOWS: 1; LETTER-SPACING: normal; OUTLINE-COLOR: invert; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(245,248,253); TEXT-INDENT: 0px; -webkit-text-stroke-width: 0px">&nbsp;</P>
<P style="WORD-WRAP: break-word; WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; WORD-BREAK: normal; COLOR: rgb(34,34,34); OUTLINE-WIDTH: medium; PADDING-BOTTOM: 17px; PADDING-TOP: 0px; FONT: 16px/30px tahoma, arial, 'Microsoft YaHei'; OUTLINE-STYLE: none; PADDING-LEFT: 0px; MARGIN: 0px; WIDOWS: 1; LETTER-SPACING: normal; OUTLINE-COLOR: invert; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(245,248,253); TEXT-INDENT: 0px; -webkit-text-stroke-width: 0px">　　小贴士：</P>
<P style="WORD-WRAP: break-word; WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; WORD-BREAK: normal; COLOR: rgb(34,34,34); OUTLINE-WIDTH: medium; PADDING-BOTTOM: 17px; PADDING-TOP: 0px; FONT: 16px/30px tahoma, arial, 'Microsoft YaHei'; OUTLINE-STYLE: none; PADDING-LEFT: 0px; MARGIN: 0px; WIDOWS: 1; LETTER-SPACING: normal; OUTLINE-COLOR: invert; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(245,248,253); TEXT-INDENT: 0px; -webkit-text-stroke-width: 0px">　　·充满形式感的排版是非常不错的视觉元素，但是它不应该喧宾夺主，如果它太过于显眼会降低图片作为视觉元素的存在感。</P>
<P style="WORD-WRAP: break-word; WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; WORD-BREAK: normal; COLOR: rgb(34,34,34); OUTLINE-WIDTH: medium; PADDING-BOTTOM: 17px; PADDING-TOP: 0px; FONT: 16px/30px tahoma, arial, 'Microsoft YaHei'; OUTLINE-STYLE: none; PADDING-LEFT: 0px; MARGIN: 0px; WIDOWS: 1; LETTER-SPACING: normal; OUTLINE-COLOR: invert; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(245,248,253); TEXT-INDENT: 0px; -webkit-text-stroke-width: 0px">　　·时刻谨记可读性的问题，过于花哨的字体和排版设计可能存在色彩对比度的问题，以及识别度的问题。</P>
<P style="WORD-WRAP: break-word; WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; WORD-BREAK: normal; COLOR: rgb(34,34,34); OUTLINE-WIDTH: medium; PADDING-BOTTOM: 17px; PADDING-TOP: 0px; FONT: 16px/30px tahoma, arial, 'Microsoft YaHei'; OUTLINE-STYLE: none; PADDING-LEFT: 0px; MARGIN: 0px; WIDOWS: 1; LETTER-SPACING: normal; OUTLINE-COLOR: invert; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(245,248,253); TEXT-INDENT: 0px; -webkit-text-stroke-width: 0px">　　·充满形式感的字体和排版设计并不意味着复杂，它有时候也可以是简单的，使用简单易读的字体，同样可以带来优秀的效果。</P>
<P style="WORD-WRAP: break-word; WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; WORD-BREAK: normal; COLOR: rgb(34,34,34); OUTLINE-WIDTH: medium; PADDING-BOTTOM: 17px; PADDING-TOP: 0px; FONT: 16px/30px tahoma, arial, 'Microsoft YaHei'; OUTLINE-STYLE: none; PADDING-LEFT: 0px; MARGIN: 0px; WIDOWS: 1; LETTER-SPACING: normal; OUTLINE-COLOR: invert; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(245,248,253); TEXT-INDENT: 0px; -webkit-text-stroke-width: 0px">　　不对称布局</P>
<P style="WORD-WRAP: break-word; WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; WORD-BREAK: normal; COLOR: rgb(34,34,34); OUTLINE-WIDTH: medium; PADDING-BOTTOM: 17px; PADDING-TOP: 0px; FONT: 16px/30px tahoma, arial, 'Microsoft YaHei'; OUTLINE-STYLE: none; PADDING-LEFT: 0px; MARGIN: 0px; WIDOWS: 1; LETTER-SPACING: normal; OUTLINE-COLOR: invert; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(245,248,253); TEXT-INDENT: 0px; -webkit-text-stroke-width: 0px">　　不对称布局本身也是一种流行的设计手法。许多网页设计师尤其喜欢这种有趣的排版布局方式。这种布局非常适合用来引导用户的视觉，因为页面有了轻重对比，所以它可以以合乎逻辑的方式引导用户的眼睛逐步浏览页面内容。</P>
<P style="WORD-WRAP: break-word; WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; WORD-BREAK: normal; COLOR: rgb(34,34,34); OUTLINE-WIDTH: medium; PADDING-BOTTOM: 17px; PADDING-TOP: 0px; FONT: 16px/30px tahoma, arial, 'Microsoft YaHei'; OUTLINE-STYLE: none; PADDING-LEFT: 0px; MARGIN: 0px; WIDOWS: 1; LETTER-SPACING: normal; OUTLINE-COLOR: invert; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(245,248,253); TEXT-INDENT: 0px; -webkit-text-stroke-width: 0px">　　<IMG border=0 src="UpFile/2017-2/22/2017222203249698.jpg"></P>
<CENTER style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(34,34,34); FONT: 16px/30px tahoma, arial, 'Microsoft YaHei'; WIDOWS: 1; LETTER-SPACING: normal; BACKGROUND-COLOR: rgb(245,248,253); TEXT-INDENT: 0px; -webkit-text-stroke-width: 0px">&nbsp;</CENTER>
<P style="WORD-WRAP: break-word; WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; WORD-BREAK: normal; COLOR: rgb(34,34,34); OUTLINE-WIDTH: medium; PADDING-BOTTOM: 17px; PADDING-TOP: 0px; FONT: 16px/30px tahoma, arial, 'Microsoft YaHei'; OUTLINE-STYLE: none; PADDING-LEFT: 0px; MARGIN: 0px; WIDOWS: 1; LETTER-SPACING: normal; OUTLINE-COLOR: invert; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(245,248,253); TEXT-INDENT: 0px; -webkit-text-stroke-width: 0px">&nbsp;</P>
<P style="WORD-WRAP: break-word; WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; WORD-BREAK: normal; COLOR: rgb(34,34,34); OUTLINE-WIDTH: medium; PADDING-BOTTOM: 17px; PADDING-TOP: 0px; FONT: 16px/30px tahoma, arial, 'Microsoft YaHei'; OUTLINE-STYLE: none; PADDING-LEFT: 0px; MARGIN: 0px; WIDOWS: 1; LETTER-SPACING: normal; OUTLINE-COLOR: invert; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(245,248,253); TEXT-INDENT: 0px; -webkit-text-stroke-width: 0px">　　文字和图片的视觉轻重不同，你可以让两者分别置于页面的对称位置，视觉重量上的不对称就由此形成。结构上的对称让页面足够平衡，而视觉上的差异则让页面显得参差有趣。</P>
<P style="WORD-WRAP: break-word; WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; WORD-BREAK: normal; COLOR: rgb(34,34,34); OUTLINE-WIDTH: medium; PADDING-BOTTOM: 17px; PADDING-TOP: 0px; FONT: 16px/30px tahoma, arial, 'Microsoft YaHei'; OUTLINE-STYLE: none; PADDING-LEFT: 0px; MARGIN: 0px; WIDOWS: 1; LETTER-SPACING: normal; OUTLINE-COLOR: invert; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(245,248,253); TEXT-INDENT: 0px; -webkit-text-stroke-width: 0px">　　结语</P>
<P style="WORD-WRAP: break-word; WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; WORD-BREAK: normal; COLOR: rgb(34,34,34); OUTLINE-WIDTH: medium; PADDING-BOTTOM: 17px; PADDING-TOP: 0px; FONT: 16px/30px tahoma, arial, 'Microsoft YaHei'; OUTLINE-STYLE: none; PADDING-LEFT: 0px; MARGIN: 0px; WIDOWS: 1; LETTER-SPACING: normal; OUTLINE-COLOR: invert; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(245,248,253); TEXT-INDENT: 0px; -webkit-text-stroke-width: 0px">　　随着趋势和用户习惯的变化，对于优秀用户体验的认知会逐渐的发生变化。图片的使用也是一样的，设计趋势和技术的变化直接影响着图片的使用，但是总体上而言，对于图片素质的要求是越来越高了。</P>
<P style="WORD-WRAP: break-word; WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; WORD-BREAK: normal; COLOR: rgb(34,34,34); OUTLINE-WIDTH: medium; PADDING-BOTTOM: 17px; PADDING-TOP: 0px; FONT: 16px/30px tahoma, arial, 'Microsoft YaHei'; OUTLINE-STYLE: none; PADDING-LEFT: 0px; MARGIN: 0px; WIDOWS: 1; LETTER-SPACING: normal; OUTLINE-COLOR: invert; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(245,248,253); TEXT-INDENT: 0px; -webkit-text-stroke-width: 0px"><!-- JiaThis Button BEGIN --> 
<div class="jiathis_style"> 
    <a class="jiathis_button_qzone"></a> 
    <a class="jiathis_button_tsina"></a> 
    <a class="jiathis_button_tqq"></a> 
    <a class="jiathis_button_weixin"></a> 
    <a class="jiathis_button_renren"></a> 
    <a class="jiathis_button_xiaoyou"></a> 
    <a href="http://www.jiathis.com/share" class="jiathis jiathis_txt jtico jtico_jiathis" target="_blank"></a> 
    <a class="jiathis_counter_style"></a> 
</div> 
<script type="text/javascript" src="http://v3.jiathis.com/code/jia.js" charset="utf-8"></script> 
<!-- JiaThis Button END --></P> </DIV>
					</div>
	    </div>
	  </div>
		<div class="clearfloat"></div>
	</div>
	
	<LINK rel=stylesheet type=text/css href="images/css.css"> <!--Link Begin--> 
<DIV id=links>
<SCRIPT language=JavaScript src="admin/link/link.asp"></SCRIPT>
</DIV> <!--Link End--> 
<script type="text/javascript">(function(){document.write(unescape('%3Cdiv id="bdcs"%3E%3C/div%3E'));var bdcs = document.createElement('script');bdcs.type = 'text/javascript';bdcs.async = true;bdcs.src = 'http://znsv.baidu.com/customer_search/api/js?sid=8313553085186986851' + '&plate_url=' + encodeURIComponent(window.location.href) + '&t=' + Math.ceil(new Date()/3600000);var s = document.getElementsByTagName('script')[0];s.parentNode.insertBefore(bdcs, s);})();</script>
<DIV id=footer><IMG border=0 align=left src="UpFile/image/20140508/i_lo2.gif">公司地址：浙江仙居艺城东路 邮编：317300 在线客服QQ:582887017 <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=582887017&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:582887017:51" alt="这里是求是文化传播有限公司在线客服，有事点这里！" title="这里是求是文化传播有限公司在线客服，有事点这里！"/></a></A>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <BR>商务电话：0576-87785079 图文传真：0576-87796829 E-Mail:<A href="mailto:qscb@foxmail.com"><FONT color=#999999>qscb@foxmail.com<BR></FONT></A>Copyright&copy;2013-2014 仙居县求是文化传播有限公司 All Rights Reserved.<BR>浏览本网推荐显示屏分辨率1440※900，浏览器为兼容模式。<BR><FONT style="BACKGROUND-COLOR: #f8f8f8" color=#bbbbbb face=Verdana><A href="http://www.miitbeian.gov.cn">浙ICP备09049204号
<SCRIPT language=JavaScript src="http://s22.cnzz.com/stat.php?id=5013738&amp;web_id=5013738&amp;show=pic1"></SCRIPT><br>
</A></FONT></DIV>
<SCRIPT language=JavaScript src="common/init.js"></SCRIPT>
<SCRIPT language=Javascript src="common/tranbig5.Js"></SCRIPT>
<!--QQ Begin--> <!--QQ End--><!--popwin Begin-->
<SCRIPT language=JavaScript src="admin/board/popwindow.asp"></SCRIPT>
  <!--popwin End--><!-- Baidu Button BEGIN -->
<script type="text/javascript" id="bdshare_js" data="type=slide&amp;img=0&amp;pos=right&amp;uid=767136" ></script>
<script type="text/javascript" id="bdshell_js"></script>
<script type="text/javascript">
document.getElementById("bdshell_js").src = "http://bdimg.share.baidu.com/static/js/shell_v2.js?cdnversion=" + Math.ceil(new Date()/3600000);
</script>
<!-- Baidu Button END -->
</div>
</body>
</html>

<script>
(function(){
    var bp = document.createElement('script');
    var curProtocol = window.location.protocol.split(':')[0];
    if (curProtocol === 'https'){
   bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
  }
  else{
  bp.src = 'http://push.zhanzhang.baidu.com/push.js';
  }
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(bp, s);
})();
</script>