![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
天蓬老师Correction status：qualified
Teacher's comments：看来你的收获满满
Collection
Collection
css层叠样式表
元素与元素框
http://182.92.4.86:90/0405/demo1.html
置换元素：元素框中的内容由外部引入，如img，input
非置换元素：元素框中的内容由用户输入，如p，div
元素类型
块级元素：默认占元素框中的一行，如p,div
行内元素:一行内可以有多个元素，如input,a
行内块元素：一行内可以有多个元素，且支持设置宽高，如img
<!-- 非置换元素:双标签 --> <p style="background-color: lightgreen;">hello world</p> <!-- 置换元素:单标签，双标签 --> <img src="1.jpg" alt="" width="100" height="80"> <input type="text" name="" id="" style="width: 50px;"> <!-- <video src="girl.mp4">浏览器不支持该元素</video> <script src="demo.js"></script> <link rel="stylesheet" href=""> --> <a href="" style="width: 50px;">php.cn</a> <strong style="width: 100px;">PHP中文网</strong> <!-- 行内元素，如果是非置换元素，不能设置大小 如果是置换元素（外部导入的资源），可以设置宽高，对于这类元素，称之为行内块元素 -->
4.css应用到html
link标签引入，@import引入，style元素以及style属性来设置
http://182.92.4.86:90/0405/demo2.html
http://182.92.4.86:90/0405/demo3.html
http://182.92.4.86:90/0405/demo4.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style/style2.css"> <title>Document</title> </head> <body> <h2>php中文网第11期上课啦</h2> <ul> <li>前端基础：html5/css.flex/grid</li> <li>PHP开发：php+pdo+mvc+composer</li> <li>前端进阶：JavaScript + jQuery +layUI</li> <li>laravel：实战</li> </ul> </body></html>
5.媒体查询
设置浏览器使用指定的样式表
http://182.92.4.86:90/0405/demo5.html
http://182.92.4.86:90/0405/demo6.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>媒体查询</title>
<style>
h1 {
color: green;
}
body {
background-color: cyan;
}
/* 大于等于500px以下样式有效 */
@media screen and (min-width:500px){
h1 {
color: red;
}
body {
background-color: wheat;
}
}
</style>
</head>
<body>
<h1>hello，欢迎来学习我的课程</h1>
</body>
</html><style>
.nav {
height: 50px;
background-color: #eee;
display: flex;
align-items: center;
}
.nav ul {
display: flex;
list-style: none;
}
.nav ul a {
color: #666;
text-decoration: none;
padding: 0 15px;
}
/* 局部媒体查询，当屏幕宽度小于400px，不要显示菜单了 */
@media screen and (max-width: 400px) {
.nav ul {
display: none;
}
}
</style>
<body>
<div class="nav">
<div class="log">LOGO</div>
<ul>
<li>
<a href="">首页</a>
<a href="">视频</a>
<a href="">问答</a>
<a href="">下载</a>
</li>
</ul>
</div>
</body>总结：今天是学习css的第一天，第一次听说置换元素以及非置换元素的概念，以前只知道有行内元素、块内元素今天知道还有这种行内块元素（占一行也可以设置宽高）。对于如何将css引入到html中有四种方式，分别是外部文件、@import复制过来、style元素以及style属性来设置。最后一部分是媒体查询，这个名字第一次听说，但是这种应用比较多，如手机和web网站显示不一样就是这种，但是以前不清楚这个是通过css来控制的，通过学习知道了是通过css控制屏幕大小来控制。
