21.07.30

学習内容

昨日は少ないニュースホームページの右側のエリアを終え、テレビの芸能ページも制作しました.7月に月末評価を行った.
210730 NAVERニュース、企業ニュース実習コード

▶ニュースホームページ

ネイバーニュースのホームページを真似した結果

-メイン右側の領域

ここで厄介な部分はこの部分です.下図は実際のページの様子です.

ご覧のように、実際のページでは多くの効果がありますが、それらの部分を除いて、レイアウトだけを練習しました.

#news-main .news-right #news-today .news-today-body {
	padding: 13px 20px 20px;
	border: 1px solid #e8e8e8;
}

#news-main .news-right #news-today .news-today-body .news-notice-lists li h4 {
	display: inline-block;
	font-size: 12px;
	vertical-align: middle;
	margin-right: 8px;
}

#news-main .news-right #news-today .news-today-body .news-notice-lists li p {
	display: inline-block;
	font-size: 12px;
	vertical-align: middle;	
}

四隅はニュースだらけ-今日-bodyこの領域にpaddingを追加し、そこにulliラベルで各内容を入れます.ダウンジャケットを加えると、それぞれの空き地の天気運の下のborderは両端に届かない.

cospi左の空白はnews-ody-bodyのダウンジャケット値による空白ですが、cospi左の空白はcosportエリアのダウンジャケット値です.

私の結果はこうでした.今日の次の分野は既存の仕事の繰り返しなので、授業では省略しました.

-main次の行領域

mainとfooterの間には1行の領域があります.

作成が完了すると、上記各分野のニュースで作成したborderと重なることが起こります.
この問題を解決するために,左側最大領域のpadding−blottomを調整した.

#news-main .news-left {
	float: left;
	width: 750px;
	padding-right: 26px;
	padding-bottom: 100px
}

-ニュースホームのフッター領域

授業は省略したが、残念ながら自分でやらなかった.

普段はバーチャルセレクタbeforeで作成した文字間の「|」タグを使っていますが、実際のページでborder-leftを使っているのでついてきました.

#news-footer ul li {
    padding: 0 5px 0 7px;
    border-left: 1px solid #ccced0;
}

▶テレビ芸能ページ

プライマリ領域のent-csection-4に動作します.

-見出し領域

他のページとは異なり、コンテナで中央ソートされていません.
総じて言えば、このタイトル部分は今まで実習してきたNAVERページとは異なるユニークな点が多いので、ぜひもう一度見てみたいと思います.

#ent-header .ent-header-center li {
	font-weight: 700;
	font-size: 16px;
	border-bottom: solid 2px #fff;

	padding: 0 15px 2px;
}

#ent-header .ent-header-center li.on {
	border-bottom: solid 2px #e24587;
}

#ent-header .ent-header-center li.on a {
	color: #e24587;
}

liタグにborder-bottom値を入れると、TVエンターテインメントホームの文字を超えます.これはaラベルに入れることを意味します.

#ent-header .ent-header-center li {
	font-weight: 700;
	font-size: 16px;
	
	padding: 0 15px 2px;
}

#ent-header .ent-header-center li a {
	border-bottom: solid 2px #fff;
}

#ent-header .ent-header-center li.on a {
	color: #e24587;
	border-bottom: solid 2px #e24587;
}

コードを少し移動すると、結果はこうなります.

溝と下線の間隔はpadding:015 px 2 pxである.使用する値ではなく、フォント自体の空白です.したがって、必ず基準値を加えなければならない場合は、aラベルに移動して調整することもできます.

#ent-header .ent-header-center li {
	font-weight: 700;
	font-size: 16px;
	
	padding: 0 15px;
}

#ent-header .ent-header-center li a {
	display: inline-block;
	border-bottom: solid 2px #fff;

	padding-bottom: 2px;
}

少しの空白で正常に動作します.
タイトルの右側の領域を作成します.

