这是我参与新手入门的第1篇文章
一、华为Classroom 网页模仿实战
1、网页地址:classroom.devcloud.huaweicloud.com
二、编写准备
分析骨架
整体 网页可以分为一下几个部分
- 导航栏
- 轮播图
3. 内容页面
-
页脚
三、网页编写
1、导航栏分析:
导航栏可以分为一下三个部分
- logo 图标,通过网页可知,logo图标涉及超链接,可以做页面跳转
- 导航列表, 鼠标移入后变色同时可做叶苗跳转
- 右侧信息栏,包含一个标签和一个列表
2、导航栏布局编写
- 导航栏布局设定
- 技术要点
- 标签选用div 标签
- 技术要点
<div class="nav"></div>
- logo编写
- 技术要点
- 标签选用div 、a、img标签
- 如果不适用img标签,可以使用css背景设置进行
- 注意a 标签不是块元素
- 技术要点
<div class="logo">
<a href="#">
<!-- 使用背景设置,这里也可以使用图片-->
<!--<img src="./Images/logo.svg" alt="logo">-->
</a>
</div>
- 导航列表编写
- 技术要点
- 标签选用div 、ul、li、a、i标签
- 注意弹出下拉菜单,弹出下拉菜单需要最顶层,同时宽度为视口宽度
- i 标签用来设置向下箭头,注意使用时候要引用字体文件
- 技术要点
<ul class="nav-center">
<li>
<a href="javascript:">华为生态
<!--使用字体来添加向下箭头-->
<i class="fas fa-angle-down"></i>
</a>
<!--弹出1下拉框 这里需要注意-->
<div class="drop-content1"></div>
</li>
<li>
<a href="javascript:">MOOC课堂
<i class="fas fa-angle-down"></i>
</a>
<!--弹出2下拉框-->
<div class="drop-content2"></div>
</li>
<li><a href="javascript:">云端实验室</a></li>
<li><a href="javascript:">教学市场</a></li>
<li><a href="javascript:">新工科实验班</a></li>
<li><a href="javascript:">学习交流</a></li>
</ul>
- 信息栏编写
- 技术要点
- 标签选用div 、ul、li、a、button标签
- button标签注意居中
- 登陆和注册中间的“|”可以使用伪元素,也可以使用一个单独的li
- 技术要点
<div class="nav-right">
<button>
<a href="javascript:">个人中心</a>
</button>
<ul class="nav-right-list">
<li><a href="javascript:">登陆</a></li>
<li class="line">|</li>
<li><a href="javascript:">注册</a></li>
</ul>
</div>
三、总结
1、整体的框架书写还是比较简单。
2、注意特殊标示的引入
3、下拉框位置需要注意,下拉框出现的位置,建议在出发元素下方编写