日度归档:2020年5月5日

如何使用css3实现一个“时间线”的效果呢?


摘要:
下文讲述使用css实现一个时间线的效果分享,如下所示:

时间轴常用于表示一个事件的发展进展或者大事记之类的表现,那么下文讲述使用css在网页上实现“时间线”的效果分享,如下所示:
例:

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8"> 
  <meta name="Author" content="http://www.maomao365.com"> 
  <title>猫猫教程(www.maomao365.com)
  ---css绘制时间线的方法分享
  </title>
  <style>
  
  html,body{
   margin-left:10px;
  }

  .div_title{
    margin-left:10px;
	margin-bottom:30px;
    font-size:13px;
	font-weight:bold;
  }
   
  .timeMain
  {
    position: relative;
    border-left:1px solid lightgrey;
	height:100px;
	width:580px;
  }

 .timeMainLabel
 {
   padding-left:10px; 
   font-size:10px;
 }

  .timeMainLabel i {
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: red;
  position: absolute;
  left: -5px;
  top: 5px;
}


.timeMainText {
  margin-left: 110px;
  position: relative;
  top: -10px;
  font-size:10px;
}
.timeMainText > div {
  padding-bottom: 10px;
    font-size:10px;
}

  </style>
 
 </head>
 <body>
   
   <div class="div_title">
	 猫猫教程---css绘制时间线举例分享
   </div>

   <div class="timeMain">
         <!--时间轴内容1-->
         <!--时间轴上的点-->
          <span class="timeMainLabel"><i></i>03月06日</span>
  
         <!--时间轴上的文字-->
          <div class="timeMainText">
          <div>
            <div>猫猫教程<span>08:00-08:30</span></div>
            <p>完成第一小段内容分享</p>
          </div>
        </div>


   </div>

 <div class="timeMain">

    <!--时间轴内容2-->
     <!--时间轴上的点-->
          <span class="timeMainLabel"><i></i>03月10日</span>
  
         <!--时间轴上的文字-->
          <div class="timeMainText">
          <div>
            <div>猫猫教程<span>09:00-09:30</span></div>
            <p>完成第一小段内容分享</p>
          </div>
        </div>



   </div>


    <div class="timeMain">
      <!--时间轴内容3-->
        <!--时间轴上的点-->
          <span class="timeMainLabel"><i></i>03月16日</span>
  
         <!--时间轴上的文字-->
          <div class="timeMainText">
          <div>
            <div>猫猫教程<span>18:00-19:30</span></div>
            <p>完成第一小段内容分享</p>
          </div>
        </div>


   </div>
 
 </body>
</html> 
css时间线绘制示例分享

css时间线绘制示例分享

前端开发中 html、css、js之间有什么联系呢?


摘要:
下文讲述html css js之间的联系,如下所示:


html css js简介

html:
(Hyper Text Markup Language–超文本标记语言),是一种网页内容描述语言
css:
(Cascading Style Sheets—层叠样式表),是一种控制html元素显示样式的语言
js:
(javascript –脚本语言)–用于实现一个动作和动态改变css html的信息

html css js三者之间的关系

在一个html网页中,
html用于定义结构
css 用于定义网页样子
js 用于实现Html动起来的效果

html,css,js三者的关系好比:
html 是一个建筑的框架
css 是一个建筑的装修
Js 类似一个大厦的电梯,电灯开关