Web基础——CSS常用标签（3）

最新推荐文章于 2023-09-06 15:58:19 发布

Geek Li

最新推荐文章于 2023-09-06 15:58:19 发布

阅读量3.9k

点赞数 1

分类专栏：前端文章标签： css 前端 css3

本文链接：https://blog.csdn.net/weixin_43496491/article/details/122294370

版权

前端专栏收录该内容

21 篇文章 2 订阅

订阅专栏

子层在外层中移动

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#wai {
				height: 400px;
				width: 400px;
				background: url(img/img/aa.png);
				background-size: 100% 100%;
				/* padding-top: 100px;
				box-sizing: border-box; */
				/* 溢出层隐藏 */
				overflow: hidden;
				transition: all 0.5s;
			}
			a {
				color: white;
				text-decoration: none;
			}
			#nei {
				font-size: 20px;
				height: 50px;
				width: 400px;
				background-color: rgba(0, 0, 0, 0.2);
				margin-top: 400px;
				transition: all 0.5s;
			}
			#wai:hover {
				background-size: 105% 105%;
				transition: all 0.5s;
			}
			#wai:hover>#nei {
				margin-top: 350px;
				transition: all 0.5s;
			}
		</style>
	</head>
	<body>
		<div id="wai">
			<div id="nei">
				<a href="#">点击下载查看更多高清大图</a>
			</div>
		</div>
	</body>
</html>

自定义动画（1）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#d1{
				height: 400px;
				width: 400px;
				background-color: red;
				/* 开启自定义动画 */
				animation-name: mydh;
				animation-duration: 3s;
				animation-delay: 0s;
				animation-iteration-count:infinite;
				animation-timing-function:linear;
				/*  backwards 动画执行完停留到第一帧  
				forwards 动画执行完停留到最后一帧
				*/
				 animation-fill-mode:forwards;
				animation-direction:alternate;
				/* 动画的暂停开始 */
				animation-play-state:running;
			}
			@keyframes mydh{
				/* 起始状态 */
				from{
					height: 400px;
					width: 400px;
					background-color: red;
				}
				/* 最终的状态 */
				to{
					height: 400px;
					width: 400px;
					background-color:yellow;
					margin-left: 600px;
				}
			}
		</style>
	</head>
	<body>
		<div id="d1">
		</div>
	</body>
</html>

自定义动画（2）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#d1{
				height: 400px;
				width: 400px;
				background-color: red;
				/* 开启自定义动画 */
				animation: mydh 2s 1s infinite;
			}
			@keyframes mydh{
				/* 起始状态 */
				from{
					height: 400px;
					width: 400px;
					background-color: red;
				}
				/* 最终的状态 */
				to{
					height: 400px;
					width: 400px;
					background-color:yellow;
					border-radius: 200px;		
				}
			}	
		</style>
	</head>
	<body>
		<div id="d1">
		</div>
	</body>
</html>

自定义动画详细写法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}
			#wai {
				position: absolute;
				height: 300px;
				width: 180px;
				background-image: url(img/girl2.jpg);
				background-size: 100% 100%;
				animation: mydh 5s 0s infinite linear;
			}
			#wai:hover{
				/* 鼠标移动上动画暂停 */
				animation-play-state: paused;
			}
			#nei {
				width: 100%;
				height: 30px;
				background-color: rgba(0, 0, 0, 0.2);
				font-size: 18px;
				color: white;
				text-align: right;
			}
			a{
				color: white;
				text-decoration: none;
			}
			 @keyframes mydh {
				10% {
					background-image: url(img/girl1.jpg);
					top: 0;
					left: 800px
				}
				30% {
					background-image: url(img/girl3.jpg);
					top: 400px;
					left: 800px
				}
				50% {
					background-image: url(img/girl4.jpg);
					top: 300px;
					left: 0px
				}
				70% {
					background-image: url(img/girl5.jpg);
					top: 10px;
					left:500px
				}
				100% {
					background-image: url(img/girl1.jpg);
					top: 100px;
					left:600px
				}
			} 
		</style>
	</head>
	<body>
		<div id="wai">
			<div id="nei">
				<a href="#" onclick="guanbi()">X关闭</a>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		function guanbi(){
	document.getElementById("wai").style.display="none";
		}
	</script>
</html>

