web前端页面——移动端简单登录页面、下拉菜单（代码详细注释）

最新推荐文章于 2024-02-20 06:28:16 发布

宝藏女孩的成长日记

最新推荐文章于 2024-02-20 06:28:16 发布

阅读量4.2k

点赞数 15

分类专栏：前端文章标签： css html html5 前端移动端

本文链接：https://blog.csdn.net/hanhanwanghaha/article/details/108759595

版权

前端专栏收录该内容

22 篇文章 0 订阅

订阅专栏

今天跟着专业老师复习了一下前端，感觉好多都已经忘记了，我将今天复习的一些重点整理出来。

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>

如有不懂的欢迎留言！

宝藏女孩的成长日记

关注

15
点赞
踩
26

收藏

觉得还不错? 一键收藏
3
评论
web前端页面——移动端简单登录页面、下拉菜单（代码详细注释）

今天跟着专业老师复习了一下前端，感觉好多都已经忘记了，我将今天复习的一些重点整理出来。移动端简单登录页面<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0;/*外边距为0*/ padding: 0;/*内边距为0*/
复制链接

扫一扫