※以前は兄弟関係でマッキンタ、バトゥムを使用していた場合、共通領域では大きな値と小さい値のマッキンゼーが合併することがありました.でも今は共通の空白があるけど独立してる兄弟関係における合併は、マジンタ、バトゥムのみで発生し、左、右では発生しない.※

border-radius: 3px 3px 0 0;:ヘッダごとに異なる値を指定することもできます.授業中に使わなかっただけです.

rgbaの透明値は、前の0を省略することができる.

background-color: rgba(0, 0, 0, .56);

letter-spacing: (숫자)px;:ワード間隔を調整する属性

-メイン領域

レイアウトが多いので,よい類名をつけなければならない.

以前何度も作ったulliを作ります.空白と間隔をきれいに整理する.

実際には、クラスの作成に慣れており、大幅に削減されていますが、実際の操作で問題が発生する可能性がありますので、自分で練習するときに大部分の分類とIDを指定できます.

#ent-main .ent-left #ent-section-3 li span {
	position: absolute;
	display: block;
	max-width: 100%;
	background-color: #f40080;

	padding: 0 5px;

	left: 0;
	top: 0;

	font-size: 11px;
	font-weight: 700;
	color: #fff;

	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

▶略語属性およびdisplay: block;、max-width: 100%;がコードに含まれていない場合、テキストの長さと同じピンク色の部分は下に下がります.

したがってmax-widthを使用します.widthを使用するには、display: block;を追加します.
-ビジネス・ヒント!max-width,min-width適切に運用すれば、私が望む場所で略語を生み出すことができます.

#ent-main .ent-left #ent-section-4 .btn-more {
	display: block;
}

buttonタグは、基本的にinline-block要素の性質を有する.そしてグレーをディボルトに変更しました.

-2012年7月末評価

授業中に2~3時の間に月末評価を行いました.基本的には基本的な問題なので、一筆消してもいいです.しかし、私はいくつかの問題を学んだが、覚えていない概念+学んだことのない内容にぶつかった.忘れた内容や新しいコンセプトをチェックできてよかったです.
まず、関連概念だけをチェックして、夜に確認して修正/整理します.
6日값이 auto일 경우, 부모 요소와 같은 값을 가진다.事前に知っていたのですが、正しい文で確認して少しポーズをとるという概念です.
10日.test > div { color: red; }中間>このマークは習ったことのない記憶のようです.サブアイテムの記号を表示します.
11日です.@media screen and (max-width: 700px) {}screenを覚えていないので私の開発ログを見たら書いてあったので一瞬びっくりしました...ほほほ、ただ忘れただけです.ユーザーを表す画面
17日display:noneおよびvisibility:hiddendisplayの属性値はhiddenと表示されていますが、見たことがないのに、瞬間hiddenはありますか?しながら検索します.問題にすっとだまされた.可視性属性は習ったことがないようですが、この問題で学びました.
多くの人がコスプレを活用するコンセプトを提案しています.
15日と20日は少しカードがあるので後で書きましょう

困難な内容

昨日もmax-widthを見て、今日は省略符と一緒に書きました.よく出てくる内容ですが、今日改めて見るとなぜか急に見慣れなくなります上にdisplay blockと一緒に書いてあるコードを見直して、おなじみになりました.

JSまで行くには、一度に大量の進度を歩いて、少し骨が折れるような気がします.何も知らない時より少しスピードが出てきましたが、学ばなければならないことも多くなってきたので、進度があまり良くなくて憂鬱でした.しかも、以前2回聞いたことがあり、少し時間がかかった部分を復習した方が脳に入りやすくなり、今は進度を落とすために繰り返し勉強を断念しているので、直接過去を見ている感じが強く、不安です.

解決策

公式のようにしか暗記できません.

これは...頭の中に詰め込むしかないと思います.短時間でやりたいなら.理解できなければ、授業時間のほかに、勉強時間を増やすかもしれません.今周の忙しいことは周末までに解决してほしい.

に感銘を与える

今日の授業も授業でしたが、月末の評価が印象的でした.これらの問題は基本的な問題だが、重要だ.その中の概念が混同されている問題は今日必ずもう一度温めなければならない.