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

语法

阿米塔语法 快速编写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>

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,下面是一个简单的前端页面编写代码的示例,供您参考: ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>前端页面示例</title> <style> h1 { color: #333; font-size: 30px; text-align: center; } .container { margin: 50px auto; width: 80%; display: flex; flex-wrap: wrap; justify-content: center; } .card { margin: 20px; padding: 20px; width: 300px; background-color: #f2f2f2; border-radius: 10px; box-shadow: 0 0 10px #ccc; } .card h2 { font-size: 24px; color: #666; margin-bottom: 10px; } .card p { font-size: 16px; color: #999; line-height: 1.5em; } .btn { display: inline-block; margin-top: 10px; padding: 10px 20px; background-color: #333; color: #fff; border-radius: 5px; text-decoration: none; font-size: 16px; cursor: pointer; transition: all 0.3s ease; } .btn:hover { background-color: #666; } </style> </head> <body> <h1>前端页面示例</h1> <div class="container"> <div class="card"> <h2>博客一</h2> <p>这是一篇博客的摘要内容,这是一篇博客的摘要内容,这是一篇博客的摘要内容。</p> <a href="#" class="btn">阅读全文</a> </div> <div class="card"> <h2>博客二</h2> <p>这是一篇博客的摘要内容,这是一篇博客的摘要内容,这是一篇博客的摘要内容。</p> <a href="#" class="btn">阅读全文</a> </div> <div class="card"> <h2>博客三</h2> <p>这是一篇博客的摘要内容,这是一篇博客的摘要内容,这是一篇博客的摘要内容。</p> <a href="#" class="btn">阅读全文</a> </div> </div> </body> </html> ``` 这是一个简单的文章列表页面,包括一个标题、一个容器和三个卡片,每个卡片包括一个标题、一个摘要和一个阅读全文按钮。页面使用了一些基本的 HTML 标签和 CSS 样式,通过布局和样式来实现页面的效果。当然,在实际开发中,还需要根据具体的需求进行更加复杂的页面编写

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值