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 ...
随机推荐
- xcode5修改APP名字
bundle display name 配置文件里面设置, 这个指的是显示在icon下面的名字.application name在itunes connect上改, 是指显示在app store上的名 ...
- C. Star sky 二维前缀和
time limit per test 2 seconds memory limit per test 256 megabytes input standard input output standa ...
- Codeforces Round #391(div 1+2)
A =w= B QuQ C 题意:有n个体育场,每个体育场有一些小精灵,一共m种小精灵(n<=1e5,m<=1e6),可以将数字全为i的精灵进化成j(可以互相进化也可以选择不进化),问有多 ...
- Mysql修改自增主键的起始值及查询自增主键的下一个值
MySQL [xxx_mall]> alter table shop_base_info AUTO_INCREMENT=11000;Query OK, 0 rows affected (0.0 ...
- Screenshot: available via screen
在使用selenium+PhantomJS进行爬虫时候报错 selenium.common.exceptions.TimeoutException: Message: Screenshot: avai ...
- BZOJ(5) 1083: [SCOI2005]繁忙的都市
1083: [SCOI2005]繁忙的都市 Time Limit: 10 Sec Memory Limit: 162 MBSubmit: 4105 Solved: 2595[Submit][Sta ...
- Spark之安装和使用
Scala安装 Spark使用Scala开发,安装的Scala版本必须和Spark使用的版本一致,否则使用Scala编写的Spark任务会有兼容性问题 可以到Spark官网查看确定Scala版本,或者 ...
- something interesting when read docs
When you kill a session with "ALTER SYSTEM KILL SESSION '' ". If the session is performin ...
- ios7新增api实现扫描二维码
本来用的ZBar开源库实现的扫描二维码,可是貌似不支持arm64了,也没有在更新. 如今不用适配ios7下面.而iOS新增系统API已支持扫码,參考老外的一篇博客做了个demo.须要的能够參考下 參考 ...
- Android自定义用户控件简单范例(二)
对于完全由后台定制的控件,并不是很方便其他人的使用,因为我们常常需要看到控件放到xml界面上的效果,并根据效果进行布局的调整,这就需要一个更加标准的控件制作流程: 我们的自定义控件和其他的控件一样,应 ...