品优购-day03笔记-完善品优购的首页&制作列表页「建议收藏」

品优购-day03笔记-完善品优购的首页&制作列表页「建议收藏」typora-copy-images-to:media第01阶段.WEB基础:品优购-day03笔记-完善品优购的首页&制作列表页学习目标完善品优购项目的首页index.html制作品优购项目的列表页list.html品优购项目(三)第01阶段.WEB基础:品优购-day02笔记-品优购首页1.品优购首页布局命名集合:名称说明…

大家好,又见面了,我是你们的朋友全栈君。


typora-copy-images-to: media

第01阶段.WEB基础:品优购-day03笔记-完善品优购的首页&制作列表页

学习目标

  • 完善 品优购项目的首页 index.html
  • 制作 品优购项目的列表页 list.html

品优购项目(三)

第01阶段.WEB基础:品优购-day02笔记-品优购首页

1. 品优购首页布局

命名集合:

名称 说明
快捷导航栏 shortcut
头部 header
标志 logo
购物车 shopcar
搜索 search
热点词 hotwords
导航 nav
导航左侧 dropdown 包含 .dd .dt
导航右侧 navitems
页面底部 footer
页面底部服务模块 mod_service
页面底部帮助模块 mod_help
页面底部版权模块 mod_copyright

1) shortcut 快捷导航栏(上次已讲)

品优购-day03笔记-完善品优购的首页&制作列表页「建议收藏」

  • 通栏的盒子 命名为shortcut 快捷导航的意思, 注意,这里给行高,可以继承给里面的子盒子。
  • 里面包含 版心的盒子
  • 版心盒子里面包含1号左侧盒子左浮动
  • 版心盒子里面包含2号右侧盒子右浮动

2) header 头部 (上次已讲)

品优购-day03笔记-完善品优购的首页&制作列表页「建议收藏」

  • header盒子必须要有高度
  • 1号盒子是 logo 标志 定位
  • 2号盒子是 search 搜索模块 定位
  • 3号盒子是 hotwords 热词模块 定位
  • 4号盒子是 shopcar 购车车模块
    • count 统计部分 用绝对定位做
    • count 统计部分 不要给宽度,因为可能买的件数比较多,让件数撑开就好了 给一个高度
    • 一定注意左下角 不是圆角 其余三个是圆角

3) nav 导航栏制作

品优购-day03笔记-完善品优购的首页&制作列表页「建议收藏」

  • nav 盒子通栏有高度 而且有个下边框
  • 1号盒子 左侧浮动 dropdown 下拉导航 里面包含 dt dd
  • 2号盒子右侧浮动 navitems 导航栏组

品优购-day03笔记-完善品优购的首页&制作列表页「建议收藏」

4) footer 底部

品优购-day03笔记-完善品优购的首页&制作列表页「建议收藏」

  • footer 页面底部盒子 通栏 给一个高度 灰色的背景
  • footer 里面 首先一个 大 的版心
  • 版心里面包含 1号盒子 mod_service 服务模块 module 模块的意思
  • 版心里面包含 2号盒子 mod_help 帮助模块
  • 版心里面包含 3号盒子 mod_copyright 版权模块

a. mod_service 服务模块制作

品优购-day03笔记-完善品优购的首页&制作列表页「建议收藏」

5) main 网页主体模块

main 网页主体模块,这部分是 首页index.html页面 里面 专有的,

注意 需要新的样式文件 index.css

品优购-day03笔记-完善品优购的首页&制作列表页「建议收藏」

  • main 盒子 宽度 为 980像素, 距离 左边 220 给一个margin-left 就好了, 给高度就不用清除浮动。

  • main 里面包含 左侧盒子 左浮动 focus 焦点图 模块

  • main 里面包含 右侧盒子 右浮动 newsflash 新闻快报模块

a. main中的:焦点图 focus

品优购-day03笔记-完善品优购的首页&制作列表页「建议收藏」

b. main中的:新闻快报 newsflash

品优购-day03笔记-完善品优购的首页&制作列表页「建议收藏」

  • 1 号盒子 为 news 新闻模块
  • 2 号盒子 为lifeservice 生活服务模块
  • 3 号盒子为 bargain 特价商品
新闻快报 newsflash中的一号盒子:news 新闻模块

品优购-day03笔记-完善品优购的首页&制作列表页「建议收藏」

  • 注意,这里我们 分为 上下两个模块, 但是 两个模块 都用div
  • 1号 盒子 news-hd 新闻头部模块 给一个 高度 和 下边框
  • 2号 盒子 news-bd 新闻主题部分 里面 包含 ul 和 li 还有 链接
新闻快报 newsflash中的二号盒子:lifeservice 生活服务模块

品优购-day03笔记-完善品优购的首页&制作列表页「建议收藏」

此地方有个小技巧,

  • lifeservice 盒子 宽度为 250 但是装不开 里面的 4个 小 li
  • 可以让 lifeservice 里面的 ul 宽度为 252 就可以 装的下 4个 小li
  • lifeservice 盒子 overflow 隐藏多余的部分就可以了。

