HTML第三课——css【3】

上一节我们讲了displayinline-block属性,但是我们在工作中很少用,因为这个属性对于IE7版本以下IE浏览器不兼容。我们一般用float: left代替。

  • display的属性none

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;
}

上面代码我们把divdiv属性设为none,我们发现两个div标签不见了,这个属性什么时候用呢?我们看一下天猫:

这个手机二维码只有我们将光标移动上去的时候二维码才会显示,我们看一下它的代码:

当我们把光标移上去的时候发现这个display: none不见了。这就是这个属性的作用了。

最后来总结一下display的属性

  • block 占用一行
  • inline 只占用自己需要的但不能设置宽和高
  • inline-block 可以设置宽和高
  • none 隐藏

其实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;
}

显示为:

大家也去试一下吧~~~代码哪怕是照着抄也会有效果的。

原文发布于微信公众号 - 自动化测试实战(gh_839e78b6ba28)

原文发表时间:2018-05-08

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端儿

图片轮播(左右切换)--JS原生和jQuery实现

左右切换的做法基本步骤跟 上一篇文章  淡入淡出 类似,只不过修改了一些特定的部分

1.1K20
来自专栏.Net移动开发

VisualStudio移动开发(C#、VB.NET)Smobiler开发平台——BarcodeView控件的使用方式,.Net移动开发

      设置控件类型,将BarcodeFormat属性设置为“QRCode”,让控件显示为二维码,如图1;

15820
来自专栏.Net移动开发

VisualStudio移动开发(C#、VB.NET)Smobiler开发平台——SliderView控件的使用方式

获得和设置标签视图集合,打开集合编辑器,并点击“添加”,分别填写ResourceID属性(菜单项图片名称),Text(菜单项文本),Value(内部值,不在界面...

11510
来自专栏向治洪

html5标签基础

1.声明:<!DOCTYPE> HTML有多个不同的版本,只有完全明白页面中使用的确切HTML版本,浏览器才能完全正确的显示出HTML页面,这就是<!DOC...

19890
来自专栏前端知识分享

第56天:选中文字弹出提示框

所以这个的事件一定是  onmouseup  ,盒子显示而且盒子的位置 在  鼠标的 clientX 和 clientY 一模一样

15820
来自专栏前端小叙

vue获取DOM元素并设置属性

这里我想到了2个方法: 方法一: 直接给相应的元素加id,然后再document.getElementById("id");获取,然后设置相应属性或样式 方法二...

548120
来自专栏分享达人秀

屏幕宽高不够,滚动视图ScrollView来凑

前面几期学习了ProgressBar系列组件、ViewAnimator系列组件、Picker系列组件和时间日期系列组件,接下来几期继续来学习常见的其他组...

23260
来自专栏腾讯NEXT学位

CSS布局解决方案(上)

31440
来自专栏自动化测试实战

html——css基础

上一节我们讲了display的inline-block属性,但是我们在工作中很少用,因为这个属性对于IE7版本以下IE浏览器不兼容。我们一般用float: le...

50650
来自专栏杂七杂八

HTML初学笔记1

[TOC] 什么是HTML HTML 是用来描述网页的一种语言。 HTML 指的是超文本标记语言 (Hyper Text Markup Language) ...

42870

扫码关注云+社区

领取腾讯云代金券