前言: 常常新手学习前端中会学习大量的语法,学习各个标签页面的作用,其实前端并不是一项繁琐而又枯燥的学科。当你前端学的越深入,你越能发现,写前端页面的人就像是一个导演,编写着剧本。 HTML是演员,而CSS则是化妆师,为演员赋予视觉效果。
让我们以一段简单的HTML页面步入今天的讲解。我们先来看下文的页面效果。
上文是一个简单的键盘敲击乐,也就是当点击键盘后会出现声音,让我们以导演的视角来导演这场戏。
页面的基础设计
导演一场戏一定得先将演员给请出
这场戏的演员很简单首先可以观察到页面上有8个按键,每个按键中分别有着一个大写字母和三个小写字母,于是我们清晰明了,本场戏的演员就是他们。再来观察一下他们的关系:大写字母和小写字母都在按键中,因此我们能够用Emmet表达式快速生成框架:.keys>(.key>div+span.sound)*8。这是emmet表达式,在下文有介绍。
演员已经就绪,则该给他们化妆了
要使用css进行页面的样式设计,而css的引入方式有三种,常常使用第三种方法进行设计,能很好的进行页面的职责分离
行内样式:写在标签的styel属性中
<body>
<p style="color: brown">
hello world
</p>
</body>
内部样式表,通过 style 标签来写 CSS(可以写在文件的任何位置,通常写在head标签中)
<head>
<style>
p {
color: red;
}
</style>
</head>
外联样式:写在一个单独的.css文件中(需要通过link标签在网页中引入)
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="blog.css">
</head>
<body>
<p>
hello world
</p>
</body>
上文在编写html页面的时候我们使用了emmet
Emmet的详细使用:加速HTML与CSS编写的利器
1. 什么是Emmet
Emmet是一个极为强大的工具,能够极大地提高开发者在编写HTML和CSS时的效率。它通过缩写语法(类似快捷方式)来生成大量的HTML结构或CSS规则,使得开发者能够用最简洁的方式实现最复杂的布局和设计。
2. Emmet基本语法
Emmet语法非常简洁,通过简单的缩写来生成代码结构。常见的缩写规则包括:
-
元素标签:
div
→<div></div>
ul>li*3
→<ul><li></li><li></li><li></li></ul>
div#id
→<div id="id"></div>
div.class
→<div class="class"></div>
-
嵌套结构:
div>ul>li*3
→<div><ul><li></li><li></li><li></li></ul></div>
header>nav>ul>li*2>a
→<header><nav><ul><li><a></a></li><li><a></a></li></ul></nav></header>
-
乘法符号
*
:表示生成多个元素。li*5
→<li></li><li></li><li></li><li></li><li></li>
div#id>ul>li*4
→<div id="id"><ul><li></li><li></li><li></li><li></li></ul></div>
-
ID和类名:
section#main
→<section id="main"></section>
section.main
→<section class="main"></section>
div#header.main
→<div id="header" class="main"></div>
-
组合多个标签:
header>nav>ul>li*3>a[href="#"]
→<header><nav><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul></nav></header>
-
属性设置:
input[type="text"]
→<input type="text">
a[href="#"].btn
→<a href="#" class="btn"></a>
学会上面的技能已经能够极大的提升开发效率,但想当一个合格的切图崽还是不够,跟着我继续学习吧!下一篇: