Home > Developer > Web Develop
The goal achieves the following effects:
Ii. Completion 1, analysisThe effect looks simple and may not actually be easy to implement.
First, everything is centered, except for the name "Dear Starof". This is also a difficult point, but also the focus of this article to say the place.
At first I tried to "Dear Starof:" and the following paragraph of the text separately into two paragraphs, one left, one left. The result is of course not ideal, because "Dear Starof" part is actually not the true meaning of the left, but the following text as a reference to the left. Now, let's talk about my approach to implementation. First of all the text with <p> package, Inline-block display, and then absolutely positioning. The process is as follows, and you are welcome to talk about different ideas or ways of achieving them.
2, the implementation of the first step, the code base framework is as followsAll text is placed within a <p> tag.
<!DOCTYPE HTML><HTML><Head><MetaCharSet= "Utf-8"/><title>Demo of Starof</title><style>. Top{margin:0 5%;text-align:Center;}. Top span{Color:Red;}</style></Head><Body> <Divclass= "Top"> <Pclass= "First"> <span>Dear Starof:</span><BR/>congratulations on your eligibility for a fast-upgrade annual fee, you only need to open<span>4 months</span>Member, you can automatically upgrade to the elite annual fee membership, the difference portion enjoy<span>80 percent off</span>Oh, yes! </P> </Div></Body></HTML>
This effect:
In order to facilitate the comparison later.
The second step, the display for the <p> is Inline-block, to achieve the center.Because P itself is a block-level element, the next step is to use it as a reference for positioning. So it needs to be set in the display property so that its size depends on the content and is centered at the same time.
Add the following CSS style.
. Top. First {display:inline-block; position : relative ; }
The effect is as follows
It looks like it, and it actually has changed in nature.
The third step is to achieve the target effect by absolute positioning.Add the following CSS style. <p> relative positioning as a reference, the first <span> absolute positioning.
. Top. First {... position:relative;} . First Span:first-child {position:absolute;}The effect is as follows:
If you feel the effect is not ideal, can be slightly adjusted by Left,top.
. First Span:first-child {position:absolute; Left:0; top:-5px;}That's the effect I want.
Fourth step, complete other partsThe rest is simple and the complete code is as follows:
<!DOCTYPE HTML><HTML><Head><MetaCharSet= "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> <Divclass= "Top"> <Pclass= "First"> <span>Dear Starof:</span><BR/>congratulations on your eligibility for a fast-upgrade annual fee, you only need to open<span>4 months</span>Member, you can automatically upgrade to the elite annual fee membership, the difference portion enjoy<span>80 percent off</span>Oh!</P> <Div> <inputtype= "button"value= "Upgrade Now"/> <P>Already have<span>23919</span>People enjoy this offer</P> </Div> </Div></Body></HTML>View Code
The author starof, because the knowledge itself in the change, the author is also constantly learning and growth, the content of the article is not updated regularly, in order to avoid misleading readers, convenient tracing, please reprint annotated source: http://www.cnblogs.com/starof/p/4832947. HTML has a problem welcome to discuss with me, common progress.
CSS implements a letter-writing format
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
