LI 导航

HTML:

<div class="my_nav">

            <ul>

                <li class="tiao cur" id="order_tab_1"><a href="#">待付款</a></li>

                <li class="tiao " id="order_tab_2"><a href="#">待收货/提货</a></li>

                <li class="tiao " id="order_tab_3"><a href="#">全部订单</a></li>

            </ul>

        </div>

Css:

        .my_nav {

            width: 100%;

            border: 1px solid #e0e0e0;

            border-width: 1px 0;

            background-color: #fff;

            -webkit-box-sizing: border-box;

            box-sizing: border-box;

        }

        .my_nav ul {

            display: box;

            display: -ms-box;

            display: -webkit-box;

            display: flex;

            display: -ms-flexbox;

            display: -webkit-flex;

            overflow: hidden;

        }

        .my_nav li.cur {

            background-color: #E5E5E5;

        }

        .my_nav li:first-child {

            border-left: 0;

        }

        .my_nav li {

            display: block;

            flex: 1;

            -ms-flex: 1;

            -webkit-flex: 1;

            box-flex: 1;

            -ms-box-flex: 1;

            -webkit-box-flex: 1;

            width: 100px;

            text-align: center;

            font-size: 12px;

            line-height: 36px;

            border-left: 1px solid #e0e0e0;

            padding: 0px;

            background-color: #f3f3f3;

        }

        .my_nav a {

            display: block;

            min-height: 36px;

        }

        a {

            border-bottom-color: #cccccc;

            border-bottom-style: none;

            COLOR: #888888;

            text-decoration: none;

            font-family: "Microsoft Yahei",Arial, Helvetica, sans-serif;

            outline: none;

        }

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <meta content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" name="viewport">

  <meta name="apple-mobile-web-app-capable" content="yes">

  <meta name="apple-mobile-web-app-status-bar-style" content="black">

  <meta content="telphone=no" name="format-detection">

  <title>等分居中</title>

  <link media="all" href="http://www.w3cplus.com/mcommon/reset.css" rel="stylesheet">

  <style type="text/css">

.demo{

  line-height:44px;

  margin-bottom: 20px;

  text-align: center;

  background-color: #0078e7;

  color: #fff;

}

.flex-equal,.flex-center, .justify {

  display: -webkit-box;

  display: -ms-flexbox;

  display: -webkit-flex;

  display: flex;

}

.flex-equal li {

  -webkit-box-flex: ;

  -ms-flex: ;

  -webkit-flex: ;

  flex: ;

}

.table-equal {

  display: table;

  table-layout: fixed;

  width: %;

}

.table-equal li {

  display: table-cell;

}

.demo-center{

  border: 1px solid #ccc;

  margin:20px;

  height:200px;

}

.demo-center .children{

  background: #0078e7;

  color: #fff;

  width:150px;

  line-height:;

  text-align:center;

}

.flex-center {

  -webkit-box-pack: center;

  -ms-flex-pack: center;

  -webkit-justify-content: center;

  justify-content: center;

  -webkit-box-align: center;

  -ms-flex-align: center;

  -webkit-align-items: center;

  align-items: center;

}

.translate-center{

  position: relative;

}

.translate-center .children{

  position: absolute;

  top: %;

  left: %;

  -webkit-transform: translate(-%, -%);

  transform: translate(-%, -%);

}

.justify {

  -webkit-box-pack: justify;

  -ms-flex-pack: justify;

  -webkit-justify-content: space-between;

  justify-content: space-between;

  padding:  10px;

  background: #0078e7;

  color:#fff;

  line-height: 32px;

}

  </style>

</head>

<body>

  <h2>flex等分</h2>

  <ul class="flex-equal demo">

    <li>手机</li>

    <li>联系人</li>

    <li>信息</li>

    <li>主屏</li>

  </ul>

  <ul class="flex-equal demo">

    <li>手机</li>

    <li>联系人</li>

    <li>信息</li>

  </ul>

  <h2>table等分</h2>

  <ul class="table-equal demo">

    <li>手机</li>

    <li>联系人</li>

    <li>信息</li>

    <li>主屏</li>

  </ul>

  <ul class="table-equal demo">

    <li>手机</li>

    <li>联系人</li>

    <li>信息</li>

  </ul>

  <h2>flex居中</h2>

  <div class="flex-center demo-center">

    <div class="children">子元素水平垂直居中</div>

  </div>

  <h2>translate居中</h2>

  <div class="translate-center demo-center">

    <div class="children">子元素水平垂直居中</div>

  </div>

  <h2>两端对齐</h2>

  <div class="justify"><h2>左边对齐</h2><span>右边对齐</span></div>

</body>

</html>

