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

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

移动端简单登录页面


<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>

下拉菜单


<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>

如有不懂的欢迎留言!

你可能感兴趣的:(前端,css,html,html5,前端,移动端)