devlogs-210715

4156 ワード
大邱AI学校 開発ログ html CSS テキストリンク

簡単な概要


今日はKidsgaoサイトのレッスンを終えます.

学習の内容


位置のヒント

  • 個の引き出しキャビネットを代表する保護者にとって、position: relative;を用いて基準点を設けることが最も便利で安全な方法である
    • .

    フローティングチップ

  • 特定の条件(ex:異なる表示サイズ)でfloatアプリケーションを元に戻したい場合は、float: initial;に調整できます.

    困難な内容


    1節(kitchen)にA、B、Cの領域を設けるべきであり、授業中にfloatを用いてA (float: left) C (float: right)と位置づけ、設計上は中間に位置すべきBにはfloatはない.html上でA、C、Bの順にレイアウトを作成しました.
    なぜか、自分が仕事をしていればhtmlでA、B、Cの順にしてcssの仕事をしているので、floatしか使わない方法を探していたのですが、結果として講義では画面の大きさの変化にもっと簡潔に適応している様子を表現していました.次はこのセクションのコードです.
    HTML
<div class="kitchen-left"></div>
<div class="kitchen-right"></div>
<div class="kitchen-center">
	<div class="kitchen-steam"></div>
	<div class="kitchen-smoke"></div>
</div>
    CSS
#kitchen .kitchen-left {
  float: left;
  width: 253px;
  height: 384px;
  background-image: url(../img/kitchen/pan.png);
}
#kitchen .kitchen-right {
  float: right;
  width: 243px;
  height: 132px;
  background-image: url(../img/kitchen/pot.png);
}
#kitchen .kitchen-center {
  position: relative;
  clear: both;
  left: 50%;
  margin-left: -275px;
  top: -100;
  width: 483px;
  height: 457px;
}

    解決策


    いろいろな値段を加えれば、違いがわかります.私が以前整理したfloatとclear: both;の部分を再確認しました.

    感想


    多くの異なる内容は現れなかった.また、どのサイトを作成する際にも、一貫した規則性を持つコードを作成し、誰もが私のコードを簡単に理解できるようにし、メンテナンスを難しくしないことが重要なようです.

    マイコード


    最後に私のコードはここにアップロードされました.
    • Serverless Framework Expressコンポーネントを使用したテキスト翻訳ツールの迅速な作成
    JavaでPDFビューアー設定を設定する方法