# shopping
**Repository Path**: coolboyjt/shopping
## Basic Information
- **Project Name**: shopping
- **Description**: 商品后台管理系统，还需要完善部分功能
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-11-18
- **Last Updated**: 2023-03-02
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# 京东仿写
## 网站图标
### 1). 使用ico图标
* 首先把favicon.ico 这个图标放到根目录下。
* 再html里面， head 之间 引入 代码。
```html
```
### 2). 制作ico图标
我们可以自己做的图片，转换为 ico图标，以便放到我们站点里面。
方法步骤：
* 首先把我们想要的切成图片。
* 要把图片转换为 ico 图标，我们借助于第三方转换网站： http://www.bitbug.net/。 比特虫
总结：
```html
代码：
```
注意：
1. 它是显示在浏览器中的网页图标。
2. 它是图标形式，不是一个图片
3. 位置是放到 head 标签中间。
4. 后面的type="image/x-icon" 属性可以省略。（我相信你也愿意省略。）
5. 为了兼容性，请将favicon.ico 这个图标放到根目录下。
> 不知道为啥我放在根目录下的图标显示不出来， 我就直接扒了京东的引入方式就可以了。
```css
```
## 网页优化三大标签
#### 1). 网页title 标题
title具有不可替代性，是我们的内页第一个重要标签，是搜索引擎了解网页的入口，和对网页主题归属的最佳判断点。
例如：
小米商城 - 小米5s、红米Note 4、小米MIX、小米笔记本官方网站
```css
京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物！
```
#### 2. Description 网站说明
对于关键词的作用明显降低，但由于很多搜索引擎，仍然大量采用网页的MATA标签中描述部分作为搜索结果的“内容摘要”。 就是简要说明我们网站的主要做什么的。
```css
```
#### 3. Keywords 关键字
Keywords是页面关键词，是搜索引擎关注点之一。Keywords应该限制在6～8个关键词左右，电商类网站可以多 少许。
```css
```
> 我就全拷贝京东的了
## 字体图标
我是使用的阿里妈妈的字体图标库
http://www.iconfont.cn/
使用方法：
（1）首先创建个项目，把要用到了所有字体图标都放到这个项目中
（2）我引入的方式是font-class 引用，这个引用方式是比较清晰明确的
（3）引入方式是在线引入，接下来皆可以直接使用了
```css
```
> 每次增加或编辑之后icon库一定要更新链接
## 京东首页布局
#### 1). shortcut 制作
* 通栏的盒子 命名为shortcut 快捷导航的意思， 注意，这里给行高，可以继承给里面的子盒子。
* 里面包含 版心的盒子
* 版心盒子里面包含1号左侧盒子左浮动
* 版心盒子里面包含2号右侧盒子右浮动
#### 2). header制作
整个这一块是给大盒子相对定位，小盒子绝对定位
- logo
> 用精灵图来做
- search
> 大盒子不要给宽高，给小盒子宽高，把大盒子撑开，input和button之间有间隙，用浮动就可以将两者紧紧贴到一起了
- hotwords
> 没有给li平分，而是让它们自动挤开
- shopcar
> 这里涉及了一个定位的问题，绝对定位：将元素依据最近的已经定位（绝对、固定或相对定位）的父元素（祖先）进行定位。
>
> 商品数量是根据shopcar这个绝对定位的位置进行定位的。
- nav
> 就是用li进行平铺
#### 3). fs制作
fs部分我是参考京东的命名方式写的，我也不知道为啥要叫fs，就是下面这个部分
这里布局一个分成3个部分fs_col1，fs_col2，fs_col3
先来说一个解决方案：
所有的排成块的样式都用ul和li，外层最大盒子div给出固定的宽高，然后ul继承div的宽高，li按照数量均分分割ul。然后在li中，a给属性block，占满整个li，最后a中按照具体的样式进行写。
> 注意：给li属性float，li会自动排开,如下图所示
基本上就都是这样写，还有精灵图的用法，要会使用。
> 边框线用after写法，隐藏文字三件套：
>
> /*1. 先强制一行内显示文本*/
> white-space: nowrap;
> /*2. 超出的部分隐藏*/
> overflow: hidden;
> /*3. 文字用省略号替代超出的部分*/
> text-overflow: ellipsis;