✔ TODAY

今日はショッピングページを完成する時間があります.
これは最も難しい実習です...

✔学習内容

NAVERショッピングページhtml
NAVER css
上のgithubのリンクを参照してください.

shop - main

#shop_main .list_item .list_half .list_half_header{
	position: relative;
	width: 100%;
	height: 62px;
	background-color: #ffffff;

	text-align: center;}

#shop_main .list_item .list_half .list_half_header .over-lay{
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);}

オーバーライド(Override)
先に来た兄弟は3次元後の兄弟は2次元だからrelativeを使うと、オベレーとh 3が重なります.
後から出てきた兄弟のz軸が高いので、上へ進みます.

選択的に塗りつぶす

#shop_main .list_item .list_half.list_half_header

中にダウンジャケット値を付与するが、同じ親がいる兄弟にダウンジャケットを付与したくない場合は、選択者優先順位でダウンジャケット値0を直接入れることができる.

#shop_main .list_item .list_half .list_half_header.list_half_bg{
	background-color: green;
	padding-top: 0;}

liタグをx軸

に変換する.

#shop_main .list_item .list_half .content-list{
	overflow: hidden;}

#shop_main .list_item .list_half .content-list.content-list-3 li{
	float: left;
	width: 33.33%;
	height: 100%; 
	border-right: #f0f0f0 solid 1px;

	text-align: center;}

1)ulタグ(適用するliの親タグ)を持つクラスをオーバーフローする:hidden apply.
float:leftをliラベルに適用する
2)liタグはブロック要素です.
display:inline-blockプロパティでは、x軸を整列できますが、レイヤが間違っています.
幅を31%に設定し、同じ行で整列できますが、間隔は一定ではありません.

display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;

3)上記のcss属性(flexを使用)をulに適用されるクラスに入力します.
💥💥すぐにliラベルを入れるのは適用されません💥💥
liラベルではなくulラベルに適用!
正確に言えば、
x軸整列を適用する親ラベルに適用
liのx軸を揃えるにはulに接触する必要があります

height :100%; 等相対値の場合の注意点
Liの高さ:100%;相対値を表します.
つまり、親に対する相対値です.
ただし、親ラベルulにはheight値は存在しません.相対値が正常に動作しない可能性があります.親ラベルに正しい値がない場合は、相対値を入力するのはよくありません.

imgにspanを追加すると、
list-2の画像に割引画像を挿入します.
画像収納キャビネットを作成し、zテクスチャを使用して画像を上に急転させます.

<ul class="content-list content-list-2">
   <li>
	<div class="content-img-wrap shop-border">
	   <img src="http://via.placeholder.com/130x90">
	   <span class="discount">50%</span>
	</div>
	<h3>부드럽게 감기는 말랑말랑 파우치 이불</h3>
	<span class="price">
	 <em>21,900원</em>
	</span>
   </li>

#shop_main .list_item .list_half .content-list.content-list-2 li .content-img-wrap{
	position: relative;
	width: 130px;
	height: 90px;}

#shop_main .list_item .list_half .content-list.content-list-2 li .content-img-wrap img{
	position: absolute;

	width: 100%;
	height: 100%;

ということで.
まず出てくるimgは3次元で、spanは2次元で、層が重なります.(画像の後ろにファンを挿入します.)
アップグレード/装飾

span

#shop_main .list_item .list_half .content-list.content-list-2 li .content-img-wrap .discount{
	position: absolute;
	display: block;
	width: 42px;
	height: 42px;
	background-color: orange ;
	border-radius: 50%;

	font-size: 14px;
	color: #ffffff;
	line-height: 42px;
	text-align: center;
	
	top: 6px;
	right: 5px;}

割引率画像を画像に入れないでください.
手書きラベルで飾ります.
同じ行のテキストに対して異なる効果サイクルを行います.

#shop_main .list_item .list_half .content-list.content-list-2 li .price em{
	font-size: 14px;
	font-weight: bolder;
}

font-weight:100~900に100単位の値を指定しますが、bolderに値を指定することもできます

Emラベルは基本的に傾斜しています.(異形体)置きたくなければ、フォントスタイル:馬を置かない.

list-row-3のliでflex効果を使用する
画像のサイズ設定(引き出しサイズ>画像100%)が重要です.

1行に並べられない場合は、liサイズ<画像サイズ+テキストサイズのテキストサイズでテキストのサイズが小さくなります.

#shop_main .list_item .list-row-3 li{
	display: flex;
	flex-wrap: wrap;
	align-items: center;

	border-bottom: solid 1px #f0f0f0;
	padding: 14px 19px 11px 19px;}

#shop_main .list_item .list-row-3 li:last-child{ border-bottom: none;}

#shop_main .list_item .list-row-3 li .list-img-wrap{
	width: 90px;
	height: 60px;}


#shop_main .list_item .list-row-3 li .list-img-wrap img{
	width: 100%;
	height: 100%;}

#shop_main .list_item .list-row-3 li . span{
	font-size: 12px;}

#shop_main .list_item .list-row-3 li .list-row-info h3{
	font-size: 13px;}

が重なる球標

を修正する

<div class="list-img-wrap shop-border">

#shop_main .list_item .list-row-3 {
	border-top: none;
}

上のコードには、クラスにブール値が重なる部分があります.
同じ分野では、次の3段階の部分が優先的に改善され、スケートでnone値が与えられ、ボルタ値が解消される.

✔学習内容の難点または未解決

リストが多くなり、構造が複雑になり、クラス間の関係や構造を把握するのに長い時間がかかりました.

✔ソリューションの作成

Googleの開発者ツールで構造と頭の中で構造を描き、理解しました.

属性に関する疑問点はグーグルで解決した.

学習の心得.

htmlの構造が少し複雑になって、うろうろし始めました...文法の関係は本当に重要です...
月曜日から火曜日まで個人的な理由でよく勉強できませんでした...体力