HTML5 知识点（第一节）

廖王八

已于 2022-08-20 12:10:48 修改

阅读量268

点赞数 1

分类专栏： HTML 文章标签： html 前端

于 2022-08-14 11:52:49 首次发布

本文链接：https://blog.csdn.net/ljl17880248619/article/details/126317561

版权

HTML 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

HTML5 知识点（第一节）

页面美化和页面特效

图片边框
过渡
动画
平移、缩放、旋转、倾斜

综合样例

图片边框
语法：border-image: border-image-source border-image-slice border border-image-width border-image-repeat；

属性

<style type="text/css">
            border-image-source:路径
            border-image-slice:图片切割位置
            border-image-width: 边框宽度
            border-image-repeat: 排列方式 （常用取值如下）
                space:在不切断图片的情况下，平铺图片并保留一定间距填满整个空间
                repeat:平铺切分图填满整个空间
                stretch:拉伸切分图填满整个空间（默认值）
                round:平铺并拉伸填满整个空间，不切割图片
                
            
        </style>

过渡

   1. 过渡属性
<style type="text/css">
            body:hover{
                transition-delay: ;  过渡开始前的延迟（延迟）
                transition-duration: ; 过渡持续时间（时间）
                transition-property: ; 应用过渡的属性（样式）
                transition-timing-function: ; 过渡期间计算中间值（速度曲线）
                transform: ; 过渡的简写
                
            }
</style>

2. 过渡速度值

<style type="text/css">
            body:hover{
                transition-timing-function: ;常用属性值
                    ease:慢速开始，接着加速，然后慢速结束（默认值）
                    linear:相同速度开始到结束
                    ease-in:慢速开始
                    ease-out:慢速结束
                    ease-in-out:慢速开始，慢速结束
                    
            }
</style>

动画
1. 语法

<style type="text/css">
            @keyframes name{
                from{起始样式}
                to{结束样式}
            }
或
            
            @keyframes name{
                0%{样式}
                50%{样式}
                100%{样式}
            }

          标签名：动作{
                      animation:关键帧名 持续时间 动画速度 延迟时间 播放次数 ;
          }
</style>

2. 动画属性

<style type="text/css">
                animation-delay: ;  开始前延迟时间
                animation-direction: ; 循环播放时间和是否反向播放 取值：normal 或 alternate
                animation-duration: ;  动画播放的持续时间
                animation-iteration-count: ; 动画播放次数 取值：infinite 或 数值
                animation-name: ; 动画名称
                animation-play-state: ; 允许动画暂停和重新播放 取值：running 或 paused
                animation-timing-function: ; 动画期间计算中间值的方式，确定动画播放速度的变化
                
            
</style>

平移、缩放、旋转、倾斜
1.变换属性

2. transform的属性值

3. transform- origin属性的值

4. CSS3中的角度单位

综合样例

<!DOCTYPE html>
<html>
	<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title></title>    
    <style type="text/css">
          *{
			margin: 0;
			padding:0;
			}
     	.D1{
			text-align: center;
			font-family: "agency fb";
			color:  #FFFAF0;
			width: 800px;
			background:orange;
			margin: 10px auto 10px auto;
			}
		.D2{
			text-align: center;
			width: 800px;
			list-style: none;
			overflow: hidden;
			margin: 0px auto 10px auto;
			background:  orange;
			}
		.D3{
			color:black ;
			letter-spacing: 1px;
			text-align: center;  
			height: 45px;
			width: 800px;
			line-height: 45px;
			margin: 0px auto 10px auto;
			background:  #FFE4C4;
			}
		.D4{
			color: black;
			height: 330px;
			font-family: "agency fb";
			line-height: 35px;
			width: 800px;
			background: #FFE4C4 ;
			letter-spacing: 1px;
			text-align: center; 
			margin: 0px auto 10px auto;
			}
		.D5{
			margin: 0 auto 10px auto;
			width:800px;
			overflow: hidden;
			}
		.D6{
			height:80px;
			width: 800px;
			background:  orange;
			}
		.D2 li{
			float: left;
			width:25%;
			}	
		.D2 a{
			padding: 5px 0px;
			width: 100%;
			height: 30px;
			font-family: "agency fb";
			line-height: 30px;
			text-align: center;
			text-decoration: none;
			display: block;
			color:  #FFFAF0;
			}
		.D2 a:hover{                    
			background: #c00;
			}
		.D5 img {
			width:196px;
			}
		.D6 p{
			font-family: "agency fb";
			font-size: 20px;
			color: white;
			height: 73px;
			line-height:73px;
			text-align: center;
		}	
		</style>
    </head>
<body>   	
<h1 class="D1">TFBOYS</h1>   
<ul class="D2">	
		<li><a href="https://baike.baidu.com/item/TFBOYS/9083733?fr=aladdin">全员介绍</a></li>
		<li><a href="https://image.baidu.com/search/index?tn=baiduimage&ct=201326592&lm=-1&c
			l=2&ie=gb18030&word=tfboys%D5%D5%C6%AC%B4%F3%C8%AB%D7%EE%D0%C22020&fr=ala&ala=1&
			alatpl=normal&pos=0&dyTabStr=MCwzLDIsNCwxLDYsNSw4LDcsOQ%3D%3D">全员照片</a></li>
		<li><a href="https://www.9ku.com/geshou/47135.htm">全员歌曲</a></li>
		<li><a href="https://www.baidu.com/sf/vsearch?pd=video&wd=TFBOYS%E5%8F%82%E5%8A%A0%E
			7%9A%84%E6%89%80%E6%9C%89%E7%BB%BC%E8%89%BA&tn=vsearch&lid=a2a4f978000e7ae8&ie=u
			tf-8&rsv_pq=a2a4f978000e7ae8&rsv_spt=5&rsv_bp=1&f=8&atn=index">全员综艺</a></li>
		</ul>
<p class="D3">
		故事《TF》  讲述了三个小孩出道的故事和经历。</p>
<p class="D4">
	           人人都很羡慕TFBOYS的三小只年纪轻轻就能有现在的社会地位，能够<br />
	           给家里带来很大的利益而我们还在接受这家长的资金支持，他们登上了<br />
	           国际的舞台王俊凯在服装走秀中表现良好和外国多位知名男模特不相上<br />
	           下，王源，易烊千玺更是以一口流利的中文让老外目瞪口呆，他们代表<br />
	           着我们国家新一代青年的风采面貌。但是在这风光的背后他们又承受着<br />
	           怎样的不为人知的心酸呢？台上一分钟，台下十年功。这句话说得一点<br />
	           也不假，我们只看到了他们在舞台上的风光，却忽略了他们在台下的努<br />
	           力与汗水，这些比我们普通人付出的要多很多。“天将降大任于斯人也，<br />
	           必先苦其心志，劳其筋骨，饿其体肤······”
<div class="D5">
		<div>
		<img style="height: 130px;" src="6.jpeg" >
		<img src="b-ssl.duitang-1.jpeg" >
		<img style="height: 130px;" src="4.jpeg" >
		<img src="5.jpeg" >	
		</div>	
		<div class="D6">
			<p>四叶草在未来唯美盛开,现在只要你做我的花海</p>
		</div>
		</div>
		</body>
</html>