HTML做成信纸格式,css实现一个写信的格式_html/css

一、目标

目标实现如下效果：

二、完成

1、分析

这个效果看起来很简单，实际上可能并不那么容易实现。

首先是全部东西都居中显示，除了“亲爱的starof”这个称呼的地方。这也是难点，也是本文要重点说的地方。

开始我尝试将“ 亲爱的starof:” 和下面那段文字分别独立成两个段落，一个居左，一个居左。结果当然是不理想的，因为“亲爱的starof”部分其实并不是真正意义上的居左，而是以下面这段文字作为参考的一个居左。现在说说我的实现方法。首先全部文字都用

包裹，inline-block显示，然后绝对定位。具体过程如下，各位如有不同见解或实现方式欢迎指点讨论。

2、实现

第一步，代码基础框架如下

全部文字都放在一个

标签内。

demo of starof

亲爱的starof:

恭喜您获得快速升级年费资格，您仅需开通4个月会员，即可自动升级为尊贵的年费会员，差额部分享受8折优惠哦!

此时效果：

下图为了方便后面对比。

第二步，设在

的display为inline-block,实现居中。

因为p本身是个块级元素，我们下一步要以它为参照实现定位。所以需要设在display属性让它大小根据内容而定，同时实现居中。

增加下面css样式。

.top .first{display:inline-block;position:relative;}

效果如下

看起来和上面很像，实际上已经发生了本质变化。

第三步，通过绝对定位实现目标效果。

增加下面css样式。

相对定位作为参照，第一个绝对定位。

.top .first{...position:relative;}.first span:first-child{position:absolute;}

此时效果如下：

如果觉得效果不理想，可通过left，top稍微调整一下。

.first span:first-child{position:absolute;left:0;top:-5px;}

这就是我要的效果

第四步，完成其他部分

剩下的就都很简单了，完整代码如下：

demo of starof

亲爱的starof:

恭喜您获得快速升级年费资格，您仅需开通4个月会员，即可自动升级为尊贵的年费会员，差额部分享受8折优惠哦!

已有23919人享此优惠

本文作者starof,因知识本身在变化，作者也在不断学习成长，文章内容也不定时更新，为避免误导读者，方便追根溯源，请诸位转载注明出处：有问题欢迎与我讨论，共同进步。

本条技术文章来源于互联网，如果无意侵犯您的权益请点击此处反馈版权投诉

本文系统来源：php中文网

HTML做成信纸格式,css实现一个写信的格式_html/css_WEB-ITnose相关推荐

css实现一个写信的格式
一.目标目标实现如下效果: 二.完成 1.分析这个效果看起来很简单,实际上可能并不那么容易实现. 首先是全部东西都居中显示,除了"亲爱的starof"这个称呼的地方.这也是难点 ...
【WPS Word】表格里最后一段只要清除干净就会变格式，最后一个项目/条目总是变格式
一.问题背景如下图所示,对多段进行编号时,只要删除最后一行,最后一个文字段落的编号就会发生格式上的变化. 用基于上面文字的格式对最后一个段落使用格式刷,并不会发生任何变化. 另外最后一个段落即使手动 ...
button按钮onclick触发不了_手把手教你深入CSS实现一个粒子动效的按钮
按钮(button)可能是网页中最常见的组件之一了,大部分都平淡无奇,如果你碰到的是一个这样的按钮,会不会忍不住多点几次呢? 转载链接: https://github.com/XboxYan/note ...
怎么实现hover_web前端CSS实现一个粒子动效的按钮
按钮(button)可能是网页中最常见的组件之一了,大部分都平淡无奇,如果你碰到的是一个这样的按钮,会不会忍不住多点几次呢? 通常这类效果第一反应可能就是借助canvas了,比如下面这个案例点击预览( ...
【4003】通过html+css做一个图片列表的静态页面。
[4003]通过html+css做一个图片列表的静态页面. 学习目标: [ 1]学习前端第三天掌握 html与css(基础选择器,有.无序列表相关)入门知识,梳理今天的学习知识点: [ 2]通过已学知 ...
R语言使用gt包和gtExtras包优雅地、漂亮地显示表格数据：使用gtExtras包添加一个图，显示表中某一列中的数字、并自定义表格数据显示的主题格式、并自定义数值数据的格式（例如百分比）
R语言使用gt包和gtExtras包优雅地.漂亮地显示表格数据:使用gtExtras包添加一个图,显示表中某一列中的数字.并自定义表格数据显示的主题格式.并自定义数值数据的格式(例如百分比) 目录
如何用 css 画一个心形
如何用 css 画一个心形 (How to draw hearts using CSS) 用两个长方形切圆角倾斜位移并合并为一个心形第一步画一个长方形 (Draw a rectangle) 这个长 ...
java语言显示运算时间_JAVA语言之ACM日期计算：输入一个日期，格式如：2010 10 24 ，判断这一天是这一年中的第几天...
本文主要向大家介绍了JAVA语言之ACM日期计算:输入一个日期,格式如:2010 10 24 ,判断这一天是这一年中的第几天,通过具体的内容向大家展示,希望对大家学习JAVA语言有所帮助. ACM日期 ...
PHP框架半透明,CSS设定一个元素半透明
这篇文章主要介绍了用CSS设定一个元素半透明的相关资料,非常不错,具有参考借鉴价值,需要的朋友参考下吧.opacity{ filter:alpha(opacity=50); /* IE */ -moz ...
BeX5报表开发中Excel格式修改的一个小问题
问题简单说一下吧.编程时有些问题看起来很简单,但想与做往往就是两回事.计算机编程正是具有这个特点. 目前在修改基于BeX5 3.6的报表格式.使用的自然是report组件,切换到报表设计状态后,使用 ...

HTML做成信纸格式,css实现一个写信的格式_html/css_WEB-ITnose

HTML做成信纸格式,css实现一个写信的格式_html/css_WEB-ITnose相关推荐

最新文章

热门文章