流式布局

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}
			#top {
				width: 100%;
				height: 60px;
				background-color: gray;
				/* 最大的伸缩宽度 */
				max-width:80%;
				/* 最小的伸缩宽度 */
				min-width:50%;
				/* 自动居中 */
				margin: 0px auto;
			}
			ul {
				list-style: none;
			}
			ul li {
				float: left;
				height: 60px;
				text-align: center;
				line-height: 60px;
			}
			/* 第一个子li */
			ul li:nth-child(1) {
				/* 宽度使用百分比，不要写死为像素 */
				width: 8%;
				background-color: dimgray;
			}
			ul li:nth-child(2) {
				width: 10%;
				background-color: bisque;
			}
			ul li:nth-child(3) {
				width: 57%;
				background: yellowgreen;
			}
			ul li:nth-child(4) {
				/* 宽度使用百分比，不要写死为像素 */
				width: 25%;
				background-color: red;
			}
			/* img 属于行内块元素，你要上下居中 */
			#myimg {
				height: 30px;
				width: 30px;
				/*  行内块元素，你要上下居中*/
				vertical-align: middle;
			}
			#logo{
				height: 50px;
				width: 5ss0px;
				/*  行内块元素，你要上下居中*/
				vertical-align: middle;
			}
		</style>
	</head>
	<body>
		<!-- 为了更好的适配屏幕 宽度，不要写死为像素，而是才有百分比 -->
		<div id="top">
			<ul>
				<li><img src="img/x.png" id="myimg"></li>
				<li><img src="img/jd.png" id="logo" ></li>
				<li>打开京东APP购物实惠又轻松</li>
				<li>下载APP</li>
			</ul>
		</div>
	</body>
</html>

Emmet语法

<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title></title>
	</head>
	<body>
		<!-- div*4 生成4个div 注意：按 table键补全 -->
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<!-- h1  按table键 补全这个标签-->
		<h1></h1>
		<!-- ul>li*5  父子关系-->
		<ul>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
		<!-- 并列关系 div+h1*2 -->
		<div></div>
		<h1></h1>
		<h1></h1>

		<!-- div+ul>li*5 -->
		<div></div>
		<ul>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>

		<!-- div#d1 添加id属性 -->
		<div id="d1"></div>
		<!--div.mydiv 添加class属性  -->
		<div class="mydiv"></div>
		<div class="mydiv"></div>
		<div class="mydiv"></div>
		<div class="mydiv"></div>
		<div class="mydiv"></div>
		<div class="mydiv"></div>
		<div class="mydiv"></div>
		<div class="mydiv"></div>
		<div class="mydiv"></div>
		<div class="mydiv"></div>
		<div class="mydiv"></div>

		<!-- 
			id自动编号 $
		ul>li#item$*5 
		
		-->
		<ul>
			<li id="item1"></li>
			<li id="item2"></li>
			<li id="item3"></li>
			<li id="item4"></li>
			<li id="item5"></li>
		</ul>
		<!-- div#d$*10 -->
		<div id="d1"></div>
		<div id="d2"></div>
		<div id="d3"></div>
		<div id="d4"></div>
		<div id="d5"></div>
		<div id="d6"></div>
		<div id="d7"></div>
		<div id="d8"></div>
		<div id="d9"></div>
		<div id="d10"></div>

