ホームページ >ウェブフロントエンド >htmlチュートリアル >css は、書き込み形式を実装します_html/css_WEB-ITnose
css は、書き込み形式を実装します_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:36:221898ブラウズ
1. 目標
目標は次の効果を達成することです:
2. 完了1. 分析
この効果は非常に単純に見えますが、実際にはそう簡単に達成できるものではありません。
まず、タイトル「Dear starof」と呼ばれる場所を除いて、すべてが中央に表示されます。これが難しさでもあり、この記事の焦点でもあります。
最初は、「Dear starof:」と以下のテキストを 2 つの別々の段落に分割しようとしました。1 つは左側、もう 1 つは左側です。もちろん、結果は理想的ではありません。なぜなら、「Dear starof」の部分は、実際には本当の意味での左翼ではなく、以下のテキストを参考にした左翼であるためです。それでは、私の実装方法について話しましょう。まず、すべてのテキストが e388a4556c0f65e1904146cc1a846bee で囲まれ、インラインブロックで表示され、絶対位置に配置されます。具体的なプロセスは次のとおりです。異なる意見や実装方法がある場合は、ご指導とご議論をお願いします。
2. 実装
最初のステップ、基本的なコードフレームワークは次のとおりです
すべてのテキストは e388a4556c0f65e1904146cc1a846bee タグ内に配置されます。
<!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> この時の効果:
下の写真は、後で比較するためのものです。
2 番目のステップは、e388a4556c0f65e1904146cc1a846bee の表示をインラインブロックに設定して中央揃えを実現することです。
p 自体はブロックレベルの要素であるため、次のステップはそれを参照として使用して位置決めを行うことです。したがって、コンテンツに応じてサイズを変更し、同時にセンタリングを実現するには、表示属性を設定する必要があります。
次の CSS スタイルを追加します。
.top .first{display:inline-block;position:relative;} 効果は次のとおりです
上記と非常によく似ていますが、実際には本質的な変更が加えられています。
3 番目のステップは、絶対位置決めを通じて目標の効果を達成することです。
次の CSS スタイルを追加します。 e388a4556c0f65e1904146cc1a846bee相対位置は基準となり、最初の45a2772a6b6107b401db3c9b82c049c2は絶対位置となります。
.top .first{...position:relative;}.first span:first-child{position:absolute;} この時の効果は以下の通りです:
効果が理想的ではないと感じる場合は、左と上で少し調整できます。
.first span:first-child{position:absolute;left:0;top:-5px;} これが私が望むエフェクトです
4番目のステップは、他の部分を完成させることです
残りは非常に簡単で、完全なコードは次のとおりです:
<!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>
この記事の執筆者である starof は、知識自体が変化しており、執筆者は常に学習し成長しているため、読者の誤解を避け、出典を追跡しやすくするために、記事の内容も随時更新されます。転載時出典： ご不明な点がございましたら、お気軽にご相談いただき、一緒に進めてまいります。