左位效应与网页布局的关系

左位效应是指人们在面对信息时，更容易注意和记忆左侧的内容。这一现象在网页设计中也得到了广泛的应用，成为了一种重要的设计原则。那么，左位效应与网页布局有着怎样的关系呢？本文将从多个角度分析这一问题。

左位效应与网页布局的关系

1.心理学角度

左位效应的存在，是由人类大脑的特殊构造所决定的。人类的左右大脑半球分别负责不同的功能，左半球主要负责逻辑思维和语言处理，而右半球则主要负责空间感知和图像处理。因此，左侧的信息更容易被左半球所处理和记忆。在网页设计中，把重要的信息布局在左侧，可以更容易地引起用户的关注和记忆。

2.视觉角度

视觉上，左侧的内容更容易被注意和记忆，原因是人类的视觉注意力对左侧的内容更加敏感。这一点可以从眼睛的构造上得到解释，人类的视网膜上有一个称为黄斑的区域，其中最敏感的部分位于视野的中心，即左侧。因此，在网页设计中，把重要的信息布局在左侧，可以更容易地引起用户的注意。

3.语言学角度

在大多数语言中，人们习惯从左到右阅读和书写。因此，左侧的内容更容易被用户注意和记忆。在网页布局中，把重要的信息布局在左侧，可以更符合用户的阅读习惯，提高用户的阅读体验。

总之，左位效应在网页设计中是一种非常重要的设计原则。把重要的信息布局在左侧，可以更容易地引起用户的关注和记忆，提高用户的阅读体验。但是，这并不意味着所有的重要信息都应该放在左侧，而是要根据页面的具体情况和设计目的来进行灵活的设计。

不懂自己或他人的心？想要进一步探索自我，建立更加成熟的关系，不妨做下文末的心理测试。平台现有近400个心理测试，定期上新，等你来测。如果内心苦闷，想要找人倾诉，可以选择平台的【心事倾诉】产品，通过写信自由表达心中的情绪，会有专业心理咨询师给予你支持和陪伴。

HTML+CSS网页设计与布局从入门到精通的目录

