1. 还需要配置各种对象，把使用的对象放入到 spring 容器中才能使用对象

   需要了解其他框架配置规则。

2. SpringBoot 就相当于 不需要配置文件的 Spring+SpringMVC。 常用的框架和第三方库都已经配置好了。

3. SpringBoot开发效率高，使用方便多了

在这个 java 类中可以创建 java 对象，把对象放入 spring 容器中（注入到容器）。

• 放在类的上面，表示此类作为配置文件使用，相当于一个配置类

• 放在配置类中的方法上面，用来声明对象，将对象注入到容器中
• 方法返回值需要是注入的对象类型
• 若没有配置@Bean中的 name 属性，则从容器中获取该对象需要用其方法名
• 若配置了@Bean中的 name 属性，则从容器中获取该对象需要用配置的 name 名称

• @Configuration：放在一个类的上面，表示这个类是作为配置文件使用的。
• @Bean：放在配置类中的方法上，声明对象，把对象注入到容器中。

* Configuration:表示当前类是作为配置文件使用的。 就是用来配置容器的

• 先直接创建 maven 项目，然后补充相关依赖，补全目录结构即可【不需联网】

创建简单 SpringBoot web 项目示例：（以下选择向导方式创建）

1. 配置项目相关信息，依赖选择 Spring Web 进行创建

2. 整理项目结构以及 pom 文件

3. 在主启动类所在的包下创建 controller 控制器类

4. 查看是否配置有 Spring Boot 启动服务，若没有则进行配置

5. 运行主启动类的 main 方法或 IDEA 主面板运行项目

• 其自动配置在主类之上，每个 SpringBoot 项目都会有一个主类

• 大部分属性和 html 的一样，只不过前面加了一个 th 前缀；加了 th 前缀，表示经过了模板引擎处理；经过了模板引擎处理的属性，就可以使用其相关表达式，可获取动态变量。

有两种使用的语法格式：

1. ~{文件名称 :: 自定义的模板名}
2. 文件名称 :: 自定义的模板名

PS：文件名称指的自定义的模板所在的 html 文件名，不含后缀

对于模板，有两种常用的使用方式：包含模板（th:include），插入模板(th:insert)

• 解释：是在原有标签中，将自定义的模板添加进来，不会失去原有标签，但原有标签下的内容将失去。

• 此div标签下内容将会丢失，但div标签仍然存在！ 此div标签下内容将会丢失，但div标签仍然存在！

• 解释：用自定义的模板替换原有标签，原有标签将不存在

• 整个div标签将被完全替换为自定义的模板！ 整个div标签将被完全替换为自定义的模板！

如果要将整个 html 的内容作为模板插入(insert)或包含(include)到指定的标签中，可使用下列几种方式：

示例：将整个 head.html 作为模板，插入到指定标签处

将整个 head.html 作为模板，插入到此标签处！ 将整个 head.html 作为模板，插入到此标签处！

示例：将整个 head.html 作为模板，包含（替换）到指定标签处

将整个 head.html 作为模板，包含（替换）到此标签处！ 将整个 head.html 作为模板，包含（替换）到此标签处！

4.使用其他目录中的模板

说明：如果要使用的自定义模板或要使用的整个 html 模板与当前页面不在同一目录下，则在指定使用模板的文件名时需要使用相对路径即可！

以上是使用其他目录中的整个 html 作为模板示例；使用其他目录中指定 html 页面中的某个自定义模板用法和其相同。

