第二周：写前端登录页面

页面构造：

对于登录页面构造，我参考了qq和微信的官网登录页面的布局，左半部分是对该网页的描述，字数精炼，涵盖网页特点，让人一目了然，而右半部分是登录框，这就是页面大体的构造

这个页面是很简单的，两个div块就可以做出来，但是这样子的页面是非常粗糙的，尤其是右半部分的登录框，太过于粗糙，所以我着重对登录框的美化，这里，考虑到左右的分布布局会让整个网页看起来没有中心，第一眼不知道该放在那里，所以我借鉴了手机桌面文件夹打开后，文件夹意外区域背景虚化的设计，所以在css文件里，我对登录框有以下代码

.Dright {
    width: 400px;设计宽高和边距不多讲
    height: 260px;
    padding: 13px;
    position: absolute;
    left: 60%;
    top: 30%;
    background-color: rgba(240, 255, 255, 0.5);最后一个属性使该块的透明度为0.5
    border-radius: 30px;设置边框为圆角，看起来圆润
    text-align: center;
}

二.然后创建menu.html
做一个网页之前，一定设计好网页的div结构，如果半中间在修改会非常麻烦
，首先我们要提前熟悉的是css内的定位有关的知识，分为三种，fixed，relative，absolute，其中relative是无法使用top，left等属性，一般用它来做基准，absolute的top等属性是相对于它的父元素，一般就是离得最近的relative定位的元素

所以我吧网页头部菜单栏设置为relative，有四个链接，个人信息，安全须知，购物车，我的店铺，我对这四个链接设置了鼠标事件，当鼠标移动到这四个链接上的时候，下面会弹出来对应的提示信息，这里注意的是，我对这四个链接的定位设置的都是absolute，是为了防止弹出的信息会挤压头部菜单栏下面的内容，设置了absolute后设置z-index还可以试着堆叠顺序，反正是非常贴心

这里，我在个人页面弹出的页面想实现以下样式

背景虚化的效果，这里直接在链接里设置背景图片是失败的，不知道为什么，所以我在链接下建立一个子标签div，里面没有任何内容，将该标签的背景图片设置为这个就成功了，这里我了解到一个内容，交遮罩，和这个很像，就是在一个网页里面，没登录的时候，背景会是暗黑透明且不可点击的，这里的暗黑透明和不可点击就用了遮罩的原理。