溢出显示省略号
单行文本溢出显示省略号
方法一：
.box{
width:100px;
border:1px solid red;
/* 设置内容不换行 */
white-space:nowrap;
/* 超出部分省略号 */
text-overflow: ellipsis;
/* 超出部分隐藏 */
overflow:hidden;
}
方法二：
.box {
width: 200px;
line-height:30px;
height:90px;
background-color: red;
position:relative;
text-align:justify;
overflow: hidden;
}
.box:after{
content:"...";
position:absolute;
right:0;
bottom:0;
width:1em;
}
多行文本溢出显示省略号
-
方法一：after实现
.box { width: 200px; line-height:30px; height:90px; background-color: red; position:relative; text-align:justify; overflow: hidden; } .box:after{ content:"<span>…<span/>"; position:absolute; right:0; bottom:0; background-color: red; width:1em; }该方法适用范围广，但文字未超出行的情况下也会出现省略号,可结合js优化该方法。
说明：
-
将height设置为line-height的整数倍，防止超出的文字露出。
-
给p::after添加渐变背景可避免文字只显示一半。
-
由于ie6-7不显示content内容，所以要添加标签兼容ie6-7（如：<span>…<span/>）；兼容ie8需要将p::after替换成:after。
-
-
方法二：弹性盒
.box { width: 200px; line-height:30px; background-color: red; /* 旧版弹性盒 */ display:-webkit-box; /* 弹性盒子元素垂直排列 */ -webkit-box-orient: vertical; /* 控制要显示的行数 */ -webkit-line-clamp: 4; overflow: hidden; }注意：因使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端
说明：
-webkit-line-clamp 用来限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他的WebKit属性。常见结合属性： display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。 -webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。
圣杯布局&双飞翼
分析实现要点
-
三列（不一定等高）
-
改变加载顺序，优先加载中间列—（结构上:中左右，显示效果上：左中右）
-
中间列自适应，两侧列固定
圣杯
HTML
<div class="wrap"> <div class="center">中间</div> <div class="left">左侧</div> <div class="right">右侧</div> </div>
CSS
.wrap:after{
content:"";
display: block;
clear: both;
}
.wrap{
border:1px solid #000;
padding:0 200px;
}
.left,.center,.right{
float:left;
}
.left{
width:200px;
min-height:200px;
background-color: pink;
margin-left:-100%;
position: relative;
left:-200px;
}
.right{
width:200px;
min-height:200px;
background-color: skyblue;
margin-left:-200px;
position:relative;
left:200px;
}
.center{
width:100%;
min-height:200px;
background-color: yellowgreen;
}
圣杯实现步骤
-
外框左右固定padding值，预留左侧列和右侧列的列宽
-
.center宽度100%，.left,.right固定宽度
-
结构上.center,.left,.right依次浮动在一行排列
-
移动.left通过margin-left:-100%配合相对定位position:relative,left:-200px;移动至左侧列位置
-
移动.right通过margin-left:-200px;配合相对定位position:relative;left:200px移动至右侧列位置
双飞翼
HTML
<div class="wrap"> <div class="centerbox"> <div class="center">中间</div> </div> <div class="left">左侧</div> <div class="right">右侧</div> </div>
CSS
.wrap:after {
content: "";
display: block;
clear: both;
}
.wrap {
border: 1px solid #000;
min-width:600px;
}
.left,
.centerbox,
.right {
float: left;
}
.centerbox{
width:100%;
}
.left {
margin-left:-100%;
width: 200px;
min-height: 200px;
background-color: pink;
margin-left: -100%;
}
.right {
margin-left:-200px;
width: 200px;
min-height: 200px;
background-color: skyblue;
margin-left: -200px;
}
.center {
margin:0 200px;
min-height: 200px;
background-color: yellowgreen;
}
双飞翼实现步骤
-
.centerbox与.left,.right浮动在一行排列
-
.centerbox固定宽度100%，left,.right固定宽度
-
.centerbox内部嵌套.center,不定宽度，通过定义左右margin留出左侧列的宽和右侧列宽
-
移动.left通过margin-left:-100%实现
-
移动.right通过margin-left:-200px;实现
圣杯布局和双飞翼布局：主要解决的问题 是在加载也面时，优先加载主体内容，页面结构中主体内容标签要在 左右的前面，显示时， 还是 左 中 右
圣杯： 在页面变化时，可能会引起页面布局的混乱
双飞翼： 做了优化
CSS Hack
hack在软件系统中意思翻译为：基于程序的基础，对其代码进行增加、删除或者修改、优化，使之在功能上符合新的需求。
在前端中理解为：不同的浏览器对CSS的解析不同，会导致生成的页面效果不同，这时候需要编写额外代码兼容所有游览器，这个编写过程叫做hack。
使用 CSS Hack 【可以控制不同浏览器及版本之间的显示差异】，
某些情况下处理兼容问题可以事半功倍，但【滥用会影响页面性能】，也会导致后期维护困难，因此尽可能减少对CSS Hack 的使用。
属性级hack
*星号 针对ie6、7
.box{ *display:inline }
_下划线 针对ie6
.box{ _display:inline; }
\0 针对ie8+
.box{ background:blue\0; }
选择符级hack
*html .box{} 星号html 针对ie6
*+html .box {} 星号加号html 只针对ie7
条件注释语句
<!--[if IE]>
注释内容
<![endif]-->
<!--[if IE 6]>
这是ie6
<![endif]-->
<!--[if IE 7]>
这是ie7
<![endif]-->
<!--[if IE 8]>
这是ie8
<![endif]-->
<!--[if IE 9]>
这是ie9
<![endif]-->
<!--[if gt IE 6]>
这是大于ie6
<![endif]-->
gt（greater than） 大于 gte（greater than or equal）大于等于 lt（less than） 小于 lte（less than or equal） 小于等于 ! 非
IE 条件注释判断语句是 【IE 特有的功能】，通过 HTML 注释中的条件语句能让不同的 IE 版本识别注释中的内容
自【IE10起，标准模式不再支持条件注释】
PS基础
PS简介
[Adobe Photoshop，简称“PS”]，是由Adobe 开发和发行的[图像处理软件]。
Photoshop主要处理以像素所构成的数字图像。使用其众多的编修与绘图工具，可以有效地进行图片编 辑工作。
PS
[Adobe Photoshop，简称“PS”]，是由Adobe 开发和发行的[图像处理软件]。 Photoshop主要处理以像素所构成的数字图像。使用其众多的编修与绘图工具，可以有效地进行图片编辑工作。 ps有很多功能，在图像、图形、文字、视频、出版等各方面都有涉及。
常用快捷方式
文件
-
新建 ctrl+n
-
打开 ctrl + o
-
关闭 ctrl+w
-
保存 ctrl+s
-
另存 ctrl+shift+s
-
存储为web所用格式 ctrl+alt+shift+s
编缉
-
变换 ctrl+T
-
首选项——单位与标尺 ctrl+r
图像
-
图像大小 crlt+alt+i
-
画布大小 crtl+ alt+c
-
裁剪
-
裁切
选择
-
反选 ctrl+shift+I
-
取消选择 ctrl+D
视图
-
ctrl+R 标尺
-
清除参考线 ctrl+h
-
清除切片
窗口
-
图层F7
-
信息面板 F8
常用工具
移动工具
-
自动选择——图层【分组】
-
对齐
-
选中图层——选择对齐方式
-
选区
-
新选区
-
是否羽化（提示0像素，某些同学会出现松开鼠标测量结果 不准确注意此处设置）
-
固定大小，固定比例
放大镜
-
放大、缩小画布（默认放大，配合alt缩小）
-
ctrl+加号 ctrl+减号 缩放
-
alt+鼠标滚轮滚动（ 向前放大，向后缩小）
抓手工具
-
移动画布
-
任何工具下配合空格键（转换为抓手工具）
-
文字工具
-
查看文字大小、字体、颜色
-
复制、粘贴文字
切片工具
右键
编缉切片选
-
修改位置 x,y，修改大小 w,h
划分切片
-
右键划分切片（水平、垂直）
存储
-
ctrl+alt+shift+s存储为web所用格式
-
所有用户切片
-
图片命名
-
images文件夹
图片格式
在保证视觉效果的情况下，选择最小的图片格式与图片质量（通常选择 70-80 之间），以减少加载时间。
PSD
.psd是Photoshop默认保存的文件格式，可以保留所有有图层、色版、通道、蒙版、路径、未栅格化文字以及图层样式等。
JPG：
-
色彩丰富 【不支持透明】
-
压缩比高，生成文件体积小，
-
支持多种压缩级别可以控制文件大小
-
适用于：色彩丰富的图片（摄影图像（产品图，照片，渐变，banner图））
GIF：
-
支持动画
-
支持透明（全透明）
-
颜色不够丰富，只支持256种颜色、文件小
-
适用于：色彩简单的logo/icon/动图
PNG
png8(与gif相似)
png24
-
颜色丰富
-
支持alpha透明（全透明和全不透明，半透明）
-
早期的浏览器不支持PNG图像 （IE6不支持）
-
适用于：透明背景图片【投影，发外光, 线条复杂（文字）】
WebP
谷歌（google）10年推出一种新型图片格式
-
文件小，支持有损和无损压缩，支持动画、透明
-
但并不是所有浏览器都支持 webp
-
兼容
Cutterman插件
介绍
Cutterman是一款运行在photoshop中的插件，能够自动将你需要的图层进行输出， 以替代传统的手工 "导出web所用格式" 以及使用切片工具进行挨个切图的繁琐流程。
它支持各种各样的图片尺寸、格式、形态输出，方便你在pc、ios、Android等端上使用。 它不需要你记住一堆的语法、规则，纯点击操作，方便、快捷，易于上手。
下载
官网：http://www.cutterman.cn/zh/cutterman（支持ps14以上版本）
安装
-
下载对应工具的一键安装程序；
-
解压下载的安装包, 里面是一个可执行文件, 双击打开；
-
点击安装即可；
启用
-
安装完成后重启PS, 从菜单栏 -> 窗口 -> 扩展里头打开
-
注：需要注册登录
安装完成后重启PS, 从菜单栏 -> 窗口 -> 【扩展功能】-> 【cutterman】打开。
设置输出路径
一键切图：
点击导出选中图层，可以自动输出所需的各种图片。
支持各种图片格式输出。
多个图层合并、单独输出。
固定尺寸输出。
网站开发基本流程
（1）产品提出需求，给出产品原型图（RP图）
（2）需求评审—例会进行需求评审，产品经理阐述原型图。
（3）指派研发任务（排期）
-
UI:负责产品的样式设计，产出设计效果图
-
前端:负责HTML页面与交互
-
后端任务：负责业务逻辑的实现和数据库操作
（4）阶段验收，根据进度，进行效果验收
（5）功能测试 —测试人员：对完成的功能进行测试，检查BUG。
（6）项目发布—运维人员：对产品上线需要的服务器进行管理，维护。
项目规范
概述：任何一个Web项目或者系统开发之前都需要定制一个开发约定和规则，这样有利于项目的整体风格统一、代码维护和扩展，只有每个开发人员 都按照一个共同的规范去设计、沟通、开发、测试、部署，才能保证整个开发团队协调一致的工作，从而提高开发工作效率，提升工程项目质量
文件目录
-
根据项目名称创建项目文件夹。如：ushop
-
html、css、img、js 文件均归档至项目名称目录中，基本文件如图：
-
HTML 文件、根据页面内容以英文命名，首页或只有一个页面通常命名为index.html
-
css 文件以英文命名，
-
公用样式通常命名为reset.css（常用的浏览器样式），
-
public.css（多个页面时的公共模块的样式，或多次重复使用字体、字号、间距等样式），
-
首页通常命名为index.css, 其他页面依实际模块或功能需求命名
-
-
图片文件命名尽量与其模块样式名称保持关联，尽量使用小写命名
-
（如登录框的背景与图片：login_bg.jpg、login_user_ico.gif 等）
-
常用图片格式 gif 、png 、jpg
-
目录结构参考
---/html/ 项目名称 |---- /user/ 与用户相关的页面 |---- /user/login.html 登录页 ---/css/ |---- /reset.css 重置浏览器样式 |---- /page 其他页面的css |---- /page/pagename.css 单独某个页面的css |---- /common.css css通用样式库 ---/js/ |---- /lib 公用组件 |---- /lib/jquery.2.2.3.min.js 调用jq库文件 |---- /page 其他页面的js |---- /page/pagename.js 单独书写的js |---- /common.js 公用方法 ---/img/ |---- /page 其他页面对应的图片 |---- /page/wap 手机端图片夹 |---- /page/wap/wap_icon.png 手机端图标 |---- /logo.png 公用图片
文件命名规范
通过文件名称可以给使用者传达一些有用的信息
-
对于文件的名称的命名，要尽量做到见词达意。
-
全部英文小写字母，可以使用中线，不可出现其他字符
-
如果使用一个单词无法准确描述文件的功能，那么可以使用两个或者多个单词。
-
这时候推荐使用中划线，也就是减号（-）作为连字符
-
必要时，lib文件需包含版本号如jquery.1.8.1.js，压缩文件需包含
min关键词
书写风格（格式化规范）
HTML 书写规范
文档类型声明及编码：
-
统一为 html5 声明类型；
-
编码统一为 utf-8
书写规范：
-
书写时根据页面结构实现层次分明的缩进；
-
双标签必合
-
属性值必须用双引号包括
-
通常小写字母
语义化 HTML：
-
根据页面结构选择合适的标签，属性
-
如标题根据重要性用 h1-h6不同等级的标签标记 、段落标记用 p、结构简章重复的部分用 ul、li标签
-
页面中重要的图片内容要添加 alt=””替换文本，以便图片丢失时，用户可以根据替换文本了解页面内容
-
-
根据模块内容定义class和id名称，
-
如包含logo和搜索框等在内的头部标签用.header,包含联系信息，版权等的模块用footer或copyright.
-
合理嵌套HTML标签：
-
合理嵌套HTML标签，
-
ul和li是固定嵌套，ul直接子元素必须是li;
-
dl和dt,dd是固定嵌套，dl的直接子元素必须是dl和dd;
-
p标签不允许嵌套p标签;a标签不允许嵌套
-
a标签和其他交互性元素比如button
-
-
尽可能的控制元素嵌套层级，不合理的嵌套会影响页面性能
保证结构与表现相分离：
-
CSS表现层和JavaScript表现层分别归属于独立的.css和.js文件。
-
在页面中尽量避免使用行内样式即 style=”…”或行间属性，尽量使用 class 或者 id
css 书写规范
编码格式：
-
编码统一为 utf-8
书写代码前
（1）确定版心（页面有效区）
（2）考虑样式表规划，提高样式重复使用率；
（3）提前沟通页面中模棱两可的需求和交互效果，方便后续合理布局；
书写风格（格式化规范）
-
推荐使用小写字母书写
-
保持代码缩进,每个属性声明末尾都要加分号
.box { height:100px; width: 50px; }
书写规范
-
合理使用id选择器，id选择器用于唯一的页面结构元素
-
合理使用全局意义的标签选择器
-
尽可能不使用通配符选择器
-
避免选择器嵌套层级过多
-
注意精简代码
-
属性值十六进制数值能用简写的尽量用简写
-
属性值为
0可以省略单位
-
css 属性书写顺序：
-
建议遵循 :
特殊(文档流相关)属性 –> 盒模型 –> 装饰属性 –>内容排版相关
（1）文档流相关属性（display, position, float, clear, visibility,） （2）盒模型相关属性（width, height, margin, padding, border） （4）装饰性相关属性（background, opacity, cursor） （3）内容排版相关属性（color, font, line-height, text-align, text-indent, vertical-align）
图片规范
命名
尽量与其模块样式名称保持关联， 尽量使用小写命名（如登录框的背景与图片：login-bg.jpg、user-pic等）
图片格式
-
内容图多以商品图等照片类图片形式存在，颜色较为丰富，文件体积较大，优先考虑 JPEG 格式，
-
背景图多为图标等颜色比较简单、文件体积不大、起修饰作用的图片,优先考虑PNG格式
-
条件允许的话优先考虑 WebP 格式，PC平台单张的图片的大小建议不大于 200KB
类名命名参考
盒子：box
头部：header、hd
内容：content/container
页面主体：main、bd
页脚：footer
版权：copyright
导航：nav，navbar导航条
子导航：subnav
侧栏：sidebar
栏目：column
文章：article
包装器、外框：wrapper
左右中：left / right / center
列表：list
栏目标题：title
更多：more
登录条：loginbar
标志：logo
广告：banner
友情链接：friendlink
热点：hot
新闻：news
下载：download
加入：join
指南：guild
服务：service
合作伙伴：partner
加入我们：join_us
菜单：menu
子菜单：submenu
搜索：search
标签页：tab
滚动：scroll
提示信息：msg（message）
小技巧、贴士：tips
标签：tag
工具条：tool, toolbar
箭头： arrow
下拉：drop 下拉菜单： dorp_menu
思维导图：
4万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
