css は、書き込み形式を実装します_html/css_WEB-ITnose-htmlチュートリアル-php.cn

css は、書き込み形式を実装します_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:36:22

オリジナル

1852 人が閲覧しました

1. 目標

目標は次の効果を達成することです:

2. 完了

1. 分析

この効果は非常に単純に見えますが、実際にはそう簡単に達成できるものではありません。

まず、タイトル「Dear starof」と呼ばれる場所を除いて、すべてが中央に表示されます。これが難しさでもあり、この記事の焦点でもあります。

最初は、「Dear starof:」と以下のテキストを 2 つの別々の段落に分割しようとしました。1 つは左側、もう 1 つは左側です。もちろん、結果は理想的ではありません。なぜなら、「Dear starof」の部分は、実際には本当の意味での左翼ではなく、以下のテキストを参考にした左翼であるためです。それでは、私の実装方法について話しましょう。まず、すべてのテキストが

で囲まれ、インラインブロックで表示され、絶対位置に配置されます。具体的なプロセスは次のとおりです。異なる意見や実装方法がある場合は、ご指導とご議論をお願いします。

2. 実装

最初のステップ、基本的なコードフレームワークは次のとおりです

すべてのテキストは

タグ内に配置されます。

<!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 番目のステップは、
の表示をインラインブロックに設定して中央揃えを実現することです。

p 自体はブロックレベルの要素であるため、次のステップはそれを参照として使用して位置決めを行うことです。したがって、コンテンツに応じてサイズを変更し、同時にセンタリングを実現するには、表示属性を設定する必要があります。

次の CSS スタイルを追加します。

.top .first{display:inline-block;position:relative;}

ログイン後にコピー

効果は次のとおりです

上記と非常によく似ていますが、実際には本質的な変更が加えられています。

3 番目のステップは、絶対位置決めを通じて目標の効果を達成することです。

次の CSS スタイルを追加します。

相対位置は基準となり、最初のは絶対位置となります。

.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 は、知識自体が変化しており、執筆者は常に学習し成長しているため、読者の誤解を避け、出典を追跡しやすくするために、記事の内容も随時更新されます。転載時出典：ご不明な点がございましたら、お気軽にご相談いただき、一緒に進めてまいります。