CSS——tab导航demo
问题总结：
1、ul要比外套div宽度的值大一点
2、ul需要往左移动1px
3、外套的div设置overflow隐藏
解决抖动：
1、li宽度设置98px，padding左右值1px，hover之后宽度不变，padding清零
2、li宽度设置100px，hover之后宽度设为98px
bug问题：
外套div如果宽度500px，内部5个小盒子宽度需要比100px宽点，下面设置的是102px
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
} div {
width: 500px;
height: 100px;
margin: 100px auto;
border: 1px solid #ff0000;
overflow: hidden;
} ul {
list-style: none;
width: 510px;
margin-left: -1px;
} li {
float: left;
width: 102px;
height: 40px;
font: 400 13px/40px "simsun";
cursor: pointer;
text-align: center;
} li:hover {
width:100px;
border-left: 1px solid #808080;
border-right: 1px solid #808080;
color: #f40;
}
</style>
</head>
<body>
<div>
<ul>
<li>商品</li>
<li>商品</li>
<li>商品</li>
<li>商品</li>
<li>商品</li>
</ul>
</div>
</body>
</html>
CSS——tab导航demo的更多相关文章
- 谈谈一些有趣的CSS题目（八）-- 纯CSS的导航栏Tab切换方案
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- CSS实现导航条Tab的三种方法
前面的话 导航条Tab在页面中非常常见,本文说详细介绍CSS实现导航条Tab的三种方法 布局 根据上图所示,先规定几个定义,上图的模块整体叫做导航,由导航标题和导航内容组成.要实现上图所示的布 ...
- CSS实现导航条Tab切换的三种方法
前面的话 导航条Tab在页面中非常常见,本文说详细介绍CSS实现导航条Tab的三种方法 布局 根据上图所示,先规定几个定义,上图的模块整体叫做导航,由导航标题和导航内容组成.要实现上图所示的布 ...
- 基于sticky组件，实现带sticky效果的tab导航和滚动导航
上文提供了一个改进版的sticky组件,并将演示效果应用到了自己的博客.有了类似sticky的这种简单组件,我们就可以在利用它开发更丰富的效果,比如本文要介绍的tab导航和滚动导航.实现简单,演示效果 ...
- 重新想象 Windows 8 Store Apps (49) - 输入: 获取输入设备信息, 虚拟键盘, Tab 导航, Pointer, Tap, Drag, Drop
[源码下载] 重新想象 Windows 8 Store Apps (49) - 输入: 获取输入设备信息, 虚拟键盘, Tab 导航, Pointer, Tap, Drag, Drop 作者:weba ...
- CSS 自适应导航菜单
文章目录 以前我写了一篇关于如何为自适应网页制作教程手机导航菜单,现在我又摸索出一种无需JS脚本的自适应导航菜单,它采用纯粹的语义化HTML5标签来完成.该菜单可以左对齐,居中或右对齐,也不像上一种方 ...
- 微信小程序小技巧系列《一》幻灯片，tab导航切换
作者:gou-tian 来自:github 幻灯片 使用微信小程序原生组件swiper实现. <swiper indicator-dots="{{indicatorDots}}&quo ...
- css横向导航条
css横向导航条有两种方法 1. ul li a li{float:left} #navlist li, #navlist a{height:44px;display:block;} a{width: ...
- Android tab导航的几种方法:ActionBar tab +fragment,Viewpager+pagerTitleStrip,开源框架ViewPageIndicator 和 ViewPager
action来实现tab标签 并跟fragment结合 因为要写新闻客户端这个tab导航是必须的 这里我写几个小练习,希望大家融会贯通. 1actionbar设置tab +fragment 布局是个l ...
随机推荐
- spring历史地址
http://repo.spring.io/release/org/springframework/spring/
- P1656 炸铁路 洛谷
https://www.luogu.org/problem/show?pid=1656 题目描述 因为某国被某红色政权残酷的高压暴力统治.美国派出将军uim,对该国进行战略性措施,以解救涂炭的生灵. ...
- HUD——1286 找新朋友
思路: 裸的欧拉函数 代码: #include<cstdio> #include<cstring> #include<cstdlib> #include<io ...
- [BZOJ1045][HAOI2008]糖果传递（数学分析）
题目:http://www.lydsy.com:808/JudgeOnline/problem.php?id=1045 分析:均分纸牌的环状版本. 先看线性的版本: 设f[i]表示第I位从第i+1位得 ...
- - > 动规讲解基础讲解七——最长单增子序列
(LIS Longest Increasing Subsequence)给定一个数列,从中删掉任意若干项剩余的序列叫做它的一个子序列,求它的最长的子序列,满足子序列中的元素是单调递增的. 例如给定序列 ...
- FreeMarker与Spring MVC 4结合错误：Caused by: java.lang.NoClassDefFoundError: org/springframework/ui/freemarker/FreeMarkerConfiguration
添加spring-context-support的依赖到POM: <!-- spring-context-support --> <!-- https://mvnrepository ...
- express 不是内部或外部命令（windows）解决方式
请环境变量设置 注意 "D:\soft\nodejs\"这个是笔者自己安装在电脑上的node js文件夹,请改动成自己的 假设安装的express是4.X就要安装 express- ...
- [javase学习笔记]-7.7 thiskeyword的细节与应用
这一节我们接着上一节来继续学习thiskeyword. 我们之前在7.5节中的构造函数应注意的细节中提到过一个细节就是构造函数能够调用一般函数,但一般函数不能直接调用构造函数.可是我们没有深究构造函数 ...
- c#复制文件、文件夹代码
c#没有复制目录的代码,需要通过递归实现复制目录: 使用方法: 1.把c:\temp\index目录下的所有子目录和文件复制到 c:\temp\newindex目录下. bool copy = Cop ...
- Mysql常用索引及优化
索引是帮助我们快速获取数据的数据结构.索引是在存储引擎中实现的,因此不同存储引擎的索引也不同.这里只介绍InnoDB存储索引所支持的BTree索引: 一.索引类型 为了方便举例子,先创建表person ...