实现下拉

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
ul{
list-style-type: none;
}
.a{
display: none;
}
.b:hover~ .a{
display:inline;
}
</style>
<title></title>
</head>
<body>
<ul>
<li class="b">手机品牌</li>
<li class="a">华为</li><br/>
<li class="a">小米</li><br/>
<li class="a">苹果</li><br/>
</ul>
</body>
</html>

css3(display)的更多相关文章

  1. 转: css3: display:box详解

    示例见:  css3: flexbox (BTW: blog不能包含iframe script真不方便啊~~) display:box;box-flex是css3新添加的盒子模型属性,它的出现可以解决 ...

  2. CSS3 display：flex和display：box有什么区别

    父级元素有display:box;属性之后.他的子元素里面加上box-flex属性.可以让子元素按照父元素的宽度进行一定比例的分占空间. 如: html: <article>   < ...

  3. Css3 display用法

    display 属性规定元素应该生成的框的类型. display:none   此元素不会被显示 display:block   此元素将显示为块级元素,此元素前后会带有换行符 display:inl ...

  4. CSS3 display:flex和display:box有什么区别？

    **区别**,仅是各阶段草案命名.- W3C 2009年第1次草案:[display:box;](https://www.w3.org/TR/2009/WD-css3-flexbox-20090723 ...

  5. css3 display:box

    想做自适应的流体布局 box很有用 . 还没有得到firefox.Opera.chrome浏览器的完全支持,但可以使用它们的私有属性定义firefox(-moz-).opera(-o-).chrome ...

  6. css3 display:box 属性

    先看例子: .ub{ display: -webkit-box !important; display: box !important; position:relative;}.ub-f1{ posi ...

  7. css 垂直同步的几种方式

    第一种: 利用 display:table 和 display:table-cell 的方式 这种方式就好像将table布局搬过来一样,相信大家对table的td还是有印象的,它的内容是可以设置垂直居 ...

  8. flex属性的学习

    1.需要记住的属性和值. ------------------------------------------------------------- 方向横和纵 flex-direction: row ...

  9. css等比例分割父级容器（完美三等分）

    html部分代码: 方法一: 浮动布局+百分比 (将子元素依次左浮动,根据子元素的个数,设定每个子元素的宽度百分比) 方法二:行内元素(inline-block)+百分比 方法三: 父元素  disp ...

随机推荐

  1. 【Appium自学】Appium [安装包] Appium 官方文档（转发）

    转发地址:https://blog.csdn.net/panyu881024/article/details/80149190 Appium国内下载地址 : http://pan.baidu.com/ ...

  2. webpy学（ban）习（砖）记录

    参考链接:http://blog.csdn.net/caleng/article/details/5712850 参考代码:http://files.cnblogs.com/files/tacyeh/ ...

  3. HTML5 full-screen全屏API

    这篇文章纯属记录,非常感谢张鑫旭大神的demo 原文地址: http://www.zhangxinxu.com/study/201210/html5-full-screen-api.html 代码 C ...

  4. python学习笔记----面向对象

    面向对象 类:成员变量(属性) 方法(操作成员变量) 出一个场景:玩过游戏.主人公,进入了一个场景,有10个小怪物是一样的.有攻击力,血(100格).如果小怪物有多个数值需要管理,小怪物的血量.小怪物 ...

  5. visual studio开启多核编译方法《转》

    原文:https://blog.csdn.net/acaiwlj/article/details/50240625 visual studio在编译时可以启动多核并行编译,以减少编译所需时间.话不多说 ...

  6. Git综合使用命令行和gui工具小结

    使用Git的时候,综合使用命令行和gui工具,可以把Git用的最舒服,因此这里总结下使用gui和命令行的一些对应操作, gui中拉取:git pull origin dev_branch gui中推送 ...

  7. HTML: Dom event

    转自:https://developer.mozilla.org/zh-CN/docs/Web/API/Event Event接口表示在DOM中发生的任何事件; 一些是用户生成的(例如鼠标或键盘事件) ...

  8. 一个suse11 sp1的crash工具版本问题

    这几年排查的各种类型的crash也比较多了,各种类型的也算见过,但是排查这个crash,走了不该走的弯路,事后显得很low,为了防止自己犯类似错误,也同时提醒后人,记录之. 内核是suse11,sp1 ...

  9. mysql左连接右连接（查询两张表不同的数据）

    有两张表:一张A表he一张B表 left join(左联接) 返回包括左表中的所有记录和右表中联结字段相等的记录 :right join(右联接) 返回包括右表中的所有记录和左表中联结字段相等的记录: ...

  10. information_schema.COLUMNS

    MySQL的information_schema库中有个COLUMNS表,里面记录了mysql所有库中所有表的字段信息,该表信息如下: COLUMNS表的每一条记录都对应了数据库中某个表的某个字段,该 ...