详细的 css js 设计.

本地文件引入

这里使用本地 css/js/fontawesome 先把文件先放进项目根目录. 你用在线的可以忽略这步.. 这些文件位置随便放 . 你只要引入正确就可以.

现在的目录结构

├── index.html
├── about.md
├── _config.yml       # Jekyll核心配置文件

├── Gemfile           # Github Pages本地化的文件
├── Gemfile.lock      # Github Pages本地化的文件

├── css
│   └── main.css           # 最主要的css                ★★★★★
│   └── bootstrap.css      #  可选 无所谓了.....
├── js
│   └── main.js            # 最主要的js                 ★★★★★
│   └── bootstrap.js       #  可选 无所谓了.....
│   └── jquery.js          #  可选 无所谓了.....

├── _includes               # 该目录下的片段是“被包含”的关系,可以是任何格式的文件,片段也可以include片段。
│   ├── footer.html         # 页脚html片段
│   ├── header.html         # 页头html片段

├── _layouts                # ”包含”关系: .md 头部一般会包含下面中的一个 模板文件
│   ├── default.html        # default页面. http://127.0.0.1:4000/ 的主页. 

├── _posts
│   └── 2016-08-24-welcome-to-jekyll.markdown

└── _site             # 不用管. 就是删除了. 一运行jekyll server  会自动生成.

各文件内容:

index.html

这个估计只是用来选择模板的. 没啥具体内容…

---
layout: default
---
{% for post in site.posts %}
{% endfor %}

header.html

主要就是引入文件 .定义网站标题 等等

<!DOCTYPE html>
<html>
<head>
 
 
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <link rel="icon" type="image/png" href="../favicon-32x32.png" sizes="32x32">    <!-- icon 图标 看着办 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
  
  <title>{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}</title>
<!-- 这个是标题.由于每篇博客的标题都不一样的 所以这里用的是变量.  -->
<!-- 标题分两种 一种网站主页的标题. 在配置文件里可以自定义. 一种是博客文章的标题.就是每篇博客的文件名 -->

<script src="/js/tether.min.js"></script>  
<script src="/js/jquery224.min.js"></script> 
<link rel="stylesheet" href="/fontawesome/css/font-awesome.css" >
<link rel="stylesheet" href="/css/main.css" >



</head>
<body>  

footer.html

<script src="/js/main.js"></script> 
</body></html>

default.html

这里就是 网页的 body部分了….

{% include header.html %} 
<div id="bigDiv">                       <!-- 最外层 最大的div. 为了 设置100% 高度而建立 -->
<div id="topbarDiv"> 
<span class="fa-stack fa-lg"> <i class="fa fa-square-o fa-fw fa-stack-2x"></i> <i class="fa fa-search fa-fw fa-stack-1x"></i> </span>
<span class="fa-stack fa-lg"> <i class="fa fa-square-o fa-fw fa-stack-2x"></i> <i class="fa fa-pencil fa-fw fa-stack-1x"></i> </span>       
<span class="fa-stack fa-lg"> <i class="fa fa-square-o fa-fw fa-stack-2x"></i> <i class="fa fa-external-link fa-fw fa-stack-1x"></i> </span 
<span class="fa-stack fa-lg"> <i class="fa fa-square-o fa-fw fa-stack-2x"></i> <i class="fa fa-paperclip fa-fw fa-stack-1x"></i> </span>            
<span class="fa-stack fa-lg"> <i class="fa fa-square-o fa-fw fa-stack-2x"></i> <i class="fa fa-weixin fa-fw fa-stack-1x"></i> </span>       
<span class="fa-stack fa-lg"> <i class="fa fa-square-o fa-fw fa-stack-2x"></i> <i class="fa fa-github fa-fw fa-stack-1x"></i> </span>   
<span class="fa-stack fa-lg"> <i class="fa fa-square-o fa-fw fa-stack-2x"></i> <i class="fa fa-youtube fa-fw fa-stack-1x"></i> </span>              
<span class="fa-stack fa-lg"> <i class="fa fa-square-o fa-fw fa-stack-2x"></i> <i class="fa fa-quora fa-fw fa-stack-1x"></i> </span>        
<span class="fa-stack fa-lg"> <i class="fa fa-square-o fa-fw fa-stack-2x"></i> <i class="fa fa-facebook fa-fw fa-stack-1x"></i> </span>     
<span class="fa-stack fa-lg"> <i class="fa fa-square-o fa-fw fa-stack-2x"></i> <i class="fa fa-codepen fa-fw fa-stack-1x"></i> </span>      
</div>
<!--  -------------------------------------------------------------------------------------------------------------------------- -->    
<!-- 下面是 最主要的 Div 包括:  tagDiv + filenameDiv + contentDiv + testDiv + sidebarDiv -->
<!--  -------------------------------------------------------------------------------------------------------------------------- -->    
<div id="Div">
<div id="tagDiv"> 
<ul id="sidebar-tags">
  <li class="sidebar-tag active" data-filter="all">全部文章</li>
  {% for tag in site.tags %}
  <li class="sidebar-tag" data-filter="{{ tag | first }}">{{ tag | first }}</li>
  {% endfor %}
