【前端】零基础带你入门前端＜三＞ —— 实现手机通讯录（微信通讯录）等

零基础带你入门前端

前言：此文章是在 < 一 >与 < 二 >的基础之上，具体可进入主页进行查看

描述类标签

描述类标签dl 和 dt 以及 dd 比如在通讯录描述的时候进行使用

<dl>
<dt>A</dt>
<dd>Aaa 租房子 <dd>
<dd>Aba 卖鞋子  <dd>
<dt>B</dt>
<dd>booby</dd>
<dt>C</dt>
<dd>晨晨</dd>
</dl>

显示为：

查看手机通讯录

我们可以打开自己的手机通讯录看一下页面

注：这个手机页面是iphone 7 的页面，对此页面进行了修改，目的是：掌握浮动锚点定位位置固定以及粘性定位等

移动端进行查看

需要在head加入这一部分代码

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

解释代码：

name=“viewport” ：视窗
width=device-width ：宽度等于设备的宽度
user-scalable=no : 用户在手机上看到的页面不能放大和缩小
maximum-scale=1.0 : 最大缩放为1.0
minimum-scale=1.0 ：最小缩放为1.0

浮动

如图所示：

思路：
让徐文杰成为一个容器，让其左浮动
让我的名片成为一个容器，让其右浮动

html的代码：

<div class = "xu">
			<a href="2.jpg">徐文杰</a>
			</div>
<div class = "xus">
				<a href="2.jpg">我的名片</a>
			</div>

来看一下CSS代码的浮动


.xu a{
    
    
	font-size:20px;//设置字体的厚度
	line-height:30px;//与父元素height共同让字体居中
	color:black;//字体颜色为黑色
	float:left;//向左浮动
	text-decoration:none;//去掉字体上面的下划线
}

.xus a{
    
    
	font-size:20px;
	float:right;//向右浮动
	line-height:30px;
	text-decoration:none;
	color:black;
	display:block;//把里面的元素均匀铺开
	
}

粘性定位

看看图来了解一下什么是粘性定位

粘性定位：当关于A的名字滑完后，进入B的名字进行滑的时候，上面的灰色方框就会由A变成B

代码实现：

//html
<div class="top">
<dt id = "A">A</dt>
<dt id = "B">B</dt>
<dt id = "C">C</dt>
<dt id = "D">D</dt>
<dt id = "Z">Z</dt>
</div>

//css


