模块化开发

项目目录结构

一个好的项目目录结构清晰：

• css(样式：通过外部样式引入)
• fonts(字体图标)
• images(网站静态图片)
• upload(用户上传的图片)
• js(javascrip 脚本)
• favicon.ico(网站图标)
• index.html(网站入口)

样式的模块化开发

• 样式的初始化放在 base.css 文件中
• 可共用的样式放在 common.css 文件中

网站 SEO 优化

TDK 三大标签

• title(网站标题-解释说明)
• description(网站说明)
• Keywords(关键字)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

<!-- 网站标题 -->
    <title>品优购商城-正品低价、品质保障、配送及时、轻松购物！</title>
    <!-- 网站描述 -->
    <meta
      name="description"
      content="品优购商城-专业的综合网上购物商城，为您提供正品低价的购物选择、优质便捷的服务体验。商品来自全球数十万品牌商家，囊括家电、手机、电脑、服装、居家、母婴、美妆、个护、食品、生鲜等丰富品类，满足各种购物需求。"
    />
    <!-- 关键字 -->
    <meta
      name="Keywords"
      content="网上购物,网上商城,家电,手机,电脑,服装,居家,母婴,美妆,个护,食品,生鲜,京东"
    />

favicon.ico 图标制作与使用

• figma切图切出 png 格式的图片
• https://favicon.io/进行格式转化，转化为 ico 格式
• 放在项目根目录下，通过<link rel="shortcut icon" href="./favicon.ico" />引入

网站 logo 制作

• 先放置一个<h1></h1>标签
• 标签里放置一个链接，链接里的文字是网站名称，会跳转网站首页，文字不展示。链接的背景图片是 logo
• 文字不展示的方法：
  • text-indent: -9999px; overflow: hidden;
  • font-size: 0;
• 给链接一个title属性