发表于： 2017-03-29 21:36:01

1 616

完成的事情：

完成了任务9，任务10的代码基本布局完成。


任务9的响应式导航是复制的网上的bootstrap代码，不太熟悉。于是过一遍bs导航和导航条的知识。


明天的计划：

明天有事，任务10应该做不完，会尽量多写点代码。


遇到的问题：

问题1：如何用css画流程图？

实现：在一个div内，用三个div分别画出左横线，中间的圆，右横线。

html示例：
  1. <div class="whole-procedure">
  2.     <div class="left"></div>
  3.     <div class="procedure">1</div>
  4.     <div class="right"></div>
  5. </div>
css：
  1. .whole-procedure{
  2.     display: flex;
  3.     align-items: center;
  4. }
  5. .procedure{
  6.     display: inline-block;
  7.     text-align: center;
  8.     width: 15px;
  9.     height: 15px;
  10.     font-size: 10px;
  11.     border-radius: 50%;
  12.     background-color: orange;
  13. }
  14. .left{
  15.     display: inline-block;
  16.     width: 30px;
  17.     height: 4px;
  18.     background-color: orange;
  19. }
  20. .right{
  21.     display: inline-block;
  22.     width: 30px;
  23.     height: 4px;
  24.     background-color: orange;
  25. }


问题2：

如何布局?

既要保证缩小浏览器宽度时，“外径”所在行的长，宽，高元素自动转行到“外径”的下方，而不是内径的下方，同时也要让右边的"查看详情"居中。


收获：

了解了更具体的bs基础导航栏和响应式导航栏知识。

上一篇
返回列表 返回列表
下一篇
现在开始，找个师兄带你入门
评论

    分享到

    技能树  |  IT修真院

    关于我们 ｜ 联系我们 ｜ 合作公司

    移动端下载

    友情链接

    短信验证码     

    微信公众平台

    Copyright © 2015 北京葡萄藤信息技术有限公司 All Rights Reserved | 京ICP备15035574号-1