本文详细介绍了Emmet语法在快速生成HTML结构和CSS结构中的应用，包括快速创建列表、多个标签以及动态内容。同时，讲解了CSS复合选择器，如后代、子、并集、伪类选择器，特别是链接伪类选择器的使用。还探讨了CSS元素的显示模式，如块元素、行内元素和行内块元素，并通过实例展示了如何实现小米侧边栏。最后，讨论了背景属性，包括颜色、图片、平铺、位置及固定背景等。
目录
1、Emmet语法
1.1、快速生成HTML结构语法
<body>
<!-- ul>li*3 -->
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<!-- 同时生成div和p标签： div+p -->
<div></div>
<p></p>
<!-- 生成多个标签，按顺序 -->
<!-- .demo$*5 -->
<div class="demo1"></div>
<div class="demo2"></div>
<div class="demo3"></div>
<div class="demo4"></div>
<div class="demo5"></div>
<!-- 生成的标签里面默认显示几个文字 -->
<div>好好学习</div>
<!-- div{天天向上}*5 -->
<div>天天向上</div>
<div>天天向上</div>
<div>天天向上</div>
<div>天天向上</div>
<div>天天向上</div>
<!-- div{$}*5 -->
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</body>1.2、快速生成CSS结构语法
<style>
.one{
/* tac */
text-align: center;
/* ti2em */
text-indent: 2em;
/* w100 */
width: 100px;
height: 100px;
}
</style>
1.3、快速格式化代码
2、CSS的复合选择器
2.1、复合选择器概念
2.2、后代选择器
2.3、子选择器
<style>
/* 把nav下的a标签都变为蓝色 */
.nav a{
color: blue;
}
/* 把nav最近的一级子元素变为红色 */
.nav>a{
color: red;
}
</style>
</head>
<body>
<div class="nav">
<a href="#">儿子</a>
<p>
<a href="#">孙子</a>
</p>
</div>
</body>2.4、并集选择器
<style>
/* 要求把熊大和熊二改为粉色 */
/* div,p{
color: pink;
} */
/* 要求二：把熊大和熊二改为粉色以及小猪佩奇一家也为粉色 */
div,p,.pig li{
color: pink ;
}
/* 约定的语法规范，并集选择器喜欢竖着写
之一：最后一个选择器，不需要加逗号 */
</style>
</head>
<body>
<div>熊大</div>
<p>熊二</p>
<span>光头强</span>
<ul class="pig">
<li>佩奇</li>
<li>猪爸爸</li>
<li>乔治</li>
</ul>
</body>
2.5、伪类选择器
2.6、链接伪类选择器
<style>
/* 未访问的链接a:link，把没有访问过的链接变为黑色（选出来） */
a:link{
color: black;
text-decoration: none;/* 取消下划线装饰 */
}
/* a:visited 选择点击过（访问过）的链接 */
a:visited{
color: blueviolet;
}
/* a:hover选择鼠标经过的那个链接 */
a:hover{
color: blue;
}
/* a:active，选择的是鼠标正在按下还有弹起的那个链接 */
a:active{
color: green;
}
</style>
</head>
<body>
<a href="#">大猪肘子</a><br>
<a href="baidu">腌菜</a>
</body>2.6.1、链接伪类选择器注意事项
2.6.2、链接伪类选择器实际开发中的写法
2.7、focus伪类选择器
<style>
/* 把获得光标的input表单选择出来（标识出来） */
input:focus{
background-color: antiquewhite;
/* 获得光标的元素输入的文字为红色 */
color: red;
}
</style>
</head>
<body>
<input type="text">
<input type="text">
</body>2.8、复合选择器总结
3、CSS的元素显示模式
3.1、CSS的元素显示模式概念
3.1.1、块元素
3.1.2、行内元素
3.1.3、行内块元素
3.1.4、元素显示模式总结
3.2、元素显示模式转换
3.3、简洁版小米侧边栏案例
a{
width: 200px;
height: 50px;
line-height: 50px;
color: white;
background-color: rgb(103, 110, 116);
font-size: 15px;
text-decoration: none;
text-indent: 2em;
display: block;
}
a:hover{
background-color: rgba(226, 117, 28, 0.877);
}
</style>
</head>
<body>
<a href="#">手机 电话卡</a>
<a href="#">电视 盒子</a>
<a href="#">笔记本 平板</a>
<a href="#">出行 穿戴</a>
<a href="#">智能 路由器</a>
<a href="#">健康 儿童</a>
<a href="#">耳机 音响</a>
</body>
3.4、单行文字垂直居中
4、CSS的背景
4.1、背景颜色
4.2、背景图片
4.3、背景平铺
<style>
div{
width: 1000px;
height: 1000px;
background-color: antiquewhite;
background-image: url(images/pic.jpeg);
/* 背景图片不平铺 */
/* background-repeat: no-repeat; */
/* 默认的情况下，背景图片是平铺的 */
/* background-repeat: repeat; */
/* 沿着x轴平铺 */
/* background-repeat: repeat-x; */
/* 沿着y轴平铺 */
background-repeat: repeat-y;
/* 页面元素既可以添加背景颜色也可以添加背景图片 只不过背景图片会压住背景颜色*/
}
</style>
</head>
<body>
<div></div>
</body>4.4、背景图片位置
<style>
div{
width: 1000px;
height: 1000px;
background-color: antiquewhite;
background-image: url(images/pic.jpeg);
/* 背景图片不平铺 */
background-repeat: no-repeat;
/* background-position方位名词 */
/* background-position: center center; */
background-position: right center;
/* background-position: right cente 和center right效果都是等效的，跟顺序没关系*/
/* 此时 水平一定是靠右侧对齐 第二个参赛省略y轴 是垂直居中显示的 */
/*background-position: right; */
/* 此时 水平一定是top y轴顶部对齐 第二个参赛省略x轴 是水平居中显示的 */
background-position: top;
}
</style>
</head>
<body>
<div></div>
</body>
4.5、背景图像固定（背景附着）
4.6、背景复合写法
4.7、背景色半透明
4.8、背景总结
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
