前端学习第6天

最新推荐文章于 2023-03-30 21:09:09 发布

璨嵘

最新推荐文章于 2023-03-30 21:09:09 发布

阅读量197

点赞数

本文链接：https://blog.csdn.net/Mrcanrong/article/details/99988145

版权

前端学习第6天

一、表单元素
1.input 输入框，行内块元素，type 输入框类型 text表示是一个文本输入框
placeholder 占位字符，用于提示输入框应该输入的内容，value 表示输入框中内容
name 属性，和后台服务器交互时，必须携带name属性，发送请求时的参数名
例：
2. password 密码输入框，输入的内容不可见，以·的形式显示
例：<input type=“password” placeholder=“请输入您的密码”
3. email 邮箱输入框
4. 文件选择器 <input type=“file”
5. number 数字输入框
6. label 标签和input一起使用
将label和input标签绑定到一起 for属性值就是input输入框的id值
例：label for=“user”>账号</label
<input id=“user” type=“text” placeholder=“请输入账号”
7.单选 type=“radio” 表示一个单选选项处于同一组单选框只能选中一个值，将多个radio的name属性值设置为相同的值
checked 属性标签为选中状态
8.checkbox 复选框
9.select 下拉列表行内块

	例： select 下拉列表  行内块
	label for="school">选择你的学校</label
	 multiple 属性 表示可以选择多个选项--
	<select name="" id="school"
	     option 下拉选项

10.button 按钮行内块
<input type=“button” value=“登录”

	<button>登录</button>

二、视口设置
1.viewport 视口设置 PC端浏览器会自动忽略这行代码，移动端浏览器会根据这行代码对页面视口进行设置
2.width=device-width 设置视口宽度为设备屏幕宽度
initial-scale=1.0 设置视口默认缩放比例 1.0表示不缩放
user-scalable=no 设置页面不允许用户进行缩放
默认情况下，移动端浏览器在打开网页时为了显示全部内容，会将页面进行缩小，针对移动端设备专门设计一套网页，这种移动端页面就没有必要进行压缩了

对于移动端网页，有两种实现方式
1.网站PC端页面和移动端页面完全分开做，根据用户访问的设备类型，给用户返回不同的页面(百度，淘宝，京东…国内大多数网站都是这种做法)
2.响应式页面布局，页面自身可以根据浏览器窗口的宽度进行不同的布局，在屏幕宽度到达某个临界点时，切换为另一种布局样式，在较宽的浏览器中显示PC布局，在较窄的移动端品目上显示移动端页面布局

三、手机app登录界面小例子

<style>
		body{
			margin: 0;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			align-items: center;
			padding: 2vw;
		}
		header{
			width: 98%;
			display: flex;
			justify-content: space-between;
		}
		header>span:nth-of-type(2){
			font-size: 20px;
		}
		main{
			
			height: 70vh;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			align-items: center;
			
		}
		main>img{
			width: 30vw;
			border: 2px #008000 solid;
			border-radius: 50%;
		}
		main input{
			border: none;
			color: lightgray;
			outline: none;
			font-size: 18px;
			background-color: rgba(0,0,0,0);
		}
		main>div>section{
			border-bottom: 1px gray solid;
			margin: 10px 0;
			color: lightgray;
		}
		main>div>button{
			width: 260px;
			height: 40px;
			background-color: green;
			color: white;
			font-size: 20px;
			border: none;
			outline: none;
			border-radius: 10px;
		}
		main>div>a{
			display: block;
			text-align: center;
			margin: 5px;
			text-decoration: none;
			color: blue;
		}
		footer>div{
			display: flex;
			justify-content: space-around;
			
		}
		footer>p{
			color: lightgrey;
			text-align: center;
		}
		footer>div>img{
			width: 20vw;
		}
		#bg{
			width: 100vw;
			/* 添加过滤效果 */
			filter: blur(30px);
			/* 脱离文档流，为了让后面元素显示到图片原来的位置上 */
			position: absolute;
			/* 将图片层级调整到最下面 */
			z-index: -10000;
		}
		
		/* 手动实现两条横线 */
		/* footer>p>span{
			display: inline-block;
			width: 15vw;
			height: 1px;
			background-color: red;
			position: relative;
			bottom: 5px;
		} */
		
		footer>p:before,footer>p:after{
			content: "";
			display: inline-block;
			width: 15vw;
			height: 1px;
			position: relative;
			bottom: 5px;
			background-color: red;
		}
		
		
	</style>
</head>
<body>
	<img id="bg" src="app_images/App登录.png" alt="">
	<header>
		<span>返回</span>
		<span>登录</span>
		<span>注册</span>
	</header>
	
	<main>
		<img src="app_images/weixin.png" alt="">
		<div>
			<section>
				<label for="">账号</label>
				<input type="text" value="123456789@qq.com">
			</section>
			<section>
				<label for="">密码</label>
				<input type="password" value="12345678">
			</section>
		</div>
		<div>
			<button>登录</button> <br>
			<a href="">忘记密码</a>
		</div>
	</main>
	
	<footer>
		<!-- <p><span></span> 其他登录方式 <span></span></p> -->
		<p> 其他登录方式 </p>
		<div>
			<img src="app_images/qq.png" alt="">
			<img src="app_images/weibo.png" alt="">
			<img src="app_images/weixin.png" alt="">
		</div>
		
	</footer>

四、字体图标库
图标库：http://fontawesome.dashgame.com/
使用方法：
1.先link引用
2.使用字体图标添加class属性值
例：`

	<span class="fa fa-address-book"></span>
	
	<span class="fa fa-battery"></span>
	
	<span id="eye" class="fa fa-eye"></span>

自定义字体
引用第三方字体方法：
1.先声明加载字体
2.使用指定字体
例：

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			/* 先声明加载字体 */
			@font-face {
				/* font-family 自定字体名称 */
				font-family: hgt;
				/* src 字体文件路径 */
				src: url(hgt.otf);
			}
			
			p{
				/* 使用指定的字体 */
				font-family: hgt;
			}
		</style>
	</head>
	<body>
		<p>我是文字</p>
	</body>
</html>