flex布局 H5携程移动端局部布局 （五）

需要实现的效果

1、先实现类似轮播图的图片
给个盒子；加载图片
给图片来点距离上边的间距；和图片的大小
素材
素材

 <div class="focus">
        <img src="./upload/focus.jpg" alt="">
    </div>

/* 轮播图 */
.focus{
    padding-top: 44px;
}
.focus img{
    width: 100%;
}

效果

实现下边这个效果(素材)

初期思路
1、创建一个背景，给些间距和颜色
2、创建一个盒子；里边放5个li标签
3、把li标签由列变行；取消前边小点

 <!-- 局部导航栏 -->
    <div class="local-nav">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </div>

/* 背景样式 */
.local-nav{
    display: flex;
    height: 64px;
    background-color: white;
    margin: 3px 4px;
    border-radius: 8px;
}

/* 每个都分成1份 */
.local-nav li{
    flex: 1;
}

/* 去下小点 */
li{
    list-style: none;
    padding: 0;
    margin: 0;
}

现在效果图

中期思路

根据下边这个一个一个去实现

li里边写一个超链接；超链接里边紧接着写两个span，一个图标一个文字

 <!-- 局部导航栏 -->
    <div class="local-nav">
        <li>
            <a href="#">
                <span class="local-nav-icon"></span>
                <span>景点•玩乐</span>
            </a>
        </li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>

/* 文字和图标的父元素 */
.local-nav a{
    display: flex;
}
.local-nav-icon{
    width: 32px;
    height: 32px;
    background-color: pinks;
}

效果

侧轴居中

/* 文字和图标的父元素 */
.local-nav a{
    display: flex;
    //侧轴方向就是y轴方向，水平向下
    flex-direction: column;
    //单行居中
    align-items: center;
}

添加背景图片；调整文字大小

  <li>
            <a href="#" title="景点•玩乐">
                <span class="local-nav-icon"></span>
                <span>景点•玩乐</span>
            </a>
        </li>

/* 文字和图标的父元素 */
.local-nav a{
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #222;
    font-size: 12px;
}
.local-nav-icon{
    width: 32px;
    height: 32px;
    background-color: pink;
    margin-top: 8px;
    background: url(../images/localnav_bg.png) no-repeat 0 0;
    background-size: 32px auto;
}

把后边的图片全部都加载上来 -----下边这张是素材

首先把其他的li图片都放进来，每个都给不同的名字

 <!-- 局部导航栏 -->
    <div class="local-nav">
        <li>
            <a href="#" title="景点•玩乐">
                <span class="local-nav-icon-icon1"></span>
                <span>景点•玩乐</span>
            </a>
        </li>
        <li>
            <a href="#" title="周边游">
                <span class="local-nav-icon-icon2"></span>
                <span>周边游</span>
            </a>
        </li>
        <li>
            <a href="#" title="美食林">
                <span class="local-nav-icon-icon3"></span>
                <span>美食林</span>
            </a>
        </li>
        <li>
            <a href="#" title="一日游">
                <span class="local-nav-icon-icon4"></span>
                <span>一日游</span>
            </a>
        </li>
        <li>
            <a href="#" title="当地攻略">
                <span class="local-nav-icon-icon5"></span>
                <span>当地攻略</span>
            </a>
        </li>
    </div>

2、写样式

/* class^='local-nav-icon' : 属性选择器    就是前边的前缀名都一样; */
.local-nav li [class^='local-nav-icon']{
    width: 32px;
    height: 32px;
    background-color: pink;
    margin-top: 8px;
    background: url(../images/localnav_bg.png) no-repeat 0 0;
    background-size: 32px auto;
}
.local-nav li .local-nav-icon-icon2{
    background-position: 0 -32px;
}
.local-nav li .local-nav-icon-icon3{
    background-position: 0 -64px;
}
.local-nav li .local-nav-icon-icon4{
    background-position: 0 -96px;
}
.local-nav li .local-nav-icon-icon5{
    background-position: 0 -128px;
}

最终效果

再来一个鼠标触发事件，用:hover标签选择器

.local-nav li [class^='local-nav-icon']{
	//透明度
	opacity:0.5;
}
.local-nav li [class^='local-nav-icon']:hover{
    opacity: 1;
}
.local-nav a:hover{
    color: blue;
    font-size: 16px;
}

效果