2024年品优购项目html+css-----初学者，前端渲染页面

css

1，盒模型
2，如何实现一个最大的正方形
3，一行水平居中，多行居左
4，水平垂直居中
5，两栏布局，左边固定，右边自适应，左右不重叠
6，如何实现左右等高布局
7，画三角形
8，link @import导入css
9，BFC理解

js

1，判断 js 类型的方式
2，ES5 和 ES6 分别几种方式声明变量
3，闭包的概念？优缺点？
4，浅拷贝和深拷贝
5，数组去重的方法
6，DOM 事件有哪些阶段？谈谈对事件代理的理解
7，js 执行机制、事件循环
8，介绍下 promise.all
9，async 和 await,
10，ES6 的 class 和构造函数的区别
11，transform、translate、transition 分别是什么属性？CSS 中常用的实现动画方式,
12，介绍一下rAF(requestAnimationFrame)
13，javascript 的垃圾回收机制讲一下,
14，对前端性能优化有什么了解？一般都通过那几个方面去优化的？

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

url(‘fonts/icomoon.woff?8dli9h’) format(‘woff’),

url(‘fonts/icomoon.svg?8dli9h#icomoon’) format(‘svg’);

font-weight: normal;

font-style: normal;

font-display: block;

}

font-family: ‘icomoon’;

content: ‘’;

字体图标的优点：

• 可以做和图片一样可以做的事情，改变透明度…

• 本质是文字，可以随意改变颜色，跟文字所拥有的属性一样

• 体积小，携带的信息并没有削弱

• 几乎支持所有的浏览器、移动端必备的东西

效果展示：

index

本页面用到的知识点：

1）定位 position

2）浮动 float

3. 结构伪类选择器 nth-child（n）、nth-of-type(n)

4）伪元素选择器 :before{ }、::after{ }

5）精灵图 可以减少浏览器的请求次数

左侧全部商品分类部分代码如下：

.dt 内容是全部商品分类，然后把这个盒子的宽高设置跟父亲一样，这样就把 .dd 挤到下面去了

全部商品分类

• 家用电器

• 手机、

  数码、

  通信

• 电脑、

  办公

• 家居、

  家具、

  家装、

  厨具

• 男装、

  女装、

  童装、

  内衣

• 个户化妆、

  清洁用品、

  宠物

• 鞋靴、

  箱包、

  珠宝、

  奢侈品

• 运动户外、

  钟表

• 汽车、

  汽车用品

• 母婴、

  玩具乐器

• 食品、

  酒类、

  生鲜、

  特产

• 医药保健

• 图书、

  音箱、

  电子书

• 彩票、

  旅行、

  充值、

  票务

• 理财、

  众筹、

  白条、

  保险

  css部分

  .nav .dropdown {

  float: left;

  }

  .nav .dropdown .dt {

  height: 44px;

  width: 210px;

  text-align: center;

  line-height: 44px;

  color: #fff;

  background-color:#b1191a ;

  }

  .nav .dropdown .dd {

  width: 210px;

  height: 466px;

  background-color: #c81623;

  }

  .nav .dd li {

  height: 31px;

  line-height: 31px;

  padding-left: 8px;

  font-size: 14px;

  }

  .nav .dd li a {

  color: rgb(240, 215, 215);

  }

  .nav .dd li:hover {

  background-color: #fff;

  }

  .nav .dd li:hover a {

  color:red;

  }

  右边栏的定位html

  • 给L1、L2、L3 宽度给243但是里面装不开里面的四个小li

  • 可以让L1里面的ul宽度为245就可以装下四个小li

  • L1盒子overflow隐藏掉多余的部分

  
• 花费
• 机票
  减
• 电影票
• 游戏
• 彩票
• 加油卡
• 酒店
• 火车票
• 中筹
• 理财
• 礼品卡
• 白条

  css

  使用精灵图

  .PK .pk2 .t3 .l1 li {

  background: url(…/images/icons.png);

  }

  .PK .pk2 .t3 .l1 li:nth-child(1) {

  background-position:0 0;

  }

  .PK .pk2 .t3 .l1 li:nth-child(2) {

  background-position: -60px 0;

  }

  .PK .pk2 .t3 .l1 li:nth-child(3) {

  background-position: -121px 0;

  }

  .PK .pk2 .t3 .l1 li:nth-child(4) {

  background-position: -181px 0;

  }

  .PK .pk2 .t3 .l2 li {

  background: url(…/images/icons.png);

  }

  .PK .pk2 .t3 .l2 li:nth-child(1) {

  background-position: 0 -72px;

  }

  .PK .pk2 .t3 .l2 li:nth-child(2) {

  background-position: -60px -72px;

  }

  .PK .pk2 .t3 .l2 li:nth-child(3) {

  background-position: -125px -72px;

  }

  .PK .pk2 .t3 .l2 li:nth-child(4) {

  background-position: -188px -72px;

  }

  .PK .pk2 .t3 .l3 li {

  background: url(…/images/icons.png);

  }

  .PK .pk2 .t3 .l3 li:nth-child(1) {

  background-position: 0 -145px;

  }

  .PK .pk2 .t3 .l3 li:nth-child(2) {

  background-position: -63px -145px;

  }

  .PK .pk2 .t3 .l3 li:nth-child(3) {

  background-position: -125px -145px;

  }

  .PK .pk2 .t3 .l3 li:nth-child(4) {

  background-position: -188px -145px;

  }

  登录

  用了新增的表单属性，方便

  required

  placeholder

  autofocus

  autocomplete

  multiple

  

  html 部分代码

  自动登录

  忘记密码？

  登录

  立即注册

  注册

  

  html

  手机号：    *手机号码格式不对
  

  短信验证码：
  

  登录密码：     *密码不少于6位数

  安全程度

• 强
• 中
• 弱
• 确认密码：     *密码不一致请重新输入密码

  同意协议并注册

  《阅读用户协议》

  确认注册

  最后

  本人分享一下这次字节跳动、美团、头条等大厂的面试真题涉及到的知识点，以及我个人的学习方法、学习路线等，当然也整理了一些学习文档资料出来是给大家的。知识点涉及比较全面，包括但不限于前端基础，HTML，CSS，JavaScript，Vue，ES6，HTTP，浏览器，算法等等

  开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

  

  前端视频资料：
  

  ">*密码不少于6位数

  安全程度

• 强
• 中
• 弱
• 确认密码：     *密码不一致请重新输入密码

  同意协议并注册

  《阅读用户协议》

  确认注册

  最后

  本人分享一下这次字节跳动、美团、头条等大厂的面试真题涉及到的知识点，以及我个人的学习方法、学习路线等，当然也整理了一些学习文档资料出来是给大家的。知识点涉及比较全面，包括但不限于前端基础，HTML，CSS，JavaScript，Vue，ES6，HTTP，浏览器，算法等等

  开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

  [外链图片转存中…(img-eBb5FHSD-1715631990118)]

  前端视频资料：
  [外链图片转存中…(img-8NF4M2Bp-1715631990119)]