@Controller：放在类的上面，创建控制器对象，注入到容器中 @RestController：放在类的上面，创建控制器对象，注入到容器中。 作用：复合注解，含@Controller，@ResponseBody，使用这个注解类的，里面的控制器方法的返回值都是数据。 @Service：放在业务层的实现类上面，创建service对象，注入到容器 @Repository：放在dao层的实现类上面，创建dao对象，放入到容器。没有使用这个注解，是因为现在使用MyBatis框架，dao对象 是MyBatis通过代理生成的。不需要使用@Repository，所以没有使用。 @Component：放在类的上面，创建此类的对象，放入到容器中。 @Autowired：引用类型赋值自动注入的，支持byName, byType. 默认是byType 。 放在属性的上面，也可以放在构造 方法的上面。 推荐是放在构造方法的上面 默认是byName, 如果byName失败，再使用byType注入；在属性上面使用。 @Configuration：放在类的上面，表示这是个配置类，相当于xml配置文件 @Bean：放在方法的上面，把方法的返回值对象，注入到spring容器中。 @ImportResource：加载其他的xml配置文件，把文件中的对象注入到spring容器中。 @ComponentScan：扫描器，指定包名，扫描注解的 @ResponseBody：放在方法的上面，表示方法的返回值是数据，不是视图 @RequestBody：把请求体中的数据，读取出来，转为java对象使用。 @ControllerAdvice：控制器增强，放在类的上面，表示此类提供了方法，可以对controller增强功能。 @Mapper：放在类的上面，让MyBatis找到接口，创建他的代理对象 @MapperScan：放在主类的上面，指定扫描的包，把这个包中的所有接口都创建代理对象，将对象注入到容器中 @Param：放在dao接口的方法的形参前面，作为命名参数使用的。 @DubboService：在提供者端使用的，暴露服务的，放在接口的实现类上面 @DubboReference：在消费者端使用的，引用远程服务，放在属性上面使用。 @EnableDubbo：放在主类上面，表示当前引用启用Dubbo功能。

在《老外的个人网站原来是这样设计的：17个最佳范例给你灵感》一文中，我和大家分享了17个优秀个人网站范例。相信看过的朋友一定会被这些精美独特的网站深深吸引，是不是也想要建立一个专属于自己的个人网站呢？看见美丽的事物，想要创造出同样美丽的事物是人之常情。但你也许会说，不会编程，不会UI, 时间也匮乏，怎么建立自己的网站呢？一些朋友也许就此望而却步。那就真的太过遗憾。
别担心，本文我整理了25个优秀个人网站设计模板，你会发现，原来不用编程，也不用自己设计界面，各式各样取之不尽的主题就是你的网站UI，建立个人网站原来可以如此简单。
同样，本文中我会按照个人网站的常用类别展开：
1. 作品展示型个人网站 - 类似于Dribbble和Behance等平台，设计师展示个人作品，但个人网站主动性和功能性更强更丰富；
2. Blog风格的个人网站 - 设计师分享自己的设计理念和想法，交换信息，吸引粉丝和关注；
3. Online shop型的个人网站 - 此类个人网站会有商业用途；
4. 简历型个人网站 - 优化传统简历，更好的呈现自己的作品和技能，找到更好的工作；
5. 个人摄影网站 - 展示平面设计师，摄影师等的作品，是作品集网站的一种；
6. 通用型个人网站 模板 - 可适用于多种类型。
此外，个人网站还有不同的制作工具和主题，比如基于HTML编辑器，基于Flash互动网页制作工具，使用Website Builder直接设计，Wordpress主题等等，我也将在每个推荐里展示出来，提供选择。
一. 作品展示型个人网站模板
同样适用于blog类型的个人网站设计

John Doe尤其适合自由职业设计师的作品集个人网站制作，可以充分展示自己擅长什么以及想做什么，也可以展示自己以前的作品或项目。 界面设计富有创意且优雅。 只需一分钟，你就可以了解该模板是如何使用，及其简洁方便。
这里已经有一些使用该模板制作个人网站的真实案例：
18个美观的主页，单个项目模板，以及无数的作品集设计布局。
酷炫的菜单样式和出色的悬停效果。
可编辑的内置页面和响应式设计。
完全兼容于电子商务广泛使用的免费WooCommerce插件。
也适用于个人博客网站设计。

Assemble是一个免费的在线作品集设计网站，可以将您的设计作品以一种完美的方式展示出来。它包含18个美观的主页供您自由选择，随心设计，打造专属的个人作品集网站。
3）Instant - 免费的响应式作品集个人网站模板

Instance是那些才华横溢的专业设计师建立个人网站的不二选择。设计精美，界面干净，极具创意。包含精心设计的HTML5 Bootstrap模板。 它是专门为个人作品集网站建设而设计的。最重要的，该模板完全免费！
4) - 作品集展示模板
100％可自定义编辑。
紧跟最新设计趋势并且极具独特风格。
包含作品集，简历，商业用途等网站模板。
提供丰富的个人网站模板，包括可用于展示产品的设计，作品集或插图。尤其作品集模板的创意主题被广泛使用。这个基于HTML5的作品集模板为设计增添了独特的触感，可以帮您丰富网站创意。

