[toc]
[TOC]
一、例一，利用纯css实现菜单效果
1、来源及技术要点，原理
心血来潮，想到csdn上看看技术直播，随便一看，果然不虚此行。
一位老兄讲解的纯 css 实现页面效果，在几天前我做了一个任务，
花好多心思，好长时间也没搞定，效果很勉强，这位老兄15分钟，讲的清清楚楚。
主要是利用 html 的页内链接，以及 <div>限定区域外，内容不显示的原理
直接链接：
https://live.csdn.net/v/27147?utm_medium=distribute.pc_video_shortvideo.none-task-short_video-csdn#pc_video_shortvideo#short_video#27147-8.nonecase&depth_1-utm_source=distribute.pc_video_shortvideo.none-task-short_video-csdn#pc_video_shortvideo#short_video#27147-8.nonecase&
2、先上html 代码
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8' />
<title>纯CSS实现点击切换效果</title>
<link rel='stylesheet' type='text/css' href='./page1.css' />
</head>
<body>
<div class='A'>
<div class='title'>
<a href='#list1'>按钮１</a>
<a href='#list2'>按钮２</a>
<a href='#list3'>按钮３</a>
</div>
<div class='content'>
<div id='list1'>内容１</div>
<div id='list2'>内容２</div>
<div id='list3'>内容３</div>
</div>
</div>
</body>
</html>
3、css代码
/*用星号去掉浏览器默认的外边距和内边距 */
*{
margin:0;
padding:0;
}
/* 对class=‘Ａ’的 div 进行配置 */
div.A{
width:750px;
height:550px;
background-color:#aaa;
margin:0 auto;
}
/*对class='A'的div, 它里面 class='title' 的 div 进行配置*/
div.A div.title{
width:750px;
height:50px;
background-color:purple;
}
/* 对 title 中的所有链接类型<a>进行设置 */
div.A div.title a{
display:block; /* 将其设置为block类型，然后才能为其设置宽高 */
width:200px;
height:40px;
float:left;
background-color:#fff;
margin: 5px 0 0 35px;
text-align:center; /* 字体左右对齐 */
line-height:40px; /* 字体上下对齐，不能用center */
}
/*对class='A'的div, 它里面 class='content' 的 div 进行配置*/
div.A div.content{
width:750px;
height:500px;
background-color:#bbb;
overflow:hidden; /*对超出div范围的内容，不作显示*/
}
div.A div.content div#list1{
width:100%;
height:100%;
font-size:50px;
text-align:center;
line-height:500px;
background-color:red;
}
div.A div.content div#list2{
width:100%;
height:100%;
font-size:50px;
text-align:center;
line-height:500px;
background-color:green;
}
div.A div.content div#list3{
width:100%;
height:100%;
font-size:50px;
text-align:center;
line-height:500px;
background-color:blue;
}