zoukankan      html  css  js  c++  java
  • 导航条 媒体对象 分页 模态框 轮播图 媒体对象列表 进度条

     

    导航条代码

     

          

    导航条效果

      下面代码事实现在手机分辨率小于768是导航条变形式的一种 即让导航条里的导航先隐藏然后再点击右边的四个横线在显示出来的效果

      下面代码事在窗口小于768时让搜索框不见 其中myform为自己随便起的只是为了在媒体查询里面控制他的display

     下面的代码是让登陆和注册在一行并且定位在导航条上面

     在分辨率小于768时总的完成效果(点击右边的四个横线的按钮后让导航ul li显示出来再次点击隐藏)

     

    效果

    列表组

    效果

     分页

    进度条

     

    模态框

    用js控制米模态框触发 不用写这一行

    js控制

    要触发一下

    通过点击id为modia的元素来触发模态框让模态框显示出来
    $("#modia").click(function(){
    $(".modal").modal("show")
    })

    通过button触发

    警告框

     

     

    轮播图

    想要改轮播下面的圆圈样式在下面class类中

     手动掌控轮播速度(此时要把data-ride="carousel" 这个类去掉)

    $('.carousel').carousel({
      interval: 2000
    })

    选项卡

    改变轮播图右边的阴影把下面三个background-image去掉

     

     媒体对象列表(用于媒体文章 和评论)

     

    媒体对象列表

     

     调整媒体图片的对齐方式 可以通过给media-left那个div里加上 media-middle(中间对齐)  media-bottom(底部对齐)(默认是顶部对齐)

  • 相关阅读:
    Centos7创建CA和申请证书 转自https://www.cnblogs.com/mingzhang/p/8949541.html
    go-micro介绍 摘自https://www.cnblogs.com/s0-0s/p/6874800.html
    docker centos7创建consul镜像以及用docker-compose启动镜像
    今天想用jquery来实现div的拖放功能
    canvas
    子元素的div不继承父元素的透明度
    BOM
    DOM
    JS的循环、复杂运算符
    梳理一下JS的基本语法
  • 原文地址:https://www.cnblogs.com/yaomengli/p/6564001.html
Copyright © 2011-2022 走看看