溢出显示省略号
单行文本溢出显示省略号
方法一:
.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