数据分析疫情图——day2

柔情只为你懂 2023-01-05 12:11 146阅读 0赞

### 数据分析疫情图 ###

*   *  一. css修改样式
     *   *  创建css文件
         *  编写代码
     *  二. js设置时间

前言

> 好好学习，javaweb制作全国疫情展示,以下是今天学习的知识

第一天：[数据分析疫情图——day1][day1]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjY1NDExNA_size_16_color_FFFFFF_t_70]

## 一. css修改样式 ##

效果图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjY1NDExNA_size_16_color_FFFFFF_t_70 1]

### 创建css文件 ###

![在这里插入图片描述][20210112101121669.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjY1NDExNA_size_16_color_FFFFFF_t_70 2]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjY1NDExNA_size_16_color_FFFFFF_t_70 3]

### 编写代码 ###

/*标签名选择器 */
    body{ 
    	margin:0;/* 外边距：控制盒子和盒子之间的距离 */
    	/*background-color：设置背景颜色*/
    	background-color:#333333;
    }
    
    /*2、ID选择器： 通过标签上的id属性，可以为标签设置唯一的标识符。 可以通过ID的值来选定指定的元素。格式：#id值{css属性.} */
    
    #title{ 
    /*absolute：绝对定位的元素的位置相对于最近的已定位的父元素，如果元素没有已定位的父元素，那么他的位置就是相对于<html>标签。 */
    	position:absolute;
    	width:40%;
    	height:10%;
    	top:0;/*控制距离顶部的位置*/
    	left:30%;/*控制距离左边的位置*/
    	/*设置字体的大小*/
    	font-size:35px;
    	color:white;
    /*弹性布局：CSS3中新引入的一个布局模式。 元素如何在页面中进行排列展示，不同的屏幕尺寸和设备可以预测的展示出来。 */
    	display:flex;
    	align-items:center;/*交叉轴的中点对齐*/
    	justify-content:center;/*居中*/
    }
    
    /*3、class选择器 通过标签上通用的属性Class，可以为标签去指定所属的类/组，所有的class值相同的元素则就是一类/组，可以通过Class属性的值去选择这一组的标签，为这一组标签去统一设置样式 基本格式：.类名{css属性} */
    .china_title{ 
    	 border-bottom:3px solid #10AEB5;/*边框底部 */
    	 padding-bottom:4px;/* 内边距 */
    }
    
    .world_title{ 
    	font-size:26px;
    	color:grey;
    	/*text-decoration：设置文本的卜划线，一股常用的取值：none：没有下划线 underline：有下划线 */
    	text-decoration:none;
    	
    }
    
    .world_title:hover{ 
    	color: white;
    	border-bottom:3px solid #10AEB5;/*边框底部 */
    	padding-bottom: 5px;
    }
    /*time：绝对定位：高度：10%距离顶部：5% 右边：2% 颜色：白色 字体大小：20px； */
    #time{ 
    	position: absolute;
    	height:10%;
    	top:5%;
    	color: white;
    	font-size: 20px;
    	right: 2%;
    }
    
    
    /*mid1的位置*/
    #mid1{ 
    	position:absolute;
    	width:40%;
    	height:25%;
    	top:10%;
    	left:30%;
    	color:white;
    }
    .font{ 
    	
    	width:25%;
    	float:left;
    	color:#ffd700;
    	display:flex;
    	align-items:center;/*交叉轴的中点对齐*/
    	justify-content:center;/*居中*/
    }
    .txt{ 
    	
    	width:25%;
    	float:left;
    	display:flex;
    	align-items:center;/*交叉轴的中点对齐*/
    	justify-content:center;/*居中*/
    	font-familly:"幼圆";
    }
    #left1{ 
    	position: absolute;
     	width: 30%; 
     	height: 45%; 
     	top: 10%; 
     	left: 0;
    }
    #left2{ 
    	position: absolute; 
    	width: 30%; 
    	height: 45%; 
    	top: 55%; 
    	left: 0;
    }
    #mid2{ 
    	position:absolute;
    	width:40%;
    	height:50%;
    	top:35%;
    	left:30%;
    }
    #right1{ 
    	position: absolute;
     	width: 30%; 
    	height: 45%; 
     	top: 10%; 
     	right: 0;
    }
    
    #right2{ 
    	position: absolute;
     	width: 30%; 
    	height: 45%; 
     	top: 55%; 
     	right: 0;
    }
    footer{ 
    	position:absolute;
    	width:40%;
    	height:10%;
    	top:90%;/*控制距离顶部的位置*/
    	left:30%;/*控制距离左边的位置*/
    	/*设置字体的大小*/
    	text-align:center;/*text-align：需用的取值left：默认 1 right center justify：两端对齐 */
    	font-size:10px;
    	display:flex;
    	align-items:center;/*交叉轴的中点对齐*/
    	justify-content:center;/*居中*/
    }

**HTML**  
如下样式定义框

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjY1NDExNA_size_16_color_FFFFFF_t_70 4]

## 二. js设置时间 ##

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    </head>
    <body onload="window.setInterval(gettime,1000)">
    	<div id="cntime">
    	</div>
    </body>
    
    
    <script type="text/javascript"> function gettime(){ var date = new Date(); var year = date.getFullYear();//年 var month = date.getMonth()+1;//从0开始的 var day = date.getDate();//日 var week = date.getDay();//周 var hour = date.getHours();//小时 var minute = date.getMinutes();//分钟 var second = date.getSeconds();//秒 /*返回对拥有指定id的第一个对象的引用*/ document.getElementById('cntime').innerHTML = year +'年'+ month +'月'+ day +'日'+ hour +'时'+ minute +'分'+ second +'秒'; } </script>
    </html>

![在这里插入图片描述][2021011217401640.png]

> 本人博客：[https://blog.csdn.net/weixin\_46654114][https_blog.csdn.net_weixin_46654114]  
> 本人b站求关注：[https://space.bilibili.com/391105864][https_space.bilibili.com_391105864]  
> 转载说明：跟我说明，务必注明来源，附带本人博客连接。

请给我点个赞鼓励我吧  
![在这里插入图片描述][20200507113619405.png_pic_center]

[day1]: https://chenyunzhi.blog.csdn.net/article/details/112481162
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjY1NDExNA_size_16_color_FFFFFF_t_70]: /images/20221119/7ef0ec58b9ea4f30ab25745babd15319.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjY1NDExNA_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20210112163809639.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjY1NDExNA==,size_16,color_FFFFFF,t_70
[20210112101121669.png]: https://img-blog.csdnimg.cn/20210112101121669.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjY1NDExNA_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20210112101218382.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjY1NDExNA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjY1NDExNA_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20210112101234855.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjY1NDExNA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjY1NDExNA_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/2021011216004313.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjY1NDExNA==,size_16,color_FFFFFF,t_70
[2021011217401640.png]: https://img-blog.csdnimg.cn/2021011217401640.png
[https_blog.csdn.net_weixin_46654114]: https://blog.csdn.net/weixin_46654114
[https_space.bilibili.com_391105864]: https://space.bilibili.com/391105864
[20200507113619405.png_pic_center]: https://img-blog.csdnimg.cn/20200507113619405.png#pic_center