<!-- div+div>p>span+em^bq -->
		<div></div>
		<div>
			<p>
				<span></span>
				<em></em>
			</p>
			<blockquote></blockquote>
		</div>
		
		<!-- ^ 上一级元素 -->
		<!-- div+div>p>em^h1 -->
		
		<div></div>
		<div>
			<p>
				<em></em>
			</p>
			<h1></h1>
		</div>
		
		<!-- div>div>h1*2^h2 -->
		<div>
			<div>
				<h1></h1>
				<h1></h1>
			</div>
			<h2></h2>
		</div>
			
			
			<!-- div>(header>ul>li*2>a)+footer>p -->
			<div>
				<header>
					<ul>
						<li><a href=""></a></li>
						<li><a href=""></a></li>
					</ul>
				</header>
				<footer>
					<p></p>
				</footer>
			</div>
			<!-- (div>dl>(dt+dd)*3)+footer>p -->
			<div>
				<dl>
					<dt></dt>
					<dd></dd>
					<dt></dt>
					<dd></dd>
					<dt></dt>
					<dd></dd>
				</dl>
			</div>
			<footer>
				<p></p>
			</footer>
			
			<!-- h1[align] -->
			 <h1 align=""></h1>
			 <!--  h1[align=center] -->
			 <h2 align="center"></h2>
			<!--  a[href=http://www.baidu]{进入百度} -->
			 <a href="http://www.baidu">进入百度</a>
			 
			<!-- 
			大括号放的标签之间的文本内容
			div{这是标签之间的内容} -->
			 
			  <div>这是标签之间的内容</div>
			  
			  <div>asfasfasfa</div>
			  <div>asfasfasfa</div>
			  <div>asfasfasfa</div>
			  <div>asfasfasfa</div>
			  <div>asfasfasfa</div>
			  <!-- $ 相当于要一个遍历  
			  div{啊沙发沙发沙发$}*10
			  -->
			  <div>阿斯顿发射点的发1</div>
			  <div>阿斯顿发射点的发2</div>
			  <div>阿斯顿发射点的发3</div>
			  <div>阿斯顿发射点的发4</div>
			  <div>阿斯顿发射点的发5</div>
			  <div>阿斯顿发射点的发6</div>
			  <div>阿斯顿发射点的发7</div>
			  <div>阿斯顿发射点的发8</div>
			  <div>阿斯顿发射点的发9</div>
			  <div>阿斯顿发射点的发10</div>
			  <!-- ul>li.item$@-*5  
			  
			  @- 他的意思就是降序 -->
			  	<li class="item5"></li>
			  	<li class="item4"></li>
			  	<li class="item3"></li>
			  	<li class="item2"></li>
			  	<li class="item1"></li>
			  </ul>
			  <!-- ul>li.item$@3*5 
			  
			  @3 编号从3开始
			  -->
			  <ul>
			  	<li class="item3"></li>
			  	<li class="item4"></li>
			  	<li class="item5"></li>
			  	<li class="item6"></li>
			  	<li class="item7"></li>
			  </ul>

			 <!-- div{asdfasdfasdfasdf$@3}*10 -->
			 <div>asdfasdfasdfasdf3</div>
			 <div>asdfasdfasdfasdf4</div>
			 <div>asdfasdfasdfasdf5</div>
			 <div>asdfasdfasdfasdf6</div>
			 <div>asdfasdfasdfasdf7</div>
			 <div>asdfasdfasdfasdf8</div>
			 <div>asdfasdfasdfasdf9</div>
			 <div>asdfasdfasdfasdf10</div>
			 <div>asdfasdfasdfasdf11</div>
			 <div>asdfasdfasdfasdf12</div>
			<!-- div#d99.mydiv -->
			<div id="d99" class="mydiv"></div>
	</body>
</html>

弹性盒子布局（1）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				/* 去掉所有元素的预留内外间距 */
				margin-top: 0px;		
			}
			#box {
				height: 600px;
				width:100%;
				border: 1px black solid;
				/* 把外层设置为弹性盒子 */
				display: flex;
				/*
				flex-direction：设置弹性盒子里面的子层的排列方向
				row:横向左对齐排列 
				row-reverse 横向反转
				column 纵向排列
				column-reverse 纵向反转
				*/
				flex-direction:row;
				/* 弹性盒子里面的子层对齐方式
				 center居中
				 flex-start 左对齐
				 flex-end 右对齐
				 space-between 两端顶着边，中间均分空白部分
				 space-around 两端留一些空白，中间均分空白
				 */
				justify-content:space-around ;
				/* 纵向对齐方式 
				center 纵向居中
				flex-start 纵向顶着上边
				flex-end 纵向顶着下边
				stretch:拉伸子层，填满父层的高度，注意子层不需要设置高度
				*/
				align-items:center;	
			}
			.son {
				 height: 100px; 
				width: 100px;
				border: 1px black solid;
				/* margin: auto auto; */
				/* margin-left: 20px; */
			}
		</style>
	</head>
	<body>
		<!-- 流式布局： float:left 浮动  + 宽度使用百分比来设置 
		弹性盒子布局：不需要浮动
		-->
<!-- 
   style="order:6" 调整弹性盒子中，子层的顺序
 -->
		<div id="box">
			<div class="son" style="order:6">1</div>
			<div class="son" style="order:1">2</div>
			<div class="son" style="order:2">3</div>
			<div class="son" style="order:5">4</div>
			<div class="son" style="order:6">5</div>
			<div class="son" style="order:4">6</div>
		</div>
	</body>
</html>