5) Erika - 轻量型的个人作品集网站模板
8 个主页模板，3 个标题样式，24 个作品集设计选择，以及55 页面模板。
包含Ajax的动态PHP联系表单。

这是一个包含8个主页变体的多页面个人网站模板。 编码良好，你还可以将其轻松的转换为WordPress格式。在干净的白色背景上，文字和其他网页元素清晰可见，您可以清晰地展示您的作品。用户可以轻松地在页面标签之间切换，以查看您的作品集。悬停效果和其他动画效果非常酷炫。
6） Martin - 极具创意的单页网站模板

您可以使用Pofo中不同的列表样式构建一个专业的博客界面，还可以自己制作博客和画廊，或者使用Slider Revolution设置图片里的任何内容。使用Pofo创建博客的一个优点是一切都很简单。它易于浏览（简单，干净的图像框和文本框），方便阅读（直观的博客文章页面样式）。页面加载速度快，并在搜索引擎上进行了优化。
也可以用于摄影作品集和商业博客。

Free CSS是一个不同主题的博客模板的大集合。每个主题都有特殊的功能和特色，是一个分享您的想法和写作的好地方。只需选择你最喜欢的一个主题，就可立即创建一个个人博客网站。所有主题都是就免费的！
现代且极具创造性的设计。

该模板包含了近千个WordPress主题。您可以体验流畅的博客网站加载和页面切换。博客主题与白色和浅蓝色形成鲜明的对比，你想要展示的信息会清晰呈现。该模板的建立基于最新的HTML5和CSS3技术，并有搜索引擎优化。您可以选择将主题翻译成多种语言，且适用于所有浏览器。

Read是最轻量化的个人博客设计模板。有干净的界面和响应的主题。 它适用于任何种类的个人博客网站设计，比如旅行日记或教程博客。
三. 个人电子商务/网店网站模板

Preface是一个质量一流的免费个人网站模板。完全响应式设计，UI界面设计高级具有质感。这个免费的个人Bootstrap模板具有高质量的设计和代码。它充分响应，可用于商业和个人推广目的。免费下载！
拖放元素即可的页面生成器。

Jevelin是一个响应式的WordPress主题模板。不需任何专业背景，对于非程序员或忙碌的人来说是最合适不过的。它拥有有大量页面元素可供选择。 贴心的是，提供视频教程来指导你。它使用拖放页面生成器和MegaMenu来简化许多面板任务。Jevelin本质上是多用途的，适用于多种浏览器或各种设备。Jevelin也拥有优化的SEO导航。
3）Kards - 免费的个人网站模板
极具现代感且干净的设计。

Kards基于Bootstrap框架设计，是个人作品集，博客或商业用途的最佳模板。 组织有序的代码使它很容易进行自定义设计和使用。它的创意设计可以吸引客户到您的网站，使其成为您的业务合作伙伴。 该模板跨浏览器兼容，完全免费。
四. 个人简历网站模板

CVSTrap在众多的模板类别中是独一无二的。 这是一个免费的简历型HTML5模板，使用该模板，创建一个满意的简历个人网站只需不到一个小时。

EASY RESUME是一个Bootstrap响应式网站模板。设计特别，具有令人印象深刻的视频横幅。 这个完全响应式的模板是使用HTML5，CSS3和Bootstrap框架设计的。 特色设计之处在于：颜色，图像，悬停动画，平面网格模式，视频背景等。该模板完全免费。
五．个人摄影网站模板。
1）Click - 免费的响应式的个人作品集网站模板
100％的搜索引擎优化。
100％完全可自定义设计。

Click是一款干净免费的HTML5 Bootstrap模板，专为个人摄影作品和专业摄影展示设计。该模板由提供者精心设计，强调排版和整体用户体验。不同年龄阶段的设计师或者摄影师都可以在这里展示自己的作品。所有服务完全免费！
9令人惊叹的画廊布局。
具有650多种Google字体的高级版。

