css3内容

huijie_0716

已于 2022-03-23 09:53:33 修改

阅读量414

点赞数 2

分类专栏： css3 css HTML5 文章标签： css3 css html html5

于 2022-03-15 21:43:05 首次发布

本文链接：https://blog.csdn.net/huijie_0716/article/details/123497388

版权

HTML5 同时被 3 个专栏收录

22 篇文章 0 订阅

订阅专栏

css

17 篇文章 0 订阅

订阅专栏

css3

6 篇文章 0 订阅

订阅专栏

二级菜单

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;padding: 0;
			}
			ul{
				list-style: none;
			}
			a{
				text-decoration: none;
			}
			.header{
				width: 100%;
				height: 40px;
				background-color: #CCCCCC;
			}
			.header .nav{
				width: 1000px;
				height: 40px;
				line-height: 40px;
				margin: 0 auto;
				background-color: pink;
			}
			.header .nav>li{
				position: relative;
				float: left;
			}
			.header .nav li{
				width: 150px;
				text-align: center;
			}
			.header .nav li a{
				display: block;
				color: #000000;
			}
			.header .nav li:hover{
				background-color: #FF0000;
			}
			.header .nav li a:hover{
				color: #FFFFFF;
			}
			.header .nav .subnav{
				display: none;
				position: absolute;
				top: 40px;
				left: 0;
				background-color: pink;
			}
			.header .nav li:hover .subnav{
				display: block;
			}
		</style>
	</head>
	<body>
		<div class="header">
			<ul class="nav">
				<li><a href="#">首页</a></li>
				<li>
					<a href="#">活动</a>
					<ul class="subnav">
						<li><a href="#">去泰山</a></li>
						<li><a href="#">去泰国</a></li>
						<li><a href="#">去日本</a></li>
					</ul>
				</li>
				<li><a href="#">招聘</a></li>
				<li><a href="#">帮助中心</a></li>
			</ul>
		</div>
	</body>
</html>

结果为

给ul加 display：none; 并给选中的加display：block；

不可见的

display：none;

visibility: hidden; 隐藏

visibility: hidden与display：none;的区别

相同点：都可以隐藏元素

不同点：

visibility: hidden隐藏元素的同时仍在页面上保留空间；display：none是把元素在页面删除了；
css3的transition支持visibility属性，不支持display属性
display:none会影响计数器计数，而visibility:hidden不会
对于display，如果计算值是none，则该元素及其所有后后代均隐藏。visibility: hidden有继承性。

遮罩层

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			ul{
				list-style: none;
			}
			a{
				text-decoration: none;
			}
			.clearfix{
				display: block;
				content: "";
				clear: both;
			}
			.lixt{
				width: 1100px;
				margin: 0 auto;
			}
			.list li {
				overflow: hidden;
				position: relative;
				float: left;
				width: 500px;
				margin: 25px;
			}
			.list li img{
				width: 500px;
				vertical-align: middle;
			}
			.list li .mask{
				position: absolute;
				/* left: -100%; */
				/* left: 100%; */
				top: 100%;
				/* top: -100%; */
				width: 100%;
				height: 100%;
				color: #FFFFFF;
				background-color: rgba(0,0,0,.3);
				transition: .4s;
			}
			.list li .mask h1{
				margin-top: 100px;
			}
			.list li:hover .mask{
				/* left: 0; */
				top: 0;
			}
		</style>
	</head>
	<body>
		<ul class="list">
			<li>
				<a href="#"><img src="../img/pic2.jpg" alt=""></a>
				<div class="mask">
					<h1>zhishiguang</h1>
				</div>
			</li>
			<li>
				<a href="#"><img src="../img/pic6.jpg" alt=""></a>
				<div class="mask">
					<h1>xingkong</h1>
				</div>
			</li>
		</ul>
	</body>
</html>

未选中时top设为0 ，选中时top设为100%是从下往上

选择器

* 通配符——通配符选择器是用来选择所有元素

*{margin：0； padding：0；}

元素选择器

li{border:1px solid #000;}

类选择器

.important {font-weight: bold; color: yellow;}

id选择器

#important {font-weight: bold; color: yellow;}

后代选择器（ＥＦ）

前面E为祖先元素，Ｆ为后代元素

.demo li {color: blue;}

子元素选择器Ｅ > F

其中Ｆ仅仅是Ｅ的子元素

ul > li {background: green;color: yellow;}

相邻兄弟元素选择器(E + F)

.active + li {background: green;color: yellow; border: 1px solid #ccc;}

通用兄弟选择器（Ｅ〜Ｆ）

E和F元素是属于同一父元素之内，并且F元素在Ｅ元素之后，那么E ~ F 选择器将选择所有Ｅ元素后面的Ｆ元素。

.active ~ li {background: green;color: yellow; border: 1px solid #ccc;}

群组选择器

.first, .last {background: green;color: yellow; border: 1px solid #ccc;}

E[attr]：只使用属性名

.demo a[id] {background: blue; color:yellow;font-weight:bold;}

Ｅ[attr="value"]

.demo a[id="first"] {background: blue; color:yellow;font-weight:bold;}

:focus用于元素成为焦点，这个经常用在表单元素上。

.subm:focus{	border:1px solid transparent;box-shadow: 1px 1px 3px #f33;	}

UI元素状态伪类

：nth-child(n) 第n个元素

input[type="text"]:disabled {border:1px solid #999;background-color: #fefefe;}
input[type]:checked{width：15px; height:15px;}

:nth选择器

ul li:nth-child(odd){background-color: #00FFFF;}

奇数个

ul li:nth-child(even){background-color: #00FFFF;}

：nth-of-type(n) 同种类型里的第n个元素

div :first-of-type{background-color: #FF0000;}

否定选择器 :not()

input:not([type="submit"]) {border: 1px solid red;}

huijie_0716

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3内容

二级菜单<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0;padding: 0; } ul{ list-style: none; } a{ text-decoration: none;
复制链接

扫一扫