一、例一，利用纯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;
}
w3cschool.cn/css/css-sfrk2opy.html
很多网站是全背景图片的，而且适应各种主流分辨率，给人一种干净大气的感觉，实属设计派的一个耍酷良方，下面介绍几种实现全屏图片自适应缩放背景图片的方法。
1.帅气简单的CSS3方法
html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Safari 3+
Chrome Whatever+
IE 9+
Opera 10+
Firefox 3.6+
2.只使用CSS之方法一
img.bg {
min-height: 100%;
min-width: 1024px;
width: 100%;
height: auto;
position: fixed;
top: 0;
left: 0;
}
@media screen and (max-width: 1024px) {
img.bg {
left: 50%;
margin-left: -512px;
}
}
以下浏览器的任何版本: Safari / Chrome / Opera / Firefox
IE 6: （各种方案奈我何？！）
IE 7/8: 大部分工作，小屏幕的时候全屏，但是不是居中
IE 9: 没问题
3.只使用CSS之方法二
#bg {
position:fixed;
top:-50%;
left:-50%;
width:200%;
height:200%;
}
#bg img {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
min-width:50%;
min-height:50%;
}
Safari / Chrome / Firefox
IE 8+
Opera
4.jQuery方法
#bg { position: fixed; top: 0; left: 0; }
.bgwidth { width: 100%; }
.bgheight { height: 100%; }
(window).load(function() { var theWindow = (window),
bg = ("#bg"),
aspectRatio = bg.width()/bg.height();
function resizeBg() {
if ( (theWindow.width()/theWindow.height()) bg .removeClass() .addClass('bgheight'); }else{ bg
.removeClass()
.addClass('bgwidth');
}
}
theWindow.resize(function() {
resizeBg();
}).trigger("resize");
});
IE7+
任何除了IE的浏览器的任何版本