一、目标
目标实现如下效果:
二、完成
1、分析
这个效果看起来很简单,实际上可能并不那么容易实现。
首先是全部东西都居中显示,除了“亲爱的starof”这个称呼的地方。这也是难点,也是本文要重点说的地方。
开始我尝试将“ 亲爱的starof:” 和下面那段文字分别独立成两个段落,一个居左,一个居左。结果当然是不理想的,因为“亲爱的starof”部分其实并不是真正意义上的居左,而是以下面这段文字作为参考的一个居左。现在说说我的实现方法。首先全部文字都用
包裹,inline-block显示,然后绝对定位。具体过程如下,各位如有不同见解或实现方式欢迎指点讨论。
2、实现
第一步,代码基础框架如下
全部文字都放在一个
标签内。
demo of starof.top{
margin:0 5%;
text-align:center;
}
.top span{
color:red;
}
亲爱的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:;
top:-5px;
}
这就是我要的效果
第四步,完成其他部分
剩下的就都很简单了,完整代码如下:
demo of starof.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;
}
亲爱的starof:
恭喜您获得快速升级年费资格,您仅需开通4个月会员,即可自动升级为尊贵的年费会员,差额部分享受8折优惠哦!
已有23919人享此优惠
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创建一个三角形的原理是什么? ♪ 答: 把上.左.右三条边隐藏掉(颜色设为 transparent) [实现]: #demo { width: 0; height: 0; bord ...
用css实现一个空心圆,并始终放置在浏览器窗口左下角
用css实现一个空心圆,并始终放置在浏览器窗口左下角 div{ position:fixed; bottom:0; ...
用css制作一个三角形箭头
剑走偏锋——用css制作一个三角形箭头 通常,我们做上图那个三角形,一般都是做张图,而且需要两张,因为一般都是下拉菜单的效果,需要有个hover的样式,箭头是反的.那是不是有更好的办法呢,毕竟要用 ...
【CSS】如何用css做一个爱心
摘要:HTML的标签都比较简单,入门非常的迅速,但是CSS是一个需要我们深度挖掘的东西,里面的很多样式属性掌握几个常用的便可以实现很好看的效果,下面我便教大家如何用CSS做一个爱心. 前期预备知识: ...
使用css画一个箭头
如何用css实现一个三角形?
昨天被人问到说如何用css实现一个三角形?em.... 当时被问到了,汗颜,今天找了一些帖子看了一下,也算是记录一下吧 代码如下: 实现效果:
纯CSS实现一个微信logo,需要几个标签?
博客已迁移至http://lwzhang.github.io. 纯CSS实现一个微信logo并不难,难的是怎样用最少的html标签实现.我一直在想怎样用一个标签就能实现,最后还是没想出来,就只好用两个 ...
3.纯 CSS 创作一个容器厚条纹边框特效