2021年06月07日、開発ログ

学習の内容

有用なクロム拡張プログラム
最高のChrome Extensionsブログで紹介されている拡張プログラムです.
Wappalyzer-Webページのテクニカルスタックを教えます.(全部展示しない)
CSS Viewer
WhatFont
Lorem Ipsum Generatorは任意の文を作成します.
ColorZilla
ネイバーマスターコピー猫

頂部、主左側

上端

メイン左(黄色)

タイトルセクション:検索、gnb(ナビゲーション)
主な部分:
基点は、主幅値1130 px(中央揃え)を使用して作成されます.
CSSの共通部分を作成します(初期化).
セクションの検索
Input、buttonタグを使用します.
flexを使用して集中的にソートします.
Input、buttonにはinlineプロパティがあり、タグ間に空白が表示され、flexによって空白が除去されます.
inputのwidthからbuttonのサイズを減算します.

 width: calc(100% - 52px);

inputがフォーカスの場合、outlineはキャンセルされます.

input:focus {
	outline: none;
}

ナビゲーションセクション

「メール」という単語の上部の行は、検索領域でborder-bottomを使用します.
下部の線はborderではなくbox-shadow領域です.
メニューはul、liを使用して作成されます.
display: inline-block; 水平方向に配置します.
しゅぶん
メインラベルはmainです.
プライマリパーティションからdivまで、左パーティションと右パーティションに分かれます.
float leftとrightを使用します.
バナー広告、ニュース、垂直リスト、水平リストの4つの部分.
バナー広告セクションは検索ボックスに置き換えられます.

ニュースセクション
上部(タイトルとビューオプション)領域と下部のメディアリストに分かれます.
上部はh 2とbuttonからなる.
リスト部分はul,liからimgを構成する.タグを省略します.
上部表示:flex;配置を使用します.
リストセクションではfloatを使用します.
ul,liタグのborder部分が重なるためnth−childを用いてborder部分を除去する.
ブログセクション
見出しセクション、ナビゲーションセクション、垂直リスト、水平リスト.

ブログタイトル
h 3、span、stringタグを使用します.
flexを使用して左、右に配置します.
ブログナビゲーション
nav、ul、li、aタグを使用します.
liラベルはfloatを使用するため、ulラベル:hiddenにオーバーフローします.属性を追加して、サブアイテムの高さ値を識別します.
aラベルは幅:100%;height: 100%; このオプションを設定すると、文字領域の一部ではなくliのシャドウ全体をクリックできます.
aタグのテキストは、行-高さ、text-alignを使用して中央揃えされます.

ブログ垂直リスト
ul、li、a、ラベル、および左側imgラベル、右側span、h 4 p 4ラベルを使用して作成します.
flexを使用して、ラベルの内容を左揃えに水平に配置します.
ブログの横書き
ul、li、上部がimg、下部がh 4、spanタグ.
blockプロパティとして配置されるためflex水平配置を使用します.

学習中の難点や未解決の問題

ないようです.

ソリューションの作成

学習の心得.

ツールを使用するほど、レイアウトが速くなります.
同じレイアウトでも似ています.
同じ色、フォント、マージンが追加され、NAVERに似ているような感じがします.