上一节我们讲了display
的inline-block
属性,但是我们在工作中很少用,因为这个属性对于IE7版本以下IE浏览器不兼容
。我们一般用float: left
代替。
lesson3.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Css</title> <meta name="keywords" content="key1, key2"> <meta name="description" content=""> <link rel="stylesheet" type="text/css" href="css/index.css"> </head> <body> <div>这是div</div> <div>这是div</div> <span>这是span标签</span> <span>这是span</span> </body> </html>
index.css
/* px:意为像素; */ div{ width: 100px; height: 50px; /*background-image: url("../imgs/pic.png");*/ border: 1px solid #0000ff; display: none; } span{ width: 100px; height: 50px; /*background-image: url("../imgs/pic.png");*/ border: 1px solid #0000ff; display: inline-block; }
上面代码我们把div
的div
属性设为none
,我们发现两个div标签不见了,这个属性什么时候用呢?我们看一下天猫:
这个手机二维码只有我们将光标移动上去的时候二维码才会显示,我们看一下它的代码:
当我们把光标移上去的时候发现这个display: none
不见了。这就是这个属性的作用了。
最后来总结一下display
的属性
其实display
属性还有很多,但我们只需要记住这四个就够啦~~~
现在我们来实践一下我们学过的知识:
做一个光标移动上去以后显示二维码的案例:
lesson3.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Css</title> <meta name="keywords" content="key1, key2"> <meta name="description" content=""> <link rel="stylesheet" type="text/css" href="css/index.css"> </head> <body> <a class="des" href="#">船长公众号</a> <div class="qrcode"></div> </body> </html>
index.css
a.des{ color: #bbbbbb; /*字体颜色设为灰色*/ text-decoration: none; /*设置文字描述(顺便去掉超链接的下划线)*/ font-size: 15px; /*设置字体大小*/ } /*设置伪类:只有当光标移上去时才会触发*/ a.des:hover{ /*注意:不要随便加空格,这里a.pic:hover是没有空格的*/ color: #c40000; text-decoration: underline; /*设置下划线*/ } /*设置图片*/ div.qrcode{ width: 129px; /*图片宽*/ height: 129px; /*图片高*/ background-image: url("../imgs/qrcode.bmp"); /*通过相对路径添加图片*/ border: 1px solid #bbbbbb; /*设置图片边框*/ display: none; /*设置图片不显示*/ }
到目前为止显示:
看一下代码,其实图片已经存在,知识不显示:
现在我们要完成鼠标移上去后再显示图片,其实这里可以用js
实现,但现在还没讲,所以我们用css
的方式,为了达到效果,我们把上面代码里的div
标签放到a
标签里:
lesson3.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Css</title> <meta name="keywords" content="key1, key2"> <meta name="description" content=""> <link rel="stylesheet" type="text/css" href="css/index.css"> </head> <body> <a class="des" href="#">船长公众号 <div class="qrcode"></div> </a> </body> </html>
index.css
a.des{ color: #bbbbbb; /*字体颜色设为灰色*/ text-decoration: none; /*设置文字描述(顺便去掉超链接的下划线)*/ font-size: 15px; /*设置字体大小*/ } /*设置伪类:只有当光标移上去时才会触发*/ a.des:hover{ /*注意:不要随便加空格,这里a.pic:hover是没有空格的*/ color: #c40000; text-decoration: underline; /*设置下划线*/ } /*设置图片*/ a.des div.qrcode{ width: 129px; /*图片宽*/ height: 129px; /*图片高*/ background-image: url("../imgs/qrcode.bmp"); /*通过相对路径添加图片*/ border: 1px solid #bbbbbb; /*设置图片边框*/ display: none; /*设置图片不显示*/ } /*设置鼠标移上去后显示图片*/ a.des:hover div.qrcode{ display: block; }
鼠标不移上去:
鼠标移上去以后:
lesson3.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Css</title> <meta name="keywords" content="key1, key2"> <meta name="description" content=""> <link rel="stylesheet" type="text/css" href="css/index.css"> </head> <body> <a class="des" href="#">船长公众号 <div class="qrcode"></div> </a> <div class="menu"> <div class="title">孟船长的公众号</div> <ul class="items"> <li>Selenium自动化</li> <li>接口测试</li> <li>Robot Framework</li> </ul> </div> </body> </html>
index.css
/*先不用管,下节课讲 这里的作用是让ul li那里没有左边的空白*/ *{ margin: 0px; padding: 0px; } a.des{ color: #bbbbbb; /*字体颜色设为灰色*/ text-decoration: none; /*设置文字描述(顺便去掉超链接的下划线)*/ font-size: 15px; /*设置字体大小*/ } /*设置伪类:只有当光标移上去时才会触发*/ a.des:hover{ /*注意:不要随便加空格,这里a.pic:hover是没有空格的*/ color: #c40000; text-decoration: underline; /*设置下划线*/ } /*设置图片*/ a.des div.qrcode{ width: 129px; /*图片宽*/ height: 129px; /*图片高*/ background-image: url("../imgs/qrcode.bmp"); /*通过相对路径添加图片*/ border: 1px solid #bbbbbb; /*设置图片边框*/ display: none; /*设置图片不显示*/ } /*设置鼠标移上去后显示图片*/ a.des:hover div.qrcode{ display: block; } /*设置下面内容的样式*/ div.menu{ width: 190px; /* 下面的代码会继承此标签里的属性,这样下面所有标签里的字体和大小都会保持一致 避免代码冗余 */ font-family: "Microsoft Yahei"; /*设置文字字体*/ font-size: 15px; /*文字大小*/ } div.menu div.title{ width: 100%; /*适应上面的190px,这样写改的时候只需要修改上面的高度即可*/ height: 35px; /*高*/ background-color: #c40000; /*背景颜色*/ color: #fff; /*字体颜色*/ text-align: center; /*文本水平居中*/ line-height: 35px; /*文本单行垂直居中,与height值一致才是垂直居中*/ font-weight: bold; /*文字加粗*/ } div.menu ul.items{ list-style: none; /*让ul标签没有前面的点*/ } div.menu ul.items li{ height: 33px; background-color: #666; color: #fff; } /*当鼠标移上去以后文字背景变色*/ div.menu ul.items li:hover{ background-color: #c20fff; }
显示为:
大家也去试一下吧~~~代码哪怕是照着抄也会有效果的。
原创声明,本文系作者授权云+社区发表,未经许可,不得转载。
如有侵权,请联系 yunjia_community@tencent.com 删除。
我来说两句