css 下拉列表的制作
圣诞节后上课就是不在状态，一整天都在神游，还感觉特别累，本来想休息休息的，结果某人看不惯我一直吃东西，非得把电脑给我打开，让整理今天所学的内容，想了一下，确实上午讲的用无序列表<ul>做的下拉列表还不熟练，之前一直都是在用<div>做的，下面是用<ul>做的示例：
<style>
*{
margin:0px;
padding:0px;}
.a{
margin: auto;
height:50px;
width:460px;
position:relative;
background-color:#396;}
.aa{
height:50px;
width:90px;
float:left;
text-align:center;
line-height:50px;
border:1px solid red;
cursor:pointer;
overflow:hidden;} //还可以做延迟的特效：transition要考虑各个浏览器的兼容性
.aa:hover{
background-color:#909;
overflow:visible;}
.aa li:hover{
background-color:#F00;} </style> <body>
<div class="a">
<div class="aa">第一个导航
<ul style="list-style:none; background-color:#036">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul> </div>
<div class="aa">第二个导航</div>
<div class="aa">第三个导航</div>
<div class="aa">第四个导航</div>
<div class="aa">第五个导航</div> </div> </body>
我重新做了一遍，发现这种方法比较简单一些，如果单纯用无序列表来做，有点乱，我自己都糊涂了。。。ps:为了清楚一些，边框线没有去掉，以后看的时候不会傻眼，哈哈。。。
css 下拉列表的制作的更多相关文章
- 利用css+原生js制作简易钟表
利用css+原生js制作简单的钟表.效果如下所示 实现该效果,分三大块:html.javascript.css html部分html部分比较简单,定义一个clock的div,内部有原点.时分秒针.日期 ...
- css中border制作各种形状
css利用border制作各种形状的原理如图: 使用border绘制三角形是什么原理?事实上,宽度相等的border是以45度对接的,如下图: 没有了上border如图所示: 再设置border的宽度 ...
- 用 CSS Grid 布局制作一个响应式柱状图
最新一段时间比较喜欢玩弄图表,出于好奇,我想找出比较好的用 CSS 制作图表的方案.开始学习网上开源图表库,它对我学习新的和不熟悉的前端技术很有帮助,比如这个:CSS Grid. 今天和大家分享我学到 ...
- PHP全栈开发（八）：CSS Ⅹ 导航栏制作
学习了这么久的CSS,我们现在也可以小试牛刀一下了,我们使用我们学会的CSS知识来制作一个导航栏. 我们都知道,在现代的导航栏里面,最普遍的就是使用无序列表来制作导航栏. 我们可以使用如下代码来制作一 ...
- CSS下拉列表错误纠正
上一篇关于CSS制作下来列表的错误纠正. 在上一篇中,用CSS只做了下拉列表,但是鼠标不放在导航栏上的时候,下拉列表也是出来的.具体错误就是 div ul{ list-style:none; max- ...
- 神奇的CSS sprites，制作特效的新方法
本文主要内容简译自Dava Shea的英文文章 CSS Sprites: Image Slicing’s Kiss of Death,如果觉得博主讲的含糊不清的话,可以看作者原文. 熟悉了常规切图的我 ...
- No.3 - CSS transition 和 CSS transform 配合制作动画
课程概述 作业提交截止时间:09-01 任务目的 深度理解掌握 transition-timing-function 以及它的意义 学会配合使用 CSS transform 和CSS transiti ...
- css用hover制作下拉菜单
首先我们的需求就是 制作一个鼠标移动到某个区域就会有下拉菜单的弹出,这样会有更多的子类内容,示例代码如下: <!DOCTYPE html> <html lang="en&q ...
- 用CSS伪元素制作箭头
现在让我们开始制作箭头吧! 在开始前,你要知道如何用CSS去画一个三角形,如果还不清楚可以看看这里纯CSS画各种图形 我们用到两个CSS伪元素,before和after,它们属于行内元素,但可以用di ...
随机推荐
- java单列设计模式 小记
单例设计模式-------懒汉式,饿汉式 单例设计模式是一种很常见的设计模式 在这里介绍两种单例设计模式 懒汉式与饿汉式 一.先说一说单例设计模式的特点: >>1.单例设计模式保证一个类只 ...
- linux基础1——网络配置入门
1.IP地址配置 (1)临时IP更改 sudo ifconfig eth0 down 暂停接口 sudo ifconfig eth0 192.168.1.xx sudo ifconfig eth ...
- 关于MariaDB5.5不是有效的Win32 应用程序
操作系统:Windows XP sp3 数据库:MariaDB 5.5.49 问题原因: 使用文本编辑器打开mysqld.pdb文件. 在13行1012列,会发现如下信息: 这说明v5.5.49是使用 ...
- Android test---JUnit
JUnit 单元测试 Android的单元测试基础也是比较简单,同样还是测试相加方法是否正确,测试用例还是用1+1?=2来个简单的Android单元测试: 1..打开eclipse,新建一个proje ...
- HDU1005
Number Sequence HDU-1005 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Jav ...
- osx 编译安装配置 ruby on rails
下载源代码: curl -O http://cache.ruby-lang.org/pub/ruby/2.2/ruby-2.2.2.tar.gz 解压: .tar.gz 编译: cd ruby- ./ ...
- android第二天（项目的组成结构）
1:src文件夹分析: helloWorld----src(源码文件夹) MainActivity:主界面类----gen(自动生成的源码文件夹) R.java:对应res文件夹 下面又包含三个内部类 ...
- 关于asp.net 开发的小技巧—让传值对象化
前端:前端 定义一个对象, 传值时实例此对象,序列化成json字符串 代码如下: 定义js对象: ///定义一个查询条件对象 var SearchCondition=function(){ this. ...
- 第六百一十七天 how can I 坚持
没什么特长,唯一有的仅是妄想,哈哈,真逗. 明天就去新项目组了,会接触些新东西吧,啊,挺好,一开始压力大点很正常,但不要放弃啊. 搞不懂我自己啊,貌似不上火了呢. 睡觉了.忘不掉.做不到.
- 灵活运用 SQL SERVER FOR XML PATH
FOR XML PATH 有的人可能知道有的人可能不知道,其实它就是将查询结果集以XML形式展现,有了它我们可以简化我们的查询语句实现一些以前可能需要借助函数活存储过程来完成的工作.那么以一个实例为主 ...