Hoy revisé el front-end con un maestro profesional. Sentí que muchos de ellos se habían olvidado. Resolveré algunos puntos clave de la revisión de hoy.
Página de inicio de sesión simple en el móvil
<!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>
Menú desplegable
<!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>
Si no lo entiende, deje un mensaje.