css实现一个写信的格式
一、目标
目标实现如下效果：
二、完成
1、分析
这个效果看起来很简单，实际上可能并不那么容易实现。
首先是全部东西都居中显示，除了“亲爱的starof”这个称呼的地方。这也是难点，也是本文要重点说的地方。
开始我尝试将“ 亲爱的starof:” 和下面那段文字分别独立成两个段落，一个居左，一个居左。结果当然是不理想的，因为“亲爱的starof”部分其实并不是真正意义上的居左，而是以下面这段文字作为参考的一个居左。现在说说我的实现方法。首先全部文字都用<p>包裹，inline-block显示，然后绝对定位。具体过程如下，各位如有不同见解或实现方式欢迎指点讨论。
2、实现
第一步，代码基础框架如下
全部文字都放在一个<p>标签内。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>demo of starof</title>
<style>
.top{
margin:0 5%;
text-align:center;
}
.top span{
color:red;
}
</style>
</head>
<body>
<div class="top">
<p class="first"> <span> 亲爱的starof:</span><br/>
恭喜您获得快速升级年费资格，您仅需开通<span>4个月</span>会员，即可自动升级为尊贵的年费会员，差额部分享受<span>8折优惠</span>哦!
</p>
</div>
</body>
</html>
此时效果：
下图为了方便后面对比。
第二步，设在<p>的display为inline-block,实现居中。
因为p本身是个块级元素，我们下一步要以它为参照实现定位。所以需要设在display属性让它大小根据内容而定，同时实现居中。
增加下面css样式。
.top .first{
display:inline-block;
position:relative;
}
效果如下
看起来和上面很像，实际上已经发生了本质变化。
第三步，通过绝对定位实现目标效果。
增加下面css样式。<p>相对定位作为参照，第一个<span>绝对定位。
.top .first{...
position:relative;
}
.first span:first-child{
position:absolute;
}
此时效果如下：
如果觉得效果不理想，可通过left，top稍微调整一下。
.first span:first-child{
position:absolute;
left:;
top:-5px;
}
这就是我要的效果
第四步，完成其他部分
剩下的就都很简单了，完整代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>demo of starof</title>
<style>
.top{
margin:0 5%;
text-align:center;
}
.top span{
color:red;
}
.top .first{
display:inline-block;
position:relative;
}
.first span:first-child{
position:absolute;
left:0;
top:-5px;
}
.top input{
width:20%;
padding:8px 20px;
margin:5px;
background-color:#e9322a;
color:white;
font-size:18px;
border:1px solid #666;
border-radius:5px;
}
</style>
</head>
<body>
<div class="top">
<p class="first"> <span> 亲爱的starof:</span><br/>
恭喜您获得快速升级年费资格，您仅需开通<span>4个月</span>会员，即可自动升级为尊贵的年费会员，差额部分享受<span>8折优惠</span>哦! </p>
<div>
<input type="button" value="立即升级"/>
<p>已有<span>23919</span>人享此优惠</p>
</div>
</div>
</body>
</html>
3、浏览器兼容性
IE6，IE7不完全支持display:inline-block的写法。具体是对默认是display:block的元素设置display:inline-block无效，对默认是display:inline的元素设置display:inline-block可生效。所以要兼容IE6，IE7可替换标签。
本文作者starof,因知识本身在变化，作者也在不断学习成长，文章内容也不定时更新，为避免误导读者，方便追根溯源，请诸位转载注明出处：http://www.cnblogs.com/starof/p/4832947.html有问题欢迎与我讨论，共同进步。
css实现一个写信的格式的更多相关文章
- 纯 CSS 创建一个三角形
[要求]:用纯CSS创建一个三角形的原理是什么? ♪ 答: 把上.左.右三条边隐藏掉(颜色设为 transparent) [实现]: #demo { width: 0; height: 0; bord ...
- 用css实现一个空心圆，并始终放置在浏览器窗口左下角
用css实现一个空心圆,并始终放置在浏览器窗口左下角 div{ position:fixed; bottom:0; ...
- 用css制作一个三角形箭头
剑走偏锋——用css制作一个三角形箭头 通常,我们做上图那个三角形,一般都是做张图,而且需要两张,因为一般都是下拉菜单的效果,需要有个hover的样式,箭头是反的.那是不是有更好的办法呢,毕竟要用 ...
- 【CSS】如何用css做一个爱心
摘要:HTML的标签都比较简单,入门非常的迅速,但是CSS是一个需要我们深度挖掘的东西,里面的很多样式属性掌握几个常用的便可以实现很好看的效果,下面我便教大家如何用CSS做一个爱心. 前期预备知识: ...
- 使用css画一个箭头
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...
- 如何用css实现一个三角形？
昨天被人问到说如何用css实现一个三角形?em.... 当时被问到了,汗颜,今天找了一些帖子看了一下,也算是记录一下吧 代码如下: 实现效果:
- 纯CSS实现一个微信logo，需要几个标签？
博客已迁移至http://lwzhang.github.io. 纯CSS实现一个微信logo并不难,难的是怎样用最少的html标签实现.我一直在想怎样用一个标签就能实现,最后还是没想出来,就只好用两个 ...
- 3.纯 CSS 创作一个容器厚条纹边框特效
原文地址:3.纯 CSS 创作一个容器厚条纹边框特效 没有啥好点子呀,不爽 HTML代码: <div class="box"> <div class=" ...
- 2.纯 CSS 创作一个矩形旋转 loader 特效
原文地址:2.纯 CSS 创作一个矩形旋转 loader 特效 扩展后地址:https://scrimba.com/c/cNJVWUR 扩展地址:https://codepen.io/pen/ HT ...
随机推荐
- [DeviceOne开发]-白板的示例
一.简介 该demo通过do_Painterview这个组件实现画板的基本功能,模仿的是Appstore上的叫“白板”的应用,可以更改字体颜色,字体粗细,然后用手指进行绘制,可以回退,清屏,保存到相册 ...
- 2034-人见人爱A-B（c++实现）
Problem Description 参加过上个月月赛的同学一定还记得其中的一个最简单的题目,就是{A}+{B},那个题目求的是两个集合的并集,今天我们这个A-B求的是两个集合的差,就是做集合的减法 ...
- 【问题及解决】fonts/fontawesome-webfont.woff2 404 (Not Found)
问题: 虽然网页正常显示和运行,但是有2个字体文件出现404错误.像笔者这种强迫症是接受不了的. 解决: 因为笔者的服务器是虚拟主机,只需要在主机控制器平台添加对应的MIME类型即可. 这样服务器就支 ...
- HTML动画分类 HTML5动画 SVG库 SVG工具 Canvas动画工具
1.js配合传统css属性控制,可以使用setTimeout或者高级的requestAnimationFrame 2.css3 3.svg 4.canvas(当然,这个还是要配合js) 也许这么 ...
- 更改SAP的字段翻译
TC:SE63在SAP用户选择屏幕中,用鼠标选定一个栏位后按F1键,可以看到SAP对其具体解释,通常这种解释文本分为两部分,一部分为标题,一部分为正文.比如: 有时,SAP的翻译让人感觉很别扭,对于 ...
- silverlight如何通过单独部署的WCF站点访问sharepoint2013的图片库
最近有项目silverlight通过单独部署的WCF站点访问sharepoint2013的图片库,需要做个笑脸墙效果如下: 结果开发完毕后无法在SP站点显示出来.使用VS自带的WCF工具进行测试.如下 ...
- 我理解的OAuth 1.0a 的验证过程
故事梗概: 淘宝店主糖糖在京郊仓库存了一批大白兔奶糖,为了防止仓库钥匙被偷把仓库的钥匙交给了专业的钥匙保管员公司. 糖糖卖了一斤大白兔需要快递公司的小迪送货.快递员小迪找钥匙保管公司借钥匙,然后去京郊 ...
- iOS端项目注释规范附统一代码块
代码的注释经常被人忽略,以至于在后期维护的时候较为困难.我们准备在XX项目开始之前制定一套规范的注释体系,致力于达到就算维护人员改变也能快速上手的效果. 1.属性注释 属性注释 使用 /** 注释*/ ...
- iOS 获取emoji表情和拦截emoji表情
1 2 //将数字转为 #define EMOJI_CODE_TO_SYMBOL(x) ((((0x808080F0 | (x & 0x3F000) >> 4) | (x &a ...
- 内外分离接口依赖及UIScrollView知识点
1:Class Extension 还能巧妙的解决一个接口暴露问题 有些属性或者方法对外可以提供,有些只针对内部的类进行调用: // Sark.framework/Sark.h @interface ...