之前做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
④页脚 3块 都是导航类型的 拍卖独有的导航、类目、我的首页焦点图: 高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
高度: 101px 上边框1px 上下空白14px 左右空白70px 内容高度72px
这样确定下来之后,写的html 和 css 就可以很明确。 html以及css见下方代码清单一。
2、 填充每一块
先从页体开始填充内容:
①焦点图(暂时不讨论图片轮播模型) 只是图片展示这里如果不指定img 高度为什么会超出div指定的区域显示呢?②card 分类
不确定原因所以试了下max-height,但是效果还是一样的,这是为什么呢?
具体探索以及原因见探索一
整体布局时水平排开,再看三块的尺寸以及空间关系
第一块: 194 222 上下空白为0 左空白为0 右空白为20px 右边框 1px 那整体内容的宽度则为
173px
第二块: 214 222 上下空白为0 左、右空白为20px 右边框1px 有内容宽度为173px
第三块: 194 222 上下空白为0 左为20px 右空白为0 无右边框 有内容宽度为173px
暂时不考虑IE特性种,可以简单的把他们的width三等分。
所以可以确定css如下三块都是有图有文字,并且各个块之间很相似,可以考虑使用ul+li+dl 的形式,同样也可以使用div+box+ul,两者都试着分析下。
.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; }
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
htmlcss
<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> 肿么样?是不是感觉还不错。三个来讲还是一般般,如果每个li中都需要写上first last between 会不会觉得有点繁琐。
.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; }
再看另一种方案
div + box + ul ,虽然是简化版的,但是可以如此简单,box 好东西
htmlcss
<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> 大致上还可以。。高度正好为222px加上边框,基本可以, 最佳方案,box+ul
.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; }
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
htmlcss
<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> 看着height:32px以及font-size:20px 满天飞是不是有点不舒服
.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; }
块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.
Definition and Usage The overflow property specifies what happens if content overflows an element's box.
|
代码清单一
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> |
.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; } |