原文地址：http://www.cnblogs.com/xinlinux/p/4463608.html

LI 导航的更多相关文章

不可思议的纯CSS导航栏下划线跟随效果
先上张图,如何使用纯 CSS 制作如下效果? 在继续阅读下文之前,你可以先缓一缓.尝试思考一下上面的效果或者动手尝试一下,不借助 JS ,能否巧妙的实现上述效果. OK,继续.这个效果是我在业务开发的 ...
如何使用纯CSS制作特效导航条？
先上张图,如何使用纯 CSS 制作如下效果? 在继续阅读下文之前,你可以先缓一缓.尝试思考一下上面的效果或者动手尝试一下,不借助 JS ,能否巧妙的实现上述效果. OK,继续.这个效果是我在业务开发的 ...
Bootstrap4 导航栏
Bootstrap4 导航栏目录 Bootstrap4 导航栏动态选项卡标准的导航栏导航对齐方式导航栏的组成 ul 元素中包含navbar-nav 类表示导航栏中ul li元素中包含nav ...
[HTML/CSS]导航栏的下划线跟随效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
navLI鼠标滑上显示下拉导航
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>l ...
Bootstrap(7) 输入框和导航组件
一．输入框组件文本输入框就是可以在<input>元素前后加上文字或按钮,可以实现对表单控件的扩展. //在左侧添加文字  ...
纯css导航栏下划线
.nav-underline > *{/* 指定容器,里面可以是li.span等多样化的元素 */ display: inline-block; margin: -3px; padding: 1 ...
奇妙的CSS3—导航栏下划线跟随效果
先来看一下效果: 1.基本效果就是这样的 ,鼠标悬停,下划线划入.鼠标离开,下划线划出 2.下划线的划入是有方向的,从左侧划入悬停,下划线由左向右伸长.从右侧划入,下划线由又往左伸长实现思路 1.导 ...
纯css导航下划线跟随效果【转载】
css: ul { display: flex; position: absolute; width: 800px; top: 50%; left: 50%; transform: translate ...

随机推荐

MHz 和 Mbps的区别
Hz是频率单位,例如10Hz就是表示每秒运算10次 Mbps是Million bit per secend (表示每秒传输的兆位数)＝Mb/s MHz 和 Mbps 并不是同一个单位,关键是看bus的 ...
hdu1558--并查集+判断线段相交
简单的计算几何题,判断两线段是否相交.将相交的两线段使用并查集归到一类中.查询时输出线段对应集合中元素的个数. #include<stdio.h> struct Point{ double ...
javascript中的稀疏数组(sparse array)和密集数组
学习underscore.js数组相关API的时候.遇到了sparse array这个东西,曾经没有接触过. 这里学习下什么是稀疏数组和密集数组. 什么是密集数组呢?在java和C语言中,数组是一片连 ...
HDU--5280(dp或枚举)
官方题解: 这个题有非常多O(n2)的算法.这里说一种:枚举每个区间,在枚举区间的同一时候维护区间内的最小值和区间和,将最小值与P的大小进行比較,贪心地取最大值就可以.注意若枚举到的区间是整个数组,则 ...
GDB调试总结__1
该博客旨在分享IT技术心得和实际工作中遇到问题的解决方法,下面是新浪博客地址http://blog.sina.com.cn/qianyumolu,则为分享经济.行业趋势.心灵文章等,有兴趣的朋友能够踩 ...
#IOS-navigation中左滑pop的三种方法
IOS-navigation中左滑pop的三种方法系统自带pop方法如果我们没有对navigation中的back按钮进行自定义,我们可以直接使用系统自带的左滑pop方法.但是如果我们对back按 ...
(转载)Java 1.7的新特性
网上找了一下,整理了贴出来. 下面是Java 1.7 里新出现的功能的一些用法例子: 对集合的支持摒弃了 Java 集合接口的实现类,如: ArrayList . HashSet 和 HashMap ...
关于 Cocoa Pods 的使用
前提:电脑上已经安装好CocoaPods. 创建Podfile: 1.进入到项目的目录中: $ cd 目录 2.使用终端命令行: $ vim Podfile 3.然后按i键,进入编辑模式我现在使用的 ...
css培训（三）
优先级 z-index 不设置或auto 非static z-index :0 : z-index:-1: opacity 与层叠上下 opacity:.9 对其影响小于1值不具备堆叠 ...
Javascript绝句欣赏
1. 取整同时转成数值型: '10.567890'|0 结果: 10 '10.567890'^0 结果: 10 -2.23456789|0 结果: -2 ~~-2.23456789 结果: -2 2. ...

LI 导航

LI 导航的更多相关文章

随机推荐

热门专题