2017年12月13日 星期三

HTML CSS (9) - 其他設計概念


  • CSS權重問題
    • 先看權重
      • html: 1分
      • 自行命名class: 10分
      • id: 100分 (在css內為井號在前#id)
      • style在內:1000分
      • !important: 10000分 css內直接寫!important
        • p(1分)
        • .header(10分)
        • .header p (11分)
        • .header .menu li (21分)
    • 後面覆蓋前面
  • 開發前思考結構
    • 先命名class
  • head tag
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta description="keywords" content="新聞、電子信箱和搜尋功能只是起點。每天發掘更多精彩內容。打造專屬自我的 Yahoo奇摩體驗。"> // 網站描述文字
    <meta name="keywords" content="yahoo, yahoo奇摩, yahoo奇摩首頁, yahoo首頁, yahoo搜尋, yahoo 信箱, yahoo 即時通訊, 新聞, 股市, 運動, 娛樂, 拍賣, 購物中心, 超級商城">// 關鍵字可以找得到，中間用逗號分隔
    <meta property="og:title" content="Yahoo奇摩" /> // FB嵌入使用
    <meta property="og:type" content='website' />
    <meta property="og:url" content="http://tw.yahoo.com" />
    <meta property="og:image" content="https://s.yimg.com/dh/ap/default/130909/y_200_a.png"/>
    <meta property="og:site_name" content="Yahoo奇摩" />
    <meta http-equiv="X-UA-Compatible" content="chrome=1"> //針對 IE 做相容性

    <link rel="shortcut icon" href="https://mbp.yimg.com/sy/rz/l/favicon.ico"> // 網頁tab上的icon

    <link rel="stylesheet" href="css/maruko8.css"> // 先css再JS
    
</head>


  • 設計注意事項
    • 少用position = absolute
    • 多用互動性設計(如hover, focus)
    • 權重須標示清楚，如ul li h1, ...
    • 整個版面都相同的設定，如文字大小，css可在body內設定
    • 網頁結構越乾淨越好，不要加入太多標籤
    • class名稱儘量有意義

張貼者： 於

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)