Knight.Hw
Knight.Hw

用实例详细讲解将PSD转成HTML&CSS




将PSD转成一个静态的html/css对一些朋友来说是一个很大的困扰。这个教程通过对一个完整实例的详细讲解，来教大家如何将psd转成html/css，以及JS插件的使用，制作完成的html/css页面兼容各种主流浏览器。

我们将设计页面分成基本的5个部分，每一个部分都有自己的容器wrapper和内容。基本的流程是先编写Html代码，然后通过编写CSS来还原psd设计稿。

photography-psd-template-thumb.png (221.95 KB, 下载次数: 96)

下载附件  保存到图库

2011-3-30 15:43 上传


1. 我们需要从PSD文件得到什么？

如下图，我们只需要从这个psd文件得到4个非常基本的东西。推荐内容(featured)的背景、底部背景、欢迎文字（Welcome）、推荐图片的框（少女面部图的白色透明边框）。其余的部分我们只需要通过CSS生成或者在html里嵌入相应图片。

下图红线圈起来的地方，就是我们需要从psd获取的内容。本部分内容需要读者具备一定的Photoshop的基础知识和操作能力。
你可以借助Photoshop的切片工具或者自己手动切片，并将其保存成相应的图片格式。

photography-psd-slices-thumb.jpg (42.91 KB, 下载次数: 33)

下载附件  保存到图库

2011-3-30 15:50 上传


2.设置站点

为一个网站设置良好的开发环境是非常重要的，我已经创建了一个非常基本的文件夹结构来建立这个网站，下面是文件夹结构设置，也可称之为模板。

文件夹结构下面这个文件夹结构是由html文件、CSS文件、js等文件组成，你可以根据自己的需要调整文件夹结构。

folder-structure.png (4 KB, 下载次数: 14)

下载附件  保存到图库

2011-3-30 15:51 上传



  • 根目录

    • 这是放置index首页文件的地方
    • 这是网站的顶级目录
  • JavaScript 文件夹

    • 这是放置JS文件或者js框架jquery的地方
    • 我们在这个教程用到的jquery插件Nivo-Slider（做推荐内容）也放在这个文件夹里
  • 样式（Styles ）文件夹

    • 这里是存放css文件的地方，网页所要用到的图片放在另一个独立的文件夹，图片文件夹还包括两个子文件夹:
    • Images: 这是我们存放推荐内容部分的图片以及网站展示的图片的地方
    • Template: 这是存放和网页设计样式相关图片的地方，比如说底部背景图
具体文件的放置

将index.html文件放置在根目录，这个文件也是我们编写html代码的文件。
将jquery插件Nivo-Slider里面的三个文件jQuery-1.4.2.min.js和HTML5-Shiv.js以及Nivo-Slider.min.js放到Javascript文件夹。
将两个css文件，reset.css和global.css放到样式文件夹。
这样我们的文件夹结构设置就差不多完成了。

3.编写HTML代码

1）编写首页Html文件

将psd转换成html/css的工作流程是先编写出html文件，随后再编写css，并加入js动态效果。
下面我们会一步步讲解html的编写，先编写出大概完整的框架，代码如下：




  5. PSD to HTML: A Photography Site








复制代码

2）编写html文件的head部分

下面我们要开始为刚才的html文件添加细节。首先是head部分，在head部分我们要添加一些meta信息，这样有利于搜索引擎读取。

我们增加了keywords、authors、description、copyright等meta信息，并把语言编码设置为utf-8。代码如下:





复制代码

现在要开始在html载入一些必须js和css的文件，以便让这些文件起作用，同时为了考虑到浏览器的兼容性，还增加了一些相应的判断条件。具体代码如下：




  5. PSD to HTML: A Photography Site






















复制代码

3）编写html的body部分

