这个案例是实现一个模仿慕课网首页以及首页登陆的网页。
运用的主要技术方法有以下
- div盒模型的灵活运用
- 对于页面布局的理解，设置合理的模块，以及按照模块的设计完成样式表。灵活使用position属性
- 设置溢出元素，以及对于溢出产生的问题的解决。
- CSS细节的优化：button按钮的轮廓的清除。
- 利用div和css样式绘制圆点。
- 如果要设置一个模块的背景是具有不透明度属性的，但是要求这个模块里的文字不带有不透明效果，如何解决。
- 用overflow:hidden来清除浮动，特别是对于有position属性的div时，最好在css样式上加overflow:hidden。
- 焦点放在一个li上时，需要一个凸显的效果。可以设置box_shadow属性的大小和颜色来完成，达到一个变化的效果。或者设置模糊度的变化来达到类似效果。
- 点击按钮，弹出登录框的同时，整个页面会变暗。这就需要在body的最后添加一个浮动于整个页面的mask盒子，它的背景颜色是灰色的，且具有0.65的不透明度，把它设置为display:none。再通过javascript实现鼠标点击事件，来改变display属性。
- 在页面中有一个登陆按钮，这个按钮关联一个鼠标点击事件，点击这里，弹出一个位于中央的登录框。这里还用到了设置盒子居中的方法。主要是position百分比定位，以及元素本身的位移（采用css3元素位移属性transform:translate）。
- 最后，这个登录框有一个关闭的cursor。 点击同时mask和登录框的display复原。
：
具体代码不难 就不贴了~需要的再私信。