品优购项目html+css-----初学者

内衣

• 个户化妆、

  清洁用品、

  宠物

• 鞋靴、

  箱包、

  珠宝、

  奢侈品

• 运动户外、

  钟表

• 汽车、

  汽车用品

• 母婴、

  玩具乐器

• 食品、

  酒类、

  生鲜、

  特产

• 医药保健

• 图书、

  音箱、

  电子书

• 彩票、

  旅行、

  充值、

  票务

• 理财、

  众筹、

  白条、

  保险

  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位数

  安全程度

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

  同意协议并注册

  《阅读用户协议》

  确认注册

  详情页面

  手机介绍是通过嵌套li做的

  

  html
• 选择颜色
• 金色
• 银色
• 黑色
• 玫瑰色
• 选择版本
• 公开版
• 移动4G
• 选择容量
• 18G
• 64G
• 128G
• 购买方式
• 官方标配
• 移动优惠购
• 电信优惠购
• 套      装
• 保护套装
• 充电套装
• 1
• +
• -
• 加入购物车

• css

  .you4 {

  width: 546px;

  height: 255px;

  border-top: 1px solid gainsboro;

  border-bottom: 1px solid gainsboro;

  padding-top: 10px;

  }

  .you4 li {

  overflow: hidden;

  }

  .you4 .l1 li:nth-child(n+2),

  .you4 .l2 li:nth-child(n+2),

  .you4 .l3 li:nth-child(n+2),

  .you4 .l4 li:nth-child(n+2),

  .you4 .l5 li:nth-child(n+2) {

  float: left;

  width: 86px;

  height: 42px;

  background-color: #f7f7f7;

  margin-right: 10px;

  text-align: center;

  line-height: 42px;

  最后

  自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

  深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

  因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

  

  

  

  既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

  如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

  由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
  ),

  .you4 .l5 li:nth-child(n+2) {

  float: left;

  width: 86px;

  height: 42px;

  background-color: #f7f7f7;

  margin-right: 10px;

  text-align: center;

  line-height: 42px;

  最后

  自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

  深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

  因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

  [外链图片转存中…(img-FvBCTV5a-1715141258376)]

  [外链图片转存中…(img-ATmx85tN-1715141258376)]

  [外链图片转存中…(img-a5parRjO-1715141258377)]

  既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

  如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

  由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！