body部分是html文件的主要部分，网页上显示主要是body部分的内容，我们会将这个网页的布局分成以下5个部分：header、featured、status、content、footer。我们为每个部分增加一个div并在每个部分的内部加一个类名为container的div。























  • 复制代码
    04）编写#header部分

    这个网页的header部分主要由两部分组成，一个是logo，另一个是导航栏。logo是简单div，而导航栏则是列表ul。
    复制代码

    05）编写#featured部分

    网页的#featured是我们放置推荐内容的部分，这部分也有两部分组成，一个是欢迎文字（welcome），另一个滑动图片Slider。

    Welcome区域

    welcome区域是一个id为welcome的div，由标题文字和描述文字组成，标题文字h2的显示用图片来代替。描述的文字用p标签包起来。

    2. Welcome


    3. Welcome to Your Site! We are a full service production company, and are a one-stop shop for your production needs. We love interacting with people and have a passion for creating a product that wows! As a husband and wife team and graduates of Specs Howard School of Broadcast Arts, we love to learn new things and are continually striving to perfect our craft.


    4. Whether it be Family Photographs, a College Sports Exposure Video, Senior Pictures, or Video Editing, we do it all! Thanks for stopping by and feel free to look around!!!




  • 复制代码
    Slider区域

    slider区域由一个透明边框和几张滑动图片组成。滑动图片放在class为slides的列表里边。










  • 复制代码
    完整的#featured部分的代码

    下面是完整的#featured部分的代码，读者可以参照对比查看。




    5. Welcome


    6. Welcome to Your Site! We are a full service production company, and are a one-stop shop for your production needs. We love interacting with people and have a passion for creating a product that wows! As a husband and wife team and graduates of Specs Howard School of Broadcast Arts, we love to learn new things and are continually striving to perfect our craft.


    7. Whether it be Family Photographs, a College Sports Exposure Video, Senior Pictures, or Video Editing, we do it all! Thanks for stopping by and feel free to look around!!!
















  • 复制代码
    6）编写#status部分

    这部分非常简单，由一段文字和一个按钮组成。



    3. I am currently accepting new projects/appointmentsat this time.



  • 复制代码
    7）编写#content部分

    在psd文件中，你可以看到#content部分的内容会比较多一点，所以我将它按上下分成两个部分。

    第一部分

    在psd文件中，你可以看到，第一部分由两块区域组成，这两块区域各占据了50%的宽度，一个区域是About Us，另一个区域是What others think，两个区域都有一个标题和一些文字描述。


    2. A little about us...


    3. We are a full service production companel that company that is your one stop needs, weither it be family photographs, a college sport exposure video, senior pictures or.




  • What others think...


  • When I first came to Johnny for a first time job I was a bit nervous n how the service would be, but after the first job and how smooth it went i’ll never go anywhere else.


  • - Cody Robertson (Website)




  • 复制代码
    第二部分

    第二部分是由四个各占据25%宽度的小区域组成，这些小区域是由一些预览图、标题和文字组成。




      • placeholder

      • Photography


      • Praesent imperdiet nulla at tortor. Phasellus non lectus eget massa rhoncus consequat. Donec lectus ligula, posuere vel, semper a, posuere in, orci. Praesent imperdiet nulla at tortor. Phasellus non lectus eget massa rhoncus consequat. Donec lectus ligula, posuere vel.






      • placeholder

      • Commercials


      • Praesent imperdiet nulla at tortor. Phasellus non lectus eget massa rhoncus consequat. Donec lectus ligula, posuere vel, semper a, posuere in, orci. Praesent imperdiet nulla at tortor. Phasellus non lectus eget massa rhoncus consequat. Donec lectus ligula, posuere vel.






      • plceholder

      • Sports


      • Praesent imperdiet nulla at tortor. Phasellus non lectus eget massa rhoncus consequat. Donec lectus ligula, posuere vel, semper a, posuere in, orci. Praesent imperdiet nulla at tortor. Phasellus non lectus eget massa rhoncus consequat. Donec lectus ligula, posuere vel.






      • placeholder

      • Exposure Videos


      • Praesent imperdiet nulla at tortor. Phasellus non lectus eget massa rhoncus consequat. Donec lectus ligula, posuere vel, semper a, posuere in, orci. Praesent imperdiet nulla at tortor. Phasellus non lectus eget massa rhoncus consequat. Donec lectus ligula, posuere vel.




    复制代码

    8）编写#footer部分

    现在是#footer部分的编写，包含一些联系信息和版权信息等。











    9. © Copywright 2010 TutToaster.com. All Rights Reserved.
    10. Back to top

  • 复制代码 Html最终显示结果下图是我们编写好的html文件的最终显示结果，下面还有一份完整的html的代码，方便读者阅读对比。

    ps.jpg (27.7 KB, 下载次数: 19)

    下载附件  保存到图库

    2011-3-30 16:14 上传





    5. PSD to HTML: A Photography Site


















    25. YourSite Title










  • Welcome


  • Welcome to Johnny Waller Productions! We are a full service production company, and are a one-stop shop for your production needs. We love interacting with people and have a passion for creating a product that wows! As a husband and wife team and graduates of Specs Howard School of Broadcast Arts, we love to learn new things and are continually striving to perfect our craft.


  • Whether it be Family Photographs, a College Sports Exposure Video, Senior Pictures, or Video Editing, we do it all! Thanks for stopping by and feel free to look around!!!


















  • I am currently accepting new projects/appointmentsat this time.







  • A little about us...


  • We are a full service production companel that company that is your one stop needs, weither it be family photographs, a college sport exposure video, senior pictures or.




  • What others think...


  • When I first came to Johnny for a first time job I was a bit nervous n how the service would be, but after the first job and how smooth it went i’ll never go anywhere else.


  • - Cody Robertson (Website)












    • placeholder

    • Photography


    • Praesent imperdiet nulla at tortor. Phasellus non lectus eget massa rhoncus consequat. Donec lectus ligula, posuere vel, semper a, posuere in, orci. Praesent imperdiet nulla at tortor. Phasellus non lectus eget massa rhoncus consequat. Donec lectus ligula, posuere vel.






    • placeholder

    • Commercials


    • Praesent imperdiet nulla at tortor. Phasellus non lectus eget massa rhoncus consequat. Donec lectus ligula, posuere vel, semper a, posuere in, orci. Praesent imperdiet nulla at tortor. Phasellus non lectus eget massa rhoncus consequat. Donec lectus ligula, posuere vel.






    • plceholder

    • Sports


    • Praesent imperdiet nulla at tortor. Phasellus non lectus eget massa rhoncus consequat. Donec lectus ligula, posuere vel, semper a, posuere in, orci. Praesent imperdiet nulla at tortor. Phasellus non lectus eget massa rhoncus consequat. Donec lectus ligula, posuere vel.






    • placeholder

    • Exposure Videos


    • Praesent imperdiet nulla at tortor. Phasellus non lectus eget massa rhoncus consequat. Donec lectus ligula, posuere vel, semper a, posuere in, orci. Praesent imperdiet nulla at tortor. Phasellus non lectus eget massa rhoncus consequat. Donec lectus ligula, posuere vel.


















  • © Copywright 2010 TutToaster.com. All Rights Reserved.
  • Back to top










  • 复制代码

    4.为HTML编写CSS样式

    我们将css文件分成两个，一个是css重置文件，css reset可以让html元素在各个浏览器上有相同的显示效果，有关于css的重置（css reset）读者可以去查阅相关的资料，这里的CSS reset文件的代码主要来自于雅虎的YUI reset。另一个文件css文件是这个网页的样式。

    1）Reset.css
    1. body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
    2. margin:0;
    3. padding:0;
    4. }
    5. table {
    6. border-collapse:collapse;
    7. border-spacing:0;
    8. }
    9. fieldset,img {
    10. border:0;
    11. }
    12. address,caption,cite,code,dfn,em,strong,th,var {
    13. font-style:normal;
    14. font-weight:normal;
    15. }
    16. ol,ul {
    17. list-style:none;
    18. }
    19. caption,th {
    20. text-align:left;
    21. }
    22. h1,h2,h3,h4,h5,h6 {
    23. font-size:100%;
    24. font-weight:normal;
    25. }
    26. q:before,q:after {
    27. content:'';
    28. }
    29. abbr,acronym { border:0;
    30. }
    复制代码

    2）基本的样式

    首先我们要为网页做一些基本的css样式，包括文字字体、基本结构等。下面开始设置背景色、字体、去掉超链接的下划线以及一些容器的尺寸。
    1. body {
    2. background: #F2F2F2;
    3. font: 10px Verdana;
    4. }

    6. a {
    7. text-decoration: none;
    8. }

    10. p, span {
    11. line-height: 20px;
    12. }

    14. #header, #featured, #content, #footer {
    15. overflow: hidden;
    16. }

    18. .container {
    19. margin: 0 auto;
    20. width: 1024px;
    21. }

    23. .clear {
    24. clear: both;
    25. }

    复制代码

    现在的css样式效果如下：

    ps2.jpg (28.2 KB, 下载次数: 3)

    下载附件  保存到图库

    2011-3-30 16:19 上传



    3）编写#header的样式
    现在开始为header部分编写样式，将header部分的高设为68px，背景为灰色，2px的下边框。

    通过将logo文字的text-indent设为-9999px，可以让图像来代替文字的显示。然后我们为导航栏设置左浮动（float：left），让它变成横向导航。通过增加一个.active来编写导航栏当前页的样式。
    1. #header {
    2. background: #171717;
    3. border-bottom: 2px solid #252525;
    4. height: 68px;
    5. }

    7. #header #logo {
    8. float: left;
    9. text-indent: -9999px;
    10. }

    12. #header ul {
    13. float: right;
    14. height: 68px;
    15. padding: 17px 0;
    16. }

    18. #header ul li {
    19. color: #D1D1D1;
    20. display: block;
    21. float: left;
    22. font: bold 10px Verdana;
    23. padding: 10px 15px;
    24. }

    26. #header ul li a {
    27. color: #D1D1D1;
    28. text-decoration: none;
    29. }

    31. #header ul li a:hover {
    32. color: #FFF;
    33. }

    35. #header ul li:hover a {
    36. color: #FFF;
    37. }

    39. #header ul li.active {
    40. background: #252525;
    41. border-radius: 2px;
    42. -webkit-border-radius: 2px;
    43. -moz-border-radius: 2px;
    44. -o-border-radius: 2px;
    45. }

    47. #header ul li.active a {
    48. color: #FFF;
    49. }

    51. #header ul li:last-child {
    52. padding: 10px 0 10px 15px;
    53. }

    复制代码

    现在的css样式效果如下：

    ps3.jpg (28.34 KB, 下载次数: 1)

    下载附件  保存到图库

    2011-3-30 16:20 上传


    4）编写#featured部分样式
    我们为featured部分添加相应的背景，这个背景设为水平居中，这样即使图片比一些屏幕分辨率大，也能居中显示。然后我们要将welcome部分的文字设为不可见，这样我们就可以用图像来代替它。
    同时为welcome下的文字加一些css3的属性，文字阴影。

    1. #featured {
    2. background: #476D13 url('layout/header.png') no-repeat center top;
    3. height: 290px;
    4. }

    6. #featured #welcome {
    7. float: left;
    8. width: 440px;
    9. }

    11. #featured #welcome h2 {
    12. background: url('layout/welcome.png') no-repeat left top;
    13. line-height: 57px;
    14. padding: 0 0 20px;
    15. text-indent: -9999px;
    16. }

    18. #featured #welcome p {
    19. color: #FFF;
    20. font: 10px Verdana;
    21. line-height: 20px;
    22. margin: 15px 0;
    23. text-shadow: 0px 1px 0px #3F6211;
    24. -webkit-text-shadow: 0px 1px 0px #3F6211;
    25. -moz-text-shadow: 0px 1px 0px #3F6211;
    26. -o-text-shadow: 0px 1px 0px #3F6211;
    27. }

    复制代码

    5）编写#slider     的样式

    slider部分样式编写也比较简单，我们将slider的overflow设为hidden，这样超出slider区域部分的内容就不会显示出来。边框的部分用绝对定位的方式（position：absolute），将透明的边框覆盖在slider的图片上。
    1. #featured #slider {
    2. float: right;
    3. position: relative;
    4. width: 512px;
    5. overflow: hidden;
    6. }

    8. #slider #frame {
    9. background: transparent url('layout/frame.png') no-repeat center top;
    10. height:300px;
    11. position: absolute;
    12. top: 0;
    13. left: 0;
    14. width: 512px;
    15. z-index: 100;
    16. }

    复制代码

    现在的css样式效果如下图：

    ps5.jpg (33.67 KB, 下载次数: 3)

    下载附件  保存到图库

    2011-3-30 16:21 上传


    6）编写#status样式
    这个部分只是一段文字和一个按钮，因为#featured部分有一个40px的margin，所以我们要为#status加一个-40px的margin来抵消它。

    按钮的制作是用了一些css的属性，这样一些不支持css3的浏览器将会显示不同的效果，如果需要所有浏览器显示相同效果，可以考虑用图片。具体代码如下:
    1. #status {
    2. background: #F1EEEE;
    3. border-bottom: 1px solid #DCDEDE;
    4. margin: -40px 0 0;
    5. padding: 20px 0;
    6. }

    8. #status span {
    9. color: #CCC9C9;
    10. font: bold 20px Verdana;
    11. line-height: 50px;
    12. }

    14. #status button {
    15. background-color: #E9E5E5;
    16. background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFF), to(#E9E5E5));
    17. background: -moz-linear-gradient(top, #FFF 0%, #E9E5E5 100%);
    18. filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#FFFFFF', endColorstr='#E9E5E5'); /* IE6 & IE7 */
    19. -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#FFFFFF', endColorstr='#E9E5E5')"; /* IE8 */
    20. border: 1px solid #D9D9D9;
    21. box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    22. -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    23. -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    24. -o-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    25. color: #333;
    26. float: right;
    27. font: bold 20px Verdana;
    28. height: 50px;
    29. line-height: 30px;
    30. width: 175px;
    31. }

    33. #status button:hover {
    34. background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#E9E5E5), to(#FFF));
    35. background: -moz-linear-gradient(top, #E9E5E5 0%, #FFF 100%);
    36. }

    复制代码

    现在css样式效果如下：

    ps6.jpg (33.42 KB, 下载次数: 2)

    下载附件  保存到图库

    2011-3-30 16:22 上传


    7）编写#content第一部分的样式

    #content的第一部分由两个各占据50%宽度的div组成，标题部分文字大小我们设为20px并且设为粗体、斜体，让它更为突出：
    1. #content #about_us, #content #others_say {
    2. float: left;
    3. padding: 20px 0 30px;
    4. width: 50%;
    5. }

    7. #content #about_us h3, #content #others_say h3 {
    8. color: #474747;
    9. font: bold italic 20px Verdana;
    10. line-height: 40px;
    11. }

    13. #content #others_say p cite {
    14. font: bold italic 10px Verdana;
    15. padding: 0 0 0 60px;
    16. }

    18. #content #others_say p cite a {
    19. color: #000;
    20. }

    复制代码

    8）编写#content第二部分的样式
    第二部分的四块区域每个大概占据23%左右的宽度，这样我们就能为各区域之间增加一些margin，同时由于我们为图片加了1px的边框，所以宽度要计算好。同时最后一块区域的右边距要设为0。
    1. #content ul li {
    2. float: left;
    3. margin: 0 28px 0 0;
    4. width: 235px;
    5. }

    7. #content ul li img {
    8. background: #F1EEEE;
    9. border: 1px solid #DCDEDE;
    10. padding: 5px;
    11. }

    13. #content ul li h4 {
    14. color: #474747;
    15. font: bold 14px Verdana;
    16. line-height: 30px;
    17. }

    19. #content ul li:last-child {
    20. margin: 0;
    21. }

    复制代码

    现在的css样式效果如下：

    ps8.jpg (34.33 KB, 下载次数: 2)

    下载附件  保存到图库

    2011-3-30 16:23 上传


    9）编写#footer的样式
    footer部分只是一些简单的css属性，比如背景、填充（padding）、颜色等。
    1. #footer {
    2. background: #171717 url('layout/footer.png') no-repeat center top;
    3. height: 250px;
    4. }

    6. #footer ul {
    7. padding: 40px 0 0;
    8. }

    10. #footer ul li {
    11. float: left;
    12. margin: 0 28px 0 0;
    13. width: 235px;
    14. }

    16. #footer ul li h5 {
    17. color: #CCCDD2;
    18. font: bold 14px Verdana;
    19. padding: 0 0 10px;
    20. }

    22. #footer ul li p {
    23. color: #7E7E7E;
    24. font: bold 11px Verdana;
    25. line-height: 20px;
    26. }

    28. #footer ul li ul {
    29. margin: 0;
    30. padding: 0;
    31. }

    33. #footer ul li ul li {
    34. color: #7E7E7E;
    35. font: bold 11px Verdana;
    36. line-height: 20px;
    37. }

    39. #footer ul li ul li a {
    40. color: #7E7E7E;
    41. }

    43. #footer ul li ul li a:hover {
    44. color: #9E9E9E;
    45. }

    47. #footer ul li:last-child {
    48. margin: 0;
    49. }

    51. #footer #copyright {
    52. border-top: 1px solid #424242;
    53. font-size: 11px;
    54. width: 100%;
    55. }

    57. #footer #copyright span {
    58. color: #424242;
    59. float: left;
    60. line-height: 30px;
    61. }

    63. #footer #copyright a {
    64. color: #63961A;
    65. float: right;
    66. line-height: 30px;
    67. }

    复制代码

    现在的css样式效果如下图。基本的CSS样式已经编写完成，这是css样式的最终效果。

    ps9.jpg (36.99 KB, 下载次数: 9)

    下载附件  保存到图库

    2011-3-30 16:24 上传



    5.为HTML的js动态效果添加样式
    现在我们要开始为滑动图片slider部分增加一些样式。图片的滑动我们用到了nivo-slider这个插件，这个插件自身带有默认的css样式，我们只需要把它默认的css样式添加到我们的css样式文件即可。如果有兴趣的话，也可以自己更改里面的css样式。
    nivo-slider默认的css样式如下，我们把它复制到我们的css文件的最后面。
    1. /*
    2. * jQuery Nivo Slider v2.1
    3. * http://nivo.dev7studios.com
    4. *
    5. * Copyright 2010, Gilbert Pellegrom
    6. * Free to use and abuse under the MIT license.
    7. * http://www.opensource.org/licenses/mit-license.php
    8. *
    9. * March 2010
    10. */

    12. /* The Nivo Slider styles */
    13. .nivoSlider {
    14. position:relative;
    15. }
    16. .nivoSlider img {
    17. position:absolute;
    18. top:0px;
    19. left:0px;
    20. }
    21. /* If an image is wrapped in a link */
    22. .nivoSlider a.nivo-imageLink {
    23. position:absolute;
    24. top:0px;
    25. left:0px;
    26. width:100%;
    27. height:100%;
    28. border:0;
    29. padding:0;
    30. margin:0;
    31. z-index:60;
    32. display:none;
    33. }
    34. /* The slices in the Slider */
    35. .nivo-slice {
    36. display:block;
    37. position:absolute;
    38. z-index:50;
    39. height:100%;
    40. }
    41. /* Caption styles */
    42. .nivo-caption {
    43. position:absolute;
    44. left:0px;
    45. bottom:0px;
    46. background:#000;
    47. color:#fff;
    48. opacity:0.8; /* Overridden by captionOpacity setting */
    49. width:100%;
    50. z-index:89;
    51. }
    52. .nivo-caption p {
    53. padding:5px;
    54. margin:0;
    55. }
    56. .nivo-caption a {
    57. display:inline !important;
    58. }
    59. .nivo-html-caption {
    60. display:none;
    61. }
    62. /* Direction nav styles (e.g. Next & Prev) */
    63. .nivo-directionNav a {
    64. position:absolute;
    65. top:45%;
    66. z-index:99;
    67. cursor:pointer;
    68. }
    69. .nivo-prevNav {
    70. left:0px;
    71. }
    72. .nivo-nextNav {
    73. right:0px;
    74. }
    75. /* Control nav styles (e.g. 1,2,3...) */
    76. .nivo-controlNav a {
    77. position:relative;
    78. z-index:99;
    79. cursor:pointer;
    80. }
    81. .nivo-controlNav a.active {
    82. font-weight:bold;
    83. }

    复制代码

    插入Java Script语句来调用插件我们需要在html里面加入一段js语句来调用这个插件，记住这个语句要放在导入Nivo-slider.min.js之后。至于具体的一些选项，读者可以到这个插件的官网查询相应的文档。


    复制代码

    总结
    经过漫长的操作，终于完成了将psd转成html/css的过程，现在读者应该对这个工作的流程有一个系统的了解，转换psd到html/css的工作包括psd图片的切片、html和css文件的编写、js插件的使用等。现在你可以开始尝试做一个网页，相信很快就会懂得如何转换psd到html/css。

    你可能感兴趣的:(others)

    • Linux基础之文件权限的八进制表示法 vortex5 linux运维服务器
      1.Linux文件权限概述在Linux中，每个文件或目录都有三种基本权限，分别是：读权限-r：允许查看文件内容。写权限-w：允许修改文件内容。执行权限-x：允许执行文件或进入目录。每个文件或目录的权限会根据三个用户类别来分配：所有者(user,u)：文件的创建者或指定的所有者（属主）。同组用户(group,g)：与文件所有者属于同一组的用户（属组）。其他用户(others,o)：所有不属于文件所有
    • Github 2025-02-15 Rust开源项目日报 Top10 老孙正经胡说 githubrust开源Github趋势分析开源项目PythonGolang
      根据GithubTrendings的统计，今日(2025-02-15统计)共有10个项目上榜。根据开发语言中项目的数量，汇总情况如下：开发语言项目数量Rust项目10TypeScript项目1Zed:由Atom和Tree-sitter的创建者开发的高性能多人代码编辑器创建周期：1071天开发语言：Rust协议类型：OtherStar数量：9436个Fork数量：261次关注人数：9436人贡献人数
    • 嵌入式领域的资源/文章/问题寻找网站 奇文怪式 单片机物联网iot
      代码托管平台：GitHubGitee博客类：博客园51CTO社区类：阿里云开发者社区腾讯云开发者社区华为云开发者社区Arduino中文社区论坛类：硬汉嵌入式论坛21ic电子技术论坛51黑电子论坛others：知乎哔哩哔哩开源中国OSCHINA
    • python抓包库大流量数据对比_justniffer抓取流量大法 weixin_39849254
      Understandyourselfinordertobetterunderstandingothers知己方能解人本篇简单介绍一款流量抓取神器—justniffer，其能在线抓取流量也能离线分析数据包。justniffer与网络抓包神器wireshark相比，用法更为简单且对网络影响较小。面对海量的流量，我们需要经常从中分析出恶意请求，从而去做好防御，因此我在此记录justniffer的一些基础
    • UE5 特效 qq_42863961 虚幻基础ue5
      能帮到你的话，就给个赞吧文章目录postprocessexposurebloomvignettesaturationunboundmaterial材质蓝图altzbasecolorconstant3Vectorroughnessconstantmetallicconstantpbrroughnessmetallicmakemorerealmakesomeareasrougherthanothers
    • Linux--权限 kyle~ Linuxlinux运维服务器
      Linux系统的权限管理是保障系统安全的重要机制，以下详细讲解权限相关概念及操作指令：一、基础权限机制1.权限的三元组，读（r）、写（w）、执行（x）每个文件或目录有三组权限，分别对应三类用户：所有者（User）：文件/目录的创建者或当前所有者。所属组（Group）：文件/目录所属的用户组。其他用户（Others）：非所有者且不属于所属组的用户。每组权限由三个字符组成：r（读）、w（写）、x（执行
    • 【PLPR】Progressive Learning for Person Re-Identification with One Example 南风楠 PersonRe-IDOne-shotLearningFew-shotLearning深度学习机器学习神经网络
      【PLPR】ProgressiveLearningforPersonRe-IdentificationwithOneExampleBibtexPublicinformationFieldsCodelinkMainworkKeytechnologyFrameworkDatasetResultsAlgorithmOthers论文下载：关注下方公众号，回复“PLPR”即可获得论文原文Bibtex@art
    • Behavior Question 山猪打不过家猪 C#前端
      1.whatareyourKeyStrenghts?I’amgoodatworkingaspartofateamI’mreallygoodathelpingothers/workontime/solvingproblem/wOneofmystrenghtisthatIamafasterlearner/flexible/veryadaptabletochange/selfmotivated/good
    • 改善python程序的91建议记录(学习记录) 后端
      使用else子句简化循环（异常处理）案例1执行sql异常时处理defsave(db,obj):try:#saveattr1db.execute('asqlstmt',obj.attr1)#saveattr2db.execute('anothersqlstmt',obj.attr2)exceptDBError:db.rollback()else:db.commit()案例2defprint_prim
    • Linux 文件权限详解 久绊A #Linux服务器linux运维
      目录前言查看文件权限修改文件权限符号方式数字方式前言Linux文件权限是系统中非常重要的概念之一，用于控制对文件和目录的访问。权限分为读（Read）、写（Write）、执行（Execute）三个部分，分别表示对文件的读取、修改和执行操作的权限。文件权限可以分为三类用户：文件所有者（Owner）、文件所属组（Group）、其他用户（Others）。查看文件权限可以使用ls-l命令来查看文件的详细权限
    • 【测试工具】Android耗电测试工具PowerTutor的使用 叶阿猪 性能测试耗电测试测试[翻译]
      一，耗电场景软件之所以会耗电，是因为使用了手机的某种资源。手机各个模块的耗电情况是不同的。如果您的应用程序涉及到以下的耗电场景一点或几点，就有耗电风险。几个典型的耗电场景如下：1)网络传输，尤其是非Wifi环境。2)屏幕亮度3)cpu频率4)others：GPS、NFC、重力、振动、扬声器、摄像头、闪光灯、内存调度频度二，耗电测试——powerTutor简介：PowerTutor是由美国密歇根大学
    • Vicky的ScalersTalk第六轮新概念朗读持续力训练Day73 20210411 Vicky_b9de
      练习材料：ModerncavemenPart-3ˈmɒdənˈkeɪvmənpɑːt-3Theyplungedintothelake,andafterloadingtheirgearonaninflatablerubberdinghy,letthecurrentcarrythemtotheotherside.Toprotectthemselvesfromtheicywater,theyhadtow
    • Github 2024-09-12 Go开源项目日报Top10 老孙正经胡说 githubgolang开源Github趋势分析开源项目PythonGolang
      根据GithubTrendings的统计，今日(2024-09-12统计)共有10个项目上榜。根据开发语言中项目的数量，汇总情况如下：开发语言项目数量Go项目10C项目1Terraform：基础设施即代码的开源工具创建周期：3626天开发语言：Go协议类型：OtherStar数量：40393个Fork数量：9397次关注人数：40393人贡献人数：358人OpenIssues数量：1943个Git
    • 随摘 桔桔岛
      Oneshouldcaremoreaboutone'sowngrowthinsteadofothers.Toliveahappylife,oneshouldalwaystryeveryefforttominimizeregretsinlife.比起时刻注视着他人，多关注自身的成长，尽自己的一切努力让生活少点遗憾，才能过上快意人生。Whenoneshiftstheirfocusfromotherst
    • Go学习笔记 南方淮竹 golanggolang学习笔记常识后端开发语言人工智能
      Go环境变量GOROOT：Go语言安装根目录的路径。GOPATH：若干工作区目录的路径，我们自己定义的工作空间。GOBIN：GO程序生成的可执行文件（executablefile）的路径。国内镜像https://goproxy.cn#macOSorLinuxexportGO111MODULE=onexportGOPROXY=https://goproxy.cn#othersgoenv-wGO111
    • Linux文件权限管理 不屈的铝合金 边学边记-linuxlinux服务器运维centos
      1.文件权限位说明Linux文件或目录的基本权限位是由九个字符来控制的，每三位字符为一组。前三位是用户权限位中三位表示用户组权限位后三位表示其他用户权限位rwxr-xr-xuser（用户）group（用户组）others（其他用户）代表字符为u代表字符为g代表字符为o2.文件权限详细说明2.1普通文件对应权限的详细说明Linux系统中的权限对于文件和目录来说，是有一定区别的。普通文件对应的权限：权
    • 吃了一口的苹果 markwang100
      Apple这吃了一口的苹果，从那美丽的童话故事，到伟大的天才，再到伟大的技术公司Apple白雪公主的故事关于白雪公主的故事，大家都非常熟悉，那个恶毒的皇后用毒苹果引诱白雪公主，导致公主昏迷不行。白雪公主吃了一口毒苹果，便昏迷过去了，那个毒苹果带来的隐喻是：看起来美好但是有害的TheApplewassopreparedthaonesidewasgood,thoughtheothersidewaspo
    • Apple再次推迟折叠设备 S0linteeH apple
      FoldablephoneshavebeendevelopingrapidlyinthelastfiveyearsandsomemanufacturersareevenexperimentingwithlargerformfactorslikelaptopswhileotherslikeApplehaveyettodiptheirtoesinthefoldablemarket.There’snos
    • Unity3D学习—牧师与魔鬼—MVC模式和ECS架构应用 卖女孩的男孩纸 unity3dmvcunity游戏引擎
      需求PriestsandDevilsPriestsandDevilsisapuzzlegameinwhichyouwillhelpthePriestsandDevilstocrosstheriverwithinthetimelimit.Thereare3priestsand3devilsatonesideoftheriver.Theyallwanttogettotheothersideofthis
    • 《经济学人》精读6：Retail Property VictorLiNZ
      VacantSpacesTheglobalpropertybusinesstriestoadapttoe-commerceManyretailpropertieswillslumpbutothershavebrighterprospectsDec14th2017|NEWYORKFIFTHAVENUEinNewYorkisthemostexpensivestretchofretailproperty
    • 三观超正的励志文案 Dimples甜
      及时止损，及时行乐。CutYourlossesandhavefun.事情想做就不要拖。Ifyouwantsomethingdone,don'tputitoff.努力提升自己比指望他人要可靠。Workinghardtoimproveyourselfismorereliablethanrelgingonothers会过去的会到来的会拥有的。It'llpass,it'llcome,it'llbether
    • （others）计算数据信噪比 ZhangTao_zata python
      ☆问题描述对原始数据添加随机噪声，得到了一组新的数据。如何计算新数据的信噪比（dB）？★解决方案信噪比（Signal-to-NoiseRatio,SNR）是描述信号强度相对于背景噪声强度的一个度量，通常以分贝（dB）为单位表示。要计算两组数据（例如，原始数据与添加了噪声的数据）的信噪比，我们可以采用以下步骤：计算原始信号的功率。这通常是通过对原始数据的所有值求平方后求平均得到的。计算噪声的功率。这
    • 【早安心语】 壹典心理咨询
      【2021-10-30】早安春夏秋冬Thereisnoneedtoenvyothers,thereisnoneedtoenvyothers,manypeopleareenviousofothers,alwaysregardthemselvesasbystanders,themoreso,themoreyouwilldropyourselfintoanabyss,youhavetobelieveth
    • 【转】你看到的事实，不一定是事实 AlphaHinex
      原文地址：https://wyiyi.github.io/amber/2021/03/06/zero-width-space/description:"零宽字符"date:2021.03.0710:34categories:-Otherstags:[Others]keywords:零宽字符,零宽空格,zerowidth,zerowidthspace大家都熟悉的Unicode（万国码）几乎包含所有符
    • 《认知觉醒》书摘 AlphaHinex
      原文地址：https://alphahinex.github.io/2022/01/16/ren-zhi-jue-xing/coverdescription:"找到舒适区边缘，不断拉扯"date:2022.01.1610:34categories:-Booktags:[Others]keywords:理智脑,舒适区边缘,刻意练习每天有事情做不代表觉醒，每天都努力也不代表觉醒，真正的觉醒是一种发自内
    • ＜数据集＞遥感船舶识别数据集＜目标检测＞ 深度学习lover 深度学习数据集目标检测人工智能计算机视觉YOLO深度学习
      数据集格式：VOC+YOLO格式图片数量：15047张标注数量(xml文件个数)：15047标注数量(txt文件个数)：15047标注类别数：25标注类别名称：['AircraftCarrier','AuxiliaryShips','OtherShip','OtherWarship','Destroyer','Dock','Hovercraft','Submarine','Ferry','Barg
    • Package mongodb-clients is not available 安装Mongodb客户端 涛涛英语学不进去 mongodb数据库
      Packagemongodb-clientsisnotavailable,butisreferredtobyanotherpackage.Thismaymeanthatthepackageismissing,hasbeenobsoleted,orisonlyavailablefromanothersource出现这个错误是因为：mongo命令未找到：说明mongo客户端未安装。APT锁被占用：系统
    • 我的妈妈 心上的锁
      mummyissuchasweetgirl.sheismyidolwhoalwaystreatothersinamildandconsiderateway，whichoftenmakesothersdeeplymovedinwarmthandlove.everytimeiwanttocryandlosemytemper，shecancheermeupwithunbelievablemagic.it
    • GB28181 —— 4、C++编写GB28181设备端，完成将.h264文件读取转发至GB28181服务并可播放（附源码） 信必诺 GB28181GB28181eXosip2Qth264
      效果 源码说明     主要功能模拟设备端，完成注册、注销、心跳等，完成读取.h264文件实时转ps格式后封包rtp进行推送给服务端播放。 源码/****@remark:ps头的封装,里面的具体数据的填写已经占位，可以参考标准*@param:pData[in]填充ps头数据的地址*s64Src[in]时间戳*@return:0success,othersfailed*/intgb28181_mak
    • wex的Scalers Talk第四轮新概念朗读持续力训练Day42 20181118 秦苌
      练习材料：Lesson42NotverymusicalAswehadhadalongwalkthroughoneofthemarketsofOldDelhi,westoppedatasquaretohavearest.Afteratime,wenoticedasnake-charmerwithtwolargebasketsattheothersideofthesquare,sowewenttoha
    • C/C++Win32编程基础详解视频下载 择善Zach 编程C++Win32
      课题视频：C/C++Win32编程基础详解 视频知识：win32窗口的创建                   windows事件机制 主讲：择善Uncle老师 学习交流群：386620625 验证码：625 --
    • Guava Cache使用笔记 bylijinnan javaguavacache
      1.Guava Cache的get/getIfPresent方法当参数为null时会抛空指针异常 我刚开始使用时还以为Guava Cache跟HashMap一样，get(null)返回null。 实际上Guava整体设计思想就是拒绝null的，很多地方都会执行com.google.common.base.Preconditions.checkNotNull的检查。 2.Guava
    • 解决ora-01652无法通过128（在temp表空间中） 0624chenhong oracle
      解决ora-01652无法通过128（在temp表空间中）扩展temp段的过程 一个sql语句后，大约花了10分钟，好不容易有一个结果，但是报了一个ora-01652错误，查阅了oracle的错误代码说明：意思是指temp表空间无法自动扩展temp段。这种问题一般有两种原因：一是临时表空间空间太小，二是不能自动扩展。 分析过程：    既然是temp表空间有问题，那当
    • Struct在jsp标签 不懂事的小屁孩 struct
      非UI标签介绍： 控制类标签： 1：程序流程控制标签   if   elseif    else <s:if test="isUsed"> <span class="label label-success">True</span> </
    • 按对象属性排序 换个号韩国红果果 JavaScript对象排序
      利用JavaScript进行对象排序，根据用户的年龄排序展示 <script> var bob={ name;bob, age:30 } var peter={ name;peter, age:30 } var amy={ name;amy, age:24 } var mike={ name;mike, age:29 } var john={
    • 大数据分析让个性化的客户体验不再遥远 蓝儿唯美 数据分析
      顾客通过多种渠道制造大量数据，企业则热衷于利用这些信息来实现更为个性化的体验。 分析公司Gartner表示，高级分析会成为客户服务的关键，但是大数据分析的采用目前仅局限于不到一成的企业。 挑战在于企业还在努力适应结构化数据，疲于根据自身的客户关系管理（CRM）系统部署有效的分析框架，以及集成不同的内外部信息源。 然而，面对顾客通过数字技术参与而产生的快速变化的信息，企业需要及时作出反应。要想实
    • java笔记4 a-john java
      操作符 1，使用java操作符       操作符接受一个或多个参数，并生成一个新值。参数的形式与普通的方法调用不用，但是效果是相同的。加号和一元的正号（+）、减号和一元的负号（-）、乘号（*）、除号（/）以及赋值号（=）的用法与其他编程语言类似。       操作符作用于操作数，生成一个新值。另外，有些操作符可能会改变操作数自身的
    • 从裸机编程到嵌入式Linux编程思想的转变------分而治之：驱动和应用程序 aijuans 嵌入式学习
          笔者学习嵌入式Linux也有一段时间了，很奇怪的是很多书讲驱动编程方面的知识，也有很多书将ARM9方面的知识，但是从以前51形式的（对寄存器直接操作，初始化芯片的功能模块）编程方法，和思维模式，变换为基于Linux操作系统编程，讲这个思想转变的书几乎没有，让初学者走了很多弯路，撞了很多难墙。     笔者因此写上自己的学习心得，希望能给和我一样转变
    • 在springmvc中解决FastJson循环引用的问题 asialee 循环引用fastjson
                我们先来看一个例子：           package com.elong.bms; import java.io.OutputStream; import java.util.HashMap; import java.util.Map; import co
    • ArrayAdapter和SimpleAdapter技术总结 百合不是茶 androidSimpleAdapterArrayAdapter高级组件基础
      ArrayAdapter比较简单，但它只能用于显示文字。而SimpleAdapter则有很强的扩展性，可以自定义出各种效果   ArrayAdapter;的数据可以是数组或者是队列        // 获得下拉框对象 AutoCompleteTextView textview = (AutoCompleteTextView) this
    • 九封信 bijian1013 人生励志
              有时候，莫名的心情不好，不想和任何人说话，只想一个人静静的发呆。有时候，想一个人躲起来脆弱，不愿别人看到自己的伤口。有时候，走过熟悉的街角，看到熟悉的背影，突然想起一个人的脸。有时候，发现自己一夜之间就长大了。         2014，写给人
    • Linux下安装MySQL Web 管理工具phpMyAdmin sunjing PHPInstallphpMyAdmin
      PHP http://php.net/ phpMyAdmin http://www.phpmyadmin.net Error compiling PHP on CentOS x64   一、安装Apache 请参阅http://billben.iteye.com/admin/blogs/1985244   二、安装依赖包 sudo yum install gd
    • 分布式系统理论 bit1129 分布式
      FLP One famous theory in distributed computing, known as FLP after the authors Fischer, Lynch, and Patterson, proved that in a distributed system with asynchronous communication and process crashes,
    • ssh2整合(spring+struts2+hibernate)-附源码 白糖_ eclipsespringHibernatemysql项目管理
      最近抽空又整理了一套ssh2框架，主要使用的技术如下： spring做容器，管理了三层(dao,service,actioin)的对象 struts2实现与页面交互(MVC)，自己做了一个异常拦截器，能拦截Action层抛出的异常 hibernate与数据库交互 BoneCp数据库连接池，据说比其它数据库连接池快20倍，仅仅是据说 MySql数据库   项目用eclipse
    • treetable bug记录 braveCS table
      // 插入子节点删除再插入时不能正常显示。修改： //不知改后有没有错，先做个备忘 Tree.prototype.removeNode = function(node) { // Recursively remove all descendants of +node+ this.unloadBranch(node); // Remove
    • 编程之美-电话号码对应英语单词 bylijinnan java算法编程之美
      import java.util.Arrays; public class NumberToWord { /** * 编程之美 电话号码对应英语单词 * 题目： * 手机上的拨号盘，每个数字都对应一些字母，比如2对应ABC，3对应DEF.........，8对应TUV，9对应WXYZ， * 要求对一段数字，输出其代表的所有可能的字母组合
    • jquery ajax读书笔记 chengxuyuancsdn jQuery ajax
      1、jsp页面 <%@ page language="java" import="java.util.*" pageEncoding="GBK"%> <% String path = request.getContextPath(); String basePath = request.getScheme()
    • JWFD工作流拓扑结构解析伪码描述算法 comsci 数据结构算法工作活动J#
        对工作流拓扑结构解析感兴趣的朋友可以下载附件，或者下载JWFD的全部代码进行分析   /*  流程图拓扑结构解析伪码描述算法         public java.util.ArrayList DFS(String graphid, String stepid, int j)
    • oracle I/O 从属进程 daizj oracle
      I/O 从属进程 　　I/O从属进程用于为不支持异步I/O的系统或设备模拟异步I/O.例如，磁带设备(相当慢)就不支持异步I/O.通过使用I/O 从属进程，可以让磁带机模仿通常只为磁盘驱动器提供的功能。就好像支持真正的异步I/O 一样，写设备的进程(调用者)会收集大量数据，并交由写入器写出。数据成功地写出时，写入器(此时写入器是I/O 从属进程，而不是操作系统)会通知原来的调用者，调用者则会
    • 高级排序:希尔排序 dieslrae 希尔排序
      public void shellSort(int[] array){ int limit = 1; int temp; int index; while(limit <= array.length/3){ limit = limit * 3 + 1;
    • 初二下学期难记忆单词 dcj3sjt126com englishword
      kitchen 厨房 cupboard 厨柜 salt 盐 sugar 糖 oil 油 fork 叉；餐叉 spoon 匙；调羹 chopsticks 筷子 cabbage 卷心菜；洋白菜 soup 汤 Italian 意大利的   Indian 印度的 workplace  工作场所 even 甚至；更 Italy 意大利 laugh 笑 m
    • Go语言使用MySQL数据库进行增删改查 dcj3sjt126com mysql
      目前Internet上流行的网站构架方式是LAMP，其中的M即MySQL, 作为数据库，MySQL以免费、开源、使用方便为优势成为了很多Web开发的后端数据库存储引擎。MySQL驱动Go中支持MySQL的驱动目前比较多，有如下几种，有些是支持database/sql标准，而有些是采用了自己的实现接口,常用的有如下几种: http://code.google.c...o-mysql-dri
    • git命令 shuizhaosi888 git
      ---------------设置全局用户名： git config --global user.name "HanShuliang" //设置用户名 git config --global user.email "[email protected]" //设置邮箱 ---------------查看环境配置 git config --li
    • qemu-kvm 网络 nat模式 (四) haoningabc kvmqemu
      qemu-ifup-NAT #!/bin/bash BRIDGE=virbr0 NETWORK=192.168.122.0 GATEWAY=192.168.122.1 NETMASK=255.255.255.0 DHCPRANGE=192.168.122.2,192.168.122.254 TFTPROOT= BOOTP= function check_bridge()
    • 不要让未来的你，讨厌现在的自己 jingjing0907 生活 奋斗 工作 梦想
       故事one 　23岁，他大学毕业，放弃了父母安排的稳定工作，独闯京城，在家小公司混个小职位，工作还算顺手，月薪三千，混了混，混走了一年的光阴。　　　　24岁，有了女朋友，从二环12人的集体宿舍搬到香山民居，一间平房，二人世界，爱爱爱。偶然约三朋四友，打扑克搓麻将，日子快乐似神仙；　　　　25岁，出了几次差，调了两次岗，薪水涨了不过百，生猛狂飙的物价让现实血淋淋，无力为心爱银儿购件大牌
    • 枚举类型详解 一路欢笑一路走 enum枚举详解enumsetenumMap
      枚举类型详解 一.Enum详解      1.1枚举类型的介绍   JDK1.5加入了一个全新的类型的”类”—枚举类型，为此JDK1.5引入了一个新的关键字enum,我们可以这样定义一个枚举类型。      Demo:一个最简单的枚举类   public enum ColorType { RED
    • 第11章 动画效果（上） onestopweb 动画
      index.html <!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/
    • Eclipse中jsp、js文件编辑时，卡死现象解决汇总 ljf_home eclipsejsp卡死js卡死
      使用Eclipse编辑jsp、js文件时，经常出现卡死现象，在网上百度了N次，经过N次优化调整后，卡死现象逐步好转，具体那个方法起到作用，不太好讲。将所有用过的方法罗列如下：   1、取消验证 windows–>perferences–>validation 把 除了manual 下面的全部点掉，build下只留 classpath dependency Valida
    • MySQL编程中的6个重要的实用技巧 tomcat_oracle mysql
      每一行命令都是用分号(;)作为结束 对于MySQL，第一件你必须牢记的是它的每一行命令都是用分号(;)作为结束的，但当一行MySQL被插入在PHP代码中时，最好把后面的分号省略掉，例如： mysql_query("INSERT INTO tablename(first_name,last_name)VALUES('$first_name',$last_name')");
    • zoj 3820 Building Fire Stations(二分+bfs) 阿尔萨斯 Build
      题目链接：zoj 3820 Building Fire Stations 题目大意：给定一棵树，选取两个建立加油站，问说所有点距离加油站距离的最大值的最小值是多少，并且任意输出一种建立加油站的方式。 解题思路：二分距离判断，判断函数的复杂度是o(n)，这样的复杂度应该是o(nlogn)，即使常数系数偏大，但是居然跑了4.5s，也是醉了。 判断函数里面做了3次bfs，但是每次bfs节点最多
    按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他