<html>

<head>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width">

  <title>test</title>

  <style media="screen">

    .tab-head{

      list-style-type: none;

      display:-webkit-box;

      display:-webkit-flex;

      display:-ms-flexbox;

      display:flex;

      -webkit-flex-wrap:nowrap;

      -ms-flex-wrap:nowrap;

      flex-wrap:nowrap;

      -webkit-box-pack:justify;

      -webkit-justify-content:space-between;

      -ms-flex-pack:justify;

      justify-content:space-between;

      background:#FF4878;

      padding:0;

      overflow:auto;

      }

    .tab-head-item{

      -webkit-box-flex:1;

      -webkit-flex:1 0 auto;

      -ms-flex:1 0 auto;

      flex:1 0 auto;

      color:white;

      padding:0 5px;

      }

  </style>

</head>

<body>

    <ul class="tab-head">

        <li class="tab-head-item">兴趣爱好</li>

        <li class="tab-head-item">兴趣爱好</li>

        <li class="tab-head-item">兴趣爱好</li>

        <li class="tab-head-item">兴趣爱好</li>

        <li class="tab-head-item">兴趣爱好</li>

        <li class="tab-head-item">兴趣爱好</li>

        <li class="tab-head-item">兴趣爱好</li>

        <li class="tab-head-item">兴趣爱好</li>

        <li class="tab-head-item">兴趣爱好</li>

        <li class="tab-head-item">兴趣爱好</li>

        <li class="tab-head-item">兴趣爱好</li>

    </ul>

</body>

</html>

css实现手机端导航栏左右滑动的更多相关文章

  1. css制作最简单导航栏

    css制作最简单导航栏

  2. 双击导航栏自动滑动ListView到顶部

    有些app都实现了双击导航栏让页面的list自动滑动到顶部的feature. 先实现一个继承于OnTouchListener的监听多次点击事件的监听器,通过callback把连续点击的次数返回给客户代 ...

  3. 如何使用css、布局横向导航栏

    使用css布局横向导航栏,css应用给网页样式的方式,就相当于,给人怎么去穿上衣服,不同的衣服有不同的穿法,这里我们使用的是内联式.在这里 我们可以适当的把值调的大一点,这样我们就可以很容易的对比. ...

  4. CSS实现动画特效导航栏

    0 写在前面 今天用纯CSS编写了一种带有特效的导航栏,一方面巩固熟悉了导航栏的一般写法,另一方面练习了CSS3的一些新特性. 1 实现效果 当鼠标划过时,实现了一种动态百叶窗效果. 2 实现细节 2 ...

  5. 手风琴图片和钢琴导航栏JQ滑动特效

    手风琴JQ滑动特效 1.效果预览: 2.相关代码: <!DOCTYPE html> <html lang="en"> <head> <me ...

  6. 微信小程序导航栏，下面内容滑动，上册导航栏跟着滑动，内容随着导航栏滑动

    16.类似微信导航栏滑动.png 今日头条导航栏,下面滑动上面跟着滑动 index.wxml <swiper class="content" style="heig ...

  7. 6.bootstrap 将文本内容关联一个动作（手机端导航适配）&在超小尺寸下显示，屏幕变大后消失

    1.情景:这是出现在手机端导航适配的,点击文本MENU可以出现下拉的list 解决方法: 1.首先要想到,MENU只有两个状态,因此可以用checkbox实现 2.将MENU放在label标签里面,l ...

  8. 在CSS中定义【导航栏】超链接样式

    1.案例css代码 <style> .divcss5 a:link{ color:#F00}/* 链接默认为红色 */ .divcss5 a:hover{ color:#000}/* 鼠标 ...

  9. 简单两步使用css控制div下导航栏ul居中显示

    第一步:父层设置文本居中属性 ul{ text-align:center; } 第二步:li设置内联样式 li{ display:inline; } PS 只需以上两步就可以实现导航栏居中显示了,但为 ...

随机推荐

  1. Mysql使用规范及建议

    MySQL数据库使用规范一.建表规约1.[强制]表达是与否概念的字段,必须使用is_xxx的方式命名,数据类型是unsigned tinyint (1表示是,0表示否) 说明:任何字段如果为非负数,必 ...

  2. Linux 开发之线程条件锁那些事

    2019独角兽企业重金招聘Python工程师标准>>> 条件锁即在一定条件下触发,那什么时候适合用条件锁呢,那当然是你在等待一个符合的条件下触发.一个常用的例子就是在线程中无限循环执 ...

  3. 动态调用webSerivce-简易方法

         大家对webservice已经不再陌生了,涉及到的通信大部分都是用webservice.不过我还是看好wcf,因为毕竟是微软推出的新技术,各个方面还是蛮不错的,特别是你可以利用多种通信方式, ...

  4. GPTL—练习集—006树的遍历

    #include<bits/stdc++.h> using namespace std; typedef int daTp;//datatype typedef struct BTNode ...

  5. HR问了我朋友什么是简单工厂模式，竟被质疑是否学过设计模式，是否是计算机专业?

    越是简单的东西,越是容易被忽略,我来带你们好复习一下! 简单工厂模式 简单工厂模式也被称为静态工厂模式;使用简单工厂模式可以将产品的"消费"和生产完全分开,客户端只需要知道自己需要 ...

  6. 图论--最短路--第K短路（IDA*）（IDA Star)模板

    #include <iostream> #include <cstdio> #include <cstring> #include <queue> us ...

  7. Linux 上搭建 Snort+BASE 入侵检测系统

    配置实验环境 由于本人电脑的存储空间不足,无法再承担安装一个虚拟机的开销,因此在阿里云上申请了一个云服务器进行本次实验.服务器配置如下: 1 核 - 2GB 内存 - 40GB 系统盘 操作系统:Ub ...

  8. 威联通(NAS)应用篇：自建OwnCloud网盘(百度网盘，拜拜~~~）

    基础环境: 威联通一台 已安装好 ContainerStation 公网 IP(非必须) 自有公网域名 下载镜像文件 提醒:建议先把威联通的自带镜像源改为国内的阿里云镜像源,教程:https://ww ...

  9. C#对象初始化器

    1.对象初始化器 Student objStu2 = new Student() { StudentId=, //属性之间使用","分隔 StudentName="小明& ...

  10. thinkphp日志泄露扫描

    import requests,sys dirpath=[] def dirscan(url,year): for i in range(1,13): if i < 10: urls=url+' ...