6) recommend 推荐模块

品优购-day03笔记-完善品优购的首页&制作列表页「建议收藏」

  • 里面包含2个盒子, 浮动即可
  • 1号盒子 recom-hd
  • 2号盒子 recom-bd 注意里面的小 竖线

——–上面的之前我们已经布局完了———-

7) floor 楼层区

注意这个floor 一个大盒子 包含, 不要给高度,内容有多少,算多少

品优购-day03笔记-完善品优购的首页&制作列表页「建议收藏」

a. 家用电器模块:分析

品优购-day03笔记-完善品优购的首页&制作列表页「建议收藏」

  • floor 中,创建一个家电模块,类名 .jiaodian , 家电这个模块简单 不需要写样式,引入一个版心 .w 控制下宽度就可以了
  • 版心居中对齐 因为家电、手机通讯这些模块 基本相同,下面的 模块基本用这些样式 所以 咱们下面两个盒子的命名是:
  • 1号盒子 box-hd 给一个高度, 有个下边框 里面分为左右2个盒子
  • 2号盒子 box-bd 不要给高度。

b. 家用电器模块:box-hd 模块

  • 有高度

  • 左边 h3 盒子

  • 右边 div 命名为 tab-list 因为用到 tab 切换效果, 所以 里面 要用 ul 和 li 来做 。

c. 家用电器模块:box-bd 模块

品优购-day03笔记-完善品优购的首页&制作列表页「建议收藏」

  • 根据tab 切换的原理, 应该还需要一个 tab-content 的 内容来包装 里面的 5个 盒子
  • 分为5个大列 列的宽度 不一致

8) fixedtool 侧边栏

此模块用固定定位 里面包含 li

品优购-day03笔记-完善品优购的首页&制作列表页「建议收藏」

2. 知识点 – 过渡(CSS3)

过渡(transition)是CSS3中具有颠覆性的特征之一,我们可以在不使用 Flash 动画或 JavaScript 的情况下,当元素从一种样式渐渐地变换为另一种样式时为元素添加效果。

过渡动画: 是从一个状态 渐渐的过渡到另外一个状态

语法格式:

transition: 要过渡的属性  花费时间  [运动曲线]  [何时开始];
属性 描述 CSS
transition 简写属性,用于在一个属性中设置四个过渡属性。 3
transition-property 规定应用过渡的 CSS 属性的名称。 3
transition-duration 定义过渡效果花费的时间。默认是 0。 3
transition-timing-function 规定过渡效果的时间曲线。默认是 “ease”。 3
transition-delay 规定过渡效果何时开始。默认是 0。 3
  • 属性

​ 属性就是你想要变化的 css 属性, 宽度高度 背景颜色 内外边距都可以 。如果想要所有的属性都变化过渡, 写一个all 就可以。

  • 花费时间

    transition-duration 花费时间 单位是 秒(必须写单位) s ms 比如 0.5s 这个s单位必须写 ms 毫秒

  • 运动曲线 默认是 ease

运动曲线示意图:

1498445454760

  • 何时开始

    默认是 0s 鼠标触发就立即开始 可以设置 延迟触发时间

案例:

div { 
   
    width: 200px;
    height: 100px;
    background-color: pink;
    /* transition: 要过渡的属性 花费时间 运动曲线 何时开始; */
    transition: width 0.6s ease 0s, height 0.3s ease-in 1s;
    /* transtion 过渡的意思 这句话写到div里面而不是 hover里面 */
  
			
}
div:hover { 
     /* 鼠标经过盒子,我们的宽度变为400 */

    width: 600px;
    height: 300px;
}

transition: all 0.6s;  /* 所有属性都变化用all 就可以了 后面俩个属性可以省略 */

transition: all 0.5s;

常见效果:

按钮变换底色 图片移动 小米效果 (阴影效果) 传智导航栏效果 等等

3. 列表页制作

列表页准备工作

  • 列表页面是新的页面,我们需要新建 list.html

  • 因为 列表页的 头部 和 底部 基本一致, 我们需要 把首页中的 头部 和 底部的 结构复制过去

  • 头部和底部的 样式 ,列表也需要, 因此 list.html 也需要 引入 common.css

  • 同时 需要新的 list.css 文件 这个 样式文件,里面只写 list.html 结构里面的内容就好了

1) 列表页 header 和 nav 修改

品优购-day03笔记-完善品优购的首页&制作列表页「建议收藏」

  • 秒杀盒子 sk 定位 即可 second kill
  • 1 号 盒子 左侧浮动 sk_list 里面包含 ul 和 li
  • 2 号盒子 左侧浮动 sk_con 里面 包含 ul 和 li

2) 列表页 主体内容区 sk_container

这个盒子里面包含了 所有的 列表页的所有主体内容

