前端是做什么的？
1.前端工程师主要利用HMTL与CSS建构页面（其中html构建骨架，css构建样式），用JavaScript获取后端数据以及完善交互以及用户体验。
2.通俗来讲，前端在一个项目里，拿到UI设计师设计的设计稿，然后实现UI设计师设计稿，调用后端程序员给的数据接口以获取数据，然后测试，最后部署上线。
3.前端可以对设计图负责,大部分情况下,不需要特别的去理解业务逻辑,因为我们90后都是玩着十几年手机电脑长大的,十几年的经验足够我们在潜意识里想明白应该怎么做,怎么去一步步实现,会有什么意外情况。
4.我感觉前端发展有个很大的缺陷----晋升问题. 正如第三点所言,作为领导必须对项目有足够的了解,显然是要重点包括业务逻辑,这点上,后端开发者需要涉及数据库逻辑,是必须要跟业务逻辑打交道的(重中之重),因此,大部分的领导岗位都是后端开发者更有晋升的机会。当然,个别公司有专门的前端组长(这也不算什么),如果说前端开发者在自己工作范围之外还要腾出时间去研究业务逻辑,属实是觉得出力不讨好(因为这样的操作需要持续很久才能看出效果),而且再怎么研究业务逻辑也不会比每时每刻跟业务逻辑打交道的后端开发者了解更多。说实在的,大部分情况下,前端在配合后端进行开发.后端需要了解业务逻辑,要跟领导和客户商量细节,露脸机会很大,在老板面前刷脸次数众多。这些都是拉开前后端程序员晋升机会差距的因素。
前端的特效视觉：
层次结构的表现
动态效果，如缩放，覆盖，滑出网页或单个视觉元素，可帮助用户理解网页信息架构。通常是通过转场和菜单来展开网页。
表现层级关系
为了展现层与层的关系，是抽屉，是打开，还是平级切换等等。让用户知道这个界面和上一个、下一个的关系。
清晰明确
动效可以清晰地表明各种数据块中间的逻辑结构，即使在数据高度饱和的情况下也能使一切从观感上有组织性。
添加了图层
在网站制作过程中加上特效，每个元素都在用户滚动页面或者是鼠标经过的地方有动态效果，就像在平面层上多出了一个动态层，这样看起来更加有层次感。
隐藏式侧边栏菜单
代码：
<html><head><metahttp-equiv="content-type"content="text/html; charset=utf-8"><metaname="viewport"content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><title>隐藏式侧边栏菜单</title><linkhref="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"rel="stylesheet"><style> *{ /* 初始化 */margin: 0; padding: 0; } body{ /* 100%窗口高度 */height: 100vh; background-color: rgb(138, 130, 137); } .container{ width: 30px;/* 设置左边显示（鼠标为选中时状态的宽度）*/height: 600px;/* 设置左边显示（鼠标为选中时状态的高度）*//* 绝对固定定位 */position: fixed; left: 0px; /* 垂直居中 */top: 20%; /* transform: translateY(-50%); */background-color: #222; /* 右上右下圆角 */border-radius: 015px15px0; overflow: hidden;/* 溢出隐藏 *//* 动画过渡 */transition: 0.3s; } .container:hover{ /* 鼠标移入，展开+改变圆角大小 */width: 130px; border-radius: 050px50px0; } .container:hoverlia{ /* 鼠标移入，改变字体颜色 */color: rgb(255, 255, 255); } /* 添加左侧橙色条状 */.container::before{ content: ""; width: 50%;/*鼠标悬停时显示左侧橙色条宽度*/height: 100%;/*鼠标悬停时显示左侧橙色条高度*/position: absolute;/*绝对定位*/top: 0px; left: 0px; z-index: -1;/* 将z轴设置为-1不让其遮挡图标*/background-color: rgb(255, 136, 0); } /* 设置上方快 */.container.top{ width: calc(100% - 30px);/* 动态设置宽度：宽度比100%的宽度少30px。*/margin-left: 30px;/*左外间距设为30px与上面的.container{}中的width一致*/height: 20%;/*鼠标悬停时从20%开始计算（也就是第一个块）*/background-color: #222;/*设置跟着块的上方的块颜色*/border-radius: 00020px;/*设置上方的黑块的左下角的弧度*//* 动画过渡 */transition: 0.2s; } /* 这只中间快 */.container.middle{ width: calc(100% - 60px); height: 10%;/*每次鼠标悬停时选中的部分为10%（也就是一个橙色的块）*/background-color: rgb(255, 136, 0);/*设置中间选择时的快的背景色*/margin-left: 30px;/*左外间距设为30px与上面的.container{}中的width一致*/border-radius: 20px;/*设置边角弧度*/} /* 设置下方块 原理上上方快一样*/.container.bottom{ width: calc(100% - 30px); height: 100%; margin-left: 30px; background-color: #222; border-radius: 20px000; } .containerli{ /* 绝对定位 */position: absolute; /* 通过var函数调用自定义属性--lqj */top: var(--lqj); width: 100%; height: 10%; font-size: 30px; /* 弹性布局 水平垂直居中 */display: flex; justify-content: center; align-items: center; } .containerlia{ /* 字体颜色透明 */color: transparent; /* 动画过渡 */transition: 0.3s; } /* 分别为每一个li元素设置.top的高度 *//* ~是兄弟选择器 */.containerli:nth-child(1):hover ~ .top{ height: 20%; } .containerli:nth-child(2):hover ~ .top{ height: 30%; } .containerli:nth-child(3):hover ~ .top{ height: 40%; } .containerli:nth-child(4):hover ~ .top{ height: 50%; } .containerli:nth-child(5):hover ~ .top{ height: 60%; } .containerli:nth-child(6):hover ~ .top{ height: 70%; } </style></head><body><divclass="container"><!-- --lqj是自定义属性，通过var函数可调用 --><listyle="--lqj:20%;"><ahref="#"><iclass="fa fa-home"aria-hidden="false"></i></a></li><listyle="--lqj:30%;"><ahref="#"><iclass="fa fa-th-large"aria-hidden="true"></i></a></li><listyle="--lqj:40%;"><ahref="#"><iclass="fa fa-shopping-bag"aria-hidden="true"></i></a></li><listyle="--lqj:50%;"><ahref="#"><iclass="fa fa-user"aria-hidden="true"></i></a></li><listyle="--lqj:60%;"><ahref="#"><iclass="fa fa-cog"aria-hidden="true"></i></a></li><listyle="--lqj:70%;"><ahref="#"><iclass="fa fa-sign-out"aria-hidden="true"></i></a></li><divclass="top"></div><divclass="middle"></div><divclass="bottom"></div></div></body></html>
