web之CSS悬停效果页面设计

发布时间：2023年12月17日

参考小米商城的“手机”页面，做出一个“手机”的标签，实现当鼠标悬停在“手机”上时，出现手机系列菜单；当鼠标移走时，菜单页面消失的效果！

参考图：

?

实现代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				float: left;
			}
			p{				
				height: 20px;
			}
			#phone{
				margin-left: 10%;
				color: white;
				font-weight: 500;
			}
			#aa{
				position: relative;
				width: 200px;
				height: 50px;
				border: 1px solid #FF0000;
				background-color: #Ffa500;
				margin: 50px;
			}
			#bb{
				position:absolute;
				width: 300px;
				height: 450px;
				border: 1px solid red;
				opacity: 0;
				padding: 10px;
				left: 200px;
				margin: 0px;
				top: 0px;
			}
			#aa:hover>#bb{
				opacity: 1;
				
			}
			image{
				width: 100px;
				height: 100px;
			}
		</style>
	</head>
	<body>
		<div id="aa">
			
			<p id="phone">手机</p>
			<div id="bb">
				<p>Xiaomi MIX系列</p><br/>
				<p>Xiaomi 数字系列</p><br/>
				<p>Xiaomi Civi系列</p><br/>
				<p>Redmi K系列</p><br/>
				<p>Redmi Note系列</p><br/>
				<p>Redmi 数字系列</p><br/>
				
			</div>
		</div>
	</body>
</html>

结果图：

鼠标未悬停在手机上时：

鼠标悬停在手机上时：

涉及知识点：

一、基本选择器

1、标签选择器（例如：div{}）

2、id选择器（#id名{}）

3、类选择器（.类名{}）

4、通配符选择器（*{}）

二、包含选择器

1、子代选择器(获取某个标签的第一级子标签)

????????div.list>ul {}

2、后代选择器(获取某个标签中的所有的子标签）

????????.list li {}

3、分组选择器(可以同时设定多个标签，使用逗号进行分割）

????????.mylove, #myprogram, h1 {}

三、属性选择器

.container[class] {}??????div[title]????????input[type='text']???????

四、伪类选择器

????????五种常见状态：

????????????????:link 超链接点击之前

????????????????:visited 链接被访问过之后

????????????????:hover “悬停”：鼠标放到标签上的时候

????????????????:active “激活”： 鼠标点击标签，但是不松手时

????????????????:focus 是某个标签获得焦点时的样式（比如某个输入框获得焦点）

五、伪元素选择器

::before?? ?表示css3的伪元素选择器
::after?? ??? ?标签css3的伪元素选择器
::first-letter
::first-line
::section

before和after选择器必须书写content属性

?六、CSS常见样式

样式名称样式的值说明
font-family字体名称（如微软雅黑or Microsoft YaHei）文本字体
font-stylenormal、italic、oblique规定斜体文本
font-variantsmall-caps、normal小型大写字母
font-weightnormal、bold、bolder、数值文本的粗细
font-size默认大小是 16 像素 (16px=1em)，单位一般是px，也可以是其他文本的大小
text-indent所有元素的第一行都可以缩进一个给定的长度，该长度可以是负值软化文本内容
text-alignleft、right 、center、justify文本行间的对齐方式
word-spacing其默认值 normal 与设置值为 0 是一样的改变单词间隔
letter-spacing其默认值 normal 与设置值为 0 是一样的改变字（字母）间隔
text-transformnone、uppercase、lowercase、capitalize处理文本的大小写
text-decorationnone、underline、overline、line-through、blink文本装饰
white-spacenormal、pre-line、nowrap、pre、pre-wrap空格换行和tab 处理
color#十六进制三原色、颜色单词、rgb函数、rgba函数文本颜色
direction默认ltr、rtl、inherit文本的方向
line-heightnormal、数值、%等行高
text-shadowh1 { text-shadow: 5px 5px 5px #FF0000; }文本阴影效果
box-shadowdiv{ text-shadow: 5px 5px 5px #FF0000; }盒子阴影效果
list-style-typedisc、circle、square、decimal、lower-roman、lower-latin列表的样式
list-style-imageurl函数引入图片列表图标
list-style-positioninside、outside、inherit何处放置列表项标记
list-stylelist-style:square inside url('imgs/point.png');统一设置列表样式
outlinep { outline:#00FF00 dotted thick; }轮廓线
outline-offset数值轮廓和元素的距离
outline-color#十六进制三原色、颜色单词、rgb函数、rgba函数轮廓颜色
outline-styledotted、solid、dashed、double等轮廓样式
outline-widththin（细）、medium（默认）、thick（粗）、数值轮廓的宽度
border-imagediv { border-image:url(border.png) 30 30 round;}使用图片来创建边框
opacity0~1之间的数值，0表示全透明，1表示不透明透明度
width数值元素的宽度
height数值元素的高度
max-height数值最大高度
max-width数值最大宽度
min-height数值最小高度
min-width数值最小高度
margin{margin: 0px; margin: 10px 20px; margin: 10px 20px 30px 0px; margin: auto;}外边距
margin-left数值左外边距
margin-right数值右外边距
margin-top数值上外边距
margin-bottom数值下外边距
padding{padding: 0px; padding: 10px 20px; padding: 10px 20px 30px 0px; }内边距
padding-xx和margin一致也有四个
borderborder: 1px solid red;边线
border-width数值边线粗细
border-styledotted、dashed、solid、double边线样式
border-color#十六进制三原色、颜色单词、rgb函数、rgba函数颜色
border-xx-xxborder-top-width: 15px样式、颜色、粗细
border-radiusdiv { border:2px solid; border-radius:25px; }，数值或者百分比边线的弧度
background{ background: #00FF00 url(bgimage.gif) no-repeat fixed top; }背景综合写法
background-color#十六进制三原色、颜色单词、rgb函数、rgba函数背景颜色
background-positiontop left 这种单词对 或者 坐标位置（x,y）或者 x%, y%背景位置
background-sizebackground-size:80px 60px;| cover背景图像的尺寸
background-repeatrepeat、repeat-x、repeat-y、no-repeat背景图像重复
background-imageurl函数引入图片背景图片
background-attachment默认scroll、fixed背景图像是否固定或者随页面的滚动
visibilityvisible、hidden元素是否可见
displaynone、block、inline、inline-block、list-item元素类型转换、可见性
positionstatic、relative、absolute、fixed元素定位
z-index数值，默认0表示z轴的优先级
vertical-alignbaseline、sub、super、top、text-top、middle、text-bottom元素的垂直对齐方式
overflowvisible、hidden、scroll、auto溢出元素框时处理
clearleft、right、both、none清除浮动
floatleft、right、none元素在哪个方向浮动
resizenone、both、horizontal、vertical规定是否调整元素尺寸
box-sizingcontent-box、border-box容器尺寸计算方式
filteropacity()、url()、blur()、grayscale()、brightness()等函数设置页面的滤镜

文章来源:https://blog.csdn.net/weixin_68256171/article/details/135049220
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
最新文章