今天跟着专业老师复习了一下前端,感觉好多都已经忘记了,我将今天复习的一些重点整理出来。
移动端简单登录页面
<!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>
如有不懂的欢迎留言!