品优购-day03笔记-完善品优购的首页&制作列表页「建议收藏」

  • 1号盒子 主体内容区 sk_container 给宽度 1200px 不要给高度
  • 2号盒子 主体内容区 头部 sk_hd 插入图片即可
  • 3号盒子 主体内容区 身体 sk_bd 里面包含 很多的 ul 和 li

a. 列表页列表页 主体内容区 (sk_container)中的小模块:商品介绍模块 sk_goods 布局

品优购-day03笔记-完善品优购的首页&制作列表页「建议收藏」

  • 此li 我们命名为 sk_goods
  • 1号位置 有 a 包含 本图片 和下面的 标题 插入 图片即可 seckill_mod_goods_img 可以做一个 鼠标放入 图片 上滑动的效果
  • 2号位置 标题 H5 命名为 sk_goods_title
  • 3号 位置 为 价格 div 命名为 sk_goods_price
  • 4号位置 为 div 命名为 sk_goods_progress 此处,我们 采取 代码的形式 写出 这个 进度条
  • 5号位置 为 a 链接 命名为 sk_goods_buy 此处注意, 因为父盒子已经有左右padding 我们这里用定位合适。

b) 分页制作 page

品优购-day03笔记-完善品优购的首页&制作列表页「建议收藏」

  • 最大的盒子 我们div 命名为 page 注意里面的盒子 全部用 行内块
  • 1号盒子 用 span 命名为 page_num ( 页码的意思 ) 里面 放 a 把a 转换为 行内块 设置样式
    • pn_prev 上一页 pn_next 下一页
  • 2号盒子 用 span 命名为 page_skip ( skip 跳转 转移的意思 ) 里面注意 有 input 和 button

4. 知识点 – 获得焦点元素

:focus 伪类 选择器用于选取获得焦点的元素 。 我们这里主要针对的是 表单元素

类似于 :hover

语法:


.total input { 
   
  border: 1px solid #ccc;
  height: 30px;
  width: 40px;
  transition: all 0.5s;
}
/*这个input 获得了焦点*/
.total input:focus { 
   
  width: 80px;
  border: 1px solid skyblue;
}

border: 1px solid #ccc;
height: 30px;
width: 40px;
transition: all .5s;
}
这个input 获得了焦点
.total input:focus {

width: 80px;
border: 1px solid skyblue;
}

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/140075.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(1)
blank

相关推荐

  • kafka官方文档_kafka groupid

    kafka官方文档_kafka groupid介绍Kafka是一个分布式的、分区的、冗余的日志提交服务。它使用了独特的设计,提供了所有消息传递系统所具有的功能。我们先来看下几个消息传递系统的术语:Kafka维护消息类别的东西是主题(topic).

  • windws7下Loadrunner12的使用教程详解「建议收藏」

    windws7下Loadrunner12的使用教程详解「建议收藏」一.初识LoadRunner( 点击链接跳转到LoadRunner的安装步骤)1.简介:(1)从LoadRunner英语字面上进行理解就是负载跑步者,为什么这么说呢?对于从事IT软件行业的工作者如开发人员和测试人员来说一定不会感到陌生就是在承受负载的条件下运行软件或者网页的业务。从另一个比较形象的理解就是“压死骆驼的最后一根稻草”这里的稻草就是软件的事务,LoadRunner这款软件…

    2022年10月14日
  • 查看服务器上的图片_js获取图片

    查看服务器上的图片_js获取图片eog命令eyeofgnome,用来在服务器端查看图片。

  • 使用python语言编写常见的文本分类算法

    使用python语言编写常见的文本分类算法    自然语言处理中一个很常见的操作就是文本分类,比如一组新闻文本,通过分类模型,将新闻文本分为政治、体育、军事、娱乐、财经等等几大类。那么分类第一步就是文本向量化,前一篇博客讲了一些,本文可以说是前文的实践版本。本文主要介绍一些常见的文本分类模型,说是介绍,其实主要以代码和结果为主,并不会详细的介绍每个算法的思想、原理、推导过程等,那样的话,估计可以写一个7、8篇的系列了,另外我也发现很…

  • win server服务器 关闭危险端口 135,137,138,139,445的方法

    win server服务器 关闭危险端口 135,137,138,139,445的方法转至:https://www.cnblogs.com/su-root/p/10988875.htmlWindows默认开放135、137、138、139和445五个端口,都与文件共享和打印机共享有关

  • pycharm卸载了环境变量还在怎么办_pycharm使用教程

    pycharm卸载了环境变量还在怎么办_pycharm使用教程因为之前的pycharm是社区版的,有些功能不全,所以需要重装专业版重装pycharm最大的顾虑就是之前的库能否保留以及能否删除干净1.之前的库包卸载之前找到我之前的库包所用编译器,记下路径就行注意:因为python跟pycharm是单独存在的,所以删除的pycharm并没有影响python里安装的库包2.删除正版软件删除是最简单的,找到文件所在位置,直接卸载就行这里注意两个红色箭头要全选,然后等待卸载结束就行。3.重新安装下载链接:http://www.jetbrains.com/

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号