web前端开发几个知识点

一.css设置div横排

实现div横排主要设置：

1.div属性设置display:inline

2.并排的div设置float: left;float: right;//这样可以实现靠左靠右显示

如下：

<style type="text/css">
    div{
        display:inline
    }
    .head{
        background-color: black;
        height: 50px;
        width: 800px;
    }
    .head{
        color: white;
        float: left;
        vertical-align: middle;
        line-height: 50px;
    }
    .menu{
        color: white;
        float: right;
    }
</style>
<title>Title</title>
<div class="head">
    <div class="title"><img src="http://appimg.pba.cn/2019/04/01/7a4a5c23d306720c36be14127a32dccc.png"></div>
    <div class="menu"><img src="http://appimg.pba.cn/2019/04/01/7a4a5c23d306720c36be14127a32dccc.png"></div>
</div>

二.下拉菜单被挡住

菜单被挡住通过给菜单设置以下属性：

position: relative;//位置属性可以随便设置那个，但是一定要设置

z-index: 9;//z-index的数值一定要比你要悬浮的页面其他元素大

三.使用swiper实现轮播图

1.导入swiper.min.css和swiper.min.js

2.布局轮播

!-- 轮播 -->
<div class="banner-container">
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <a href=""><img src="http://appimg.pba.cn/2019/03/28/1c059ac84b2c0528aa7d9344db66012e.jpg" data-theme=""></a>
            </div>
            <div class="swiper-slide">
                <a href=""><img src="http://appimg.pba.cn/2019/03/28/0197f841823638a6b13a85cad2eb7d7a.jpg" data-theme=""></a>
            </div>
        </div>
        </div>
        <div class="swiper-pagination"></div>
    </div>
</div>

3.javascripts实现自动轮播

var mySwiper = new Swiper ('.swiper-container', {
    pagination: '.swiper-pagination',
    autoplay: 3000,//3秒轮播一次
    loop: true,
    observer:true,//修改swiper自己或子元素时，自动初始化swiper
    observeParents:true,//修改swiper的父元素时，自动初始化swiper
})

四.html跳转到指定页面的指定位置

<a href="跳转的页面名字#id(另一个页面指定位置的id)"></a>

例如：

<a href="/index/#menu_content">公司简介</a>