[HTML+CSS] 仿京东首页项目实战

border-left: 2px solid #999;

}

.mod_copyright_info {

margin: 0 0 3px 240px;

}

.mod_copyright_second {

margin-left: 469px;

}

index.html

---

<meta name=“description” content="品优购JD.CON-专业的综合网上购物商城,销售家

电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便

捷、诚信的服务，为您提供愉悦的网上购物体验!"/>

<meta name=“Keywords” content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,V

CD,DV,相机,数码,配件,手表,存储卡,品优购"/>

• 品优购欢迎您！

• 请登录

  免费注册
• 我的订单

• 我的品优购

  

• 品优购会员
• 企业采购

• 关注品优购

  

• 客户服务

  

• 网站导航

  

  品优购

  搜索

  优惠购首发

  亿元优惠

  9.9团购

  每满99减30

  办公用品

  电脑

  通信

   我的购物车

  8

  全部商品分类
• 家用电器 >

• 手机、

  数码、

  通信

  >

• 电脑、

  办公

  >

• 家居、

  家具、

  家装、

  厨具

  >

• 男装、

  女装、

  童装、

  内衣

  >

• 个护化妆、

  清洁用品、

  宠物

  >

• 鞋靴、

  箱包、

  珠宝、

  奢侈品

  >

• 运动户外、

  钟表

  >

• 汽车、

  汽车用品

  >

• 母婴、

  玩具乐器

  >

• 食品、

  酒类、

  生鲜、

  特产

  >

• 医药保健

  >

• 图书、

  音响、

  电子书

  >

• 彩票、

  旅行、

  充值、

  票务

  >

• 理财、

  众筹、

  白条、

  保险

  >
• 服装城
• 美妆馆
• 传智超市
• 全球购
• 闪购
• 团购
• 拍卖
• 有趣
• <

  >
• 
• 品优购快报

  更多 >

  [特惠]备战开学季全民半价购数码

  [快告]品优稳占家电网购六成份额

  [特惠]百元中秋全品类礼券限里领

  [忪告]上品优生鲜享阳澄胡大闸蟹

  [特惠]每日享折扣品优品质游

• 话费

• 机票

• 话费

• 话费

• 话费

• 话费

• 话费

• 话费

• 话费

• 话费

• 话费

• 话费

  
  

  今日推荐
• 
• 
• 
• 

  家用电器
• 热门|
• 大家电|
• 生活电器|
• 厨房电器|
• 个护健康|
• 应季电器|
• 空气/净水|
• 新奇特|
• 高端电器
• 节能补贴
• 4k电视
• 空气净化器
• IH电饭煲
• 滚筒洗衣机
• 电热水器
• 
• 
• 
  
• 
• 
  

  手机通讯
• 热门|
• 大家电|
• 生活电器|
• 厨房电器|
• 个护健康|
• 应季电器|
• 空气/净水|
• 新奇特|
• 高端电器
• 节能补贴
• 4k电视
• 空气净化器
• IH电饭煲
• 滚筒洗衣机
• 电热水器
• 
• 
• 
  
• 
• 
  

  家用电器
• 热门|
• 大家电|
• 生活电器|
• 厨房电器|
• 个护健康|
• 应季电器|
• 空气/净水|
• 新奇特|
• 高端电器
• 节能补贴
• 4k电视
• 空气净化器
• IH电饭煲
• 滚筒洗衣机
• 电热水器
• 
• 
• 
  
• 
• 
  
• 家用电器
• 手机通讯
• 电脑办公
• 家居家具
• 生活用品
• 家用电器

• 正品保障

  正品保障，提供发票

• 极速物流

  极速物流，极速送达

• 无忧售后

  7天无理由退换货

• 特色服务

  私人定制家电套餐

• 帮助中心

  您的购物指南

  购物指南
  购物流程
  会员介绍
  生活旅行/团购
  常见问题
  大家电
  联系客服
  配送方式
  购物流程
  会员介绍
  生活旅行/团购
  常见问题
  大家电
  联系客服
  支付方式
  购物流程
  会员介绍
  生活旅行/团购
  常见问题
  大家电
  联系客服
  售后服务
  购物流程
  会员介绍
  生活旅行/团购
  常见问题
  大家电
  联系客服
  特色服务
  购物流程
  会员介绍
  生活旅行/团购
  常见问题
  大家电
  联系客服
  帮助中心
  

  品优购客户端
• 关于我们
• 联系我们
• 联系客服
• 商家入驻
• 营销中心
• 手机品优购
• 友情链接
• 销售联盟
• 品优购社区
• 品优购公益
• English Site
• Contact U