弹性盒子布局（2）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				/* 去掉所有元素的预留内外间距 */
				margin-top: 0px;
			}
			#box {
				height: 600px;
				width: 100%;
				border: 1px black solid;
				/* 把外层设置为弹性盒子 */
				display: flex;
				flex-direction: row;
				justify-content: space-around;
				align-items:flex-start;
				/* 
				 当所有子层的宽度或高度超过了盒子的宽度和高度，要不要换行
				 nowrap 不换行就会挤压子层，默认值
				 wrap 自动换行
				 */
				flex-wrap:nowrap;
			}
			.son {
				height: 100px;
				border: 1px black solid;
				/* 子层按比例分宽度 */
				/* flex-grow: 1; */
			}
			#box>div:nth-child(1){
				flex-grow: 1;
			}
			#box>div:nth-child(2){
				flex-grow: 2;
			}
			#box>div:nth-child(3){
				flex-grow: 2;
			}
			#box>div:nth-child(4){
				flex-grow: 2;
			}
			#box>div:nth-child(5){
				flex-grow: 3;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<div class="son">1</div>
			<div class="son">2</div>
			<div class="son">3</div>
			<div class="son">4</div>
			<div class="son">5</div>
		</div>
	</body>
</html>

弹性盒子布局（3）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				/* 去掉所有元素的预留内外间距 */
				margin-top: 0px;
			}
			#box {
				height: 600px;
				width: 100%;
				border: 1px black solid;
				/* 把外层设置为弹性盒子 */
				display: flex;
				flex-direction: row;
				justify-content: space-around;
				align-items: center;
				/* 
				 当所有子层的宽度或高度超过了盒子的宽度和高度，要不要换行
				 nowrap 不换行就会挤压子层，默认值
				 wrap 自动换行
				 */
				flex-wrap:wrap;
			}
			.son {
				height: 100px;
				width: 100px;
				border: 1px black solid;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<div class="son">1</div>
			<div class="son">2</div>
			<div class="son">3</div>
			<div class="son">4</div>
			<div class="son">5</div>
			<div class="son">6</div>
			<div class="son">1</div>
			<div class="son">2</div>
			<div class="son">3</div>
			<div class="son">4</div>
			<div class="son">5</div>
			<div class="son">6</div>
			<div class="son">1</div>
			<div class="son">2</div>
			<div class="son">3</div>
			<div class="son">4</div>
			<div class="son">5</div>
			<div class="son">6</div>
			<div class="son">1</div>
			<div class="son">2</div>
			<div class="son">3</div>
			<div class="son">4</div>
			<div class="son">5</div>
			<div class="son">6</div>
			<div class="son">1</div>
			<div class="son">2</div>
			<div class="son">3</div>
			<div class="son">4</div>
			<div class="son">5</div>
			<div class="son">6</div>
		</div>
	</body>
</html>

弹性盒子布局页面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			#top {
				height: 100px;
				width: 100%;
				background-color: beige;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
			#content{
				height: 700px;
				width: 100%;
				background-color:gainsboro;
				display: flex;
				align-items:stretch;
			}
			#d1{
				flex-grow: 3;
				background-color: aquamarine;
			}
			#d2{
				flex-grow: 7;
				background-color: antiquewhite;
			}
			#dibu {
				height: 200px;
				width: 100%;
				background-color:rgba(0,0,255,0.2);
				display: flex;
				justify-content: center;
				align-items: flex-end;
			}
			#xiaobox{
				margin-right: 20px;
				display: flex;
				align-items: center;
			}
		</style>
	</head>
	<body>
		<div id="top">
		
				<h1 style="margin-left: 10px;">客户管理系统</h1>
				<div id="xiaobox">
					<div id="">
						<img src="img/jd.png" >
					</div>
					<div id="" style="margin-left: 10px;">
						西安文理
					</div>
				</div>
		</div>
		<div id="content">
			<div class="son" id="d1">
				左
			</div>
			<div class="son" id="d2">
				右
			</div>
		</div>
		<div id="dibu">
			<div id="" style="margin-bottom: 10px;">
				地址：西安市太白南路168号
				<br>
				电话：11111111111
				<br>
				版权所有：西安文理
			</div>
		</div>
	</body>
</html>

Geek Li

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Web基础——CSS常用标签（3）

这里写目录标题子层在外层中移动自定义动画（1）自定义动画（2）自定义动画详细写法流式布局Emmet语法弹性盒子布局（1）弹性盒子布局（2）弹性盒子布局（3）弹性盒子布局页面子层在外层中移动<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #wai { heig
复制链接

扫一扫