关于文本溢出显示省略号、圣杯双飞翼布局、CSS Hack、PS基础、以及项目的一些规范
溢出显示省略号
单行文本溢出显示省略号
方法一：
.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
思维导图：
关于文本溢出显示省略号、圣杯双飞翼布局、CSS Hack、PS基础、以及项目的一些规范相关推荐
- 2、多效果、太极图、党徽和五角星、时钟、animation、文本溢出显示省略号、Flex布局、Flex容器、链接状态、选择器、清除浮动、table表格合并、点击事件、半包围效
2.多效果.太极图.党徽和五角星.时钟.animation.文本溢出显示省略号.Flex布局.Flex容器.链接状态.选择器.清除浮动.table表格合并.点击事件.半包围效.getBoundingC ...
- web前端培训：CSS中单行文本溢出显示省略号的方法
CSS中单行文本溢出显示省略号的方法你知道吗?在web前端技术学习中,这个问题其实是属于老生常谈了,因为css单行文本的应用是非常频繁的,比如网站最基本的文章列表,标题会很长,而显示列表的区域宽度却没 ...
- 单行文本溢出显示省略号，单行文本溢出显示省略号
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 文本溢出显示省略号效果
在HTML页面中经常会遇到文本溢出,需要将超出的部分隐藏并显示省略号的情况,那么这个文本溢出显示省略号效果是怎么实现的呢?下面本篇文章就来给大家介绍一下使用CSS实现文本溢出显示省略号效果的方法,希望 ...
- 【用CSS让单行文本溢出显示省略号】
如何用CSS让单行文本溢出显示省略号 <style> p { 1.设置宽高 width:160px; height:20px; font:size:16px; background-col ...
- 文本溢出显示省略号，鼠标浮动查看全部内容
目录 1.文本溢出显示省略号 2.鼠标浮动查看全部内容 1.文本溢出显示省略号 今天做项目时遇到一种需求:文本溢出截断省略,上网查阅了一下,还是挺简单的,但是考虑到自己疑似老年痴呆的大脑,就在这里整理 ...
- CSS文本溢出显示省略号怎么实现？
前言 我们经常会遇到网页中有文字溢出会显示省略号,那么这种效果怎么实现呢?本文分别介绍了单行文本溢出显示省略号和多行文本溢出显示省略号的实现方法. 一.单行文本溢出显示省略号 代码示例: <!D ...
- css3文本溢出显示省略号 的方法
项目中常常有这种需要我们对溢出文本进行"-"显示的操作,单行多行的情况都有(具体几行得看设计师心情了),这篇随笔是我个人对这种情况解决办法的归纳,欢迎各路英雄指教. 单行 语法 o ...
- css文本溢出显示省略号
1.单行文本溢出显示省略号 overflow: hidden;(文字长度超出限定宽度,则隐藏超出的内容) white-space: nowrap;(设置文字在一行显示,不能换行) text-overf ...
最新文章
- c 连接oracle的参数,[20210203]19c登录连接改变一些参数.txt
- python模块之email: 电子邮件编码解码 (二、编码邮件)
- 各家版本控制系统（VCS）对比：VSS、SVN、Git。代码托管平台对比：GitLab、GitHub、码云（Gitee）、SourceForge、DevCloud（华为软件开发云）
- hdu 2448 Mining Station on the Sea(最短路+费用流)
- 机器人学习--MATLAB官网关于机器人方面的资料
- CM: webservice 元数据在word template中的存储
- php中使用exec,system等函数调用系统命令
- 推荐一款.NET Core开源爬虫神器：DotnetSpider
- leetcode860. 柠檬水找零（贪心）
- 关于map对key自定义排序
- JEECG 商业版本和开源版本有什么区别呢？
- python大数据开发工程师_大数据开发工程师的职责
- npm下载地址的查询与切换
- C语言printf格式化输出
- 《给QTreeView表项添加CheckBox和图标》：系列教程之七
- 你可以不信元宇宙，但请不要错过硬件光线追踪技术的先机
- Linux命令之top命令
- fiddler连接手机
- 复习中国近现代史纲要--“政治编年史”
- Matlab散点图进阶——矩阵气泡图