1.模糊背景图的设置
设置两个div,一个放置背景图片，一个放置内容
<div class="one">放置背景图片</div>
<div class="two">放置内容</div>
设置css样式
.one{
width:100%;
height:100%;
background-image: url("./img/background.jpg");
background-size: 100% 100%;
background-repeat: no-repeat;
filter: blur(5px);
position: absolute;
left: 0;
top: 0;
}
同时放置内容的div必须设置相对定位，不然内容会显示不出来
.two{
height:100%;
position:relative;
}
最初的想法是加蒙版，但是蒙版会导致内容变模糊，不符合，排除。
2.导航栏
三个文本，一个在左，一个在右，一个居中
<nav>
<a class="set Li-One" href="javascript:;">报道查看</a>
<a class="set Li-Two" href="javascript:;">登录</a>
<a class="set Li-Three" href="javascript:;">注册</a>
</nav>
设置样式
nav{
width: 100%;
height: 50px;
text-align: center;
padding: 0 10px;
}
第一个a标签float:left;第二个a标签float:right
3.其它登录方式
横线中间插文字
三个span，
<div class="other">
<span class="line"></span>
<span class="txt">其他登录方式</span>
<span class="line"></span>
</div>
设置样式
.other {
height: 60px;
line-height: 60px;
text-align: center;
}
.other .line {
display: inline-block;
width: 105px;
border-top: 1px solid #ccc ;
}
.other .txt {
color: #fff;
font-size: 15px;
vertical-align: middle;
}
