首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

前端遗留技术与现代功能对抗,邮件开发注定是件苦差事

电子邮件本质上只是个 HTML 文档,跟网页一样,只不过是邮件客户端、面非网络浏览器呈现视觉效果。但除此之外,二者都能渲染,也就是把 HTML 代码转换成文本、图形图像——即内容可视化。...也就是说, Outlook 打开电子邮件基本上相当于 Word 打开文档,所以我们得先摆正思路——手头开发并不是电子邮件,而是 Word 文档。...Gmail 每封邮件侧面,都放置了一块莫名其妙 16 像素空白。 Apple Mail Gmail 侧边留白比较 我们没法去掉这块留白。查看?已经是 0 了。填充?是 0。而且!...但我们至少可以覆盖掉元素本身填充…… 大多数电子邮件客户端会扫描文本内容邮件地址电话号码,然后把它们转换成看起来很丑蓝色链接形式。... Outlook ,列表项目还应该用分开,且列表本身需要缩进来保证保留: <li style="margin-bottom

17130
您找到你想要的搜索结果了吗?
是的
没有找到

怎样书写一个邮件模版

其中有一句话比较认同 如果想要你邮件模版有好兼容性,那么用15年前开发网页方式来开发html页面,准没错 当然也有一些邮件客户端,如firefox,qq邮箱,163邮箱比较好支持了html...而实际上,由于邮件客户端实现标准不一,很多时候需要兼容其他客户端场景 于是实现出来方案是折中或者说是一个降级方案。 实现过程碰到一些问题,总结出来。...兼容性问题 样式使用内联,outlook中会去掉模板头中style样式 布局使用table,因为outlook中会将div转换为内联样式 比如要实现一块内容居中效果,需要外层套一个宽度100%table...属性,因为一些客户端安全限制并不会默认加载图片 优先使用标签属性功能,其次使用style样式来控制 尽量使用padding来控制,padding尽量使用分开写方式(padding-top:2px...;),否则某些客户端可能无效,margin并不是总有效 邮件不能隐藏了内容,所以有多余内容时,需要在填入邮件前处理掉 比如显示一行文本,如果文本过多,导致结果就是换行,可能会影响到整理页面布局

74020

分享100 个鲜为人知 CSS 技巧

网站平滑滚动 元素添加scroll-behavior: smooth,以实现整个页面的平滑滚动。...形状边缘 当与 CSS 形状结合使用时,形状指定浮动元素形状周围,从而可以精确控制文本换行布局。 .shape { shape-margin: 20px; } 75....滚动 滚动设置滚动容器边缘滚动内容开始之间,通过提供滚动缓冲空间来增强用户体验。 .container { scroll-margin-top: 100px; } 76....选项卡大小 滚动设置滚动容器边缘滚动内容开始之间,通过提供滚动缓冲空间来增强用户体验。 pre { tab-size: 4; } 77....字间距 字间距调整文本元素之间间距,使您可以微调版式布局并提高可读性。

8210

HTML、CSS、JavaScript学习总结

单元格间距, 表格嵌套 HTML文件,第一个标记表示插入第一表格,第二个标记插入标记...其注释范围在“/*”与“*/”之间 常用样式属性 • 1.文字 • 2.背景 • 3.边框线 • 4.高度宽度 • 5.间距 • 6.列表 • 7.位置布局 指定“对象”来定义样式表语法规则如下...边框 设计边框样式——border-style 调整边框宽度——border-width 设置边框颜色——border-color 设置边框属性——border ——margin-top /margin-bottom...Ø margin复合属性其他复合属性设置方法是一样,也可以取1到4个值来同时设置边框周围四个。...文本框对象 • 文本框元素用于表单输入字、词或一系列数字 • 可以通过将 HTML INPUT 标签 type 设置为“text”,以创建文本框元素 文本框对象 – 事件处理程序 文 本 框

3K20

CSS快速入门(三)

在这种情况下,如果图像长宽比与盒子长宽比不同,则可能在图像任何一或顶部底部出现间隙。 在下面的例子,我使用了上面例子大图,并使用长度单位来调整方框内大小。你可以看到这扭曲了图像。... ---- 圆与圆角 通过使用border-radius属性与方框每个角相关来实现方框圆角。...这两种盒子会在页面流(page flow)元素之间关系方面表现出不同行为: 一个被定义成块级(block)盒子会表现出以下行为: 盒子会在内联方向上扩展并占据父容器该方向上所有可用空间,绝大数情况下意味着盒子会父容器一样宽...如果一个盒子对外显示为 inline,那么他行为如下: 盒子不会产生换行。 width height 属性将不起作用。...为了增加一些额外复杂性,有一个标准替代(IE)盒模型; 盒模型各个部分 CSS组成一个块级盒子需要: Content box: 这个区域是用来显示内容,大小可以通过设置 width height

