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(底部对齐)(默认是顶部对齐)

  • 相关阅读:
    JDBC
    JDBC连接MYSQL
    Servlet学习(1)
    Apache http server和tomcat的区别
    log4j(转)
    《打造Facebook》
    深入浅出Java三大框架SSH与MVC的设计模式
    Python 爬虫监控女神的QQ空间新的说说,实现秒赞,并发送说说内容到你的邮箱
    Python 爬虫监控女神的QQ空间新的说说,实现邮箱发送
    linux 进程消耗查看
  • 原文地址:https://www.cnblogs.com/yaomengli/p/6564001.html
Copyright © 2011-2022 走看看