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 ...
随机推荐
- 初识iBatis
在JAVA EE应用程序中,持久层框架常用的有:Hibernate和IBATIS(或MyBatis),Hibernate是全自动的,IBatis是半自动的. IBatis的主要的作用是把SQL语句从我 ...
- cogs——1786. 韩信点兵
1786. 韩信点兵 ★★★ 输入文件:HanXin.in 输出文件:HanXin.out 简单对比 时间限制:1 s 内存限制:256 MB [题目描述] 韩信是中国军事思想“谋战” ...
- Ubuntu中LightDM是什么（转）
LightDM(Light Display Manager)是一个全新的轻量级Linux桌面显示管理器,而传统的Ubuntu是使用GNOME桌面标准的GDM. LightDM是一个跨桌面显示管理器,其 ...
- Ubuntu 16.04开机自动开启数字键盘NumLock
注意:以下方法不适合在登录时开启,只能是登录后开启.而且我经过测试之后会自动暗下去,但是不影响功能使用.这个是BUG的修复方法:https://askubuntu.com/questions/5090 ...
- wsgi初探
大半夜的不睡觉,起来看技术文档,我这是什么精神啊~ ok 本文的大部分内容都是阅读 http://wsgi.readthedocs.org/en/latest/ 得来的.下面开始研究 wsgi wsg ...
- 为什么 Android Studio 工程文件夹占用空间这么大？
为什么 Android Studio 工程文件夹占用空间这么大? 学习了: https://www.cnblogs.com/chengyujia/p/5791002.html
- hdu 2255奔小康赚大钱 KM算法模板
题目链接:http://acm.hdu.edu.cn/showproblem.php? pid=2255 一,KM算法:(借助这个题写一下个人对km的理解与km模板) KM算法主要是用来求解图的最优匹 ...
- 设计四个线程，当中共两个线程每次对j添加1，另外两个线程每次对j降低1。循环100次，写出程序。
package cn.usst.DataTest6; /** * 设计四个线程,当中共两个线程每次对j添加1,另外两个线程每次对j降低1.循环100次,写出程序. * @ * */ public cl ...
- Flash--元件和实例
1.元件简述: 元件在Flash影片中是一种特殊的对象.在Flash中仅仅须要创建一次,然后能够在整部电影中重复使用而不会显著添加 文件大小. 事实上在使用元件时,我们一般使用的是该元件的实例,所以说 ...
- [译]使用AssetBundle Manader
AssetBundle and the AssetBundle Manager 介绍 AssetBundle允许从本地或者远程服务器加载Assets资源,利用AssetBundles技术,Assets ...