华为云大前端学习之旅（一）

一、华为Classroom 网页模仿实战

1、网页地址：https://classroom.devcloud.huaweicloud.com

二、编写准备

分析骨架

整体 网页可以分为一下几个部分

1. 导航栏

2. 轮播图

3. 内容页面
   

4. 页脚
   

三、网页编写

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、下拉框位置需要注意，下拉框出现的位置，建议在出发元素下方编写