该模板是一个优秀的HTML网站模板，您可以创建一个专业的作品集网站并且创建一个博客。 该模板有各种各样的画廊，如网格等，可以很好的展示您的摄影作品。
包括博客单页和博客详细信息页面。

SELFIE是一个极具现代感的摄影师网站模板。专为摄影师设计，可以显示您的照片库。该模板具有独特和现代的页面布局，提供了一系列的多设计和多布局选择。该模板是完全响应式的，并已针对平板电脑和智能手机进行了优化。
4）Opta - 最轻量的的作品集和摄影HTML模板
响应式布局以适应任何屏幕尺寸。
简单的图像滑块和文本滑块。
任何时候都可以直接向模板开发人员获得一流的支持。

Opta是一个简约的作品集和摄影HTML模板。使用此模板，您可以只用几个步骤就能创建一个惊人的网站。该模板灵活且易于定制，并且是响应式布局。
六． 其他通用型个人网站模板

2）Wix - 强大的个人网站生成器和模板提供者

借助这些模板，往往不需要花费过多的精力就可以自己创建一个个人网站，甚至不用一行代码，就连UI也有付费和免费的主题可以一键搞定。希望这些优秀的个人网站模板能给您设计网站提供帮助。但是如果你还是想要拥有独一无二的个人网站，设计师只有去真正的进行创作和设计。你需要好的设计灵感，一点一点打造，这里推荐您使用国内最好的原型设计工具进行初步构思，把界面和元素进行整合排版，并且搭建相应的交互。最大的优点是你可以在网页进行HTML演示，在线查看您的构思是否合理，设计是否美观，这对后期的设计和开发都将大有裨益。

本文为转载内容，原文地址已找不到

这篇文章是我初开始接触css时所看的一篇文章（2011年11年11月），因为是自学的，所以很多东西都不理解，当时甚至连“浮动”的概念都不太清晰。看了很多教程，可以说他们写的大都很高深，动辄就是UE用户体验之类的，很像大师们在一块探讨的东东。我一篇篇拜读之后一无所获，但我知道过了现在的技术关之后这些仍然是我要学习的对象，于是我收藏了数篇文章之后又开始一篇篇地找寻，只能说我在找些较为“肤浅”的文章！

当我对着屏幕看这篇文章，确实很感谢作者能把这么基础的东西写得如此细致。记得那天我左边开着火狐看这篇教程，右边对着dreamweaver一点点编写着，就这样从早上九点一直忙活到下午三点（当时在学校宿舍里，窝在床上趴着懒人桌，知道什么形象吧！），一遍遍的重复再参照其他教程我终于开始懂了什么叫盒子模型，所谓的浮动究竟指的是什么东东。

虽然说这篇文章并未像标题说的那样能让你在十步就能学会css建站，当只要你认认真真（仅针对和当时的我一样的新手），按照他的提示往下做，配合着自己的思考， 多做几遍，再独立做一遍，相信你对网站的基本框架搭建（前台）肯定会驾轻就熟的，可能不会给你带来很大的拔高，但对于基础不是很好的div网页学习者是非 常受用的！

如果这篇文章对你有所帮助，我很高兴，当然，这只是学习的一个开始，后面的路还有很长 ．．．

---

---

• 第一步：规划网站，本教程将以图示为例构建网站；
• 第二步：创建html模板及文件目录等；
• 第三步：将网站分为五个div，网页基本布局的基础；
• 第四步：网页布局与div浮动等；
• 第五步：网页主要框架之外的附加结构的布局与表现；
• 第六步：页面内的基本文本的样式(css)设置；
• 第七步：网站头部图标与logo部分的设计；
• 第八步：页脚信息(版权等)的表现设置；
• 第九步：导航条的制作(较难)；
• 第十步：解决IE浏览器的显示BUG；

第一步：规划网站，本教程将以图示为例构建网站

理论上，我们可以控制源文件上的任意元素的浮动，但由于IE浏览器的BUG，被浮动层需要首先出现在源文件上，也就是说我们把副标题放在版权和认证的前面：

