web前端页面——移动端简单登录页面、下拉菜单（代码详细注释）

今天跟着专业老师复习了一下前端，感觉好多都已经忘记了，我将今天复习的一些重点整理出来。

https://blog.csdn.net/hanhanwanghaha宝藏女孩欢迎您的关注！
欢迎关注微信公众号：宝藏女孩的成长日记
如有转载，请注明出处（如不注明，盗者必究）

移动端简单登录页面

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">*{margin: 0;/*外边距为0*/padding: 0;/*内边距为0*/}header{height: 50px;background-color: blue;font-size: 30px;text-align: center;line-height: 50px;color: white;}html,body{width: 100%;height: 100%;}article{height: calc(100% - 100px);/*设置article的高度为百分之百减去header和footer的高度  注意:此处减号前后必须要有空格，否则就没有效果*/}footer{height: 50px;background-color: blue;font-size: 30px;text-align: center;line-height: 50px;color: white;}.mainbox{width: calc(100% - 50px);/*左边留出25px，右边留出25px*/position: absolute;/*对mainbox绝对定位*/left: 25px;top: 300px;}input{display: block;/*设置成块级元素，这样就可以设置宽度*/width: 100%;height: 45px;margin-bottom: 3px;}.a{padding-left: 3px;/*让里面的文字向右移3像素*/width: calc(100% - 7px);}</style></head><body><header>登录页面</header><article><form><div class="mainbox"><input type="text" class="a" name="" id="" value="" placeholder="用户名"/><input type="password" class="a" name="" id="" value="" placeholder="密码" /><input type="button" name="" id="" value="登录" /></div></form></article><footer>欢迎关注，交流前端</footer></body>
</html>

下拉菜单

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">*{margin: 0; /*外边距为0*/padding: 0; /*内边距为0*/}ul{list-style: none;/*把小圆点去掉*/}nav{width: 1000px;margin: 0 auto; /*让nav居中*/ background-color: red;height: 30px;  /*因为内部的元素设了浮动*/}ul li{width: 150px;/*每个小一级标题的宽度为150px*/float: left;/*让一级标题向左靠拢*/line-height: 30px; /*一级标题高度向左靠拢*/text-align: center;/*文字居中*/}.submenu{height: 0;/*鼠标不点到一级菜单的时候，高度就为0*/background-color: blueviolet;overflow: hidden;/*超过显示的高度（下面显示的ul li:hover .submenu的高度为155px）就隐藏*/transition: all 1s;/*鼠标放到一级菜单上，二级菜单下拉的过渡为1秒*/}.submenu p{border-bottom: solid 1px #ccc;/*二级菜单与二级菜单的边界分隔高度为1px*/}ul li:hover .submenu{height: 155px;/*当鼠标移动在li上的时候,让二级菜单的高度变为155px*/}</style></head><body><header><nav><ul><li>一级菜单<div class="submenu"><p>二级菜单</p><p>二级菜单</p><p>二级菜单</p><p>二级菜单</p><p>二级菜单</p><p>二级菜单</p></div></li><li>一级菜单<div class="submenu"><p>二级菜单</p><p>二级菜单</p><p>二级菜单</p><p>二级菜单</p><p>二级菜单</p><p>二级菜单</p></div></li><li>一级菜单<div class="submenu"><p>二级菜单</p><p>二级菜单</p><p>二级菜单</p><p>二级菜单</p><p>二级菜单</p><p>二级菜单</p></div></li><li>一级菜单<div class="submenu"><p>二级菜单</p><p>二级菜单</p><p>二级菜单</p><p>二级菜单</p><p>二级菜单</p><p>二级菜单</p></div></li><li>一级菜单<div class="submenu"><p>二级菜单</p><p>二级菜单</p><p>二级菜单</p><p>二级菜单</p><p>二级菜单</p><p>二级菜单</p></div></li></ul></nav></header></body>
</html>