样式 & 结构

  1. *{
  2.   margin: 0;
  3.   padding: 0;
  4.   box-sizing:border-box
  5. }
  7. 版心
  8. .w{
  9.   width:1200px
  10. }
  1. <body>
  2.     <!-- 快捷导航模块 start -->
  3.     <section class="shortcut">
  4.         <div class="w">
  5.         </div>
  6.     </section>
  7.     <!-- 快捷导航模块 end -->
  9.     <!-- header头部模块制作 start -->
  10.     <header class="header w">
  11.     </header>
  12.     <!-- header头部模块制作 end -->
  14.     <!-- nav模块制作 start -->
  15.     <nav class="nav">
  16.         <div class="w">
  17.         </div>
  18.     </nav>
  19.     <!-- nav模块制作 end -->
  21.     <!-- 底部模块的制作 start -->
  22.     <footer class="footer">
  23.         <div class="w">
  24.         </div>
  25.     </footer>
  26.     <!-- 底部模块的制作 end -->
  27. </body>

网站 favicon 图标（★★★）

favicon.ico 一般用于作为缩略的网站标志，它显示在浏览器的地址栏或者标签上。目前主要的浏览器都支持 favicon.ico 图标。
favicon.png

制作favicon图标

  • 把品优购图标切成 png 图片
  • 把 png 图片转换为 ico 图标，这需要借助于第三方转换网站，例如比特虫：http://www.bitbug.net/

比特虫.png

HTML页面引入favicon图标

在html 页面里面的 <head> </head>元素之间引入代码

 <link rel="shortcut icon" href="favicon.ico"  type="image/x-icon"/>

TDK三大标签SEO优化（★★）

SEO是什么

SEO（Search Engine Optimization）汉译为搜索引擎优化，是一种利用搜索引擎的规则提高网站在有关搜索引擎内自然排名的方式。
SEO 的目的是对网站进行深度的优化，从而帮助网站获取免费的流量，进而在搜索引擎上提升网站的排名，提高网站的知名度。

页面必须有三个标签用来符合 SEO 优化
SEO优化.png

TDK是什么

T — Title（网站标题）

title 具有不可替代性，是我们内页的第一个重要标签，是搜索引擎了解网页的入口和对网页主题归属的最佳判断点。
建议：网站名（产品名）- 网站的介绍 （尽量不要超过30个汉字）

例如：

  • 京东(JD.COM)-综合网购首选-正品低价、品质保障、配送及时、轻松购物！
  • 小米商城 - 小米5s、红米Note 4、小米MIX、小米笔记本官方网站

D — description（网站描述）

简要说明我们网站主要是做什么的。
我们提倡，description 作为网站的总体业务和主题概括，多采用“我们是…”、“我们提供…”、“×××网作为…”、“电话：010…”之类语句。
例如：
<meta name="description" content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!" />

K — keywords （关键字）

keywords 是页面关键词，是搜索引擎的关注点之一。
keywords 最好限制为 6～8 个关键词，关键词之间用英文逗号隔开，采用 关键词1,关键词2 的形式
例如：
<meta name= " keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东" />

对于我们前端人员来说，我们只需要准备好这三个标签，具体里面的内容，有专门的 SEO 人员准备
示例代码

<head>
    ...
    <title>品优购商城-综合网购首选-正品低价、品质保障、配送及时、轻松购物！
    </title>
    <!-- 网站说明 -->
    <meta name="description"
        content="品优购商城-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!" />
    <!-- 关键字 -->
    <meta name="keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东" />
    ...
</head>

常用类名命名

命名.png

logo布局

header头部模块搭建（★★★）

header.png

  • header 盒子必须要有高度
  • 1 号盒子是 logo 标志定位，在正常开发过程中，logo的布局其实是有讲究的，需要进行 **logoSEO**的优化 （★★★）
    • logo 里面首先放一个 h1 标签，目的是为了提权，告诉搜索引擎，这个地方很重要
    • h1 里面再放一个链接，可以返回首页的，把 logo 的背景图片给链接即可
    • 为了搜索引擎收录我们，我们链接里面要放文字（网站名称），但是文字不要显示出来
      • 方法1：text-indent 移到盒子外面（text-indent: -9999px) ，然后 overflow:hidden ，淘宝的做法
      • 方法2：直接给 font-size: 0; 就看不到文字了，京东的做法
    • 最后给链接一个 title 属性，这样鼠标放到 logo 上就可以看到提示文字了

结构代码

<!-- logo模块 -->
<div class="logo">
    <h1>
        <a href="index.html" title="品优购商城">品优购商城</a>
    </h1>
</div>

样式代码

/* header 头部制作 */
.header {
    position: relative;
    height: 105px;

}
.logo {
    position: absolute;
    top: 25px;
    width: 171px;
    height: 61px;

}
.logo a {
    display: block;
    width: 171px;
    height: 61px;
    background: url(../images/logo.png) no-repeat;
    /* font-size: 0;京东的做法*/
    /* 淘宝的做法让文字隐藏 */
    text-indent: -9999px;
    overflow: hidden;
}

导航栏布局

image.png
image.png