第1部分　HTML基础篇
第1章　网页设计基础知识　3
1.1　基础概念　3
1.2　网页与HTML语言　4
1.3　Web标准：结构、表现与行为　5
1.3.1　标准的重要性　5
1.3.2　“Web标准”概述　6
1.4　初步理解网页设计与开发的过程　7
1.4.1　基本任务与角色　7
1.4.2　明确网站定位　8
1.4.3　收集信息和素材　8
1.4.4　策划栏目内容　8
1.4.5　设计页面方案　9
1.4.6　制作页面　9
1.4.7　实现后台功能　9
1.4.8　整合与测试网站　10
1.5　与设计相关的技术因素　10
1.6　本章小结　12
第2章　HTML网页文档结构　13
2.1　HTML简介　13
2.1.1　创建第一个HTML文件　13
2.1.2　HTML文件结构　15
2.2　简单的HTML案例　16
2.3　网页源文件的获取　18
2.3.1　直接查看源文件　19
2.3.2　保存网页　19
2.4　辅助：利用Dreamweaver快速建立基本文档　20
2.5　本章小结　24
第3章　用HTML设置文本和图像　25
3.1　文本排版　25
3.1.1　实现段落与段内换行(p和br)　25
3.1.2　设置标题(h1～h6)　27
3.1.3　使文字水平居中(center)　27
3.1.4　设置文字段落的缩进(blockquote)　29
3.2　设置文字列表　29
3.2.1　建立无序列表(ul)　29
3.2.2　建立有序列表(ol)　30
3.3　HTML标记与HTML属性　31
3.3.1　用align属性控制段落的水平位置　31
3.3.2　用bgcolor属性设置背景颜色　32
3.3.3　设置文字的特殊样式　34
3.3.4　设置文字的大小和颜色(font)　35
3.4　忘记过时的HTML标记和属性　35
3.5　特殊文字符号　36
3.6　在网页中使用图像(img)　38
3.6.1　网页中的图片格式　38
3.6.2　一个简单的图片网页　38
3.6.3　使用路径　39
3.7　用width和height属性设置图片的尺寸　41
3.8　用alt属性为图像设置替换文本　43
3.9　辅助：利用Dreamweaver设置文本和图像　43
3.10　辅助：利用Dreamweaver代码视图提高效率　47
3.10.1　代码提示　47
3.10.2　代码折叠　49
3.10.3　使用拆分视图对代码快速定位　49
3.11　本章小结　50
第4章　用HTML建立超链接(a)　51
4.1　设置基本文字超链接　51
4.1.1　URL的格式　51
4.1.2　URL的类型　52
4.2　设置页面内部的特定目标的链接　53
4.3　设置图片的超链接　54
4.4　设置电子邮件链接　54
4.5　设置以新窗口显示链接页面　55
4.6　创建热点区域　55
4.6.1　用HTML建立热点区域(map和area)　56
4.6.2　辅助：利用Dreamweaver精确定位热点区域　57
4.7　框架之间的链接　59
4.7.1　建立框架与框架集(frame和frameset)　59
4.7.2　用cols属性将窗口分为左右两部分　60
4.7.3　用rows属性将窗口分为上中下三部分　60
4.7.4　框架的嵌套　61
4.7.5　用src属性在框架中插入网页　61
4.7.6　用src属性在框架之间链接　62
4.7.7　创建嵌入式框架(iframe)　64
4.8　链接增多后网站的组织结构与维护　65
4.9　本章小结　66
第5章　用HTML创建表格　67
5.1　表格基本结构(table)　67
5.2　合并单元格　68
5.2.1　用colspan属性左右合并单元格　68
5.2.2　用rowspan属性上下合并单元格　69
5.3　用align属性设置对齐方式　70
5.4　用bgcolor属性设置表格背景色和边框颜色　71
5.5　用cellpadding属性和cellspacing属性设定距离　72
5.6　完整的表格标记(thead、tbody和tfoot)　73
5.7　需要抛弃的方法：用表格进行页面布局　75
5.8　本章小结　78
第2部分　CSS基础篇
第6章　(X)HTML与CSS概述　81
6.1　HTML与XHTML　81
6.1.1　追根溯源　81
6.1.2　DOCTYPE(文档类型)的含义与选择　82
6.1.3　XHTML与HTML的重要区别　83
6.2　(X)HTML与CSS　84
6.2.1　CSS标准　85
6.2.2　传统HTML的缺点　85
6.2.3　CSS的引入　86
6.2.4　如何编辑CSS　88
6.2.5　浏览器与CSS　89
6.3　本章小结　90
第7章　CSS核心基础　91
7.1　构造CSS规则　91
7.2　基本CSS选择器　92
7.2.1　标记选择器　92
7.2.2　类别选择器　93
7.2.3　ID选择器　95
7.3　在HTML中使用CSS的方法　96
7.3.1　行内样式　96
7.3.2　内嵌式　97
7.3.3　链接式　98
7.3.4　导入样式　99
7.3.5　各种方式的优先级问题　100
7.4　本章小结　102
第8章　手工编写与借助工具　103
8.1　从零开始　103
8.2　设置标题　104
8.3　控制图片　105
8.4　设置正文　106
8.5　设置整体页面　106
8.6　对段落进行分别设置　107
8.7　完整代码　108
8.8　CSS的注释　109
8.9　辅助：使用Dreamweaver创建页面　109
8.10　辅助：在Dreamweaver中新建CSS规则　110
8.11　辅助：在Dreamweaver中编辑CSS规则　112
8.12　为图像创建CSS规则　114
8.13　本章小结　116
第9章　CSS的高级特性　117
9.1　复合选择器　117
9.1.1　“交集”选择器　117
9.1.2　“并集”选择器　118
9.1.3　后代选择器　120
9.2　CSS的继承特性　122
9.2.1　继承关系　122
9.2.2　CSS继承的运用　123
9.3　CSS的层叠特性　125
9.4　本章小结　126
第10章　用CSS设置文本样式　127
10.1　长度单位　127
10.2　颜色定义　128
10.3　准备页面　129
10.4　设置文字的字体　129
10.5　设置文字的倾斜效果　130
10.6　设置文字的加粗效果　131
10.7　英文字母大小写转换　132
10.8　控制文字的大小　133
10.9　文字的装饰效果　133
10.10　设置段落首行缩进　134
10.11　设置字词间距　135
10.12　设置段落内部的文字行高　136
10.13　设置段落之间的距离　136
10.14　控制文本的水平位置　137
10.15　设置文字与背景的颜色　138
10.16　设置段落的垂直对齐方式　138
10.16.1　使用line-height属性进行设置　138
10.16.2　更通用的解决方案　139
10.17　本章小结　140
第11章　用CSS设置图像效果　141
11.1　设置图片边框　141
11.1.1　基本属性　141
11.1.2　为不同的边框分别设置样式　142
11.2　图片缩放　144
11.3　图文混排　145
11.3.1　文字环绕　145
11.3.2　设置图片与文字的间距　146
11.4　案例——八大行星科普网页　147
11.5　设置图片与文字的对齐方式　150
11.5.1　横向对齐方式　150
11.5.2　纵向对齐方式　151
11.6　本章小结　154
第12章　用CSS设置背景颜色与图像　155
12.1　设置背景颜色　155
12.2　设置背景图像　156
12.3　设置背景图像平铺　157
12.4　设置背景图像位置　159
12.5　设置背景图片位置固定　162
12.6　设置标题的图像替换　163
12.7　使用滑动门技术的标题　166
12.8　本章小结　168
第3部分　CSS高级篇
第13章　CSS盒子模型　171
13.1　“盒子”与“模型”的概念探究　171
13.2　边框(border)　172
13.2.1　设置边框样式(border-style)　173
13.2.2　属性值的简写形式　174
13.2.3　边框与背景　176
13.3　设置内边距(padding)　177
13.4　设置外边距(margin)　178
13.5　盒子之间的关系　179
13.5.1　HTML与DOM　180
13.5.2　标准文档流　183
13.5.3　div标记与span标记　184
13.6　盒子在标准流中的定位原则　187
13.6.1　行内元素之间的水平margin　187
13.6.2　块级元素之间的竖直margin　188
13.6.3　嵌套盒子之间的margin　189
13.6.4　margin属性可以设置为负值　191
13.7　思考题　192
13.8　本章小结　196
第14章　盒子的浮动与定位　197
14.1　盒子的浮动　197
14.1.1　准备代码　197
14.1.2　案例1——设置第1个浮动的div　199
14.1.3　案例2——设置第2个浮动的div　199
14.1.4　案例3——设置第3个浮动的div　199
14.1.5　案例4——改变浮动的方向　200
14.1.6　案例5——再次改变浮动的方向　200
14.1.7　案例6——全部向左浮动　201
14.1.8　案例7——使用clear属性清除浮动的影响　202
14.1.9　案例8——扩展盒子的高度　203
14.2　盒子的定位　204
14.2.1　静态定位(static)　204
14.2.2　相对定位(relative)　205
14.2.3　绝对定位(absolute)　209
14.2.4　固定定位(fixed)　214
14.3　z-index空间位置　214
14.4　盒子的display属性　215
14.5　本章小结　216
第15章　用CSS设置表格样式　217
15.1　控制表格　217
15.1.1　表格中的标记　217
15.1.2　设置表格的边框　219
15.1.3　确定表格的宽度　222
15.1.4　其他与表格相关的标记　223
15.2　美化表格　224
15.2.1　搭建HTML结构　224
15.2.2　整体设置　225
15.2.3　设置单元格样式　226
15.2.4　斑马纹效果　227
15.2.5　设置列样式　227
15.3　设置鼠标指针经过时整行变色提示的表格　232
15.3.1　在Firefox和IE 7中实现鼠标指针经过时整行变色　232
15.3.2　在IE 6中实现鼠标指针经过时整行变色　233
15.3.3　最终合并代码　234
15.4　辅助：使用jQuery实现更多效果　236
15.4.1　用jQuery实现斑马纹效果　237
15.4.2　用jQuery实现“前3行”特殊样式　239
15.4.3　用jQuery实现渐变背景色表格效果　240
15.4.4　用jQuery实现鼠标指针经过变色效果　241
15.5　案例——日历　241
15.5.1　搭建HTML结构　241
15.5.2　设置整体样式和表头样式　244
15.5.3　设置日历单元格样式　245
15.6　本章小结　248
第16章　用CSS设置链接与导航菜单　249
16.1　丰富的超链接特效　250
16.2　创建按钮式超链接　252
16.3　制作荧光灯效果的菜单　253
16.3.1　HTML框架　254
16.3.2　设置容器的CSS样式　254
16.3.3　设置菜单项的CSS样式　255
16.4　控制鼠标指针　257
16.5　设置项目列表样式　257
16.5.1　列表的符号　258
16.5.2　图片符号　260
16.6　创建简单的导航菜单　261
16.6.1　简单的竖直排列菜单　261
16.6.2　横竖自由转换菜单　264
16.7　设置图片翻转效果　265
16.8　应用滑动门技术的玻璃效果菜单　266
16.8.1　基本思路　266
16.8.2　设置菜单整体效果　267
16.8.3　使用“滑动门”技术设置玻璃材质背景　268
16.8.4　进一步解决的问题　269
16.9　鼠标指针经过时给图片增加边框　270
16.10　本章小结　272
第17章　用CSS建立表单　273
17.1　表单的用途和原理　273
17.2　表单输入类型　274
17.2.1　文本输入框　274
17.2.2　单选按钮　274
17.2.3　复选按钮　275
17.2.4　密码输入框　275
17.2.5　按钮　276
17.2.6　多行文本框　277
17.2.7　列表框　277
17.3　CSS与表单　278
17.3.1　表单中的元素　278
17.3.2　像文字一样的按钮　281
17.3.3　多彩的下拉菜单　283
17.4　案例——“数独”游戏网页　284
17.4.1　搭建基本表格　285
17.4.2　设置表格样式　286
17.4.3　加入文本输入框　287
17.4.4　设置文本输入框的样式　287
17.5　对齐文本框和旁边的图像按钮　289
17.6　本章小结　290
第18章　网页样式综合案例——灵活的电子相册　291
18.1　搭建框架　291
18.2　阵列模式　293
18.3　单列模式　298
18.4　改进阵列模式　301
18.5　IE 6兼容　304
18.6　双向联动模式　306
18.6.1　在Firefox中实现　306
18.6.2　IE 6兼容　311
18.6.3　改变方向　312
18.7　本章小结　314
第4部分　CSS布局篇
第19章　固定宽度布局剖析与制作　317
19.1　向报纸学习排版思想　317
19.2　CSS排版观念　319
19.2.1　两列布局　320
19.2.2　三列布局　320
19.2.3　多列布局　321
19.2.4　布局结构的表达式与结构图　321
19.3　圆角框　325
19.3.1　准备图像　325
19.3.2　搭建HTML结构　326
19.3.3　放置背景图像　328
19.3.4　设置样式并修复缺口　329
19.4　单列布局　330
19.4.1　放置第一个圆角框　331
19.4.2　设置圆角框的CSS样式　331
19.4.3　放置其他圆角框　334
19.5　“1-2-1”固定宽度布局　335
19.5.1　准备工作　336
19.5.2　绝对定位法　337
19.5.3　浮动法　339
19.6　“1-3-1”固定宽度布局　341
19.7　“1-((1-2)+1)-1”固定宽度布局　343
19.8　本章小结　344
第20章　变宽度网页布局剖析与制作　345
20.1　“1-2-1”变宽度网页布局　345
20.1.1　“1-2-1”等比例变宽布局　345
20.1.2　“1-2-1”单列变宽布局　348
20.2　“1-3-1”宽度适应布局　352
20.2.1　“1-3-1”三列宽度等比例布局　352
20.2.2　“1-3-1”单侧列宽度固定的变宽布局　352
20.2.3　“1-3-1”中间列宽度固定的变宽布局　353
20.2.4　进一步的思考　355
20.2.5　“1-3-1”双侧列宽度固定的变宽布局　356
20.2.6　“1-3-1”中列和侧列宽度固定的变宽布局　358
20.3　变宽布局方法总结　359
20.4　分列布局背景色问题　360
20.4.1　设置固定宽度布局的列背景色　360
20.4.2　设置特殊宽度变化布局的列背景色　364
20.4.3　设置单列宽度变化布局的列背景色　364
20.5　CSS排版与传统的表格方式排版的分析　365
20.6　浏览器的兼容性问题　368
20.7　CSS布局页面的调试技巧　368
20.7.1　技巧1：设置背景色或者边框，确定错误范围　369
20.7.2　技巧2：删除无关代码，暴露核心矛盾　369
20.7.3　技巧3：先用Firefox调试，然后使它兼容IE　369
20.7.4　技巧4：善于利用工具，提高调试效率　370
20.7.5　技巧5：善于提问，寻求帮助　370
20.8　本章小结　370
第21章　网页布局综合案例——儿童用品网上商店　371
21.1　案例概述　371
21.2　内容分析　372
21.3　HTML结构设计　374
21.4　原型设计　377
21.5　页面方案设计　380
21.6　布局设计　383
21.6.1　整体样式设计　383
21.6.2　页头部分　384
21.6.3　内容部分　386
21.6.4　页脚部分　389
21.7　细节设计　389
21.7.1　页头部分　389
21.7.2　内容部分　395
21.7.3　左侧的主要内容列　395
21.7.4　右边栏　398
21.8　CSS布局的优点　402
21.9　交互效果设计　403
21.9.1　次导航栏　403
21.9.2　主导航栏　404
21.9.3　账号区　404
21.9.4　图像边框　405
21.9.5　产品分类　407
21.10　遵从Web标准的设计流程　407
21.11　从“网页”到“网站”　408
21.11.1　历史回顾　408
21.11.2　不完善的办法　408
21.11.3　服务器出场　409
21.11.4　CMS出现　409
21.11.5　具体操作　409
21.12　 本章小结　410
附录A　网站发布与管理　411
A.1　在Internet上建立自己的Web站点　411
A.1.1　制作网站内容　411
A.1.2　申请域名　411
A.1.3　信息发布　411
A.2　租用虚拟主机空间　412
A.2.1　了解基本的技术名词　412
A.2.2　选择和租用虚拟主机　413
A.3　向服务器上传网站内容　414
A.3.1　使用Dreamweaver上传文件　414
A.3.2　使用IE浏览器上传文件　415
A.3.3　使用专业FTP工具上传文件　416
A.4　网站管理　418
A.4.1　修改密码　418
A.4.2　集团邮箱管理　419
A.4.3　注意事项　420
附录B　CSS英文小字典　421

