青鸾峰

浮云千载、唯忆君颜

搬运了喵神@onevcat博客的构筑,自己正在前端路上匍匐前进


欢迎来到我的起点

推开HTML的门:搭界面

哇,不得不感叹,一个月过得太快,虽然没什么活,但是自己也没什么产出,很尴尬。只能用最近研究的东西水一发了……惭愧惭愧……

这段时间逛GitHub的时候,偶然间发现freecodecamp(免费学coding的夏令营(自译)),毕竟自己想学网页,就参加了这个夏令营。

这里把每一步作为一个关卡,加上一些水关,我现在进行到了137关,现在在JS入门阶段,没法总结,所以在这展示下之前的HTML阶段的成果吧。

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
  h2 {
    font-family: Lobster, Monospace;
  }

  .thick-green-border {
    border-color: green;
    border-width: 10px;
    border-style: solid;
    border-radius: 50%;
  }

</style>

<div class="container-fluid">
  <div class="row">
    <div class="col-xs-8">
      <h2 class="text-primary text-center">CatPhotoApp</h2>
    </div>
    <div class="col-xs-4">
      <a href="#"><img class="img-responsive thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back. "></a>
    </div>
  </div>
  <img src="https://bit.ly/fcc-running-cats" class="img-responsive" alt="Three kittens running towards the camera. ">
  <div class="row">
    <div class="col-xs-4">
      <button class="btn btn-block btn-primary"><i class="fa fa-thumbs-up"></i> Like</button>
    </div>
    <div class="col-xs-4">
      <button class="btn btn-block btn-info"><i class="fa fa-info-circle"></i> Info</button>
    </div>
    <div class="col-xs-4">
      <button class="btn btn-block btn-danger"><i class="fa fa-trash"></i> Delete</button>
    </div>
  </div>
  <p>Things cats <span class="text-danger">love:</span></p>
  <ul>
    <li>cat nip</li>
    <li>laser pointers</li>
    <li>lasagna</li>
  </ul>
  <p>Top 3 things cats hate:</p>
  <ol>
    <li>flea treatment</li>
    <li>thunder</li>
    <li>other cats</li>
  </ol>
  <form action="/submit-cat-photo">
    <div class="row">
      <div class="col-xs-6">
        <label><input type="radio" name="indoor-outdoor"> Indoor</label>
      </div>
      <div class="col-xs-6">
        <label><input type="radio" name="indoor-outdoor"> Outdoor</label>
      </div>
    </div>
    <div class="row">
      <div class="col-xs-4">
        <label><input type="checkbox" name="personality"> Loving</label>
      </div>
      <div class="col-xs-4">
        <label><input type="checkbox" name="personality"> Lazy</label>
      </div>
      <div class="col-xs-4">
        <label><input type="checkbox" name="personality"> Crazy</label>
      </div>
    </div>
    <div class="row">
    <div class="col-xs-7">
    <input type="text" class="form-control" placeholder="cat photo URL" required>
      </div>
    <div class="col-xs-5">
    <button type="submit" class="btn btn-primary"><i class="fa fa-paper-plane"></i> Submit</button>
      </div>
      </div>
  </form>
</div>

基于Bootstrap框架产出的,效果如下图——

反思

这次有点偷懒,但是还是要思考下以后要做的事情

  • 探索Bootstrap框架
  • 自己不看提示自己做出这个界面
  • 要有紧迫感,不能偷懒
最近的文章

Git合并后再discard的问题

一直在用的GitHub Desktop,上周代码搞定后,想把自己的master分支的代码合并到当前分支上,但是有冲突,我当时只是想试一下合并,懒得改冲突,就点了Xcode里Source Control里的Discard All Changes,这时候变回去了,我就顺手commit 同步了,结果是GG,与master合并不了了。。今天有时间,为了搞明白,重新建立个工程来一遍。名为GitPractice,分支是master和practice1,先把两个分支的代码搞的不一样。然后在practic...…

回梦游仙继续阅读
更早的文章

推开CoreData的门:增删改查

在忙完一个阶段之后,就可以准备忙下一个阶段了。——毒鸡汤段子手然而我最近不太忙,所以准备研究下接下来能用到的知识点。感觉下阶段要追加购物车的功能,自己想了很久,UserDefaults,看不到又占内存;FMDB,又要增大app体积。所以最终还是准备用CoreData来存储数据。其实是瞎扯,是自己想学习这个^_^虽然说之前也用过CoreData,但是当时模仿公司前辈用的KVC取值赋值编码解码,而且自己封装方法把这些值取出来自己初始化模型,我个人感觉CoreData一个实体就是一个模型,可以直...…

回梦游仙继续阅读