刷新页面可以看到在Content层中又出现一些空白，这是由于<h2>标签的默认边距(margin)造成的，我们必须消除这些恼人的空白，当又不想把网页中所有的<h2>标签地边距都设为0，这就需要使用css的子选择器 ("child css

第六步：页面内的基本文本的样式(css)设置：

你是不是厌倦了那些大红大绿的背景，现在是去掉它们的时候了，只保留导航条的红色背景。真是难为您居然能坚持学习本教程到此，很好，再过几步，你就能很好了解css控制整个网页版面(Layout)的能力。

先设置全局的文本样式：

一般我们把body标签放在css文件的顶端，当然你要是执意要把它放在尾部，浏览器不会和你计较。font-family内的顺序决定字体显示优先级， 比方如果所在计算机没有Arial字体，浏览器就会指向Helvetica字体，依次类推；color指字体颜色；background指背景颜色。 如果你都是按本教程的操作，应该能看到下图：

你可以看到内容(content)的各块(block)之间的间隙太小了，而基于最初的设计，内容标题(即<h2>)和正文之间的间隙大概是15px，每个段落的间距也大概是15px，所以在css中写入：

然后需要让content层的四周都空出25px的间隙，这本来是件很简单的事，理论上我们只需在#content的css文件中加入padding: 25px;就行了，但是IE给我们上了"一课",它的固有BUG根本不能按我们的想象表现。解决这个问题有两种办法。第一种办法是区别浏览器写入两种代码(HACK IE),但因为间隙(padding,在Dreamweaver中又叫填充)使用很频繁，所以我们用另一种办法。

我们往需要填充的层中加入padding层，它的功能仅限于显示间隙：

第七步：网站头部图标与logo部分的设计：

这样我们使存在于层的图片向右浮动，并且上边距(margin-top)为57px，右间隙(padding-right)为31px，如下图所示(点击看大图)：

Jorux提示：希望大家在以后的css编写过程中，尽量使用padding属性，以免造成浏览器调试麻烦。

第八步：页脚信息(版权等)的表现设置：

首先需要控制页脚的文本显示：

接着我们需要设置存在链接的文本的显示，在这我们没有改变文本的颜色(仍然为#c9c9c9)，而只是让下划线消失：

但是我们想让那些存在链接的文本，在鼠标悬停在其上方时变色为#db6d16：

然后我们想给页脚加上灰色的上边框，在footer层的四周设置一些间隙，并加大文本的行距：

最后我们需要做的就是让副导航层(#altnav)向右浮动，需要指出的是，浮动层是必须设置宽度(width)才能正常浮动的，所以我们把#altnav的宽度设置为350px，略宽于文本的长度(为了让副标题的文字显示完全)，然后让文本向右对齐：

如果你按照以上方法，将得到如下图所示的页脚样式：

第九步：导航条的制作(较难)：

Jorux注:导航条之所以放在第九步讲，是因为导航条制作是本教程中最难的部分，自然也是技术含量最高的地方.导航条的制作可易可难，但这里介绍的相对较难，您能坚持到这一步已经很不易，如果你只是有个导航条就满足的话，请参看第八步的副导航条的制作。

先去掉导航条的红色背景，还有就是移除html文件中main-nav层的"class="hidden",使导航条的内容显示出来。我们实现导航条图 片的变换的方法是纯css代码的，不包含任何js或是flash，因此我们所用的图片是4幅分别由三个小图组合而成的图片，如下所示，并将这4幅图保存于/images/nav/文件夹中:

我们实现导航条的动态效果如下图所示(点击看大图)：

在网页显示的只是图中红框标出的部分，如果把每幅图分为上，中，下三部分的话，未发生动作时显示上部，当光标悬停时，显示的是中部，被选择时则显示下部。

接下来进入css代码部分，先往css文件中写入：

注意：为增加css文件可读性的说明，不会影响表现。

根据先前的设计，导航条应该和左边有一定的距离，这就需要设置main-nav层的左边距(padding-left)为11px,但由于IE5和Mac浏览器的BUG，需要加入以下代码：

现在你可以看到导航列表距左边有11px的距离，但是列表项目是竖排的，将

• ，即列表项目向左对齐就能使其从左到右横向排列：

  为了使列表项目的尺寸和容纳它的层保持一致，并利用浮动属性使列表项目的文本隐藏，写入：

  接着，要实现当光标悬停于列表项目上时，显示背景图片的中部，因此需要将背景图片向上移动50px，写入：

  给各个列表项目设置宽度和背景图片的路径：