网站宽度一般是多少,百度seo培训公司,宁波关键词优化企业网站建设,网站重新设计需要多久一、目标 目标实现如下效果#xff1a; 二、完成 1、分析 这个效果看起来很简单#xff0c;实际上可能并不那么容易实现。 首先是全部东西都居中显示#xff0c;除了“亲爱的starof”这个称呼的地方。这也是难点#xff0c;也是本文要重点说的地方。 开始我尝试将“ 亲爱的…一、目标 目标实现如下效果 二、完成 1、分析 这个效果看起来很简单实际上可能并不那么容易实现。 首先是全部东西都居中显示除了“亲爱的starof”这个称呼的地方。这也是难点也是本文要重点说的地方。 开始我尝试将“ 亲爱的starof:” 和下面那段文字分别独立成两个段落一个居左一个居左。结果当然是不理想的因为“亲爱的starof”部分其实并不是真正意义上的居左而是以下面这段文字作为参考的一个居左。现在说说我的实现方法。首先全部文字都用p包裹inline-block显示然后绝对定位。具体过程如下各位如有不同见解或实现方式欢迎指点讨论。 2、实现 第一步代码基础框架如下 全部文字都放在一个p标签内。 !DOCTYPE html
html
head
meta charsetutf-8/
titledemo of starof/title
style
.top{
margin:0 5%;
text-align:center;
}
.top span{
color:red;
}
/style
/head
bodydiv classtopp classfirst span 亲爱的starof:/spanbr/恭喜您获得快速升级年费资格您仅需开通span4个月/span会员即可自动升级为尊贵的年费会员差额部分享受span8折优惠/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;
} 此时效果如下 如果觉得效果不理想可通过lefttop稍微调整一下。 .first span:first-child{
position:absolute;
left:0;
top:-5px;
} 这就是我要的效果 第四步完成其他部分 剩下的就都很简单了完整代码如下 !DOCTYPE html
html
head
meta charsetutf-8/
titledemo 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
bodydiv classtopp classfirst span 亲爱的starof:/spanbr/恭喜您获得快速升级年费资格您仅需开通span4个月/span会员即可自动升级为尊贵的年费会员差额部分享受span8折优惠/span哦! /pdivinput typebutton value立即升级/p已有span23919/span人享此优惠/p/div/div
/body
/html View Code 3、浏览器兼容性 IE6IE7不完全支持display:inline-block的写法。具体是对默认是display:block的元素设置display:inline-block无效对默认是display:inline的元素设置display:inline-block可生效。所以要兼容IE6IE7可替换标签。 本文作者starof,因知识本身在变化作者也在不断学习成长文章内容也不定时更新为避免误导读者方便追根溯源请诸位转载注明出处http://www.cnblogs.com/starof/p/4832947.html有问题欢迎与我讨论共同进步。转载于:https://www.cnblogs.com/starof/p/4832947.html
