July, 1 (2)

21318 ワード

1)July,1(1)で行ったリストの前にポイントがあります.
これはulラベルによるものです.取り除きましょう.

.friends-lists {list-style: none;}

2)aラベルは生まれながらにして字に下線があり、
フォント色が青色のcss遺伝子を含む.青を変更するには、基本プロパティを変更します.
下のバーの削除+青い文字の削除
(初回入力#00000ヘルクサコード)

.friends-lists .friends-lists a{
	color: #000000;
    text-decoration: none;}

(こつこつ)

3)ココアのように画像のラウンド処理を行う

.friends-lists .friends-lists a .friends-thumbnail{
border: solid 2px gray;	
border-radius:  20px;}

border=枠線、solid=実線、gray=枠線色、border-radius=枠線が円
応用すれば!

へへへs 2
border-radius:20 pxちょっと四角な円
正しい原型を作りたいならborder-radius:50 pxにしましょう.
4)フォントサイズと色の変更

これで名前と紹介色を変更できます.
KakaoTalkに関する基本設計は終了した.
5)カスケードの適用
友達の名前を赤に変えたいし、文字の大きさも50 pxに変えたい.
:コードは変更できますが、既存のコードは保持されます.

.friends-lists .friends-lists a .friend-info .friend-name {
	font-size: 20px;
	color: #000000;}

.friends-lists .friends-lists a .friend-info .friend-intro {
	font-size: 15px;
	color: #c8c8c8;}

/* Custom */
.friends-lists .friends-lists a .friend-info .friend-name {
	font-size: 50px color:  red;}

元のコードを一定に保つ場合、今日学んだカスケード設計を利用して、
隠す可能性もある.
ここでチップ!
設計が正常であれば、
その他の部分は正常に適用されていますが、サムネイル設計が適用されていない場合
開発者ツールによる表示と変更が可能

入力したファイルパス、ファイル名が正しくない場合、cssマスターは有効にならない可能性があります.
ex)

<link rel="stylesheet" type="text/css" href="css/style.css">

カスケード・コードの確認と説明

並ぶ理由は?
style.css:1街(cssの15行目コード)font size:20 px,color:#00000000黒、style.Chromeブラウザによると、css:26(css 26行目のコード)が上書きされています.検査でわかりやすい!
5)NAVER氷刃面設計作業

코드를 입력<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>

<ul class="living-list">
	<li class="living-item">
		<a href="#">

			<img src="https://via.placeholder.com/170x114" class="living-thumbnail">
			<div class="living-info">
				<span class="type">리빙</span>
				<h3 class="title">30평대 아파트, 따뜻한 느낌의 침실</h3>
				<p class="paragraph">Nice to meet you Nice to meet you Nice to meet you Nice to meet you Nice to meet you Nice to meet you Nice to meet youNice to meet you Nice to meet you Nice to meet you</p>


				<div class="date-wrap">
					 <span class="source">유닛</span>
					 <span class="date">3개월 전</span>
				</div>
			</div>
		</a>
	</li>

	<ul class="living-list">
	<li class="living-item">
		<a href="#">
			<img src="https://via.placeholder.com/170x114" class="living-thumbnail">
			<div class="living-info">
				<span class="type">리빙</span>
				<h3 class="title">아이있는 집 주방 1년 간의 소소한 변화</h3>
				<p class="paragraph">Nice to meet you Nice to meet you Nice to meet you Nice to meet you Nice to meet you Nice to meet you Nice to meet youNice to meet you Nice to meet you Nice to meet you</p>


				<div class="date-wrap">
					 <span class="source">miju</span>
					 <span class="date">1개월 전</span>
				</div>
			</div>
		</a>
	</li>


</ul>



</body>
</html>

css)

.living-list {list-style: none;}
.living-list .living-item a {
	color: #000000;
	text-decoration: none;}

.living-list .living-item .living-info .type{
		color: #c08d31;
		font-weight: 700;
		font-size: 12px;}

.living-list .living-item .living-info .title{
			font-size: 13px;
			color: #000000;}

.living-list .living-item .living-info .paragraph {
	font-size: 13px;
	color: #404040;
	line-height: 10px;
} 

.living-list .living-item .living-info .date-wrap .source,
.living-list .living-item .living-info .date-wrap .date
{ font-size: 12px; color: #505050; }


.living-list .living-item .living-info .date-wrap .date
{color: grey;} 

.living-list .living-item .living-info .date-wrap .date:before
{ content: '-'; } 

.living-list .living-item:hover {
	background-color: pink;
}


.living-list .living-item a:hover .living-info .title {
	text-decoration; underline;}

Reference

この問題について(July, 1 (2)), 我々は、より多くの情報をここで見つけました https://velog.io/@jiwonpflute/July-1-2

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol

freertos信号量まとめ

[Greedy]ジャージ