web前端页面——移动端简单登录页面、下拉菜单（代码详细注释）
生活随笔
收集整理的這篇文章主要介紹了
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>如有不懂的歡迎留言！
總結
以上是生活随笔為你收集整理的web前端页面——移动端简单登录页面、下拉菜单（代码详细注释）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 如何编写自定义的Web控件
- 下一篇： 前端面试题（重点整理）：谈谈你对web标