前言: 此文章是在 < 一 >与 < 二 >的基础之上,具体可进入主页进行查看
描述类标签
描述类标签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;
}
显示为:
完结
最近很喜欢一句话:
很有意境
他为她撑伞 淋湿了衣衫 还一边说笑着握着她的手取暖 他们的世界 一个人一半