CSS基础-行快属性，hover
CSS基础
1.行快属性
在css中有很多标签，分为行内标签，块标签，标签行内块标签，他们有着不同的属性。
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title></title>
6 <style type="text/css">
7 div{
8 width: 300px;
9 height: 300px;
10 background: lightblue;
11 display: inline-block;
12 /*display: inline;转换为行内元素 display: block; 转化为块元素
13 display: inline-block转换为行内块元素*/
14 }
15 span{
16 width: 300px;
17 height: 300px;
18 background: lightgreen;
19 display: inline-block;
20 }
21 input{
22 width: 400px;
23 height: 50px;
24 }
25 </style>
26 </head>
27 <body>
28
29 <div>我是div</div> <div>我是div</div>
30 <span>我是span</span> <span>我是span</span>
31 <input type="text" name="">
32 <input type="text" name="">
33 </body>
34 </html>
效果图：
2.hover
hover 是鼠标光标移动到标签上的变化属性
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 #div1{
8 width: 300px;
9 height: 300px;
10 background: red;
11 }
12 #div1:hover{/*光标移动到div1时的变化*/
13 background: #00b38a;
14 }
15 #div2{
16 width: 100px;
17 height: 100px;
18 background: green;
19 }
20 #div1:hover>#div2{/*光标移动到div1时子集div2的变化*/
21 background: #3388ff;
22 }
23
24 #div3{
25 height: 50px;
26 width: 50px;
27 background: yellow;
28 }
29 #div1:hover #div3{
30 background: #555555;
31 }
32 #div4{
33 height: 200px;
34 width: 200px;
35 background: blue;
36 }
37 #div1:hover+#div4{
38 background: black;
39 }
40 </style>
41 </head>
42 <body>
43 <div id="div1">
44 <div id="div2">
45 <div id="div3"></div>
46 </div>
47 </div>
48
49 <div id="div4"></div>
50
51 </body>
52 </html>
效果图：
原图：
光标移动到上面：
CSS基础-行快属性，hover的更多相关文章
- HTML&CSS基础-标签的属性
HTML&CSS基础-标签的属性 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html源代码 <!-- html 根标签,一个页面中有且只有一个根标签,网页中的 ...
- HTML&CSS基础-边框简写属性
HTML&CSS基础-边框简写属性 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.HTML源代码 <!DOCTYPE html> <html> ...
- CSS 基础 例子 display属性：block、inline和inline-block的区别
HTML中块级元素(block)和行级元素(inline):比如div就是常见的块级元素,span就是常见的行级元素. 可以通过css的display属性来设置一个元素到底是块级,还是行级元素:dis ...
- CSS基础之浮动属性float图文详解
宏观地讲,我们的web页面的制作,是个“流”,必须从上而下,像“织毛衣”. 标准流里面的限制非常多,导致很多页面效果无法实现.如果我们现在就要并排.并且就要设置宽高,那该怎么办呢?办法是:超脱 ...
- CSS基础 行内元素/行内块元素设置垂直对齐方式及常见使用案例
vertical-align 属性值 效果 baseline 基线对齐 top 顶部对齐 middle 中心对齐 bottom 底部对齐 使用案例1:百度搜索框左边和右边底部没有对齐 使用vertic ...
- css基础知识之属性选择器
css属性选择器及属性和值选择器如下: <!DOCTYPE html> <html lang="en"> <head> <meta cha ...
- css基础 行内元素 块级元素
1.行内元素(内联元素 inlineElement) 特点:不占据一行,无法设置宽高及行高,其宽度随着内容增加,高度随字体大小而改变,margin只对左右起作用,上下无效. 常见有: a - 锚点,b ...
- CSS基础（float属性与清除浮动）
3.8 这是CSS里比较重要的属性:浮动,这个属性会在以后经常用到,算是一个重点吧 浮动 语法:float:left | right | none 特点: 浮动的元素不占位置,脱离了标准文档流 ...
- CSS基础 阴影相关属性设置
一.字体阴影属性名:text-shadow:水平偏移量 垂直偏移量 模糊度 阴影颜色: html代码: <div>农夫山泉有点甜</div>css代码: div{ font-s ...
随机推荐
- 2020牛客NOIP赛前集训营-提高组(第三场)C-牛半仙的妹子Tree【虚树,最短路】
正题 题目链接:https://ac.nowcoder.com/acm/contest/7609/C 题目大意 给出\(n\)个点的一棵树,\(m\)个时刻各有一个操作 标记一个点,每个点被标记后的每 ...
- Spark MLib完整基础入门教程
Spark MLib 在Spark下进行机器学习,必然无法离开其提供的MLlib框架,所以接下来我们将以本框架为基础进行实际的讲解.首先我们需要了解其中最基本的结构类型,即转换器.估计器.评估器和流水 ...
- 试题 算法训练 区间k大数查询 java题解
资源限制 时间限制:1.0s 内存限制:256.0MB 问题描述 给定一个序列,每次询问序列中第l个数到第r个数中第K大的数是哪个. 输入格式 第一行包含一个数n,表示序列长度. 第二行包含n个正 ...
- SpringCloud 2020.0.4 系列之 Feign
1. 概述 老话说的好:任何问题都有不止一种的解决方法,当前的问题没有解决,只是还没有发现解决方法,而并不是无解. 言归正传,之前我们聊了 SpringCloud 的服务治理组件 Eureka,今天我 ...
- 2020BUAA软工个人项目作业
2020BUAA软工个人项目作业 17373010 杜博玮 项目 内容 这个作业属于哪个课程 2020春季计算机学院软件工程(罗杰 任健) 这个作业的要求在哪里 个人项目作业 我在这个课程的目标是 学 ...
- 架构师之路-https底层原理
引子 先说说我对架构师的理解.从业务能力上,需要的是发现问题和解决问题的能力:从团队建设上,需要的是能培养团队的业务能力:从项目管理上,把控好整个项目和软件产品的全生命周期. 我搜索了一下架构师的培训 ...
- 在浏览器上开发GO和Vue！(基于code-server)
在浏览器上开发GO和Vue!(基于code-server) 曾几何时,开发者们都被安装编程环境苦恼,尽管现在很多语言的开发环境已经不难装了,但是如果我们能有一个运行在云端的编译器,那么我们就可以随时随 ...
- MyBatis源码分析（五）：MyBatis Cache分析
一.Mybatis缓存介绍 在Mybatis中,它提供了一级缓存和二级缓存,默认的情况下只开启一级缓存,所以默认情况下是开启了缓存的,除非明确指定不开缓存功能.使用缓存的目的就是把数据保存在内存中,是 ...
- ASP的调试技术解答
一. 调试 ASP.NET 应用程序时出现"未将项目配置为进行调试"的错误信息 症状 当您在 Visual Studio .NET 中调试 ASP.NET 应用程序时,可能会出现下 ...
- 数组中出现次数超过一半的数字 牛客网 剑指Offer
数组中出现次数超过一半的数字 牛客网 剑指Offer 题目描述 数组中有一个数字出现的次数超过数组长度的一半,请找出这个数字.例如输入一个长度为9的数组{1,2,3,2,2,2,5,4,2}.由于数字 ...