1.3K20

Web前端温故知新-CSS基础

(宽高、边框样式、等)以及版面的布局等外观显示样式。...(9)word-break :自动换行   normal 使用浏览器默认换行规则,不打断单词显示;   break-all 允许单词内换行;   keep-all 只能在半角空格或连字符处换行;   ...内边出现在内容区域周围,当给元素添加背景色或背景图像时,该元素背景色或背景图像也将出现在内边。   外边是该元素与相邻元素之间距离。   ...所谓静态位置就是各个元素HTML文档流默认位置。   静态定位状态下,无法通过偏移属性(top、bottom、left或right)来改变元素位置。   ...然而,一个网页往往会应用很多小背景图像作为修饰,当网页图像过多时,服务器就会频繁地接收发送请求,这将大大地降低页面的加载速度。

3.5K40

Web前端温故知新-CSS基础

字体、大小、对齐方式等)、图片外形(宽高、边框样式、等)以及版面的布局等外观显示样式。...(9)word-break :自动换行   normal 使用浏览器默认换行规则,不打断单词显示;   break-all 允许单词内换行;   keep-all 只能在半角空格或连字符处换行;   ...内边出现在内容区域周围,当给元素添加背景色或背景图像时,该元素背景色或背景图像也将出现在内边。   外边是该元素与相邻元素之间距离。   ...所谓静态位置就是各个元素HTML文档流默认位置。   静态定位状态下,无法通过偏移属性(top、bottom、left或right)来改变元素位置。   ...然而,一个网页往往会应用很多小背景图像作为修饰,当网页图像过多时,服务器就会频繁地接收发送请求,这将大大地降低页面的加载速度。

2.3K20

07.HTML实例

