??今天跟著專業老師復習了一下前端，感覺好多都已經忘記了，我將今天復習的一些重點整理出來，
移動端簡單登錄頁面
<!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>
如有不懂的歡迎留言！
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/125834.html
標籤：其他
上一篇：2020-09-24
下一篇：Vue基礎整理1