# JD-page-imitate

**Repository Path**: sam9029/jd-page-imitate

## Basic Information

- **Project Name**: JD-page-imitate
- **Description**: JD 京东首页 静态仿写
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-06-08
- **Last Updated**: 2022-06-14

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 目标
- 先用静态写
- 后换成vue 
- 上传 gitee


- github: https://sam9029.github.io/jd-page-imitate/
- gitee: https://sam9029.gitee.io/jd-page-imitate/


## 前言
- 引入了swiper 插件,cdn的方式
    - 一个页面中引用多个Swiper，可以给每个容器加上ID或Class区分，要保留默认的类名.swiper

## 总结
### line-height 的继承问题
### input 的 outline
    - 同行的 input 和 button 高度不对齐问题-- vertical-align: middle;
### img 的 底部留白
    - 使用 vertical-align 或  display:block 

### 一行文字不换行 多出来 隐藏 为 ...
- 记得设置width ,超出width的就会隐藏 为 ...
~~~css
el{
    
/* 强制一行显示 */
white-space:nowrap;
/* 溢出隐藏 */
overflow:hidden;
/* 超出部分 显示 省略号 */
text-overflow:ellipsis;

}
~~~

### margin 的 三个值写法
~~~css
    /* 上 左右 下 */
    margin: 0 auto 20px;
~~~

### word-break:

/* word-break: break-all; 在合适的地方换行 */
~~~
normal	使用浏览器默认的换行规则。
break-all	允许在单词内换行。
keep-all	只能在半角空格或连字符处换行。
~~~

### 双行文字隐藏为点点效果

~~~css
	height: 48px;

    font-size: 14px;
    /* 行高 是 字体大小的两倍 */
    line-height: 24px;
    text-align: left;
    color: #666;
    -webkit-transition: color .2s ease;
    transition: color .2s ease;
	/* 以下 为 设置的属性 来实现双行隐藏为点点效果*/	
    word-break: break-all;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
~~~
注意：此处line-height 是 font-size 的两倍！！

![双行文字隐藏为点点效果](.\双行文字隐藏为点点效果.jpg)


### 获取页面滑轮轮动位置
[BOM之元素三大系列](https://baijiahao.baidu.com/s?id=1698186181911655563&wfr=spider&for=pc)

#### el.onscroll 事件, el.scrollTop

> :star: [scrollTop滚动的时候一直是0](https://blog.csdn.net/wangzongyang1025_/article/details/113475126?spm=1001.2101.3001.6650.1&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-1-113475126-blog-99745904.pc_relevant_antiscanv4&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-1-113475126-blog-99745904.pc_relevant_antiscanv4&utm_relevant_index=2) -- 侧面解决-使用box盒子的scroll，没有在全局body上，具有参考意义
>
> [JavaScript学习笔记之 document.body.scrollTop用法](https://blog.csdn.net/jiabin_xu/article/details/80537089)--`documentElement` 对应的是 html 标签，而 `body` 对应的是 body 标签，window对应浏览器
>
> [onscroll 事件](https://www.runoob.com/jsref/event-onscroll.html)
>
> [CSS overflow 属性](https://www.runoob.com/cssref/pr-pos-overflow.html)
>
> []()

`注意是 s c r o l l` 写错了，找原因找那么久！！

---

**注意**：

- `scrollTop是指某个 !!可滚动区块向下滚动的距离!!`
  - `比如向下滚动了10个像素，那么这个元素的scrollTop属性值就是10；`
- `使用时 要结合 overflow 属性来使用  ``
  - `-- 主要是 overflow:scroll/auto; (浏览器会显示滚动条以便查看其余的内容)`
- ``documentElement` 对应的是 html 标签，而 `body` 对应的是 body 标签，window对应浏览器`



使用body 考虑兼容性问题的写法

~~~js
var height = document.documentElement.scrollTop || document.body.scrollTop;
~~~






----

## 问题

### .nvaItem .superAd 在 .middleNav > .w 之中 (容器定位相关)
但是
~~~css
/* .w 为 relative  */
/* nvaItem superAd 使用absolute; 的 bottom 会出错 */
/* nvaItem superAd 使用absolute; 的 top 却可以 */

/* 这样写会出错 */
.nvaItem{
    position: absolute;
    bottom: 0px;
    left: 200px;
}
.superAd{
    position: absolute;
    bottom: 10px;
    right: 12px;
}


/* 这样写会ok */
.nvaItem{
    position: absolute;
    top: 100px;
    left: 200px;
}
.superAd{
    position: absolute;
    top: 10px;
    right: 12px;
}
~~~


### 路径引用相关---gitee page 无法正确读取文件路径
- 所有路径前 一定要 写 前缀（之前没写-gitee图片就无法显示）
- 如 './'  '../'



### ⭐ a 标签问题 css 样式 问题（同理其他元素）
#### 以元素名重复声明css，之前的:hover会失效
~~~css
/* 基础样式 */
a:hover{color:blue}

el > a { ... } /* 这样写 a:hover 会失效 */

/* 假设 a 的class 为 .a1 */
.al{ ... } /* 这样写 a:hover 就不会失效 */
~~~

### ⭐(未知正误) css 选择器问题 
- 这样写 只能作用于 .reg 
```css
.loginImgInfo > .log , .reg{
    color: #111;
}
```
- 这样写 能作用于.log 和 .reg 
```css
.log , .reg {
    color: #111;
}

```


### ⭐多个 a 标签在盒子内排布， display 设置 inline-block 后 每个a 之间会有大概10px 的空隙 
- 设置 float 就可以解决


### ⭐/* 父子 元素 的 margin （上下） 塌陷 */
~~~html
<div class="fa">
  <div class="son"></div>
</div>
~~~

~~~css
.fa{
  width: 300px;
  height: 300px;
  background:#999;
  overflow:hidden;
}
.son{
  margin:100px;
  width: 100px;
  height: 100px;
  background:#111;
}
~~~