前端页面

文章目录

• • 前端页面
• 锅炉页面导航栏
• • 轮播图

锅炉页面导航栏

1.css部分

.header2 li {
             float: left;
            list-style-type: none;
        }
        .header2 li a{
            display: block;
            text-align: center;
             width: 281px;
             height: 50px;
            margin: auto;
            color: white;
            font-size: 20px;
            line-height: 50px;
            text-decoration: none;
                background-color: black;
                opacity: 0.6;
        }
        .header2 li a:hover{
            background-color: grey;
        }
        .header2 ul dropdown-menu:hover{
            display: inline-list-item;
            background-color: #fff;
            color: black;
        }

2.HTML部分

<div class="header2">
    <ul class="head">
<!--        <li><a></a></li>-->
        <li><a href="#">网站首页</a></li>
        <li><a href="#">关于我们</a></li>
        <li><a href="#">产品中心</a></li>
         <li class="dropdown" id="accountmenu">
            <a class="dropdown-toggle" data-toggle="dropdown" href="#">客户案例<b class="caret"></b></a>
            <ul class="dropdown-menu">
                <li><a href="#">PHP</a></li>
                <li><a href="#">MySQL</a></li>
                <li class="divider"></li>
                <li><a href="#">JavaScript</a></li>
                <li><a href="#">HTML5</a></li>
            </ul>
        </li>
        <li><a href="#">售后服务</a></li>
        <li><a href="#">联系我们</a></li>

</ul></div>

轮播图

1.css部分

.carousel-inner img {
            width: 100%;
            height: 100%;

2.HTML部分

<div id="demo" class="carousel slide" data-ride="carousel">

    <!-- 指示符 -->
    <ul class="carousel-indicators">
        <li data-target="#demo" data-slide-to="0" class="active"></li>
        <li data-target="#demo" data-slide-to="1"></li>
        <li data-target="#demo" data-slide-to="2"></li>
    </ul>

    <!-- 轮播图片 -->
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="images/img_3.png">
        </div>
        <div class="carousel-item">
            <img src="images/img_4.png">
        </div>
        <div class="carousel-item">
            <img src="images/img_5.png">
        </div>
    </div>

    <!-- 左右切换按钮 -->
    <a class="carousel-control-prev" href="#demo" data-slide="prev">
        <span class="carousel-control-prev-icon"></span>
    </a>
    <a class="carousel-control-next" href="#demo" data-slide="next">
        <span class="carousel-control-next-icon"></span>
    </a>
</div>

3.js部分

<script type="text/javascript">

    $(document).ready(function(){
        $('#myCarousel').carousel()
    })


</script>