【前端学习快速编写页面样式技巧汇集】

sakura欣悠

已于 2022-08-30 11:05:24 修改

阅读量330

点赞数 1

分类专栏：前端文章标签：前端学习 javascript

于 2022-08-30 10:52:28 首次发布

本文链接：https://blog.csdn.net/sakura22123/article/details/126599270

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

语法

阿米塔语法快速编写HTMl框架

敲完一个样式按 Tab就可以自动补全代码块

* 数字（表示标签的数字）
> 标签名（表示下一级的标签）
.class属性（一般为div.classname 表示紧跟标签的class属性名）
# id属性（一般为div#idname 表示紧跟的id属性名）
class id 须知 class 可被多个标签所继承 id有且唯一只能被一个标签所继承
[] 中括号内为标签的属性信息（一般为div.clasname[width = 300px]）
^ 返回上一级（一般为 div>ui>li^^div ）
{}大括号内为显示内容（一般为div{$} $符号表示数字且递增）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!--阿米塔语法 快速编写HTMl框架 
				* 数字  （表示标签的数字）
				> 标签名 （表示下一级的标签）
				. class属性 （一般为div.classname 表示紧跟标签的class属性名 ）
				# id属性 （一般为div#idname 表示紧跟的id属性名  ）
				class id 须知 class 可被多个标签所继承 id有且唯一 只能被一个标签所继承
				[] 中括号内为标签的属性信息 （一般为div.clasname[width = 300px]）
				^ 返回上一级 （一般为 div>ui>li^^div ）
				{} 大括号内为显示内容 （一般为div{$} $符号表示数字且递增）
				
		 -->
		 <!-- div*3 -->
		<div></div>
		<div></div>
		<div></div>
		 
		 <!-- div>a*3 -->
		 <div>
		 	<a href=""></a>
		 	<a href=""></a>
		 	<a href=""></a>
		 </div>
		 
		 <!-- div.classname01>a*3 -->
		 <div class="classname01">
		 	<a href=""></a>
		 	<a href=""></a>
		 	<a href=""></a>
		 </div>
		
		<!-- div{$}*3 -->
		<div>1</div>
		<div>2</div>
		<div>3</div>
		
		<!-- div#idname*3>a.classname[<a href="#"></a>]{$} -->
		<div id="idname"><a href="" class="classname">1</a></div>
		<div id="idname"><a href="" class="classname">2</a></div>
		<div id="idname"><a href="" class="classname">3</a></div>
		
		<!-- div#idname*3>a.classname[<a href="#"></a>]{这是一个测试标签} -->
		<div id="idname"><a href="" class="classname">这是一个测试标签</a></div>
		<div id="idname"><a href="" class="classname">这是一个测试标签</a></div>
		<div id="idname"><a href="" class="classname">这是一个测试标签</a></div>
		
		<!-- div>ul>li^^div  返回两级 -->
		<div>
			<ul>
				<li></li>
			</ul>
		</div>
		<div></div>
	</body>
</html>