我需要注意什么：
1.如何創(chuàng)造小圓點(diǎn)：<span> 設(shè)置 display:block屬性后設(shè)置寬和高水泉，因為只有塊級元素才可以設(shè)置寬和高。
2.display:flex 彈性布局哟绊，為布局提供最大的靈活性，設(shè)為flex布局以后，子元素的float\cear\vertical屬性會消失
justify-content:space-betwwen 使內(nèi)容在株洲上左右兩端上下兩端開始排列，這兩個屬性配合使用可以讓元素在容器中巨暈分布盼产，常用于移動端
3.vw 相對單位，1
vw 等于可視窗口寬度的1%
4.：before 微元素 表示在元素之前添加內(nèi)容勺馆，默認(rèn)是行內(nèi)元素戏售，同時要使用content屬性來制定要插入的內(nèi)容啦辐。
5.為什么這里是相對定位 ，注意相對定位的特性蜈项，保留原本一畝三分地 因為我們的nav是靠我們的內(nèi)容撐開的，如果換成了絕對定位就沒辦法撐開续挟，會塌陷紧卒，用相對定位就不會*/
5.水平垂直居中的兩種辦法：
第一種
圖片.png
圖片.png
第二種：
圖片.png
圖片.png
圖片.png
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>全屏幕的云南旅游相冊</title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>
<span></span>
<nav>
<a href="#">瀘沽湖</a>
<a href="#">麗江古城</a>
<a href="#">茶馬古道</a>
<a href="#">就這家·云逸客棧</a>
<a href="#">西雙版納</a>
<a href="#">云南紅酒莊</a>
<a href="#">轎子雪山</a>
<a href="#">普者黑</a>
<a href="#">海埂大壩</a>
<a href="#">玉龍灣</a>
<a href="#">昆明郊野公園</a>
<a href="#">歐洲風(fēng)琴小鎮(zhèn)</a>
</nav>
<div>
<img src="images/1.jpg">
<img src="images/2.jpg">
<img src="images/3.jpg">
<img src="images/4.jpg">
<img src="images/5.jpg">
<img src="images/6.jpg">
<img src="images/7.jpg">
<img src="images/8.jpg">
<img src="images/9.jpg">
<img src="images/10.jpg">
<img src="images/11.jpg">
<img src="images/12.jpg">
</div>
</body>
</html>
*{
margin: 0;
padding: 0;
border: none;
}
html,
body{
overflow: hidden;
height: 100%;
background: #93B3C6;
}
span{
display: block;/*span 是行內(nèi)元素，要想設(shè)置寬和高诗祸，就得設(shè)置為display:block*/
width: 16px;
height: 16px;
margin: 30px auto 40px/*左右自動居中*/
border-radius:50% ;/*圓形*/
background: #FFFFFF;
}
nav{
display: flex;/*display:flxe;彈性布局 跑芳，為布局提供最大的靈活性，設(shè)為Flex布局以后直颅，子元素的float博个、clear和vertical-align屬性將失效*/
width: 78.125vw;/*vw:相對單位，1vw等于可視窗口寬度的1%*/
margin: 0 auto 45px;
justify-content: space-between;/*justify-content:sapce-between;使容器內(nèi)項目在主軸上左右兩端或上下兩端開始排列
這兩個屬性配合使用可以讓元素在容器中均勻分布功偿。常用于移動端開發(fā)*/
}/*因為這里的小圓點(diǎn)已經(jīng)設(shè)置了盆佣，所以不需要設(shè)置margin高了 左右居中對齊*/
nav:before{
position: absolute;/*注意這里要是相對行為*/
top: 20px;
width: 100%;
height: 10px;
background: #FFFFFF;
display: block;
content: '';
}
nav>a{
position:relative ;/*為什么這里是相對定位 ，注意相對定位的特性械荷，保留原本一畝三分地 因為我們的nav是靠我們的內(nèi)容撐開的共耍，如果換成了絕對定位就沒辦法撐開，會塌陷吨瞎，用相對定位就不會*/
font-size: 20px;
padding: 10px;
border: 2px solid #5395B4;
color: #255D7E;
text-decoration: none;
background: #FFFFFF;
}/*設(shè)置完這個之后痹兜，我們要考慮的是如何設(shè)置框框下面的線。 設(shè)置重疊 絕對定位 */
div { position: relative;
overflow: hidden;/*圖片太大颤诀，設(shè)置不要隱藏*/
width: 78.125vw;
height: 75vh;
margin: 0 auto;
background: #fff;
box-shadow: 0 0 30px 0 rgba(8, 1, 3, .3);
}
div>img{
width: 98%;
height: 96%;
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
margin: auto;/*設(shè)置到這里會發(fā)現(xiàn)還存在一個滾動條字旭，這是為什么呢出現(xiàn)滾動條的原因是因為整體顯示的內(nèi)容的高度，超過了屏幕的高度崖叫，所以使用overflow：hidden遗淳；來把超出的內(nèi)容隱藏掉，只顯示一屏的內(nèi)容就可以了*/
}
// 點(diǎn)擊圖片觸發(fā)事件
$(document).ready(function(){
$('a').click(function(){
$('img')
.eq($(this).index())
.css({'opacity':'1'})
.sibings()
.css({'opacity':'0'});
});
});