浅析关于photoshop与网页布局设计的关系

一、Photoshop在网页布局设计中的作用
1、 Photoshop在网页布局计划中的作用
①布局灵活：Photoshop的灵魂是图层，每层可以放置不同的元素，图层之间可以相互链接，也可单独存放，每个图层上的图像位置可以随意挪动而不影响其它图层的图像位置，每个图层上的图像大小、色阶、亮度、饱和度透明度等可单独设置而不影响其它图层上的图像。如此灵活的功能，完全可以让设计者随心所欲设计而不受任何约束，而Dreamweaver等软件给设计者提供出自由度降低很多，其效果也会大打折扣。
②修改方便：网站建设前期首先要与客户签定合同，签定合同时客户最关心的是自己的网站是什么样子，这时设计者不可能拿出建好的网站给客户演示，这样一是成本太高，合同能否签定还不一定;二是保护知识产权，有的客户拿走设计方案交给别的公司去做，自己岂不成了给别人做嫁衣裳。最好的办法是拿出在Photoshop中做出的效果图给客户看。一般情况下，客户一次满意率非常低，总会提出修改意见，而且还会不断地提出修改方案。这时我们就可以利用Photoshop的强大功能按客户的要求方便地进行修改和优化，直到客户满意为止。如果在Dreamweaver下，每做一次大的修改，几乎跟重新设计一样费时费力，而且还不一定能达到客户要求。
③加快浏览进度。一个设计不美观不规范的网站是没有生命力，同样一个打开、下载速度慢的网站也是没有存在的价值。心理学研究表明，选择性越多，人的忍耐性越差;可选择性越大，人的忍耐性越低。在互联网高度发展的今天，同类网站多如牛毛，人们没必要在一个网站前停驻静侯你一点一点地下载、打开、测试、显示。一般情况下，下载速度一旦超过10秒，人们会自动转向其它网站。决定下载速度的因素很多，如服务器配置标准、网络传输介质、客户机的配置以及同时点击人数的多少等。但是在这些条件相同时，网页大小及网页元素的优化和配置就是唯一的因素。使用Photoshop设计的网页经过裁切后体积相对要小得多，相同的元素因为其格式变化也会大大提高下载速度，因此Photoshop就成了提高速度，提高点击率的制胜法宝。
二、用Photoshop设计网页布局应注意的几个问题
1、 网页文档尺寸与分辨率。网页文档一般为1007*600和708*800像素，分辨率为72像素，这是屏幕分辨率，太高的分辨率并不能增强效果，反而会降低下载速度。一般情况下，大型网站不要超过3屏。
2、 颜色：网站背景颜色与文件颜色要统一协调，一般不要超过两种，一些网站被批评为脏、乱、差，其要害是颜色搭配不合理，或者太多，给人一种不舒服的感觉。
3、 字体，标题。导航字体一般用黑体，正文一般用宋体，其它字体浏览器不兼容，可能造成调试时出错，给工作带来麻烦。如果为增强页面效果用到其它字体，则最好在用Dreamweaver前在Photoshop切分及图片，字体的颜色设置要考虑到整个页面效果。
4、 布局格式：虽然效果图是用Photoshop设计的，但一定要兼顾到Dreamweaver对页面布局的要求，Dreamweaver下网页布局是使用‘国’字形，还是其他模式，是否使用框架，使用框架的类型是哪一种，都是在设计前要考虑到的。否则会造成效果图与最后的网站布局出现出入，给客户和自身带来麻烦和损失。
5、 图文搭配：一个好的网站是图片多好还是文字多好，这要视网站的功能、行业、目的而定，但有个原则就是图文合理配置，而图片则要按一定的空间分布进行和谐分布。另外，图片大小要合乎美学原则，不能太大，一般用缩略图较好，如果要显示更多的图片细节，不妨给缩略图链接一个大的图片。
6、科学使用参考线。参考线是设计页面布局的有效辅助工具，我们可以先用横参考线将网页布局分成几大版块，然后用竖参考线将每个板块按我们的思路分为几个小板块，最后再整体观察一下。要精确定位网页元素，可用对齐参考线的方法来实现：“视图”—“对齐到”—“参考线”，而参考线的精确定位可以借助标尺和网格来实现，这里要注意的是网站的Logo和Banner或者导航条等都是事先设计好的，有固定大小，在做这些区域时尺寸一定要按照这些元素尺寸设计，不能有丝毫差错，否则进入DreamWeaver整合时，则可能出现空边或撑开表格的现象。
三、“切片”工具是Photoshop通向DreamWeaver的桥梁。
利用Photoshop效果图最终与客户签合同后，还不是Photoshop设计网页布局的终结，而还有关键的一步，就是“切片”，只有正确地切片后，DreamWeaver才能对效果图进行有效的整合，Photoshop在网页布局中的积极作用才发挥到了极致。要完成“切片”这关键的一步，应遵循以下原则：
1、必须依靠参考线。设计时用到参考线，切图时更要用好参考线。参考线能保证我们切出图在同一表格中的尺寸统一协调，有效避免“留白”和“爆边”。
2、 Logo和Banner必切。如果效果图中存在Logo和Banner,我们必须切片这部分，主要是为预先设计的Logo和Banner留下空间，在DreamWeaver整合时最好不用Logo和Banner的切片，而是直接用Logo和Banner原文档，这是提高Logo和Banner效果的需要。
3、虚线和转角形状必切。虚线和转角形状在DreamWeaver 不能实现，只能使用Photoshop切片。
4、渐变必切。这也是Dream Weaver实现不了的。
5、大图必切。大的图像必须切分成均匀图，这样可以提高网页下载速度。
6、特殊文字效果必切。除黑体和宋体外，其他字体必须切片。DreamWeaver下最有效的字体只有宋体和黑体，其它字体浏览器也要能不兼容。
7、导航条必切。一般情况下导航条都是特别设计的，其效果在Dream Weaver下不能实现，因此必须形成切片供后期使用。
8、有效存储切片。存储切片的文件夹必须位于站点的根目录下，文件夹名必须是英文名字。存储切片时用“文件—存储为web所用格式”命令。切片存储格式要求一般存为Gif格式。Gif占用体积小。要求较高的图像存储为JPEG格式，JPG格式显示更多的图片细节。
当然，网页布局的设计软件的使用依设计者习惯、爱好、风格不同而不一样。笔者在此只是谈一下一般的规律，以供广大网页设计初学者参考。

声明： 我们致力于保护作者版权，注重分享，被刊用文章因无法核实真实出处，未能及时与作者取得联系，或有版权异议的，请联系管理员，我们会立即处理，本站部分文字与图片资源来自于网络，转载是出于传递更多信息之目的,若有来源标注错误或侵犯了您的合法权益，请立即通知我们(管理员邮箱：daokedao3713@qq.com)，情况属实，我们会第一时间予以删除，并同时向您表示歉意,谢谢!