Mike的博客

讲解html基础语法。

效果图： 页面结构:页面内容:样式:源码：详细讲解：1.产品信息部分(1).获取所有按钮:(2).移除活动状态:(3).添加活动状态:2.用户评论区域完

和justify-content: center;表示每一部分之间的间距；(1). 导航栏的固定显示：position: fixed;要掌握导航栏的创建。scale() 函数是 transform 属性的一部分，(1).当用手机端打开网页时，能够正常观看。(1).掌握进度条如何构建即可。，而不改变其实际布局或位置。(1).见代码解释。

(1)重点要掌握：输入框的生成，文本区域的生成；transition和transform。(1).重点要掌握 进度条的构建。将鼠标变为点击的使用；

成品:任务要求：源码：详细讲解：1.导航栏部分：(1).重点为： display: block; 和 float: left;的使用，overflow: hidden;的使用，hover的使用。2.头像和介绍部分:(1).重点：border-radius: 50%;设置为圆形，background-image: url(./graph.jpg);填充图片，background-size: cover;图片覆盖。3.技能列表部分(1).重点：知道如何构造一个进度条。4

(2). .top a部分中 float: left;但是，如果元素的自然宽度超过了400像素，那么这个属性就会将元素的宽度限制在400像素以内。(1). .top部分中background-color设置颜色，overflow 用于控制当元素的内容超出其指定大小时，是否以及如何裁剪/显示这些内容。(3). .top a:hover 用于当鼠标放在链接上时做出的改变，这里发生了颜色的改变。(1).元素是一个语义化的标签，用于定义导航链接的部分。