仿oppo网站

网址

仿照网址：https://www.opposhop.cn/cn/web/
初版（没有响应式）github:https://github.com/fj17xz/oppo0

效果图

首页：

登录页

注册页

笔记

                                仿oppo网站

1.网址：https://www.opposhop.cn/cn/web/

2.初始化 normalize.css https://github.com/necolas/normalize.css

3.字体图标 Font Awesome https://fontawesome.dashgame.com/

4.利于SEO搜索引擎

  <meta charset="utf-8">
  <meta name="description" content="">
  <meta name="author" content="">
  <meta name="keywords" content="">

logo放h1提权，文字移动坐标或display隐藏起来

5.测像素：https://www.photopea.com/

6.图片文字垂直居中

  display: flex;
  width: 140px;
  height: 50px;
  justify-content: center;
  align-items: center;

或者
  display: flex;
  flex-direction: column;

7.去掉input边框：outline:medium;

8.禁止输入图标：cursor:not-allowed

9.判断是否输入的是数字： oninput = “value=value.replace(/[^\d]/g,’’)”

---

遇到的问题:

①input 和img对齐，设置了vertical-align:middle;还是没有对齐，原因img设置了高度，去掉之后就可以了

②图片压缩变形，解决：css属性object-fit:cover;

③隐藏横向滚动条 body加overflow:-Scroll; overflow-x:hidden;

④忘了伪元素要加content才有内容

⑤此例中设置直角>绝对定位才出的来

  position: absolute;
  width: 11px;
  height: 11px;
  border-top: 2px solid #000;
  border-right: 2px solid #000;

留有疑问:

a::after ,border，四条线汇集成一条竖线

清除浮动还是跑上去了

页面刷新跳到顶部