[大邱AI学校]1.08.12開発日記

4005 ワード
大邱AI学校 VS Code CSS Naver e Sportsキャット html テキストリンク

□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点&再放送試合)

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

    □難点


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

    □解決方法


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

    □勉強心得


    繰り返し学習することで、サイトの組織方法とサイトコードの作成方法に慣れました.
    HDU 5443 2015.9.13長春ネット試合G題
    【SDOI 2014】【BZOJ 3533】ベクトルセット