.top dt{
    
    
	
	height:34px;//垂直居中
	background-color:#ddd;//背景颜色
	font-size:15px;//字体厚度
	line-height:34px;//垂直居中
	position:sticky;//粘性定位
	top:0;//距离上面的距离为 0

注：
position : sticky 粘性定位可选择一个参考值top为零
top : 0

锚点定位

锚点定位：当我们点击右边的字母时，会自动跳转到指定的内容比如 : 当我们点击右边的X时，内容会跳到姓氏首字母为X的内容区域，比如徐


<dt id = "W">W</dt>//选择id选择器

<a href = "#W">W</a>//一定要有#符号就会跳转 可查看上期博客的a标签

固定定位

固定定位：当我们无论怎样滑动，右边的的字母位置始终不变，像是固定到屏幕上即为固定定位

代码实现：

position:fixed;//选择固定定位
top:200px;//距顶部高度200像素
right:0;//距右边的距离为 0

实现手机通讯录

html 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>xwq</title>
		<link rel = "stylesheet" href = "three.css">
	</head>
	<body>
		<div class = "tor">通讯录</div>
		<div class = "search" >搜索</div>
<div class = "name">
			<div class = "xu">
			<a href="2.jpg">徐文杰</a>
			</div>
			<div class = "xus">
				<a href="2.jpg">我的名片</a>
			</div>
		</div>
		<div class="top">
<dt id = "A">A</dt>
			<dd>阿里</dd>
			<dd>阿里</dd>
			<dd>阿里</dd>
			<dd>阿里</dd>
			<dd>阿里</dd>
			<dt id = "B">B</dt>
			<dd>Bob</dd>
			<dt id = "C">C</dt>
			<dd>陈晨</dd>
			<dd>陈晨</dd>
			<dd>陈晨</dd>
<dd>陈晨</dd>
			<dd>陈晨</dd>
			<dd>陈晨</dd>
			<dd>陈晨</dd>
			<dd>陈曦</dd>
			<dd>陈婷</dd>
			<dd>崔曦</dd>
			<dd>崔曦</dd>
			<dd>崔曦</dd>
			<dd>崔曦</dd>
			<dt id = "D">D</dt>
			<dd>钉钉官方短信</dd>
			<dd>钉钉</dd>
			<dt id = "H">H</dt>
<dd>黄花</dd>
			<dd>黄鹏<dd>
			<dd>黄花</dd>
			<dd>黄花</dd>
			<dd>黄花</dd>
			<dd>黄花</dd>
			<dd>黄花</dd>
			<dd>黄花</dd>
			<dt id = "L">L</dt>
			<dd>李小二</dd>
			<dd>李小二</dd>
			<dd>李小二</dd>
			<dd>李小二</dd>
			<dd>李小二</dd>
			<dd>李小二</dd>
			<dd>李小二</dd>
			<dd>李小二</dd>
			<dt id = "W">W</dt>
			<dd>王新杰</dd>
			<dd>王新杰</dd>
			<dd>王新杰</dd>
			<dd>王新杰</dd>
			<dd>王新杰</dd>
			<dd>王新杰</dd>
			<dd>王新杰</dd>
			<dd>王新杰</dd>
			<dd>王新杰</dd>
			<dd>王新杰</dd>	
			<dd>王新杰</dd>
			<dt id = "X">X</dt>
			<dd>徐硕</dd>
			<dd>徐硕</dd>
			<dd>徐硕</dd>
			<dd>徐硕</dd>
			<dd>徐硕</dd>
			<dd>徐硕</dd>
			<dd>徐硕</dd>
			<dd>徐硕</dd>
<dd>徐硕</dd>
			<dd>徐硕</dd>
			<dd>徐硕</dd>
			<dd>徐硕</dd>
			
			<dt id = "Y">Y</dt>
			<dd>杨红</dd>
			<dd>杨红</dd>
			<dd>杨红</dd>
			<dd>杨红</dd>
			<dd>杨红</dd>
<dd>杨红</dd>
			<dd>杨红</dd>
			<dd>杨红</dd>
			<dd>杨红</dd>
			<dd>杨红</dd>
			<dt id = "Z">Z</dt>
			<dd>章子怡</dd>
			<dd>章子怡</dd>
<dd>章子怡</dd>
			<dd>章子怡</dd>
			<dd>章子怡</dd>
			<dd>章子怡</dd>
			<dd>章子怡</dd>
			<dd>章子怡</dd>
			<dd>章子怡</dd>
			<dd>章子怡</dd>
			<dd>章子怡</dd>
			<dd>章子怡</dd>
		</div>
		<div class = "index" >
			<a  href = "#A">A</a>
			<a href = "#B">B</a>
			<a href = "#C">C</a>
			<a href = "#H">H</a>
			<a href = "#L">L</a>
			<a href = "#W">W</a>
			<a href = "#X">X</a>
			<a href = "#Y">Y</a>
			<a href = "#Z">Z</a	


		</div>
		
	</body>
</html>

css 样式

*{
    
    
	margin:0;
	padding:0;
}

.tor{
    
    
	font-size:30px;
	color:black;
	margin-top:25px;
}
.search{
    
    
	
	border:3px solid #ddd;
	margin-top:10px;
	background-color:#ddd;
	border-radius:10px;
}
.name{
    
    
	margin-top:12px;
	height:50px;
	width:100%;
	
}
.xu a{
    
    
	font-size:20px;
	line-height:30px;
	color:black;
	float:left;
	text-decoration:none;
}
.xus a{
    
    
	font-size:20px;
	float:right;
	line-height:30px;
	text-decoration:none;
	color:black;
	display:block;	
}
.top dt{
    
    
	
	height:34px;
	background-color:#ddd;
	font-size:15px;
	line-height:34px;
	position:sticky;
	top:0;	
}

.index a{
    
    
	display:block;
	text-align:left;
	text-decoration:none;
}

.index{
    
    
	position:fixed;
	top:200px;
	right:0;

}

显示为：
2.pm

完结

最近很喜欢一句话：

很有意境

他为她撑伞淋湿了衣衫还一边说笑着握着她的手取暖他们的世界一个人一半