</ul>
</div>
<div id="lineLeft"> <div class="lineInDiv"></div> </div>
<!--  -------------------------------------------------------------------------------------------------------------------------- -->        
<div id="filenameDiv"> 
<nav id="toc">
  {% for post in site.posts %}
  <a class="toc-link" data-tags="{{ post.tags | join: ' ' }}" href="{{ post.url }}">
{{ post.title }}
  </a>
  {% endfor %}
</nav>              
</div>
<div id="lineRight"> <div class="lineInDiv"></div> </div>
<!--  -------------------------------------------------------------------------------------------------------------------------- -->        
<div id="contentDiv">  {{ content }} </div>
 
<div id="testDiv"> 
 
 
<button class="btn btn-block btn-info"   id="toggleLeft"  >显/隐左边       </button>    
<button class="btn btn-block btn-info"   id="toggleMiddle">显/隐中间       </button>    
<button class="btn btn-block btn-info"   id="mouseLeft"   >连续左移        </button>    
<button class="btn btn-block btn-info"   id="mouseRight"  >连续右移        </button>    
<button class="btn btn-block btn-danger" id="drawRight"   >双指左右: 未完成</button>    
</div>
<!--  -------------------------------------------------------------------------------------------------------------------------- -->
<div id="sidebarDiv"> sidebarDiv </div>
</div>
</div>
{% include footer.html %}

main.css

* 	 { padding: 0; margin: 0; }
html, body{ height:100%; } 
a {color:black;}

bigDiv   { height:100%;}
topbarDiv   { height: 39px;  display: flex;  display: -webkit-flex; background-color: rgba(210, 52, 219, 0.18)}
.topbarBtn {height: 30px; width: 40px; border-radius: 5px; display: inline-block;}

Div   {  height: 100%;  display: flex;  display: -webkit-flex;}

tagDiv {
flex-basis:100px; flex-grow: 0; flex-shrink: 0;  max-width: 300px; min-width: 100px;
height: 100%;  position: relative; padding: 5px; background-color:rgba(212, 117, 204, 0.53)}

.lineInDiv {height: 100%; width:2px; background-color:gray; margin-left: auto;margin-right: auto;}

lineLeft { width: 20px; height:100%; background-color: rgba(149, 195, 179, 0.00);
  cursor: col-resize; flex-grow: 0; flex-shrink: 0; padding: 0; margin: 0;   }  
lineRight  {   width: 20px; height:100%; background-color: rgba(194, 147, 183, 0.0);
cursor: col-resize; flex-grow: 0; flex-shrink: 0; position: relative;       }
 
filenameDiv {
flex-basis: 100px; flex-grow: 0; flex-shrink: 0;  max-width: 1450px; min-width: 100px;background-color:pink;padding: 5px;
height: 100%;  position: relative; }

contentDiv { flex-grow: 1; flex-shrink: 1; height: 100%; padding: 5px; background-color:rgba(161, 203, 55, 0.3); width: 100px;}

testDiv {width: 300px; flex-grow: 1; flex-shrink: 1;}

sidebarDiv { flex-grow: 0; flex-shrink: 0; height: 100%; padding: 5px;  width: 100px;
background-color:rgba(127, 127, 127, 0.13);  }

main.js