• 地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn

  京ICP备08001421号京公网安备110108007702

  index.css

  ---

  .main {

  width: 980px;

  height: 455px;

  margin-left: 219px;

  margin-top: 10px;

  }

  .focus {

  position: relative;

  float: left;

  width: 720px;

  height: 455px;

  background-color: purple;

  }

  .newsflash {

  float: right;

  width: 250px;

  height: 455px;

  }

  .arrow-l,

  .arrow-r {

  position: absolute;

  top: 50%;

  margin-top: -20px;

  width: 24px;

  height: 40px;

  background: rgba(0, 0, 0, .3);

  line-height: 40px;

  color: rgb(199, 199, 199);

  font-size: 18px;

  }

  .arrow-r {

  right: 0;

  }

  .circle {

  position: absolute;

  bottom: 10px;

  left: 50%;

  transform: translateX(-50%);

  }

  .circle li {

  float: left;

  width: 8px;

  height: 8px;

  margin: 0 5px;

  border: 1px solid rgba(255, 255, 255, .7);

  border-radius: 50%;

  /鼠标经过显示小手/

  cursor: pointer;

  box-shadow: 1px 1px;

  }

  .circle li:first-child {

  background-color: #fff;

  }

  .circle li:hover {

  background-color: #fff;

  }

  .news {

  height: 163px;

  border: 1px solid #ccc;

  }

  .news-hd {

  height: 32px;

  padding: 0 15px;

  line-height: 32px;

  border-bottom: 1px dotted #ccc;

  font-size: 14px;

  }

  .lifeservice {

  height: 208px;

  border: 1px solid #ccc;

  border-top: 0;

  overflow: hidden;

  }

  .bargain {

  height: 75px;

  padding-top: 6px;

  }

  .news-hd-l {

  float: left;

  }

  .news-hd-r {

  float: right;

  }

  .news-bd {

  padding: 10px 0;

  margin-left: 15px;

  TCP协议

  • TCP 和 UDP 的区别？
  • TCP 三次握手的过程？
  • 为什么是三次而不是两次、四次？
  • 三次握手过程中可以携带数据么？
  • 说说 TCP 四次挥手的过程
  • 为什么是四次挥手而不是三次？
  • 半连接队列和 SYN Flood 攻击的关系
  • 如何应对 SYN Flood 攻击？
  • 介绍一下 TCP 报文头部的字段
  • TCP 快速打开的原理(TFO)
  • 说说TCP报文中时间戳的作用？
  • TCP 的超时重传时间是如何计算的？
  • TCP 的流量控制
  • TCP 的拥塞控制
  • 说说 Nagle 算法和延迟确认？
  • 如何理解 TCP 的 keep-alive？

  

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

  浏览器篇

  • 浏览器缓存?
  • 说一说浏览器的本地存储？各自优劣如何？
  • 说一说从输入URL到页面呈现发生了什么？
  • 谈谈你对重绘和回流的理解
  • XSS攻击
  • CSRF攻击
  • HTTPS为什么让数据传输更安全？
  • 实现事件的防抖和节流？
  • 实现图片懒加载？

  px;

  background: rgba(0, 0, 0, .3);

  line-height: 40px;

  color: rgb(199, 199, 199);

  font-size: 18px;

  }

  .arrow-r {

  right: 0;

  }

  .circle {

  position: absolute;

  bottom: 10px;

  left: 50%;

  transform: translateX(-50%);

  }

  .circle li {

  float: left;

  width: 8px;

  height: 8px;

  margin: 0 5px;

  border: 1px solid rgba(255, 255, 255, .7);

  border-radius: 50%;

  /鼠标经过显示小手/

  cursor: pointer;

  box-shadow: 1px 1px;

  }

  .circle li:first-child {

  background-color: #fff;

  }

  .circle li:hover {

  background-color: #fff;

  }

  .news {

  height: 163px;

  border: 1px solid #ccc;

  }

  .news-hd {

  height: 32px;

  padding: 0 15px;

  line-height: 32px;

  border-bottom: 1px dotted #ccc;

  font-size: 14px;

  }

  .lifeservice {

  height: 208px;

  border: 1px solid #ccc;

  border-top: 0;

  overflow: hidden;

  }

  .bargain {

  height: 75px;

  padding-top: 6px;

  }

  .news-hd-l {

  float: left;

  }

  .news-hd-r {

  float: right;

  }

  .news-bd {

  padding: 10px 0;

  margin-left: 15px;

  TCP协议

  • TCP 和 UDP 的区别？
  • TCP 三次握手的过程？
  • 为什么是三次而不是两次、四次？
  • 三次握手过程中可以携带数据么？
  • 说说 TCP 四次挥手的过程
  • 为什么是四次挥手而不是三次？
  • 半连接队列和 SYN Flood 攻击的关系
  • 如何应对 SYN Flood 攻击？
  • 介绍一下 TCP 报文头部的字段
  • TCP 快速打开的原理(TFO)
  • 说说TCP报文中时间戳的作用？
  • TCP 的超时重传时间是如何计算的？
  • TCP 的流量控制
  • TCP 的拥塞控制
  • 说说 Nagle 算法和延迟确认？
  • 如何理解 TCP 的 keep-alive？

  [外链图片转存中…(img-RmUV6P0n-1714168679601)]

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

  浏览器篇

  • 浏览器缓存?
  • 说一说浏览器的本地存储？各自优劣如何？
  • 说一说从输入URL到页面呈现发生了什么？
  • 谈谈你对重绘和回流的理解
  • XSS攻击
  • CSRF攻击
  • HTTPS为什么让数据传输更安全？
  • 实现事件的防抖和节流？
  • 实现图片懒加载？