今天跟着专业老师复习了一下前端,感觉好多都已经忘记了,我将今天复习的一些重点整理出来。
/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>
如有不懂的欢迎留言!
如果觉得《web前端页面——移动端简单登录页面 下拉菜单(代码详细注释)》对你有帮助,请点赞、收藏,并留下你的观点哦!