0727開発ログ

10180 ワード
大邱AI学校 テキストリンク

学習内容


NAVERブログチャレンジページ、NAVERニュースホームページ
githubソースコード

NAVERブログチャレンジ


  • hot topicメニューの実際のページを見ると、3つの項目は等しく、選択した項目は有効なので、勝手にいくつかの構造を変更しました.
    • <ul>
  <li class="on"><a href="#">HOT TOPIC 도전</a></li>
  <li><a href="#">블로거, 영화를 말하다</a></li>
  <li><a href="#">목표달성! 미션위젯</a></li>
</ul>
    #blog-main-detail #program-nav ul li.on a {
    color: #000;
    font-weight: 600;
}
#blog-main-detail #program-nav  ul li:hover a {
    text-decoration: underline;
}
  • サスペンション切替ボタン背景色の場合、文字色に影響しないようにopacity大臣rgba()使用
    • #blog-main-detail #program-info .program-msg-box a {
    display: block;
    width: 179px;
    height: 40px;
    background-color: rgba(125, 85, 200, 1);

    font-size: 14px;
    color: #ffffff;
    line-height: 40px;
    text-align: center;
}
#blog-main-detail #program-info .program-msg-box a:hover {
    background-color: rgba(125, 85, 200, 0.8);
}

    ネットニュース



    header

  • 共通機能cssクラスを事前に作成:今回はflex機能にクラスを1つずつ作成し、確かにコードを減らして簡単になりました.
    • .news-flex-between {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}
.news-flex-start {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
.news-flex-end {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
}
  • <article>ラベルを使用する場合は、タイトルhを使用する必要があります.
  • 検索ウィンドウボタンに背景として画像を追加する.
    • #news-header .sub-nav .news-search-wrap .btn-search {
    width: 30px;
    height: 100%;
    background-image: url(../img/search.png);
    background-size: 24px 24px;
    background-repeat: no-repeat;
    background-position: center;
}

    ChromeのJavaScript機能をオフにする


    Webサイトの作成に従うと、javascript機能によりレイアウト要素が常に変化します.ChromeブラウザでWebサイトのjavascriptを制御する方法について説明します.

    難点


    解決策


    感想


    ChromeがJavaScript機能を制御できることを新たに発見しました.果たしてクロムではできないことは何なのか…
    Unixバックアップと圧縮コマンドの実践
    Gitガイド-基礎編