HTML第三课——css【3】
时间:2022-05-16
本文章向大家介绍HTML第三课——css【3】,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
上一节我们讲了display
的inline-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;
}
上面代码我们把div
的div
属性设为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;
}
显示为:
大家也去试一下吧~~~代码哪怕是照着抄也会有效果的。
- JPA的多表复杂查询:详细篇
- 尝试使用Memcached遇到的狗血问题
- Enumerable#Zip 实现一下
- 更新自己,不要影响其他人
- 【译】Spring官方教程:Spring Boot整合消息中间件RabbitMQ
- [实录]解决Migrator.Net 小bug
- Jenkins Pipeline插件十大最佳实践!
- Spring Cloud Hystrix的请求合并
- JQuery JCshare 0.1 分享插件
- Java中的即时编译(Just-in-time compilation)
- 无尽的忙碌换来幸福的日子
- 消费者驱动的微服务契约测试套件:Spring Cloud Contract
- 自己做的一个小程序 可采集、导出、模板、配置
- 分布式消息队列 RocketMQ 源码分析 —— Message 拉取与消费(上)
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- java线程池(六):ForkJoinPool源码分析之二(WorkQueue源码)
- Codeforces Round #605 (Div. 3) D. Remove One Element
- 用python爬虫,pyinstaller写一个属于自己的彩虹屁生成器!
- 2020牛客寒假算法基础集训营4 C 子段乘积
- Callable and Future in Java(java中的Callable和Future)
- Java类 初步学习
- Gephi可视化拓扑图简单实战
- python连接到SQList数据库以及简单操作
- 在markdown编辑器使用html绘制表格
- 循环不变式:算法中基础概念的明晰
- Codeforces Round #615 (Div. 3)B. Collecting Packages
- 七大设计原则、单一职责原则
- JSP 基本凉凉,学妹不知道他是啥
- Codeforces Round #615 (Div. 3)C. Product of Three Numbers
- Codeforces Round #622 (Div. 2) A.Fast Food Restaurant