// 定义函数: 用来计算 元素到浏览器左边的距离.
// 这个函数 必须注意padding!!!!!
// 鼠标有clientX. 自带的. 元素就没有这个功能了...要自己写....
function getElementLeft(element){
  var actualLeft = element.offsetLeft;
  var current = element.offsetParent;
  while (current !== null){
    actualLeft += current.offsetLeft;
    current = current.offsetParent;
  }
  return actualLeft;
}


window.onload = function() { 
$("#toggleLeft").click(   function(){  $("#tagDiv").toggle();  }   );
$("#toggleMiddle").click( function(){  $("#filenameDiv").toggle();}   );

$("#mouseLeft").click(     
    function(){   
        if(  $("#tagDiv").is(':visible')  )
            {  $("#tagDiv").hide(219); $("#lineLeft").hide(219);   }
        else { $("#filenameDiv").hide(219); $("#lineRight").hide(219); }
});

$("#mouseRight").click(     
    function(){   
            if(  $("#filenameDiv").is(':visible')  )
                {  $("#tagDiv").show(219);$("#lineLeft").show(219);   }
            else { $("#filenameDiv").show(219);$("#lineRight").show(219);  }
});
// 上面 是设置各种按钮事件. 点击按钮 实现 显示隐藏相应的div     



var leftWidth = $("#tagDiv").css("flex-basis");
var middleWidth = $("#filenameDiv").css("flex-basis");
    console.log("原来的左div宽度"+ leftWidth);
    console.log("原来的中div宽度"+ middleWidth);
// $("#filenameDiv").css("flex-basis","600px");  这个是获取 和 修改div宽度的.





// 下面是 左线拖动代码
lineLeft.onmousedown = function(e) {
    var disLeft = (e || event).clientX;   // 鼠标按下时的 clientX 固定值.
    var xx = getElementLeft(lineLeft)     // lineLeft 元素 类似clientX的值. 这个函数是自己写的...也是固定值.
    var yy = disLeft - xx;                // 这个就是 鼠标到 lineleft 左边框的距离. .
        console.log("yy= "+ yy);    // 也是出来数字 19  不到px的...

        document.onmousemove = function(e) {
        var realMouse = e.clientX;               // 鼠标移动的实时x轴值. 变化
        console.log("realMouse= "+ realMouse);   //  不带px
            var leftPaddingNum = parseFloat($("#tagDiv").css("padding"));
        console.log("leftPaddingNum 不到px= "+ leftPaddingNum);   //  不带px

          var zz = realMouse - yy -leftPaddingNum*2  ;        // 鼠标实时坐标 - 一定的差距 =  实时的左边div 的宽度
          console.log("zz= "+ zz);     // 也不带px



          $("#tagDiv").css("flex-basis",zz);    // 这里就能实时拖动了.

        document.onmouseup = function() {  document.onmousemove = null;  document.onmouseup = null;   };
    }
};

// 下面是 右线拖动代码
lineRight.onmousedown = function(e) {
    var Mouse = (e || event).clientX;           
    console.log("鼠标点击值= "+ Mouse);
    var line2Width = getElementLeft(lineRight)
    console.log("右线自定义函数宽度= "+line2Width);
    var gap = Mouse - line2Width;       
    console.log("鼠标和右线之间的微小差距.  需要减去= "+gap);

    var middleWidth = getElementLeft(filenameDiv)
    console.log("中间自定义函数宽度= "+ middleWidth);
    console.log("\n" );

        document.onmousemove = function(e) {
            var realMouse = (e || event).clientX;   
            var middlePaddingPX = $("#filenameDiv").css("padding");
            console.log("filenameDiv padding 带px= " +middlePaddingPX);  
            // 这个是带px的. 需要提取前面的数字部分. 还需要x2 padding 是有两边的..
            var middlePaddingNum = parseFloat(middlePaddingPX);
            console.log("filenameDiv padding 无px= " +middlePaddingNum);  
            var realMiddle = realMouse - middleWidth - gap - middlePaddingNum*2;
            $("#filenameDiv").css("flex-basis",realMiddle); 

        document.onmouseup = function() { 
            document.onmousemove = null;  document.onmouseup = null;   };
        }
};
}

到这里 主题就初步搭建完成了. 实现功能: 拖动条 动态调整div flex css 布局.. 初步按钮 设计….

接下来 就是完善css js 了….