1 Star 0 Fork 0

SAM9029/JD-page-imitate

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
该仓库未声明开源许可证文件(LICENSE),使用请关注具体项目描述及其代码上游依赖。
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README

目标

前言

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

总结

line-height 的继承问题

input 的 outline

- 同行的 input 和 button 高度不对齐问题-- vertical-align: middle;

img 的 底部留白

- 使用 vertical-align 或  display:block 

一行文字不换行 多出来 隐藏 为 ...

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

}

margin 的 三个值写法

    /* 上 左右 下 */
    margin: 0 auto 20px;

word-break:

/* word-break: break-all; 在合适的地方换行 */

normal	使用浏览器默认的换行规则。
break-all	允许在单词内换行。
keep-all	只能在半角空格或连字符处换行。

双行文字隐藏为点点效果

	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 的两倍!!

双行文字隐藏为点点效果

获取页面滑轮轮动位置

BOM之元素三大系列

el.onscroll 事件, el.scrollTop

scrollTop滚动的时候一直是0 -- 侧面解决-使用box盒子的scroll,没有在全局body上,具有参考意义

JavaScript学习笔记之 document.body.scrollTop用法--documentElement 对应的是 html 标签,而 body 对应的是 body 标签,window对应浏览器

onscroll 事件

CSS overflow 属性

注意是 s c r o l l 写错了,找原因找那么久!!


注意

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

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

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

问题

.nvaItem .superAd 在 .middleNav > .w 之中 (容器定位相关)

但是

/* .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会失效

/* 基础样式 */
a:hover{color:blue}

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

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

⭐(未知正误) css 选择器问题

  • 这样写 只能作用于 .reg
.loginImgInfo > .log , .reg{
    color: #111;
}
  • 这样写 能作用于.log 和 .reg
.log , .reg {
    color: #111;
}

⭐多个 a 标签在盒子内排布, display 设置 inline-block 后 每个a 之间会有大概10px 的空隙

  • 设置 float 就可以解决

⭐/* 父子 元素 的 margin (上下) 塌陷 */

<div class="fa">
  <div class="son"></div>
</div>
.fa{
  width: 300px;
  height: 300px;
  background:#999;
  overflow:hidden;
}
.son{
  margin:100px;
  width: 100px;
  height: 100px;
  background:#111;
}

空文件

简介

JD 京东首页 静态仿写 展开 收起
JavaScript 等 6 种语言
取消

发行版

暂无发行版

贡献者

全部

近期动态

不能加载更多了
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
1
https://gitee.com/sam9029/jd-page-imitate.git
git@gitee.com:sam9029/jd-page-imitate.git
sam9029
jd-page-imitate
JD-page-imitate
master

搜索帮助