8月23日Verlog
学習の内容
https://www.twitch.tv/
[html]
コンテンツ領域の配置操作
:top(nav高さ値)、left(left area幅値)、right(0)、bottom(0)を適用してnav、left area領域以外のすべての領域を占有します.
overflow-y
:content領域のみに垂直スクロールを適用するには
:overlayとautoは同じ結果で表示されます.
オーバーフロー-y未適用時
オーバーフロー-yの場合は
[html]
背景プロパティ
:背景画像を適用する際に使用する属性値を任意の順序で1行に並べて適用できます.
:通常、コンテンツセットとして設計されたimgが使用されます.
:ブラウザの変化に応じて元のスケールを維持し、自然な効果を表示します.
[css]
[css]
[css]
[html]
[css] min-widthを適用すると、サブ領域(left area、内容はいずれも3次元)の幅値を識別するために、3次元位置と高さ値 を追加する.
詳細
コードは、スクロールに関連するレイアウトの歪みを防止する
https://gromo.github.io/jquery.scrollbar/demo/basic.html
Twitch実習#3
https://www.twitch.tv/
4. Content
こうぞう
[html]
<div id="content">
<div class="content_banner"></div>
<div class="video_section"></div>
</div>#content {
position: absolute;
top: 50px;
left: 240px;
right: 0;
bottom: 0;
overflow-y: overlay;
/*overflow-y: auto;*/
padding: 0 30px
}コンテンツ領域の配置操作
:top(nav高さ値)、left(left area幅値)、right(0)、bottom(0)を適用してnav、left area領域以外のすべての領域を占有します.
overflow-y
:content領域のみに垂直スクロールを適用するには
:overlayとautoは同じ結果で表示されます.
オーバーフロー-y未適用時
(1) content banner
[html]
<div class="content_banner">
<div class="layer">
<div class="txt_wrap">
<h2>Hello</h2>
<p>Nice to meet you</p>
</div>
</div>
</div>#content .content_banner {
position: relative;
width: 100%;
height: 350px;
margin-top: 20px;
margin-bottom: 30px;
background: url(../img/aurora.jpg) no-repeat bottom;
background-size: cover;
}
.content_banner .layer {
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.3);
top: 0;
left: 0;
}
.content_banner .layer .txt_wrap {
position: absolute;
right: 100px;
top: 60px;
}
.content_banner .layer .txt_wrap h2 {
color: #ffffff;
opacity: 0.8;
margin-bottom: 5px;
}
.content_banner .layer .txt_wrap p {
color: #ffffff;
opacity: 0.8;
}背景プロパティ
:背景画像を適用する際に使用する属性値を任意の順序で1行に並べて適用できます.
:通常、コンテンツセットとして設計されたimgが使用されます.
background-size: cover;:画像が自動的に拡大・縮小されます.:ブラウザの変化に応じて元のスケールを維持し、自然な効果を表示します.
tagデフォルト
[css]
#content .tag_wrap {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: center;
margin-top: 8px;
}
#content .tag_wrap .tag {
padding: 0 8px;
height: 20px;
background-color: rgba(0, 0, 0, 0.05);
border-radius: 9000px;
font-size: 12px;
font-weight: 600;
color: #000000b3;
line-height: 20px;
margin-right: 5px;
}
#content .tag_wrap .tag:last-child {
margin-right: 0;
}titleデフォルト
[css]
#content .title_wrap {
padding-bottom: 10px;
}
#content .title_wrap h2 {
font-size: 18px;
font-weight: 600;
}text wrapデフォルト
[css]
#content .txt_wrap h3 {
font-size: 14px;
font-weight: 600;
max-width: 240px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin-bottom: 3px;
}
#content .txt_wrap .source,
#content .txt_wrap .game {
font-size: 13px;
color: #53535f;
max-width: 240px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}(2) video section
[html]
<div class="video_section">
<div class="title_wrap">
<h2>취향 저격 생방송 채널</h2>
</div>
<ul>
<li>
<a href="#">
<div class="img_wrap">
<img src="https://via.placeholder.com/302x170">
<span class="mark">생방송</span>
<span class="count">시청자 1.5만명</span>
</div>
<div class="video_info">
<img src="https://via.placeholder.com/40">
<div class="txt_wrap">
<h3>침펄풍 51가지 게임</h3>
<p class="source">침착맨 (zilioner)</p>
<p class="game">Clubhouse Games: 51 Worldwide Classics</p>
<div class="tag_wrap">
<span class="tag">한국어</span>
</div>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="img_wrap">
<img src="https://via.placeholder.com/302x170">
<span class="mark">생방송</span>
<span class="count">시청자 2,063명</span>
</div>
<div class="video_info">
<img src="https://via.placeholder.com/40">
<div class="txt_wrap">
<h3>Playoffs Round2 Match1 | GEN vs NS | 2021 LCK CL Summer</h3>
<p class="source">LCK_Korea</p>
<p class="game">League of Legends</p>
<div class="tag_wrap">
<span class="tag">e스포츠</span>
<span class="tag">한국어</span>
</div>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="img_wrap">
<img src="https://via.placeholder.com/302x170">
<span class="mark">생방송</span>
<span class="count">시청자 5,111명</span>
</div>
<div class="video_info">
<img src="https://via.placeholder.com/40">
<div class="txt_wrap">
<h3>쫀득) 와나나 차 토크 4시 / 2부 디붕이 강화 / 3부 군단장 w.사과몽 </h3>
<p class="source">쫀득이_ (pjs9073)</p>
<p class="game">LOST ARK</p>
<div class="tag_wrap">
<span class="tag">한국어</span>
</div>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="img_wrap">
<img src="https://via.placeholder.com/302x170">
<span class="mark">생방송</span>
<span class="count">시청자 5,877명</span>
</div>
<div class="video_info">
<img src="https://via.placeholder.com/40">
<div class="txt_wrap">
<h3>오늘 못깨면 난 사람아님 ㅇㅅㅇ</h3>
<p class="source">녹두로 (nokduro)</p>
<p class="game">Jump King</p>
<div class="tag_wrap">
<span class="tag">한국어</span>
</div>
</div>
</div>
</a>
</li>
</ul>
</div>.video_section ul {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: stretch;
}
.video_section ul li {
padding-bottom: 20px;
}
.video_section ul li a .img_wrap {
position: relative;
width: 302px;
height: 170px;
}
.video_section .img_wrap img {
width: 100%;
height: 100%;
}
.video_section .img_wrap .mark {
position: absolute;
padding: 2px 5px;
background-color: #e91916;
border-radius: 4px;
font-size: 13px;
font-weight: 600;
color: #ffffff;
top: 10px;
left: 10px;
}
.video_section .img_wrap .count {
position: absolute;
padding: 2px 4px;
background-color: rgba(0, 0, 0, 0.6);
border-radius: 2px;
font-size: 13px;
color: #ffffff;
left: 10px;
bottom: 10px;
}
.video_section ul li a .video_info {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: stretch;
margin-top: 10px;
}
.video_section .video_info img {
width: 40px;
height: 40px;
border-radius: 50%;
margin-right: 10px;
}その他の変更コード
[css]
.main_container {
position: relative;
width: 100%;
height: 100%;
min-width: 1340px;
}詳細
コード
https://gromo.github.io/jquery.scrollbar/demo/basic.html
Reference
この問題について(8月23日Verlog), 我々は、より多くの情報をここで見つけました https://velog.io/@ryuyoungseo8232/823Velogテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol