第一个项目的规划与搭建

项目文件夹的建立

1.首先在工作区建立新的文件夹newfolder

2.在newfolder文件夹下新建upload文件夹，images文件夹，css文件夹，所需要的字体图标的fonts文件夹也移动到newfolder文件夹下。完成后在vscode编程软件中在根目录下创建第一个html页面：index.html。

3.在css文件夹下，创建base.css基本初始化样式和common.css公共样式。此次base.css使用了某东的初始化样式表，用于清除原有的内外边距、文字效果、列表样式、图片空白缝隙等问题。

4.在index.html中引入这两个css样式表

<!-- 引入初始化样式 -->
    <link rel="stylesheet" href="css/base.css">
    <!-- 引入公众样式 -->
    <link rel="stylesheet" href="css/common.css">

ico图标

jianshu.jpg

如图所示，网站标题前面的小图标就是ico图标。
使用ico图标分为三个步骤：

制作ico图标。通常是美工人员制作，前端人员拿来用。
把制作的png图标拿到专业转换图片格式的网站去调整为ico格式的图标。例如：http://www.ico51.cn/
最后把制作好的ico图标（命名为favicon.ico)放在该项目文件夹的根目录下，如图。同时引入首页中(引入代码基本固定）。

image.png

<!-- 引入ico图标 -->
    <link rel="shortcut icon" href="favicon.ico">

网站TDK的三大标签SEO优化

在实际开发中经常使用，给网站提权，使其在搜索引擎中排名更靠前。
TDK三大标签分别是：title、description和keywords。
三者填写的内容由SEO人员编写，前端人员可以直接拿来使用，并引入首页中。

<title>拼拼购商城-综合网购首选-正品低价、品质保障、愉快购物！</title>
    <!-- 网站说明 -->
    <meta name="description" content="拼拼购商城-专业的综合网上购物商城，集销售家电，数码通讯，母婴，图书等数万个品牌优质商品，为您提供愉悦的网上购物体验">
    <!-- 关键词 -->
    <meta name="keywords" content="智能手机,xx电脑,冰箱,品牌女装">

查看布局，设置版心

电商网页大多数主体部分都在版心位置，因此在common.css中设置版心（类名为w）的宽度且居中。
浮动必不可少，鉴于整体布局中有左浮动和有浮动。在common.css中写左浮样式和右浮样式。此次网页设计有大量同样的红色元素一同写入。

/* 版心设置 */

.w {
    width: 1200px;
    margin: 0 auto;
}

.fl {
    float: left;
}

.fr {
    float: right;
}

.style_red {
    color: #c81623;
}

快捷导航shortcut

image.png

思路：
1.快捷导航栏类名为shortcut，其中在版心区域包括两个盒子，一个左浮动，一个右浮动。
2.左浮动盒子中包括两部分，可以用ul+li来做。第一部分是欢迎语，第二部分是登录与注册。
3.右浮动盒子里也使用ul+li标签，把小标题和小竖线都作为一个小盒子，然后用左右margin值撑开距离。
4.某些小标题后的向下的箭头使用i/em标签把箭头放入，或者利用after伪元素。此处应用了字体图标（先声明，后引用）。

项目头部

pin_toubu.jpg

头部：四部分，用定位

logo

pin_two.jpg

搜索框（search）（input，button）

两个行内块会有空隙但使用浮动会清除掉。
行内元素无法设置margin的上下值，但可以设置左右值。
placeholder属性设置搜索框中默认显示的文字。
使用定位即可。

热词（hotwords）

a标签

定位，子绝父相。
margin值撑开左右边距

购物车模块（shopcar）

 <!-- 购物车模块 -->
        <div class="shopcar">
            我的购物车
            <i class="icon">8</i>
        </div>

首先设置购物车这个大盒子的宽高，定位数值，边框设置。盒子内部文字大小颜色，背景色，文字垂直居中。
使用before、after伪元素添加字体图标，再使用margin调整位置距离。

.shopcar::before {
    content: '\e93a';
    font-family: icomoon;
    margin-right: 6px;
}

.shopcar::after {
    content: '\e920';
    font-family: icomoon;
    margin-left: 6px;
}

购物车的右上角数字信息使用i标签书写，因为不确定数字大小位数所以不设宽度，只设置高度，填充，字体颜色背景色等，由于继承了父元素的行高影响，在此元素的样式设置中还要再设置行高，并且定位到准确位置。注意：最好使用left，使其数字变多后盒子向右撑开符合大众要求。

nav导航栏

导航.jpg