css实现一个写信的格式

当前位置 : 首页 > 网页制作 > CSS > css实现一个写信的格式

css实现一个写信的格式

来源: 作者: 时间:2016-01-20 09:22
1、分析这个效果看起来很简单,实际上可能并不那么容易实现。首先是全部东西都居中显示,除了亲爱的starof这个称呼的地方。这也是难点,也是本文要重点说的地方。开始我尝试将
1、分析
这个效果看起来很简单,实际上可能并不那么容易实现。
 
首先是全部东西都居中显示,除了“亲爱的starof”这个称呼的地方。这也是难点,也是本文要重点说的地方。
 
开始我尝试将“ 亲爱的starof:” 和下面那段文字分别独立成两个段落,一个居左,一个居左。结果当然是不理想的,因为“亲爱的starof”部分其实并不是真正意义上的居左,而是以下面这段文字作为参考的一个居左。现在说说我的实现方法。首先全部文字都用<p>包裹,inline-block显示,然后绝对定位。具体过程如下,各位如有不同见解或实现方式欢迎指点讨论。
 
2、实现
第一步,代码基础框架如下
全部文字都放在一个<p>标签内。
 
 
<!DOCTYPE >
<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>

 

 
Tag:
上一篇:html字体字形控制
下一篇:HTML模板
网友评论

<