唯品会html单页ui练习第一弹

耀世
2021-12-19 / 0 评论 / 55 阅读 / 正在检测是否收录...

前言

html课程学了好几周了,虽然说学的都是基础,毕竟写的都是这些简单的单页,下面分享一下 课堂上面的练习 仿唯品会的单页 做出这个 期末的html考试基本上是稳了

效果图

唯品会.png

说明

写之前 一定要先划分好网站的各方面区域,首先先写div、头部、导航、主体、主体左边右边、还有底部
然后就是对应的css样式 我这里举例html这的主要div css样式我就不展示出来了 具体清下载文件来查看 里面都有注释了的
导航栏 图片以及菜单的浮动 主体左边跟主体右边的浮动 一定要注意 然后就是在主体里面插入内容 表格啥的 等等....
<div>
<!--整体包裹全部div的div-->
      <div class="header">
          <!--模块1头部区域-->
      </div>
      <div class="nav">
          <!--模块2整体区域-->
      </div>
      <div class="main">
          <!--模块3整体区域-->
          <div class="main_1">
              <!--模块3-1区域-->
          </div>
          <div class="main_2">
              <!--模块3-2区域-->
          </div>
      </div>
      <div class="footer">
          <!--网站底部区域-->
      </div>
</div>

文件下载

需要下方评论区留言才可以查看下载哦

0

评论 (0)

取消