网站建设傲,企业网络推广方法,百度一对一解答,在线域名解析ip地址查询今天跟着专业老师复习了一下前端#xff0c;感觉好多都已经忘记了#xff0c;我将今天复习的一些重点整理出来。 https://blog.csdn.net/hanhanwanghaha宝藏女孩 欢迎您的关注#xff01; 欢迎关注微信公众号#xff1a;宝藏女孩的成长日记 如有转载#xff0c;请注明出处… 今天跟着专业老师复习了一下前端感觉好多都已经忘记了我将今天复习的一些重点整理出来。 https://blog.csdn.net/hanhanwanghaha宝藏女孩 欢迎您的关注 欢迎关注微信公众号宝藏女孩的成长日记 如有转载请注明出处如不注明盗者必究 移动端简单登录页面
!DOCTYPE html
htmlheadmeta charsetUTF-8title/titlestyle typetext/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/headbodyheader登录页面/headerarticleformdiv classmainboxinput typetext classa name id value placeholder用户名/input typepassword classa name id value placeholder密码 /input typebutton name id value登录 //div/form/articlefooter欢迎关注交流前端/footer/body
/html下拉菜单
!DOCTYPE html
htmlheadmeta charsetUTF-8title/titlestyle typetext/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/headbodyheadernavulli一级菜单div classsubmenup二级菜单/pp二级菜单/pp二级菜单/pp二级菜单/pp二级菜单/pp二级菜单/p/div/lili一级菜单div classsubmenup二级菜单/pp二级菜单/pp二级菜单/pp二级菜单/pp二级菜单/pp二级菜单/p/div/lili一级菜单div classsubmenup二级菜单/pp二级菜单/pp二级菜单/pp二级菜单/pp二级菜单/pp二级菜单/p/div/lili一级菜单div classsubmenup二级菜单/pp二级菜单/pp二级菜单/pp二级菜单/pp二级菜单/pp二级菜单/p/div/lili一级菜单div classsubmenup二级菜单/pp二级菜单/pp二级菜单/pp二级菜单/pp二级菜单/pp二级菜单/p/div/li/ul/nav/header/body
/html
如有不懂的欢迎留言
