□Naver e Sports 2/3

★コード作成

Git Linkネットスポーツ

1.主左側領域

●記事領域3分割(1:0.5:0.5)方法

float使用機能とwidth: %値height: %値でエリアを3分割

例)

[html]

<div id="esport-main-article">

     <div class="article full">

     </div>

     <div class="article">

     </div>

     <div class="article">

     </div>

</div>

[CSS]

#esport-main-article {
    overflow: hidden;
    width: 100%;
    height: 468px;    
    border-radius: 10px;
}

#esport-main-article .article {
    float: left;
    width: 50%;
    height: 50%;
}

#esport-main-article .article.full {
    height: 100%;    
}

●結果スクリーンショット(3点)

●2行以上の文を表す略語
①CSSに以下の内容を加える

  display: -webkit-box; 
  -webkit-line-clamp: 3; 
  -webkit-box-orient: vertical;  

  overflow: hidden;
  text-overflow: ellipsis;

②heightまたはmax-height設置高さ
例)

#esport-main-article .article .txt-wrap p {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;

    overflow: hidden;
    text-overflow: ellipsis;    
    
    max-height: 57px;    
    
    margin-top: 5px;
    
    font-size: 14px;
    font-weight: 500;
    line-height: 19px;
}

●結果カット(3点&再放送試合)

●結果スクリーンショット(推奨ニュース&専門家コラム)

□難点

特に難しいところはありません.

□解決方法

カリキュラムの順序に従ってコードを作成し、解決しました.

□勉強心得

繰り返し学習することで、サイトの組織方法とサイトコードの作成方法に慣れました.