怎么从psd转换成html

之前做java的时候一直觉得前端工程师有一种不一样很帅气很酷的感觉，请原谅其实我是觉得他们穿的很时髦~ 关键是可以跟交互或者视觉设计接触这点足以让我向往。于是踏上了前端之路。

没办法半途转行是没人把你当做应届生带的，p都不懂就可以上战场了。废话少说，肿么样把设计师的psd转换成html呢？

本文速览：

1、 倒推法，整个图片分成几大块确定每块的高度，宽度；再把大块分成小块，逐渐递归下去，直到有具体html元素产生。

2、 了解html各个元素的特性，应该在什么时候使用

若时间紧急，看完上面两点下面的就可以不用再看了，下面都是细讲。很有可能有废话。。

一、 自创倒推法

1、  首先一个页面，可以根据业务内容或者页面元素分成几大块，确定这几块跟整体画布的比例关系。tips：测量的时候可以使用切片工具。 （P.S. 比例的计算方式可以是测量好整个页面的高度，然后测量各个部分的高度，画出比例）
     ①页头，页体 ，页脚  比例：  整个页面高度为2005px，宽度640px 页头的高度为80px  页脚 96px 页体则为1829px
     ②页头   3块 返回键、标题、主客键 比例：整体高度 80px  上方空白区域26px 下方空白区域26px  左边空白区域 20px 右边空白区域20px；这样就确定了有内容的地方高32px，宽600px 占比为94%
     ③页体   5块        首页焦点图 、首页card、 块A 、块B、块C

     首页焦点图： 高180px 宽 100%

     首页card： 整块高度320px  左右空白20px 上空白36px 无下空白 下边框1px ，下方外部空白为40px 内容高度223px
      块A： 整块高度609px 左右空白20px  上下空白0，下边框1px，下方外部空白40px  有内容部分高度568px
     块B：整块高度381px 左右空白20px 上下空白0 下边框1px 下方外部空白40px 内容部分高度340px
     块C： 整块高度381px 左右空白20px 上下空白0 下边框1px 下方外部空白40px 内容部分高度340px

     ④页脚   3块 都是导航类型的 拍卖独有的导航、类目、我的
     高度： 101px  上边框1px 上下空白14px  左右空白70px  内容高度72px
     这样确定下来之后，写的html 和 css 就可以很明确。      html以及css见下方代码清单一。

2、 填充每一块

    先从页体开始填充内容：

    ①焦点图（暂时不讨论图片轮播模型） 只是图片展示

      这里如果不指定img 高度为什么会超出div指定的区域显示呢？
     不确定原因所以试了下max-height，但是效果还是一样的，这是为什么呢？
     具体探索以及原因见探索一

    ②card 分类 

     整体布局时水平排开，再看三块的尺寸以及空间关系
      第一块： 194 222 上下空白为0 左空白为0 右空白为20px 右边框 1px 那整体内容的宽度则为  
                                 173px
      第二块： 214 222 上下空白为0  左、右空白为20px  右边框1px 有内容宽度为173px
      第三块： 194 222 上下空白为0  左为20px 右空白为0 无右边框 有内容宽度为173px
     暂时不考虑IE特性种，可以简单的把他们的width三等分。
     所以可以确定css如下     

.home-card .first{     padding-right: 20px; } .home-card .last{     padding-left: 20px; } .home-card .between{     padding: 0 20px; } .home-card .first,.home-card .between{     border-right: #d1d1d1 solid 1px; }

三块都是有图有文字，并且各个块之间很相似，可以考虑使用ul+li+dl 的形式，同样也可以使用div+box+ul，两者都试着分析下。   
     a 大的容器为 ul 然后每一个li display:inline-block;
     b 容器仍然为div ， 使用box布局，剖析这块布局，如果使用ul
ul html：
     整个容器为ul，
          ul 中的text-align: center；
          三块分别是li，需要li 的 display 为inline-block ；宽度为30%；
    每一块li中包含一个dl，流的方向为垂直方向，无需更改，
               dt   标题   H:30px    
               dd  文字   H:22px    
               dd  图片   H:150px   
          标题与文字之间的间距是：10px；文字与图片之间的间隙是： 12px
这里可以引入一个新的概念，两行之间的间隙同样可以使用line-height 来分开，计算方式(30+22)x(1-x)/2 = 10   x = 0.6 也就是line-height为1.6  
下面的空隙就有6px 图片距离上面的空隙就为6px 
 html     

<ul class="card-content-wrapper">                 <li class="first">                     <dl>                         <dt class="card-title">块A</dt>                         <dd class="card-desc">哈哈哈哈</dd>                         <dd class="card-pic"><img src="http://gtms01.alicdn.com/tps/i1/T1yh5MFyxwXXcYpVZd-175-130.png" /></dd>                     </dl>                 </li>                 <li class="between">                     <dl>                         <dt class="card-title">块A</dt>                         <dd class="card-desc">哈哈哈哈</dd>                         <dd class="card-pic"><img src="http://gtms01.alicdn.com/tps/i1/T1yh5MFyxwXXcYpVZd-175-130.png" /></dd>                     </dl>                 </li>                 <li class="last">                     <dl>                         <dt class="card-title">块A</dt>                         <dd class="card-desc">哈哈哈哈</dd>                         <dd class="card-pic"><img src="http://gtms01.alicdn.com/tps/i1/T1yh5MFyxwXXcYpVZd-175-130.png" /></dd>                     </dl>                 </li>             </ul>

css

.home-card .first{     padding-right: 20px; } .home-card .last{     padding-left: 20px; } .home-card .between{     padding: 0 20px; } .home-card .first,.home-card .between{     border-right: #d1d1d1 solid 1px; } .card-content-wrapper{     line-height: 1.6; } .card-content-wrapper li{     display: inline-block;     width: 30%; } .card-title{     font-size: 30px; } .card-desc{     font-size: 22px; } .card-pic{     height: 150px;     padding: 6px 0; }

肿么样？是不是感觉还不错。三个来讲还是一般般，如果每个li中都需要写上first last between 会不会觉得有点繁琐。
再看另一种方案
div + box + ul ，虽然是简化版的，但是可以如此简单，box 好东西
html

<div class="home-card card-content-wrapper">            <!--<div class="">-->                    <ul class="first">                        <li class="card-title">块A</li>                        <li class="card-desc">哈哈哈</li>                        <li class="card-pic"><img src="http://gtms01.alicdn.com/tps/i1/T1yh5MFyxwXXcYpVZd-175-130.png" /></li>                    </ul>                    <ul class="between">                        <li class="card-title">块A</li>                        <li class="card-desc">公平公正公开</li>                        <li class="card-pic"><img src="http://gtms02.alicdn.com/tps/i2/T1iiScFAhdXXcYpVZd-175-130.png" /></li>                    </ul>                    <ul class="last">                        <li class="card-title">块A</li>                        <li class="card-desc">块A</li>                        <li class="card-pic"><img src="http://gtms01.alicdn.com/tps/i1/T1C41hFr8dXXcYpVZd-175-130.png" /></li>                    </ul>            <!--</div>-->        </div>

css

.card-content-wrapper{     line-height: 1.6;     display: -webkit-box;     -webkit-box-pack: justify;-moz-box-pack: justify;-ms-box-pack: justify;box-pack: justify; } .card-content-wrapper .first{     padding-right: 20px;     -webkit-box-flex: 1;-moz-box-flex: 1;-ms-box-flex: 1;box-flex: 1; } .card-content-wrapper .last{     padding-left: 20px;     -webkit-box-flex: 1;-moz-box-flex: 1;-ms-box-flex: 1;box-flex: 1; } .card-content-wrapper .between{     padding: 0 20px;     -webkit-box-flex: 2;-moz-box-flex: 2;-ms-box-flex: 2;box-flex: 2; } .card-content-wrapper .first,.card-content-wrapper .between{     border-right: #d1d1d1 solid 1px; } .card-title{     font-size: 30px; } .card-desc{     font-size: 22px; } .card-pic{     height: 150px;     padding: 6px 0; }

大致上还可以。。高度正好为222px加上边框，基本可以， 最佳方案，box+ul  

card 部分搭建完成。

再看块A整体高度609，大致可以分成两部分

① 块头   H:32       无边框  下面有26px 空白
② 块体  H:500    无边框  下面有10px 空白
块头呈现方式是一行：
     图片靠左         W:50     8%
     文字靠左居中   W:530   88%
     导航箭头右对齐 W:20   4%
乍看一下，可以理解成div，简单点：可以直接section+img+h4+a（箭头） box 分配width
注意这里：
1、 分配width ，则表明img需要外面包装一层，如果直接指定img的宽会被认为作用于img本身，所以有一个wrapper
2、这样铺满整个屏幕看起来没什么异常，先无视字和图片的没有对齐

可是稍等下，一缩小宽度，会发现，左字会跑到最热珍品下面。。可见这样分配宽度并不是那么好用。
此时想起box还没使用，倒不如稍作调整，使用box 和 justify ，结果却是
为什么justify 没有向两边靠近呢？ 看下css发现刚刚有设置为 inline-block， 对inline-block的元素是无效的？
布局如下：
      box+div{img},width+h4 width, line-height, font-size+a(block) 
这样大致还算可以，但是有以下问题，
     为什么当缩成很小的时候，左边的导航栏会隐藏消失掉。。
     为什么一行文字的高度为35px
首先第一条，因为h4 规定了width，当缩小时会优先保证这个宽度， box 布局超出的元素会被截掉？NO
如果把a元素左 的display:block设置上去就不会看不到。。
是不是很容易就想到，把width去掉，很好，去掉之后就变成了三国鼎立的状态，很公平，向两边散开，中间居中。肿么办我想让他们这边一堆，那个单独的好么？肿么办，很好办
img 和 h3 放在一起就OK了
布局如下：
     box+left-wrapper(img h3) | a block 然后justify 搞定
还有第二条，为什么多出3px。h3 font-size：20px; line-height:1.6; 字体的高度应该是32px，实际却是35px ，box不是应该按照内容的高度吗？解决方法可以指定下height
html

<section class="block-title">                 <div class="left-wrapper">                     <img src="http://gtms02.alicdn.com/tps/i2/T1bGmaFsxeXXXN.4fe-36-33.png" />                     <h3>最热块A</h3>                 </div>                 <a>左</a>             </section>

css

.block-title{     padding-bottom: 26px;     display: -webkit-box;     -webkit-box-pack: justify;-moz-box-pack: justify;-ms-box-pack: justify;box-pack: justify; } .left-wrapper{     display: -webkit-box;     height: 32px; } .block-title img{     height: 32px;     padding-right: 16px; } .block-title h3{     font-size: 20px;     line-height: 1.6;     height: 32px; } .block-title a{     font-size: 20px;     line-height: 1.6;     height: 32px;     display: block; }

看着height:32px以及font-size:20px 满天飞是不是有点不舒服
块A主体
整体高度540px ， 下方空白10px
可以分成两部分
     一个图片：高度 200px
     两行专场：其中一个上下空白20px  第一个有底部边框，最后一个没有
          每一行专场中，可以分成两部分 图片和文字之间的间隙是20px 
                         图片 和文字 可以仍然采用 box的布局
                         图片div 包围 高度110px
                         文字div包围，可以使用span 因为只显示一行
                                   第一行文字 有上10px空白 下28px空白  本身高度22px
                                   第二行文字 有上0空白 下空白22px空白 字体高度26px
                         可以参考line-height padding 等值自由分配下。
OK 看起来蛮完美的
下面有新的要求了，当字体超过指定长度，则隐藏文字并且使用... 代替
于是就有了以下代码

width: 80%;     overflow: hidden;     text-overflow: ellipsis;     white-space: nowrap;

为何不起作用呢？
加上

display: inline-block;

倒是可以使用，可是为什么不会随着宽度而变化么？
看之前的做法，好像需要父元素也是overflow:hidden;的么？ 于是在父元素上面增加

display: inline-block;     width: 100%;     overflow: hidden;     white-space: nowrap;     text-overflow: ellipsis;

有一点突破： width:80px; 突然间就起作用了

文中解释

1、  text-overflow: ellipsis;  起作用的条件          一定要在设置了overflow: hidden; white-space: nowrap;的时候才有效果，          一定要设置准确的width；如果本身是inline元素如span，设置width不会起作用的，所以这种情况应该设置display:inline-block 如果想要起作用，还需要设置父级元素为block，并且制定width

探索一
height div中的height不能限制里面内容的高度，并且可以突破div指定的区域显示。

1、 height 在css中定义 he height property is supported in all major browsers. Definition and Usage The height property sets the height of an element. Note: The height property does not include padding, borders, or margins; it sets the height of the area inside the padding, border, and margin of the element! Note: The min-height and max-height properties override height. Default value: auto Inherited: no 没什么特别的，不包括padding border 等，不可继承 2、 因为是盒模型，默认自动撑开？ 使用 overflow:hidden; 或者指定子元素的高度 试着了解下overflow 属性： 1、 定义 Definition and Usage The overflow property specifies what happens if content overflows an element's box. Default value: visible Inherited: no 2、 注意事项，使用场景通常一个盒子的内容是被限制在盒子边界之内的。但有时也会产生溢出，即部分或全部内容跑到盒子边界之外。溢出将在满足下列条件之一时出现：1. 一个不换行的行元素宽度超出了容器盒子宽度。2. 一个宽度固定的块元素放在了比它窄的容器盒子内。3. 一个元素的高度超出了容器盒子的高度。4. 一个子孙元素，由负边距值引起的部分内容在盒子外部。5. text-indent属性引起的行内元素在盒子的左右边界外。6. 一个绝对定位的子孙元素，部分内容在盒子外。但超出的部分不是总会被剪裁。子孙元素的内容就不会被子孙元素和其包含块之间的祖先元素的overflow的设置所剪裁。摘自：http://www.aliued.cn/2012/12/30/overflowhidden%E7%9C%9F%E7%9A%84%E5%A4%B1%E6%95%88%E4%BA%86%E5%90%97.html

代码清单一
html

<div class="header-nav"></div>        <div class="home-focus"></div>        <div class="home-card"></div>        <div class="treasure"></div>        <div class="justify"></div>        <div class="art"></div>        <div class="footer-nav"></div>

css

.header-nav , .home-focus{     width: 100%; } .header-nav{    height: 80px;    padding: 26px 20px; } .home-focus{     height: 180px; } .home-card , .treasure, .justify, .art{     padding: 0 20px;     margin-bottom: 40px;    border-bottom: #d1d1d1 solid 1px; } .home-card{     margin-top: 36px;     height: 223px; } .treasure{     height: 568px; } .justify , .art{     height: 340px; } .footer-nav{     padding: 14px 70px;     border-top: #d1d1d1 solid 1px;     height: 101px; }