*{
margin: 0px; /*页边距为 0*/
padding: 0px;
}
body{
/*设置主显示背景颜色*/
background-color: #F0FFFF;
}
.wrapper{
width: 100%;
height:672px;
/*background-color: antiquewhite;*/
margin: 0px auto;/*上 下 左右 */
}
.heading /*页眉*/
{
width: 100%; /*宽度*/
height: 90px; /*高度*/
background-color:#666699; /*背景颜色*/
/*padding-top:50px;*/ /*内边距*/
}
.heading_title{
font-size: 30px;
font-family: "arial, helvetica, sans-serif";
color:white; /*文字颜色*/
text-align:center; /*文字位置水平巨宗*/
line-height: 90px; /*垂直居中 行距应设为和height一样*/
}
.nav /*左边导航器*/
{
background-color:#FFFFFF;
height:460px;
width:200px;
float:left; /*浮动在左边*/
/*padding-right: 25px;*/
}
/*列表*/
.nav ul{
list-style-type: none; /*去掉项前的小黑点*/
}
/*小列表*/
.nav li{
width: 194px; /*每一个列表的宽度*/
height: 50px;
/*border: 3px solid red; */ /*列的外边框*/
margin-bottom: 5px; /*块与块之间的上下间距*/
text-align:center; /*设置文字水平集中*/
line-height: 50px; /*设置文字垂直集中*/
}
/*单独设置每个列表的颜色*/
.nav li:nth-child(1){
background-color:powderblue;
}
.nav li:nth-child(2){
background-color: #39CAD1;
}
.nav li:nth-child(3){
background-color: #39ADD1;
}
.nav a:link, a:visited{
width: 194px; /*每一个变色列表的宽度*/
height: 50px;
/*border: 1px solid aquamarine;*/ /*链接外边框*/
display: inline-block; /*还不知道是什么功能*/
font-weight: bold; /*粗体文字*/
/*background-color: #D9D9D9;*/
color: #fff;/*链接初始颜色 */
/*padding: 50px;*/
text-decoration: none; /*去掉链接下划线*/
}
/*鼠标悬浮在链接上面会变色*/
.nav a:hover,a:active{
width: 194px; /*每一个变色列表的宽度*/
height: 50px;
color: blue; /*悬浮选中的链接颜色*/
background-color: #F17022; /*悬浮选中的背景颜色*/
}
.nav_img img{
width: 194px; /*宽度 */
height: 194px; /*高度*/
}
.nav-text p{
width: 180px;/*形状长度*/
height: 30px;
line-height: 30px; /*设置文字垂直集中*/
margin-top: 30px;/*兄弟间 ：外部顶部距离*/
border: 10px groove wheat;/*外边框 类型 颜色*/
font-size: 30px;/*字体大小*/
font-family: "arial, helvetica, sans-serif";/*字体*/
border-radius: 5px; /*标签显示圆角*/
-webkit-animation: nav-cart 5s alternate-reverse 2s infinite ;/*让其无限闪烁发光*/
background-color: ghostwhite;/*背景颜色*/
/*text-decoration: blink;*/
}
.nav-text p:hover{
background-color: yellowgreen;
}
@-webkit-keyframes nav-cart{
from{
box-shadow: 0px 1px 1px coral; /*阴影颜色渐变*/
transform: rotateX(0); /*初始状态 ；rotatex为绕x轴翻转 */
}
to{
box-shadow: 0px 10px 10px #0000FF;
transform: rotateX(360deg);
}
}
.body{
padding-top: 20px;
height: auto;
width: auto;
}
.body-butt{
margin-left: 200px;
padding-top: 20px;/*内部顶部距离*/
width: 500px;
height: auto;
border: 3px dotted wheat; /*边框线*/
}
.body-butt-led li{
display: inline; /*横向*/
padding-left: 19px;
/*border: 3px dotted wheat;*//*边框线 用于调试布局方便观察*/
}
.body-butt-no li{
display: inline; /*横向*/
padding-left: 20px;/*两行之间距离*/
/*padding-bottom: 20px;*/
}
.body-butt-off li{ /*两个列表都为横向 且横向间距为20px*/
display: inline; /*横向*/
padding-left: 20px;
/*border: 3px dotted wheat; *//*边框线 调试布局用*/
}/*把两行按钮撑开*/
.body-butt-no{
margin-bottom: 20px;/*no与off是"兄弟"*/
}
.body-but-pwm{
margin-top: 20px;
padding-left: 20px;
}
.body-but-pwm ul{
list-style-type: none;/*去掉前面的黑点*/
}
.body-but-pwm li{
padding-bottom: 20px;
}
.footer /*底部信息*/
{
width: 100%;
height: 100px;
background-color:#666699;
/*color:white;*//*里面的信息全白*/
clear:both;
}
.footer p{
text-align: center;/*文字位置*/
padding:2px;/*内部间距*/
}
.footer-addre{
text-align: center;/*让文字居中显示*/
}
#time_xianshi
{
float:right;
/*width:200px;
height:60px;*/
/*background-color:#00FF66;*/
}
.b /*时间显示样式*/
{
font-size:30px;
/*color:#FF0000;*/
color: white;
text-align:center;
padding:20px;
font-weight:bolder;
display:block;
margin-top:10px;
}
ESP8266
function shijian()
{
date=new Date();
var xiaoshi=date.getHours();
var fen=date.getMinutes();
var miao=date.getSeconds();
if(fen<=9)
fen="0"+fen;
if(miao<=9)
miao="0"+miao;
xianshi=""+xiaoshi+":"+fen+":"+miao+"";
time_xianshi.innerHTML=xianshi;
setTimeout("shijian()",1000);
}
shijian();
362
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