HTML 段落 HTML 段落 更多段落 本例演示 HTML 文档折行使用。...HTML 格式化某些问题。 HTML 文本格式化 文本格式化 此例演示如何使用 pre 标签对空行空格进行控制。 此例演示不同"计算机输出"标签显示效果。...HTML使用不同样式 没有下划线链接 链接到一个外部样式表 HTML 链接 创建超级链接 将图像作为链接 浏览器窗口打开链接 链接到同一个页面的不同位置 跳出框架 创建电子邮件链接...创建电子邮件链接 2 HTML 图像 插入图像 从不同位置插入图片 排列图片 本例演示如何使图片浮动至段落左边或右边。...制作图像链接 创建图像映射 点击图片映射到另一张图 HTML 表格 简单表格 没有边框表格 表格表头 带有标题表格 跨行或跨列表格单元格 表格内标签 单元格(Cell padding

8.1K40

CSS——属性列表

2widthwidth规定元素内容区宽度。1 元素描述版本marginmargin规定元素四个方向外边属性。1margin-bottom设置元素下外边。...2displaydisplay指定元素渲染出来显示盒类型。1floatfloat 可使一个元素脱离文档流,然后被放置它所在容器左侧或右侧,另外其他文本或行内元素围绕该元素放置。...3border-image-sliceborder-image-slice 该属性用于划分边框图片在9个区域所制定图像:4个角,4个中间。...3word-wrapword-wrap 属性允许长内容可以自动换行。3 字体 元素描述版本fontfont 简写属性一个声明规定所有字体属性。...1 表格 元素描述版本border-collapseborder-collapse 属性规定表格边框是否被合并为一个单一边框,还是象标准 HTML 那样分开显示

2.5K10

Adobe dreamweaver CS6小白入门教程「建议收藏」

最常用换行符、脚本、表单,网页添加换行符不能按“回车键”而是shift+enter//等于代码 5.1.4其他设置: 属性面板单击 页什么...这个通道“链接”是“当前网页本站点中另一网页之间关系” 5.3.6.注意。...不是这个通道每一项操作都会在网页界面显示,但会在代码显示,(也就是“设置不可见元素”)比如: 6.DW图像多媒体网页设计 6.1图像 6.1.1网页3种常见图像格式: GIF...7.3.电子邮件链接:让浏览者把网站内容以邮件形式发送出去 (插入–电子邮件链接–输入显示文本目的地址(预览会发现,点击将自动打开个人邮箱软件) 7.4.脚本链接 执行js代码或者调用js...9.2设置APDiv属性 属性面板AP元素面板 9.2.1设置APDiv显示/隐藏属性 9.2.2.改变APDiv堆叠顺序(见上图Z) AP元素面板Z轴属性值更改

7K30

前端基础知识整理

设置对象背景特性。 1 background-attachment 设置或检索背景图像是随对象内容滚动(显示滚动条)还是固定。必须先指定background-image属性。...允许超过默认颜色配置文件渲染意向其他规范 3 内边(Padding) 属性 属性 说明 CSS padding 一个声明设置所有填充属性 1 padding-bottom 设置元素底填充...margin 一个声明设置所有外边属性 1 margin-bottom 设置元素下外边 1 margin-left 设置元素左外边 1 margin-right 设置元素右外边 1 margin-top...1 clip 剪裁绝对定位元素 2 cursor 规定要显示光标的类型(形状) 2 display 规定元素应该生成类型 1 float 规定框是否应该浮动 1 left 设置定位元素左外边边界与其包含块左边界之间偏移...2 overflow 规定当内容溢出元素框时发生事情 2 position 规定元素定位类型 2 right 设置定位元素右外边边界与其包含块右边界之间偏移 2 top 设置定位元素上外边边界与其包含块上边界之间偏移

3.2K20

前端学习(1)~html标签讲解(一)

1.HTML介绍 html全称为HyperText Markup Language,译为超文本标记语言,不是一种编程语言,是一种描述性标记语言,用于描述超文本内容显示方式。...(1)HTML换行不敏感,对tab不敏感 (2)空白折叠现象:HTML中所有的文字之间,如果有空格、换行、tab都将被折叠为一个空格显示。...唯一区别在于:是不换行,而是换行。 如果单独在网页插入这两个元素,不会对页面产生任何影响。..._parent:父窗口中显示 _top:顶级窗口中显示 链接内容 图片标签 img:...border:给图片加边框(描),单位是像素,边框颜色是黑色 Hspace:指图片左右 Vspace:指图片上下 alt:当图片不可用(无法显示时候,代替图片显示内容

1.3K42

CSS入门?一篇就够了!

(宽高、边框样式、等)以及版面的布局等外观显示样式。...2.属性属性值以“键值对”形式出现。 3.属性是对指定对象设置样式属性,例如字体大小、文本颜色等。 4.属性属性值之间用英文“:”连接。 5.多个“键值对”之间用英文“;”进行区分。...行内块元素特点: (1)相邻行内元素(行内块)一行上,但是之间会有空白缝隙。 (2)默认宽度就是它本身内容宽度。 (3)高度,行高、外边以及内边都可以控制。...溢出文字隐藏 word-break:自动换行 normal 使用浏览器默认换行规则。 break-all 允许单词内换行。 keep-all 只能在半角空格或连字符处换行。...通常我们使用于强制一行显示内容 normal :  默认处理方式 nowrap :  强制同一行内显示所有文本,直到文本结束或者遭遇br标签对象才换行

4.9K20

php读取pdf文件_php怎么转换成pdf

Left:左边 Top:顶部 Right:右边 Bottom:底部。...0,无边框,1,一个框,L,左边框,R,右边框,B, 底边框,T,顶边框,LTRB指四个显示 Ln:0,单元格后内容插到表格右边或左边,1,单元格下一行,2,单元格下面...Ishtml:true,可以输出html文本,有时很有用 Autopadding:true,自动调整文本与单元格之间距离 Maxh:设置单元格最大高度...Valign:设置文本纵坐标位置,T,偏上,M,居中,B,偏下 Fillcell:自动调整文本字体大小来适应单元格大小。.../img/test.png’); /*输出HTML文本Htmlhtml文本 Ln:true,文本下一行插入新行 Fill:填充。

13.1K10

HTML 基础

行内元素,多个元素会在一行内显示显示不下自动换行,用于设置文本样式,如i、u、s、b、sup 、sub、span 22....(3). align 控制表格在其父元素水平排列方式 (4). border 边框宽度,默认为 0 (5). cellpadding 设置单元格内边,单元格边框与内容之间距离 (6). cellspacing...设置单元格外边,单元格与单元格之间距离 (7). bgcolor:背景颜色 28.... List Item 列表项 ,显示列表内容,允许一个列表中出现另一个列表,被嵌套列表必须放在 36....文字 浮动框架,可以一个浏览器窗口中同时显示多个页面文档内容(一个页面引入另外一个页面),内容可以为普通文体描述,当浏览器不支持元素时,将显示文本描述信息

4.2K10

HTML5 与CSS3 相关笔记

如果将元素margin设为负值,则元素会变大。 (块元素可以把左右页设置为”自动”中心对齐。... 表格可以添加标题摘要标签进行优化...:预格式化,它包围文本会保留空格换行符 下拉列表进行多选操作:标签设置multiple="multiple"属性,就可以实现多选功能,windows 操作系统下,进行多选时按下...clip : rect(top, right, bottom, left); CSS 伪类: 1.Anchor伪类 (伪类如:link冒号伪类名之间不能有空格) 支持 CSS 浏览器,链接不同状态可用不同方式显示...nowrap 文本不会换行文本同一行上继续,直到遇到为止。 pre-wrap 保留空白符序列,但是正常地进行换行。 pre-line 合并空白符序列,但是保留换行符。

5.4K30
领券