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 ...
随机推荐
- RAM和DDR
DDR内存现在渐渐成为内存市场中新的宠儿,因其合理的性价比从其诞生以来一直受到人们热烈的期望,希望这一新的内存产品全面提升系统的处理速度和带宽,就连对Rambus抱有无限希望的Intel公司也向外界宣 ...
- 【PHP】php+txt实现网页计数器（限IP统计方式和不限IP统计方式）
一般的网页计数器制作实现思路:首先设定存放统计数据的文件(counter.txt)——读取文件中的内容存入字符串——自加操作——以写入方式打开文件写入数据——从文件中输出统计数据——关闭文件. 代码: ...
- OpenStack学习推荐
前言: 学习.了解.安装部署OpenStack也写了好一段时间了,现在觉得也有点必要写点总结.搞IT这一块基本就这样,不管是搞什么领域,一个项目超过两个月没动它,就基本不知道当时是怎么搞的,当时学 ...
- django运行django-admin.py无法创建网站
安装django的步骤: 1.安装python,选择默认安装在c盘即可.设置环境变量path,值添加python的安装路径. 2.下载ez_setup.py,下载地址:http://peak.tele ...
- win2008 ent r2 开启端口
你好.win2008r2 ent 可以用以下命令行来实现,当然也可以用防火墙来配置 比如打开8080端口方法如下: netsh firewall add portopening TCP 8080 My ...
- iOS开发tips总结
tip 1 : 给UIImage添加毛玻璃效果 func blurImage(value:NSNumber) -> UIImage { let context = CIContext(opti ...
- JuliaSet&MandelBulb @ Maya&KK —— 4亿粒子的测试
分形是数学里最美的一个话题之一,美在 无限的细节 在尺寸上的自相似 这两个特征造成的牛逼效果就是随便选择分形上的一个小坑或者小山包拉进后又是一个广阔的世界,而把这个世界中的一个小坑或者小山包拉进又™是 ...
- 手把手教学：详解HTML5移动开发框架PhoneJS
摘要:HTML/JavaScript的优势自不必说,但却也并非完美,相比之下,原生App占内存更少.响应更快.本文详解了HTML5移动开发框架PhoneJS的使用全过程,通过它,能够让Web应用在移动 ...
- boost------asio库的使用2(Boost程序库完全开发指南)读书笔记
网络通信 asio库支持TCP.UDP.ICMP通信协议,它在名字空间boost::asio::ip里提供了大量的网络通信方面的函数和类,很好地封装了原始的Berkeley Socket Api,展现 ...
- Codeforces Beta Round #51 D. Beautiful numbers
D. Beautiful numbers time limit per test 4 seconds memory limit per test 256 megabytes input standar ...