前端练习项目——品优购 Day1 前期准备

1.项目准备

2.base.css

base.css用于固定一些样式（这里直接从京东源代码中截取）

* {
    margin: 0;
    padding: 0
}

em,
i {
    font-style: normal
}

li {
    list-style: none
}

img {
    border: 0;
    vertical-align: middle
}

button {
    cursor: pointer
}

a {
    color: #666;
    text-decoration: none
}

a:hover {
    color: #c81623
}

button,
input {
    font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif
}

body {
    -webkit-font-smoothing: antialiased;
    background-color: #fff;
    font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
    color: #666
}

.hide,
.none {
    display: none
}

.clearfix:after {
    visibility: hidden;
    clear: both;
    display: block;
    content: ".";
    height: 0
}

.clearfix {
    *zoom: 1
}

3.引入css

<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/common.css">

4.模块化开发

      有些结构和样式在很多页面都会出现，比如页面头部和底部。此时，可以把这些结构和样式单组作为一个模块，然后重复使用。

     最典型的是使用common.css公共样式，里面包含版心宽度，清除浮动，页面文字颜色等样式    

5.网页右上角小图标制作

首先截取自己想要的图片，然后登陆比特虫网站制作成ico类型，最后插入即可

<link rel="shortcut icon" href="pinyou.ico">

6.网站的SEO优化

（1）title网站标题：网站名-网站的介绍。

（2）descript网站说明：说明网站是做什么的。

（3）keywords关键字：是引擎的关注点。

<meta name="description"
    content="品优购 - 亚洲较大的网上交易平台，提供各类服饰、美容、家居、数码、话费/点卡充值… 数亿优质商品，同时提供担保交易(先收货后付款)等安全交易保障服务，并由商家提供退货承诺、破损补寄等消费者保障服务，让你安心享受网上购物乐趣！" />
<meta name="keyword"
    content="网上购物,C2C,在线交易,交易市场,网上交易,交易市场,网上买,网上卖,购物网站,团购,网上贸易,安全购物,电子商务,放心买,供应,买卖信息,网店,一口价,拍卖,网上开店,网络购物,打折,免费开店,网购,频道,店铺" />
<title>品优购</title>

7.常用模块类命名