CSS笔记
代码解释可能有错误，请勿全部尽信
仅仅对于案例里面个别代码进行了解释。
布局代码
.col-xs-6 {
display: inline-block;/*将元素显示为内联块级元素，可与其他元素放在同一行，但可设置宽度、高度等样式。*/
width: 30%;/*设置元素宽度为其父元素宽度的30%。*/
margin: 1%;/*元素的外边距为1%。*/
padding: 1%;/* 元素的内边距为1%*/
border: 1px solid #ccc;/*边框线宽为1px，风格为实线，颜色为#ccc（灰色）。*/
box-sizing: border-box;/*使元素计算宽度时包括其内边距和边框，而不是仅计算内容的宽度*/
text-align: center;/*水平居中显示元素内容*/
}
.page-header ul
.page-header ul {
position: absolute;
right: 2vw;
top: 50%;
transform: translateY(-50%);
}
这段代码用来设置 .page-header 中 <ul> 元素的定位及位置。解释如下：
.page-header ul表示选中.page-header内部的<ul>元素。position: absolute表示该元素会使用绝对定位，以便在视口中保持与父元素的位置无关。right: 2vw表示该元素与父元素右侧外边缘的距离是父元素宽度的 2%（vw 是 viewport width，表示相对于视口宽度的比例）。top: 50%表示该元素与父元素顶部外边缘的距离是父元素高度的 50%。transform: translateY(-50%)表示将该元素在垂直方向上移动到其自身高度的一半位置（因为top:50%是基于该元素的上边缘的位置而不是其中间位置），通过transform属性中的translateY()方法完成。此时，该元素在父元素中上下居中。
.page-header:before
.page-header:before {
content: '';
position: absolute;
top: -50%;
left: -10vw;
width: 20vw;
height: 10vh;
background: url('img/title.png') no-repeat left center;
background-size: 100%;
z-index: -1;
transition: all .3s;
}
.page-header:before表示创建一个在.page-header元素之前的伪元素。伪元素是一个虚拟的元素，不在DOM结构中，但能够被CSS选择器选中。content: ''表示在伪元素中没有文字/内容。position: absolute表示绝对定位，根据其包含块来定位，如果没有包含块则相对于body或根元素。top: -50%表示伪元素与父元素顶部的距离是父元素高度的 50%，即向上移动了该元素高度的 50%。left: -10vw表示伪元素与父元素左侧的距离是父元素宽度的 -10%，即向右移动了该元素宽度的 10%。width: 20vw表示伪元素的宽度是父元素宽度的 20%。height: 10vh表示伪元素的高度是父元素高度的 10%。background: url('img/title.png') no-repeat left center表示使用图片img/title.png作为背景图，不重复显示，水平居左，垂直居中显示。background-size: 100%表示图片铺满整个背景。z-index: -1表示伪元素在 z 轴上位于所有其他内容的下方。transition: all .3s表示使用 0.3 秒的时间动画过渡所有属性的变化。
.page-header:hover
:hover会在用户将指针挪到元素上的时候才会激活，一般就是链接元素。这段代码是用来设置 .page-header 元素在鼠标悬浮时的过渡效果。
.page-header:hover {
padding-left: .75vw;
transition: all.3s;
}
这段代码是用来设置 .page-header 元素在鼠标悬浮时的过渡效果。解释如下：
.page-header:hover表示当鼠标悬浮在.page-header元素上时，对其本身进行操作。padding-left: .75vw表示鼠标悬浮时，给.page-header元素的左边添加了一个额外的间距，间距大小为 0.75vw。这个额外的间距会导致元素整体右移，也会影响子元素的位置。transition: all .3s表示属性变化的过渡时间是 0.3 秒。这里的all表示对所有属性都进行过渡。如果只想对特定属性进行过渡，在这里指定即可。
.page-header:hover:before
.page-header:hover:before {
left: -8vw;
transition: all.3s;
}
这段代码是用来设置 .page-header 元素在鼠标悬浮时，伪元素的位置和过渡效果。解释如下：
.page-header:hover:before表示当鼠标悬浮在.page-header元素上时，对其前面的伪元素生效。left: -8vw左侧边缘距离其父元素的左侧边缘的距离为当前视口宽度的 8%transition: all .3s表示属性变化的过渡时间是 0.3 秒。这里的all表示对所有属性都进行过渡。如果只想对特定属性进行过渡，在这里指定即可。
.panel .online
.panel .online{
display: inline-block;
float: right;
width: 1vw;
height: 1vw;
background: url('img/online.png') no-repeat center center;
background-size: 100%;
filter: sepia(100%);
}
这段代码为一个CSS class定义了一个在线状态的样式，其中.panel .online指的是一个class类名为"online"的元素在一个class类名为"panel"的父元素下面。该样式通过设置以下的CSS属性来实现一个小图标表示在线状态：
display: inline-block;将该元素设置为行内块元素，使得它可以和其他元素在同一行内显示。float: right;让该元素向右浮动，与其相邻的元素合并，并将其余空间分配给左侧的元素。width: 1vw;宽度设置为屏幕宽度的1%，让这个元素只占用了非常小的空间。height: 1vw;高度设置为屏幕宽度的1%。background: url('img/online.png') no-repeat center center;设置元素的背景图像为"online.png"，背景图像的位置在中心。background-size: 100%;确保背景图像能够填充整个元素。filter: sepia(100%);给元素应用了"sepia"色调，使得它看起来略带褐色调。
这段代码最终可以实现在同一行内显示一个小图标，用来表示在线状态。
.online-on
.online-on {
filter: none !important;
}
这段代码是为一个CSS class类名为"online-on"定义了一个样式。在这个样式中使用了 !important 标记，用于在页面中覆盖所有其他CSS样式。
该样式中只设置了一个CSS属性，即 filter:none。这个属性用来为元素去除之前已设置的滤镜效果。这样就可以将之前被应用的 "sepia" 色调的效果去除掉，变回元素默认的颜色。
主代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>模块二</title>
<link rel="stylesheet" href="css_demo.css">
<link rel="stylesheet" href="环境.css">
</head>
<body>
<div class="page-header">
<h3>智能家居</h3>
<ul class="nav nav-pills" role="tablist">
<li role="presentation" class="active">
<a href="#security" aria-controls="security" role="tab" data-toggle="tab">安全防护
</a>
</li>
</ul>
</div>
<div class="tab-content">
<div class="main container-fluid tab-pane active security" id="security" role="tabpanel">
<div class="row">
<div class="col-xs-6 col-md-4">
<div class="panel panel-primary">
<div class="panel-heading query-btn">燃气<span class="online"></span>
</div>
<div class="panel-body text-center">
<img class="img" src="img/gas.png" alt="" />
<br />
<p>正常</p>
</div>
</div>
</div>
<div class="col-xs-6 col-md-4">
<div class="panel panel-primary">
<div class="panel-heading query-btn">火焰<span class="online"></span>
</div>
<div class="panel-body text-center">
<img class="img" src="img/fire.png" alt="" />
<br />
<p>正常</p>
</div>
</div>
</div>
<div class="col-xs-6 col-md-4">
<div class="panel panel-primary">
<div class="panel-heading query-btn">人体红外<span class="online"></span></div>
<div class="panel-body text-center">
<img class="img" src="img/body.png" alt="" />
<br />
<p>正常</p>
</div>
</div>
</div>
<div class="col-xs-6 col-md-4">
<div class="panel panel-primary">
<div class="panel-heading query-btn">紧急按钮<span class="online"></span></div>
<div class="panel-body text-center">
<img class="img" src="img/emergency.png" alt="" />
<br />
<p>正常</p>
</div>
</div>
</div>
<div class="col-xs-6 col-md-4">
<div class="panel panel-primary">
<div class="panel-heading query-btn ``` ">门禁<span class="online"></span></div>
<div class="panel-body text-center">
<img class="img" id="doorImg" src="img/door-off.png" alt="" />
<br />
<br />
<button class="btn btn-default" id="doorSwitch">开启</button>
</div>
</div>
</div>
<div class="col-xs-6 col-md-4">
<div class="panel panel-primary">
<div class="panel-heading query-btn ``` ">PM2.5<span class="online"></span></div>
<div class="panel-body text-center">
<img class="img" id="doorImg" src="img\PM2.5-2.png" alt="" />
<br />
<br />
<p>浓度</p>
</div>
</div>
</div>
<div class="col-xs-6 col-md-4">
<div class="panel panel-primary">
<div class="panel-heading query-btn">CO2<span class="online"></span></div>
<div class="panel-body text-center">
<img class="img" src="img\CO2.png" alt="" />
<br />
<p>二氧化碳浓度</p>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS代码
body {
background-color: #ecf0f1;
padding: 0 2vw;
user-select: none;
}
a {
color: #aaa;
}
/*布局*/
.col-xs-6 {
display: inline-block;
width: 30%;
margin: 1%;
padding: 1%;
border: 1px solid #ccc;
box-sizing: border-box;
text-align: center;
}
.page-header {
position: relative;
transition: all .3s;
z-index: 1;
color: #EEE;
}
.page-header:before {
content: '';
position: absolute;
top: -50%;
left: -10vw;
width: 20vw;
height: 10vh;
background: url('img/title.png') no-repeat left center;
background-size: 100%;
z-index: -1;
transition: all .3s;
}
.page-header:hover {
padding-left: .75vw;
transition: all.3s;
}
.page-header:hover:before {
left: -8vw;
transition: all.3s;
}
.page-header ul {
position: absolute;
right: 2vw;
top: 50%;
transform: translateY(-50%);
}
.tab-content {
}
.panel {
height: 35vh;
overflow-y: hidden;
}
.panel .query-btn {
cursor: pointer;
}
/*在用户激活（例如点击）元素的时候匹配。*/
.panel .query-btn:active {
background-color: #004d60;
border-color: #004d60;
color: #fff;
}
.panel img {
width: 8vw;
margin-bottom: 3vh;
}
.panel .chartDiv {
height: 25vh;
}
.panel .camera-img {
width: 100%;
}
.panel .online{
display: block;
float: right;
width: 1vw;
height: 1vw;
background: url('img/online.png') no-repeat center center;
background-size: 100%;
filter: sepia(100%);
}
.online-on {
filter: none !important;
}
.security .panel img {
width: 5vw;
margin: 1.5vw auto 2.5vw auto;
}
